From fa016ac1b30f0dd6518002b92d2159fe71b3c4f3 Mon Sep 17 00:00:00 2001
From: Md Afiq Iskandar <mdafiqiskandar@gmail.com>
Date: Thu, 17 Jul 2025 09:47:45 +0800
Subject: [PATCH] Update Nuxt Configuration and Enhance ProcessFlowCanvas
 Component

- Added optimization settings for 'vue-toastification' in nuxt.config.js to improve dependency handling.
- Wrapped VueFlow component in a <client-only> tag within ProcessFlowCanvas.vue to prevent server-side rendering issues, ensuring proper rendering of flow components only on the client side.
- Maintained existing functionality while enhancing the user experience in the process flow interface.
---
 components/process-flow/ProcessFlowCanvas.vue | 164 +++++++++---------
 nuxt.config.js                                |   6 +
 2 files changed, 88 insertions(+), 82 deletions(-)

diff --git a/components/process-flow/ProcessFlowCanvas.vue b/components/process-flow/ProcessFlowCanvas.vue
index d3867ef..cbd261a 100644
--- a/components/process-flow/ProcessFlowCanvas.vue
+++ b/components/process-flow/ProcessFlowCanvas.vue
@@ -1135,88 +1135,88 @@ function fromObject(flowObject) {
     @drop="onDrop"
     @dragover="onDragOver"
   >
-    <VueFlow
-      v-bind="flowOptions"
-      class="bg-slate-50 process-flow"
-      :nodeTypes="customNodeTypes"
-      :edgeTypes="edgeTypes"
-      @node-click="onNodeClick"
-      @edge-click="onEdgeClick"
-      @pane-click="onPaneClick"
-      @connect="handleConnect"
-      @nodeDoubleClick="onNodeDelete"
-      @edgeDoubleClick="onEdgeDelete"
-      @keyup.delete="onDeleteKeyPress"
-    >
-      <!-- Global SVG definitions for arrows -->
-      <svg style="position: absolute; top: 0; left: 0; width: 0; height: 0">
-        <defs>
-          <marker
-            id="arrow"
-            viewBox="0 0 10 10"
-            refX="9"
-            refY="3"
-            markerWidth="6"
-            markerHeight="6"
-            orient="auto"
-            markerUnits="strokeWidth"
-          >
-            <path d="M0,0 L0,6 L9,3 z" fill="#555" />
-          </marker>
-          <marker
-            id="arrow-selected"
-            viewBox="0 0 10 10"
-            refX="9"
-            refY="3"
-            markerWidth="6"
-            markerHeight="6"
-            orient="auto"
-            markerUnits="strokeWidth"
-          >
-            <path d="M0,0 L0,6 L9,3 z" fill="#ff6b6b" />
-          </marker>
-          <marker
-            id="arrow-animated"
-            viewBox="0 0 10 10"
-            refX="9"
-            refY="3"
-            markerWidth="6"
-            markerHeight="6"
-            orient="auto"
-            markerUnits="strokeWidth"
-          >
-            <path d="M0,0 L0,6 L9,3 z" fill="#3b82f6" />
-          </marker>
-        </defs>
-      </svg>
-      <Background pattern-color="#aaa" gap="20" />
-      <Controls />
-      <MiniMap />
-      
-      <!-- Custom edge template -->
-      <template #edge-custom="edgeProps">
-        <InteractiveArrowEdge v-bind="edgeProps" />
-      </template>
-      
-      <template #edge-label="{ label }">
-        <div class="edge-label">{{ label }}</div>
-      </template>
-
-      <Panel position="top-right" class="node-controls">
-        <div class="p-2 bg-white rounded shadow-sm text-sm">
-          <div class="mb-1 font-medium">Controls:</div>
-          <div>• Delete: Remove selected</div>
-          <div>• Shift: Select nodes</div>
-          <div>• Drag between nodes to connect</div>
-          <div>• Double-click to remove</div>
-          <div class="mt-2 mb-1 font-medium">Edge Features:</div>
-          <div>• Arrows show flow direction</div>
-          <div>• Select edge for controls</div>
-          <div>• Blue dot = drag to reposition</div>
-          <div>• Reset button restores path</div>
-        </div>
-      </Panel>
-    </VueFlow>
+    <client-only>
+      <VueFlow
+        v-if="nodes.length > 0"
+        v-bind="flowOptions"
+        class="bg-slate-50 process-flow"
+        :nodeTypes="customNodeTypes"
+        :edgeTypes="edgeTypes"
+        @node-click="onNodeClick"
+        @edge-click="onEdgeClick"
+        @pane-click="onPaneClick"
+        @connect="handleConnect"
+        @nodeDoubleClick="onNodeDelete"
+        @edgeDoubleClick="onEdgeDelete"
+        @keyup.delete="onDeleteKeyPress"
+      >
+        <!-- Global SVG definitions for arrows -->
+        <svg style="position: absolute; top: 0; left: 0; width: 0; height: 0">
+          <defs>
+            <marker
+              id="arrow"
+              viewBox="0 0 10 10"
+              refX="9"
+              refY="3"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto"
+              markerUnits="strokeWidth"
+            >
+              <path d="M0,0 L0,6 L9,3 z" fill="#555" />
+            </marker>
+            <marker
+              id="arrow-selected"
+              viewBox="0 0 10 10"
+              refX="9"
+              refY="3"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto"
+              markerUnits="strokeWidth"
+            >
+              <path d="M0,0 L0,6 L9,3 z" fill="#ff6b6b" />
+            </marker>
+            <marker
+              id="arrow-animated"
+              viewBox="0 0 10 10"
+              refX="9"
+              refY="3"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto"
+              markerUnits="strokeWidth"
+            >
+              <path d="M0,0 L0,6 L9,3 z" fill="#3b82f6" />
+            </marker>
+          </defs>
+        </svg>
+        <Background pattern-color="#aaa" gap="20" />
+        <Controls />
+        <MiniMap />
+        <!-- Custom edge template -->
+        <template #edge-custom="edgeProps">
+          <InteractiveArrowEdge v-bind="edgeProps" />
+        </template>
+        <template #edge-label="{ label }">
+          <div class="edge-label">{{ label }}</div>
+        </template>
+        <Panel position="top-right" class="node-controls">
+          <div class="p-2 bg-white rounded shadow-sm text-sm">
+            <div class="mb-1 font-medium">Controls:</div>
+            <div>• Delete: Remove selected</div>
+            <div>• Shift: Select nodes</div>
+            <div>• Drag between nodes to connect</div>
+            <div>• Double-click to remove</div>
+            <div class="mt-2 mb-1 font-medium">Edge Features:</div>
+            <div>• Arrows show flow direction</div>
+            <div>• Select edge for controls</div>
+            <div>• Blue dot = drag to reposition</div>
+            <div>• Reset button restores path</div>
+          </div>
+        </Panel>
+      </VueFlow>
+    </client-only>
   </div>
 </template>
 
diff --git a/nuxt.config.js b/nuxt.config.js
index 76af2fc..dd80162 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -29,6 +29,12 @@ export default defineNuxtConfig({
         interval: 1000,
       },
     },
+    optimizeDeps: {
+      include: ['vue-toastification'],
+    },
+    ssr: {
+      noExternal: ['vue-toastification'],
+    },
   },
   head: {
     title: "corrad",