Fix/workflow use nodes hooks (#21822)

web/app/components/workflow/nodes/_base/components/next-step/index.tsx

@@ -1,10 +1,10 @@
 import { memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { isEqual } from 'lodash-es'
 import {
   getConnectedEdges,
   getOutgoers,
-  useEdges,
-  useStoreApi,
+  useStore,
 } from 'reactflow'
 import { useToolIcon } from '../../../../hooks'
 import BlockIcon from '../../../../block-icon'
@@ -26,12 +26,21 @@ const NextStep = ({
   const { t } = useTranslation()
   const data = selectedNode.data
   const toolIcon = useToolIcon(data)
-  const store = useStoreApi()
   const branches = useMemo(() => {
     return data._targetBranches || []
   }, [data])
-  const edges = useEdges()
-  const outgoers = getOutgoers(selectedNode as Node, store.getState().getNodes(), edges)
+  const edges = useStore(s => s.edges.map(edge => ({
+    id: edge.id,
+    source: edge.source,
+    sourceHandle: edge.sourceHandle,
+    target: edge.target,
+    targetHandle: edge.targetHandle,
+  })), isEqual)
+  const nodes = useStore(s => s.getNodes().map(node => ({
+    id: node.id,
+    data: node.data,
+  })), isEqual)
+  const outgoers = getOutgoers(selectedNode as Node, nodes as Node[], edges)
   const connectedEdges = getConnectedEdges([selectedNode] as Node[], edges).filter(edge => edge.source === selectedNode!.id)
 
   const list = useMemo(() => {

web/app/components/workflow/nodes/_base/components/node-position.tsx

@@ -1,30 +1,39 @@
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useShallow } from 'zustand/react/shallow'
 import { RiCrosshairLine } from '@remixicon/react'
-import type { XYPosition } from 'reactflow'
-import { useReactFlow, useStoreApi } from 'reactflow'
+import { useReactFlow, useStore } from 'reactflow'
 import TooltipPlus from '@/app/components/base/tooltip'
 import { useNodesSyncDraft } from '@/app/components/workflow-app/hooks'
 
 type NodePositionProps = {
-  nodePosition: XYPosition,
-  nodeWidth?: number | null,
-  nodeHeight?: number | null,
+  nodeId: string
 }
 const NodePosition = ({
-  nodePosition,
-  nodeWidth,
-  nodeHeight,
+  nodeId,
 }: NodePositionProps) => {
   const { t } = useTranslation()
   const reactflow = useReactFlow()
-  const store = useStoreApi()
   const { doSyncWorkflowDraft } = useNodesSyncDraft()
+  const {
+    nodePosition,
+    nodeWidth,
+    nodeHeight,
+  } = useStore(useShallow((s) => {
+    const nodes = s.getNodes()
+    const currentNode = nodes.find(node => node.id === nodeId)!
+
+    return {
+      nodePosition: currentNode.position,
+      nodeWidth: currentNode.width,
+      nodeHeight: currentNode.height,
+    }
+  }))
+  const transform = useStore(s => s.transform)
 
   if (!nodePosition || !nodeWidth || !nodeHeight) return null
 
   const workflowContainer = document.getElementById('workflow-container')
-  const { transform } = store.getState()
   const zoom = transform[2]
 
   const { clientWidth, clientHeight } = workflowContainer!

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -62,15 +62,14 @@ import { Stop } from '@/app/components/base/icons/src/vender/line/mediaAndDevice
 
 type BasePanelProps = {
   children: ReactNode
-} & Node
+  id: Node['id']
+  data: Node['data']
+}
 
 const BasePanel: FC<BasePanelProps> = ({
   id,
   data,
   children,
-  position,
-  width,
-  height,
 }) => {
   const { t } = useTranslation()
   const { showMessageLogModal } = useAppStore(useShallow(state => ({
@@ -330,7 +329,7 @@ const BasePanel: FC<BasePanelProps> = ({
                   </Tooltip>
                 )
               }
-              <NodePosition nodePosition={position} nodeWidth={width} nodeHeight={height}></NodePosition>
+              <NodePosition nodeId={id}></NodePosition>
               <HelpLink nodeType={data.type} />
               <PanelOperator id={id} data={data} showHelpLink={false} />
               <div className='mx-3 h-3.5 w-[1px] bg-divider-regular' />