✨ feat: tech pipe line drag

ant-design · Mar 31, 2024 · 59d52d2 · 59d52d2
1 parent aa45c30
commit 59d52d2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git 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
@@ -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>
   );