feat: workflow new nodes (#4683)

Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: Patryk Garstecki <patryk20120@yahoo.pl> Co-authored-by: Sebastian.W <thiner@gmail.com> Co-authored-by: 呆萌闷油瓶 <253605712@qq.com> Co-authored-by: takatost <takatost@users.noreply.github.com> Co-authored-by: rechardwang <wh_goodjob@163.com> Co-authored-by: Nite Knite <nkCoding@gmail.com> Co-authored-by: Chenhe Gu <guchenhe@gmail.com> Co-authored-by: Joshua <138381132+joshua20231026@users.noreply.github.com> Co-authored-by: Weaxs <459312872@qq.com> Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com> Co-authored-by: leejoo0 <81673835+leejoo0@users.noreply.github.com> Co-authored-by: JzoNg <jzongcode@gmail.com> Co-authored-by: sino <sino2322@gmail.com> Co-authored-by: Vikey Chen <vikeytk@gmail.com> Co-authored-by: wanghl <Wang-HL@users.noreply.github.com> Co-authored-by: Haolin Wang-汪皓临 <haolin.wang@atlaslovestravel.com> Co-authored-by: Zixuan Cheng <61724187+Theysua@users.noreply.github.com> Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: Bowen Liang <bowenliang@apache.org> Co-authored-by: Bowen Liang <liangbowen@gf.com.cn> Co-authored-by: fanghongtai <42790567+fanghongtai@users.noreply.github.com> Co-authored-by: wxfanghongtai <wxfanghongtai@gf.com.cn> Co-authored-by: Matri <qjp@bithuman.io> Co-authored-by: Benjamin <benjaminx@gmail.com>
2025-12-16 06:16:53 +08:00 · 2024-05-27 21:57:08 +08:00
parent 444fdb79dc
commit 45deaee762
210 changed files with 9951 additions and 2223 deletions
--- a/web/app/components/workflow/hooks/use-helpline.ts
+++ b/web/app/components/workflow/hooks/use-helpline.ts
@@ -0,0 +1,114 @@
+import { useCallback } from 'react'
+import { useStoreApi } from 'reactflow'
+import type { Node } from '../types'
+import { useWorkflowStore } from '../store'
+
+export const useHelpline = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+
+  const handleSetHelpline = useCallback((node: Node) => {
+    const { getNodes } = store.getState()
+    const nodes = getNodes()
+    const {
+      setHelpLineHorizontal,
+      setHelpLineVertical,
+    } = workflowStore.getState()
+
+    if (node.data.isInIteration) {
+      return {
+        showHorizontalHelpLineNodes: [],
+        showVerticalHelpLineNodes: [],
+      }
+    }
+    const showHorizontalHelpLineNodes = nodes.filter((n) => {
+      if (n.id === node.id)
+        return false
+
+      if (n.data.isInIteration)
+        return false
+
+      const nY = Math.ceil(n.position.y)
+      const nodeY = Math.ceil(node.position.y)
+
+      if (nY - nodeY < 5 && nY - nodeY > -5)
+        return true
+
+      return false
+    }).sort((a, b) => a.position.x - b.position.x)
+
+    const showHorizontalHelpLineNodesLength = showHorizontalHelpLineNodes.length
+    if (showHorizontalHelpLineNodesLength > 0) {
+      const first = showHorizontalHelpLineNodes[0]
+      const last = showHorizontalHelpLineNodes[showHorizontalHelpLineNodesLength - 1]
+
+      const helpLine = {
+        top: first.position.y,
+        left: first.position.x,
+        width: last.position.x + last.width! - first.position.x,
+      }
+
+      if (node.position.x < first.position.x) {
+        helpLine.left = node.position.x
+        helpLine.width = first.position.x + first.width! - node.position.x
+      }
+
+      if (node.position.x > last.position.x)
+        helpLine.width = node.position.x + node.width! - first.position.x
+
+      setHelpLineHorizontal(helpLine)
+    }
+    else {
+      setHelpLineHorizontal()
+    }
+
+    const showVerticalHelpLineNodes = nodes.filter((n) => {
+      if (n.id === node.id)
+        return false
+      if (n.data.isInIteration)
+        return false
+
+      const nX = Math.ceil(n.position.x)
+      const nodeX = Math.ceil(node.position.x)
+
+      if (nX - nodeX < 5 && nX - nodeX > -5)
+        return true
+
+      return false
+    }).sort((a, b) => a.position.x - b.position.x)
+    const showVerticalHelpLineNodesLength = showVerticalHelpLineNodes.length
+
+    if (showVerticalHelpLineNodesLength > 0) {
+      const first = showVerticalHelpLineNodes[0]
+      const last = showVerticalHelpLineNodes[showVerticalHelpLineNodesLength - 1]
+
+      const helpLine = {
+        top: first.position.y,
+        left: first.position.x,
+        height: last.position.y + last.height! - first.position.y,
+      }
+
+      if (node.position.y < first.position.y) {
+        helpLine.top = node.position.y
+        helpLine.height = first.position.y + first.height! - node.position.y
+      }
+
+      if (node.position.y > last.position.y)
+        helpLine.height = node.position.y + node.height! - first.position.y
+
+      setHelpLineVertical(helpLine)
+    }
+    else {
+      setHelpLineVertical()
+    }
+
+    return {
+      showHorizontalHelpLineNodes,
+      showVerticalHelpLineNodes,
+    }
+  }, [store, workflowStore])
+
+  return {
+    handleSetHelpline,
+  }
+}