feat(web): 完成循环节点的基本配置

service-web/client/src/components/flow/Helper.tsx

@@ -1,7 +1,9 @@
 import {type Edge, getIncomers, type Node} from '@xyflow/react'
 import type {Option} from 'amis/lib/Schema'
-import {find, has, isEmpty, isEqual, unique} from 'licia'
+import {find, has, isEmpty, isEqual, max, min, unique} from 'licia'
+import {type DependencyList, type MouseEvent as ReactMouseEvent, useCallback, useRef} from 'react'
 import Queue from 'yocto-queue'
+import {useFlowStore} from './store/FlowStore.ts'
 import type {InputFormOptions, InputFormOptionsGroup} from './types.ts'
 
 export const getAllIncomerNodeById: (id: string, nodes: Node[], edges: Edge[]) => string[] = (id, nodes, edges) => {
@@ -82,3 +84,43 @@ export const generateAllIncomerOutputVariablesFormOptions: (id: string, inputSch
     })),
   ]
 }
+
+// 处理循环节点的边界问题
+export const useNodeDrag = (deps: DependencyList) => {
+  const currentPosition = useRef({x: 0, y: 0} as { x: number, y: number })
+  const {setNode, getNodeById} = useFlowStore()
+
+  const onNodeDragStart = useCallback(() => {
+  }, deps)
+  const onNodeDrag = useCallback((event: ReactMouseEvent, node: Node) => {
+    event.stopPropagation()
+    if (node.parentId) {
+      let parentNode = getNodeById(node.parentId)
+      if (parentNode) {
+        let newPosition = {
+          x: max(min(node.position.x, (parentNode.measured?.width ?? 0) - (node.measured?.width ?? 0) - 28), 28),
+          y: max(min(node.position.y, (parentNode.measured?.height ?? 0) - (node.measured?.height ?? 0) - 28), 90),
+        }
+        setNode({
+          ...node,
+          position: newPosition,
+        })
+        currentPosition.current = newPosition
+      }
+    }
+  }, deps)
+  const onNodeDragEnd = useCallback((_event: ReactMouseEvent, node: Node) => {
+    if (node.parentId) {
+      setNode({
+        ...node,
+        position: currentPosition.current,
+      })
+    }
+  }, deps)
+
+  return {
+    onNodeDragStart,
+    onNodeDrag,
+    onNodeDragEnd,
+  }
+}