feat: enhance workflow editor with new plugins, improved node handling, and UI updates

web/app/dashboard/ai-workflows/_components/flowgram-editor-provider.tsx

@@ -6,6 +6,8 @@ import {
   type FreeLayoutProps,
   type WorkflowJSON,
 } from "@flowgram.ai/free-layout-editor"
+import { createFreeSnapPlugin } from "@flowgram.ai/free-snap-plugin"
+import { createMinimapPlugin } from "@flowgram.ai/minimap-plugin"
 
 import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
 
@@ -29,11 +31,17 @@ export function useFlowgramEditorProps({
       readonly,
       initialData: definition as WorkflowJSON,
       nodeRegistries: buildFlowgramNodeRegistries(nodeSpecs),
+      fromNodeJSON(_node, json) {
+        return json
+      },
+      toNodeJSON(_node, json) {
+        return json
+      },
       materials: {
         renderDefaultNode: FlowgramNodeRenderer,
       },
       nodeEngine: {
-        enable: false,
+        enable: true,
       },
       history: {
         enable: !readonly,
@@ -61,7 +69,35 @@ export function useFlowgramEditorProps({
           },
         }
       },
-      plugins: () => [],
+      plugins: () => [
+        createMinimapPlugin({
+          disableLayer: true,
+          canvasStyle: {
+            canvasWidth: 150,
+            canvasHeight: 84,
+            canvasPadding: 48,
+            canvasBackground: "rgba(245, 245, 245, 1)",
+            canvasBorderRadius: 8,
+            viewportBackground: "rgba(235, 235, 235, 1)",
+            viewportBorderRadius: 4,
+            viewportBorderColor: "rgba(201, 201, 201, 1)",
+            viewportBorderWidth: 1,
+            viewportBorderDashLength: 2,
+            nodeColor: "rgba(255, 255, 255, 1)",
+            nodeBorderRadius: 2,
+            nodeBorderWidth: 0.145,
+            nodeBorderColor: "rgba(6, 7, 9, 0.10)",
+            overlayColor: "rgba(255, 255, 255, 0)",
+          },
+        }),
+        createFreeSnapPlugin({
+          edgeColor: "#00B2B2",
+          alignColor: "#00B2B2",
+          edgeLineWidth: 1,
+          alignLineWidth: 1,
+          alignCrossWidth: 8,
+        }),
+      ],
     }),
     [definition, nodeSpecs, onDefinitionChange, readonly]
   )