wwf
2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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: [],
      }
    }
 
    if (node.data.isInLoop) {
      return {
        showHorizontalHelpLineNodes: [],
        showVerticalHelpLineNodes: [],
      }
    }
 
    const showHorizontalHelpLineNodes = nodes.filter((n) => {
      if (n.id === node.id)
        return false
 
      if (n.data.isInIteration)
        return false
 
      if (n.data.isInLoop)
        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
      if (n.data.isInLoop)
        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,
  }
}