fix add child node resize parent node size

web/app/components/workflow/nodes/iteration/use-interactions.ts

@@ -1,7 +1,6 @@
 import { useCallback } from 'react'
 import produce from 'immer'
 import { useTranslation } from 'react-i18next'
-import { useStoreApi } from 'reactflow'
 import type {
   BlockEnum,
   ChildNodeTypeCount,
@@ -16,19 +15,16 @@ import {
 } from '../../constants'
 import { CUSTOM_ITERATION_START_NODE } from '../iteration-start/constants'
 import { useNodesMetaData } from '@/app/components/workflow/hooks'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 
 export const useNodeIterationInteractions = () => {
   const { t } = useTranslation()
-  const store = useStoreApi()
   const { nodesMap: nodesMetaDataMap } = useNodesMetaData()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const handleNodeIterationRerender = useCallback((nodeId: string) => {
-    const {
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
-      getNodes,
-      setNodes,
-    } = store.getState()
 
-    const nodes = getNodes()
     const currentNode = nodes.find(n => n.id === nodeId)!
     const childrenNodes = nodes.filter(n => n.parentId === nodeId)
     let rightNode: Node
@@ -72,11 +68,10 @@ export const useNodeIterationInteractions = () => {
 
       setNodes(newNodes)
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeIterationChildDrag = useCallback((node: Node) => {
-    const { getNodes } = store.getState()
+    const { nodes } = collaborativeWorkflow.getState()
-    const nodes = getNodes()
 
     const restrictPosition: { x?: number; y?: number } = { x: undefined, y: undefined }
 
@@ -98,21 +93,19 @@ export const useNodeIterationInteractions = () => {
     return {
       restrictPosition,
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeIterationChildSizeChange = useCallback((nodeId: string) => {
-    const { getNodes } = store.getState()
+    const { nodes } = collaborativeWorkflow.getState()
-    const nodes = getNodes()
     const currentNode = nodes.find(n => n.id === nodeId)!
     const parentId = currentNode.parentId
 
     if (parentId)
       handleNodeIterationRerender(parentId)
-  }, [store, handleNodeIterationRerender])
+  }, [collaborativeWorkflow, handleNodeIterationRerender])
 
   const handleNodeIterationChildrenCopy = useCallback((nodeId: string, newNodeId: string, idMapping: Record<string, string>) => {
-    const { getNodes } = store.getState()
+    const { nodes } = collaborativeWorkflow.getState()
-    const nodes = getNodes()
     const childrenNodes = nodes.filter(n => n.parentId === nodeId && n.type !== CUSTOM_ITERATION_START_NODE)
     const newIdMapping = { ...idMapping }
     const childNodeTypeCount: ChildNodeTypeCount = {}
@@ -154,7 +147,7 @@ export const useNodeIterationInteractions = () => {
       copyChildren,
       newIdMapping,
     }
-  }, [store, t])
+  }, [collaborativeWorkflow, t])
 
   return {
     handleNodeIterationRerender,

web/app/components/workflow/nodes/loop/use-interactions.ts

@@ -1,6 +1,5 @@
 import { useCallback } from 'react'
 import produce from 'immer'
-import { useStoreApi } from 'reactflow'
 import type {
   BlockEnum,
   Node,
@@ -14,18 +13,14 @@ import {
 } from '../../constants'
 import { CUSTOM_LOOP_START_NODE } from '../loop-start/constants'
 import { useNodesMetaData } from '@/app/components/workflow/hooks'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 
 export const useNodeLoopInteractions = () => {
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
   const { nodesMap: nodesMetaDataMap } = useNodesMetaData()
 
   const handleNodeLoopRerender = useCallback((nodeId: string) => {
-    const {
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
-      getNodes,
-      setNodes,
-    } = store.getState()
-
-    const nodes = getNodes()
     const currentNode = nodes.find(n => n.id === nodeId)!
     const childrenNodes = nodes.filter(n => n.parentId === nodeId)
     let rightNode: Node
@@ -69,11 +64,10 @@ export const useNodeLoopInteractions = () => {
 
       setNodes(newNodes)
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeLoopChildDrag = useCallback((node: Node) => {
-    const { getNodes } = store.getState()
+    const { nodes } = collaborativeWorkflow.getState()
-    const nodes = getNodes()
 
     const restrictPosition: { x?: number; y?: number } = { x: undefined, y: undefined }
 
@@ -95,21 +89,19 @@ export const useNodeLoopInteractions = () => {
     return {
       restrictPosition,
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeLoopChildSizeChange = useCallback((nodeId: string) => {
-    const { getNodes } = store.getState()
+    const { nodes } = collaborativeWorkflow.getState()
-    const nodes = getNodes()
     const currentNode = nodes.find(n => n.id === nodeId)!
     const parentId = currentNode.parentId
 
     if (parentId)
       handleNodeLoopRerender(parentId)
-  }, [store, handleNodeLoopRerender])
+  }, [collaborativeWorkflow, handleNodeLoopRerender])
 
   const handleNodeLoopChildrenCopy = useCallback((nodeId: string, newNodeId: string) => {
-    const { getNodes } = store.getState()
+    const { nodes } = collaborativeWorkflow.getState()
-    const nodes = getNodes()
     const childrenNodes = nodes.filter(n => n.parentId === nodeId && n.type !== CUSTOM_LOOP_START_NODE)
 
     return childrenNodes.map((child, index) => {
@@ -140,7 +132,7 @@ export const useNodeLoopInteractions = () => {
       newNode.id = `${newNodeId}${newNode.id + index}`
       return newNode
     })
-  }, [store, nodesMetaDataMap])
+  }, [collaborativeWorkflow, nodesMetaDataMap])
 
   return {
     handleNodeLoopRerender,