📝 feat: add editor.updateEdge (#75)

* ✨ feat: add updateEdge * 📝 feat: add updateEdgeData * 📝 fix: dispatch to action --------- Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
ant-design · Jan 9, 2024 · 15799b3 · 15799b3
1 parent 03c95af
commit 15799b3
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 2 deletions.
diff --git a/src/FlowEditor/demos/index.tsx b/src/FlowEditor/demos/index.tsx
@@ -48,11 +48,32 @@ const ProFlowDemo = () => {
         handles: {},
       },
     });
+    editor.addNode({
+      id: 'a2',
+      type: 'StringNode',
+      position: { x: 0, y: 300 },
+      data: {
+        title: 'String Node',
+        handles: {},
+      },
+    });
+    editor.addEdges({
+      'a1-a2': {
+        id: 'a1-a2',
+        source: 'a1',
+        target: 'a2',
+        data: {
+          source: 'a1',
+          target: 'a2',
+          label: '123',
+        },
+      },
+    });
   }, [editor]);
 
   return (
     <div className={styles.container}>
-      <FlowEditor nodeTypes={nodeTypes} />
+      <FlowEditor nodeTypes={nodeTypes}></FlowEditor>
     </div>
   );
 };

diff --git a/src/FlowEditor/store/reducers/edge.ts b/src/FlowEditor/store/reducers/edge.ts
@@ -1,6 +1,7 @@
 import { produce } from 'immer';
 import { Connection, Edge } from 'reactflow';
 
+import { merge } from 'lodash-es';
 import { generateEdgeId } from '../../utils/edge';
 
 export type EdgesState = Record<string, Edge>;
@@ -21,6 +22,13 @@ interface UpdateEdgeAction {
   edge: Edge;
 }
 
+interface UpdateEdgeDataAction {
+  type: 'updateEdgeData';
+  id: string;
+  newData: any;
+  deepReplace?: boolean;
+}
+
 interface DeleteEdgeAction {
   type: 'deleteEdge';
   id: string;
@@ -36,7 +44,8 @@ export type EdgeDispatch =
   | BatchAddEdgesAction
   | UpdateEdgeAction
   | DeleteEdgeAction
-  | CreateEdgeFromConnectionAction;
+  | CreateEdgeFromConnectionAction
+  | UpdateEdgeDataAction;
 
 export const edgesReducer = (state: EdgesState, payload: EdgeDispatch): EdgesState => {
   switch (payload.type) {
@@ -60,9 +69,25 @@ export const edgesReducer = (state: EdgesState, payload: EdgeDispatch): EdgesSta
     case 'updateEdge':
       return produce(state, (draftState) => {
         const { id, edge } = payload;
+        console.log(draftState[id]);
         draftState[id] = { ...draftState[id], ...edge };
       });
 
+    case 'updateEdgeData':
+      return produce(state, (draftState) => {
+        const { newData, id, deepReplace } = payload;
+        draftState[id] = { ...draftState[id], data: newData };
+
+        if (!draftState[id]) return;
+
+        const edge = draftState[id] as Edge;
+        if (!deepReplace) {
+          draftState[id] = { ...draftState[id], ...edge, data: merge(edge.data, newData) };
+        } else {
+          draftState[id] = { ...draftState[id], ...edge, data: { ...edge.data, ...newData } };
+        }
+      });
+
     case 'deleteEdge':
       return produce(state, (draftState) => {
         delete draftState[payload.id];

diff --git a/src/FlowEditor/store/slices/edgesSlice.ts b/src/FlowEditor/store/slices/edgesSlice.ts
@@ -9,6 +9,14 @@ import { EdgeDispatch, edgesReducer } from '../reducers/edge';
 export interface PublicEdgesAction {
   dispatchEdges: (payload: EdgeDispatch, options?: ActionOptions) => void;
   addEdges: (edges: Record<string, Edge>, options?: ActionOptions) => void;
+  deleteEdge: (id: string) => void;
+  updateEdge: (id: string, edge: Edge, options?: ActionOptions) => void;
+  updateEdgeData: <T extends object>(
+    id: string,
+    newData: T,
+    forceReplace?: boolean,
+    options?: ActionOptions,
+  ) => void;
 }
 export interface EdgesSlice extends PublicEdgesAction {
   internalUpdateEdges: (flattenEdges: FlattenEdges, payload: ActionPayload) => void;
@@ -62,4 +70,32 @@ export const edgesSlice: StateCreator<
       }
     });
   },
+
+  deleteEdge: (id) => {
+    get().deselectElement(id);
+    get().dispatchEdges({ type: 'deleteEdge', id });
+  },
+
+  updateEdgeData: (id, newData, deepReplace = false, options) => {
+    get().dispatchEdges(
+      {
+        type: 'updateEdgeData',
+        id,
+        newData: newData as any,
+        deepReplace,
+      },
+      options,
+    );
+  },
+
+  updateEdge: (id, edgeData, options) => {
+    get().dispatchEdges(
+      {
+        type: 'updateEdge',
+        id,
+        edge: edgeData,
+      },
+      options,
+    );
+  },
 });