Fix workflow performance

web/app/components/workflow/hooks/use-helpline.ts

@@ -30,6 +30,8 @@ export const useHelpline = () => {
     }
 
     const showHorizontalHelpLineNodes = nodes.filter((n) => {
+      if (n.hidden)
+        return false
       if (n.id === node.id)
         return false
 
@@ -74,6 +76,8 @@ export const useHelpline = () => {
     }
 
     const showVerticalHelpLineNodes = nodes.filter((n) => {
+      if (n.hidden)
+        return false
       if (n.id === node.id)
         return false
       if (n.data.isInIteration)

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

@@ -1,5 +1,10 @@
 import type { MouseEvent } from 'react'
-import { useCallback, useRef, useState } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import { produce } from 'immer'
 import type {
@@ -82,6 +87,8 @@ export const useNodesInteractions = () => {
     x: number;
     y: number;
   })
+  const dragAnimationFrameRef = useRef<number | null>(null)
+  const pendingDragNodesRef = useRef<Map<string, Node>>(new Map())
   const { nodesMap: nodesMetaDataMap } = useNodesMetaData()
 
   const { saveStateToHistory, undo, redo } = useWorkflowHistory()
@@ -112,56 +119,92 @@ export const useNodesInteractions = () => {
     [workflowStore, getNodesReadOnly],
   )
 
-  const handleNodeDrag = useCallback<NodeDragHandler>(
-    (e, node: Node) => {
-      if (getNodesReadOnly()) return
-
-      if (node.type === CUSTOM_ITERATION_START_NODE) return
-
-      if (node.type === CUSTOM_LOOP_START_NODE) return
+  useEffect(() => {
+    return () => {
+      if (dragAnimationFrameRef.current !== null)
+        cancelAnimationFrame(dragAnimationFrameRef.current)
+      pendingDragNodesRef.current.clear()
+    }
+  }, [])
 
-      const { getNodes, setNodes } = store.getState()
-      e.stopPropagation()
+  const applyNodeDragPosition = useCallback((pendingNodes: Node[]) => {
+    if (!pendingNodes.length)
+      return
 
-      const nodes = getNodes()
+    const { getNodes, setNodes } = store.getState()
+    const nodes = getNodes()
 
-      const { restrictPosition } = handleNodeIterationChildDrag(node)
-      const { restrictPosition: restrictLoopPosition }
-        = handleNodeLoopChildDrag(node)
+    const newNodes = produce(nodes, (draft) => {
+      pendingNodes.forEach((pendingNode) => {
+        const currentNode = draft.find(n => n.id === pendingNode.id)
+        if (!currentNode)
+          return
 
-      const { showHorizontalHelpLineNodes, showVerticalHelpLineNodes }
-        = handleSetHelpline(node)
-      const showHorizontalHelpLineNodesLength
-        = showHorizontalHelpLineNodes.length
-      const showVerticalHelpLineNodesLength = showVerticalHelpLineNodes.length
+        const { restrictPosition } = handleNodeIterationChildDrag(pendingNode)
+        const { restrictPosition: restrictLoopPosition }
+          = handleNodeLoopChildDrag(pendingNode)
 
-      const newNodes = produce(nodes, (draft) => {
-        const currentNode = draft.find(n => n.id === node.id)!
+        const { showHorizontalHelpLineNodes, showVerticalHelpLineNodes }
+          = handleSetHelpline(pendingNode)
+        const showHorizontalHelpLineNodesLength
+          = showHorizontalHelpLineNodes.length
+        const showVerticalHelpLineNodesLength = showVerticalHelpLineNodes.length
 
         if (showVerticalHelpLineNodesLength > 0)
           currentNode.position.x = showVerticalHelpLineNodes[0].position.x
         else if (restrictPosition.x !== undefined)
           currentNode.position.x = restrictPosition.x
         else if (restrictLoopPosition.x !== undefined)
           currentNode.position.x = restrictLoopPosition.x
-        else currentNode.position.x = node.position.x
+        else
+          currentNode.position.x = pendingNode.position.x
 
         if (showHorizontalHelpLineNodesLength > 0)
           currentNode.position.y = showHorizontalHelpLineNodes[0].position.y
         else if (restrictPosition.y !== undefined)
           currentNode.position.y = restrictPosition.y
         else if (restrictLoopPosition.y !== undefined)
           currentNode.position.y = restrictLoopPosition.y
-        else currentNode.position.y = node.position.y
+        else
+          currentNode.position.y = pendingNode.position.y
+      })
+    })
+    setNodes(newNodes)
+  }, [
+    store,
+    handleNodeIterationChildDrag,
+    handleNodeLoopChildDrag,
+    handleSetHelpline,
+  ])
+
+  const handleNodeDrag = useCallback<NodeDragHandler>(
+    (e, node: Node) => {
+      if (getNodesReadOnly()) return
+
+      if (node.type === CUSTOM_ITERATION_START_NODE) return
+
+      if (node.type === CUSTOM_LOOP_START_NODE) return
+
+      e.stopPropagation()
+
+      pendingDragNodesRef.current.set(node.id, node)
+
+      if (dragAnimationFrameRef.current !== null)
+        return
+
+      dragAnimationFrameRef.current = requestAnimationFrame(() => {
+        dragAnimationFrameRef.current = null
+        if (!pendingDragNodesRef.current.size)
+          return
+
+        const pendingNodes = Array.from(pendingDragNodesRef.current.values())
+        pendingDragNodesRef.current.clear()
+        applyNodeDragPosition(pendingNodes)
       })
-      setNodes(newNodes)
     },
     [
       getNodesReadOnly,
-      store,
-      handleNodeIterationChildDrag,
-      handleNodeLoopChildDrag,
-      handleSetHelpline,
+      applyNodeDragPosition,
     ],
   )
 
@@ -172,25 +215,42 @@ export const useNodesInteractions = () => {
 
       if (getNodesReadOnly()) return
 
+      if (dragAnimationFrameRef.current !== null) {
+        cancelAnimationFrame(dragAnimationFrameRef.current)
+        dragAnimationFrameRef.current = null
+      }
+      const pendingNodes = pendingDragNodesRef.current.size
+        ? Array.from(pendingDragNodesRef.current.values())
+        : []
+      pendingDragNodesRef.current.clear()
       const { x, y } = dragNodeStartPosition.current
-      if (!(x === node.position.x && y === node.position.y)) {
+      const hasMoved = !(x === node.position.x && y === node.position.y)
+      if (!hasMoved) {
         setHelpLineHorizontal()
         setHelpLineVertical()
-        handleSyncWorkflowDraft()
+        return
+      }
+      if (!pendingNodes.some(pendingNode => pendingNode.id === node.id))
+        pendingNodes.push(node)
+      applyNodeDragPosition(pendingNodes)
 
-        if (x !== 0 && y !== 0) {
-          // selecting a note will trigger a drag stop event with x and y as 0
-          saveStateToHistory(WorkflowHistoryEvent.NodeDragStop, {
-            nodeId: node.id,
-          })
-        }
+      setHelpLineHorizontal()
+      setHelpLineVertical()
+      handleSyncWorkflowDraft()
+
+      if (x !== 0 && y !== 0) {
+        // selecting a note will trigger a drag stop event with x and y as 0
+        saveStateToHistory(WorkflowHistoryEvent.NodeDragStop, {
+          nodeId: node.id,
+        })
       }
     },
     [
       workflowStore,
       getNodesReadOnly,
       saveStateToHistory,
       handleSyncWorkflowDraft,
+      applyNodeDragPosition,
     ],
   )