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

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

@@ -8,11 +8,12 @@ import styled from 'styled-components'
 import '@xyflow/react/dist/style.css'
 import {commonInfo} from '../../util/amis.tsx'
 import {checkAddConnection, checkAddNode, checkSave} from './FlowChecker.tsx'
+import {useNodeDrag} from './Helper.tsx'
 import {NodeRegistry, NodeRegistryMap} from './NodeRegistry.tsx'
 import {useContextStore} from './store/ContextStore.ts'
 import {useDataStore} from './store/DataStore.ts'
 import {useFlowStore} from './store/FlowStore.ts'
-import type {FlowEditorProps} from './types.ts'
+import {flowDotColor, type FlowEditorProps} from './types.ts'
 
 const FlowableDiv = styled.div`
     .react-flow__node.selectable {
@@ -75,10 +76,17 @@ function FlowEditor(props: FlowEditorProps) {
     setInputSchema(props.inputSchema)
   }, [props.graphData])
 
+  const {
+    onNodeDragStart,
+    onNodeDrag,
+    onNodeDragEnd,
+  } = useNodeDrag([props.graphData])
+
   return (
     <FlowableDiv className="h-full w-full">
       {contextHolder}
       <ReactFlow
+        className="rounded-xl"
         nodes={nodes}
         edges={edges}
         onNodesChange={onNodesChange}
@@ -97,6 +105,9 @@ function FlowEditor(props: FlowEditorProps) {
         }}
         // @ts-ignore
         nodeTypes={arrToMap(Object.keys(NodeRegistryMap), key => NodeRegistryMap[key]!.component)}
+        onNodeDragStart={onNodeDragStart}
+        onNodeDrag={onNodeDrag}
+        onNodeDragStop={onNodeDragEnd}
       >
         <Panel position="top-right">
           <Space className="toolbar">
@@ -176,7 +187,12 @@ function FlowEditor(props: FlowEditorProps) {
         </Panel>
         <Controls/>
         <MiniMap/>
-        <Background variant={BackgroundVariant.Cross} gap={20} size={3}/>
+        <Background
+          variant={BackgroundVariant.Cross}
+          gap={20}
+          size={3}
+          color={flowDotColor}
+        />
       </ReactFlow>
     </FlowableDiv>
   )