sync workflow draft

web/app/components/workflow/hooks.ts

@@ -47,6 +47,7 @@ export const useWorkflow = () => {
       getNodes,
       edges,
     } = store.getState()
+    const { getViewport } = reactFlow
     const appId = useAppStore.getState().appDetail?.id
 
     if (appId) {
@@ -56,12 +57,13 @@ export const useWorkflow = () => {
           graph: {
             nodes: getNodes(),
             edges,
+            viewport: getViewport(),
           },
           features: {},
         },
       })
     }
-  }, [store])
+  }, [store, reactFlow])
 
   const handleLayout = useCallback(async () => {
     const {
@@ -430,6 +432,7 @@ export const useWorkflow = () => {
   }, [store])
 
   return {
+    handleSyncWorkflowDraft,
     handleLayout,
     handleSetViewport,
 

web/app/components/workflow/index.tsx

@@ -10,7 +10,9 @@ import ReactFlow, {
   ReactFlowProvider,
   useEdgesState,
   useNodesState,
+  useOnViewportChange,
 } from 'reactflow'
+import type { Viewport } from 'reactflow'
 import 'reactflow/dist/style.css'
 import type {
   Edge,
@@ -47,16 +49,20 @@ const edgeTypes = {
 type WorkflowProps = {
   nodes: Node[]
   edges: Edge[]
+  viewport?: Viewport
 }
 const Workflow: FC<WorkflowProps> = memo(({
   nodes: initialNodes,
   edges: initialEdges,
+  viewport,
 }) => {
   const showFeaturesPanel = useStore(state => state.showFeaturesPanel)
   const [nodes] = useNodesState(initialNodes)
   const [edges] = useEdgesState(initialEdges)
 
   const {
+    handleSyncWorkflowDraft,
+
     handleNodeDragStart,
     handleNodeDrag,
     handleNodeDragStop,
@@ -71,6 +77,10 @@ const Workflow: FC<WorkflowProps> = memo(({
     handleEdgesChange,
   } = useWorkflow()
 
+  useOnViewportChange({
+    onEnd: () => handleSyncWorkflowDraft(),
+  })
+
   useKeyPress('Backspace', handleEdgeDelete)
 
   return (
@@ -101,6 +111,7 @@ const Workflow: FC<WorkflowProps> = memo(({
         connectionLineComponent={CustomConnectionLine}
         deleteKeyCode={null}
         nodeDragThreshold={1}
+        defaultViewport={viewport}
       >
         <Background
           gap={[14, 14]}
@@ -176,6 +187,7 @@ const WorkflowWrap: FC<WorkflowProps> = ({
         <Workflow
           nodes={nodesData}
           edges={edgesData}
+          viewport={data?.graph.viewport}
         />
       </FeaturesProvider>
     </ReactFlowProvider>

web/app/components/workflow/operator/zoom-in-out.tsx

@@ -9,6 +9,7 @@ import {
   useReactFlow,
   useViewport,
 } from 'reactflow'
+import { useWorkflow } from '../hooks'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -26,6 +27,7 @@ const ZoomInOut: FC = () => {
     fitView,
   } = useReactFlow()
   const { zoom } = useViewport()
+  const { handleSyncWorkflowDraft } = useWorkflow()
   const [open, setOpen] = useState(false)
 
   const ZOOM_IN_OUT_OPTIONS = [
@@ -72,6 +74,8 @@ const ZoomInOut: FC = () => {
 
     if (type === 'to100')
       zoomTo(1)
+
+    handleSyncWorkflowDraft()
   }
 
   return (

web/types/workflow.ts

@@ -1,3 +1,4 @@
+import type { Viewport } from 'reactflow'
 import type {
   Edge,
   Node,
@@ -8,6 +9,7 @@ export type FetchWorkflowDraftResponse = {
   graph: {
     nodes: Node[]
     edges: Edge[]
+    viewport?: Viewport
   }
   features?: any
 }