From 59d52d217cf5d2372871f4873ec40a84e2a2bb6b Mon Sep 17 00:00:00 2001
From: jiangchu <jiangchu.wzy@antgroup.com>
Date: Sun, 31 Mar 2024 22:57:36 +0800
Subject: [PATCH] :sparkles: feat: tech pipe line drag

---
 .../demos/pipeline/multiPipe/pipelineDemo.tsx | 19 +++++++++++++++----
 .../demos/pipeline/taskPipeline/index.tsx     |  2 +-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx b/docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx
index 371e829..0cfac13 100644
--- a/docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx
+++ b/docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx
@@ -1,7 +1,14 @@
 /**
  * compact: true
  */
-import { Background, FlowView, FlowViewProvider, useFlowViewer } from '@ant-design/pro-flow';
+import {
+  Background,
+  FlowView,
+  FlowViewProvider,
+  useEdgesState,
+  useFlowViewer,
+  useNodesState,
+} from '@ant-design/pro-flow';
 import { useCallback } from 'react';
 import useStyles from '../../index.style';
 import { edges, nodes } from './data.ts';
@@ -12,6 +19,8 @@ const nodeTypes = { pipeNode: PipeNode };
 function App() {
   const flowViewer = useFlowViewer();
   const { styles } = useStyles();
+  const [_nodes, setNodes, onNodesChange] = useNodesState([...nodes]);
+  const [_edges, setEdges, onEdgesChange] = useEdgesState([...edges]);
 
   const handleClick = useCallback(
     (e, n) => {
@@ -23,9 +32,11 @@ function App() {
   return (
     <div className={styles.container}>
       <FlowView
-        // onNodeClick={handleClick}
-        nodes={nodes}
-        edges={edges}
+        onNodeClick={handleClick}
+        nodes={_nodes}
+        edges={_edges}
+        onEdgesChange={onEdgesChange}
+        onNodesChange={onNodesChange}
         nodeTypes={nodeTypes}
         background={false}
       >
diff --git a/docs/caseShow/demos/pipeline/taskPipeline/index.tsx b/docs/caseShow/demos/pipeline/taskPipeline/index.tsx
index 80fb676..217809c 100644
--- a/docs/caseShow/demos/pipeline/taskPipeline/index.tsx
+++ b/docs/caseShow/demos/pipeline/taskPipeline/index.tsx
@@ -39,7 +39,7 @@ function App() {
           ranksep: 50,
         }}
       >
-        <Background color="#D0C0F7" variant="none" style={{ background: '#D0C0F7' }} />
+        <Background color="#f1f1f1" variant="none" style={{ background: '#f1f1f1' }} />
       </FlowView>
     </div>
   );