From 15799b37150b42076a571d543f18858c096ee6f7 Mon Sep 17 00:00:00 2001
From: ModestFun <61576426+ModestFun@users.noreply.github.com>
Date: Tue, 9 Jan 2024 18:58:08 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20feat:=20add=20editor.updateEdge?=
 =?UTF-8?q?=20(#75)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :sparkles: feat: add updateEdge

* :memo: feat: add updateEdgeData

* :memo: fix: dispatch to action

---------

Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
---
 src/FlowEditor/demos/index.tsx            | 23 ++++++++++++++-
 src/FlowEditor/store/reducers/edge.ts     | 27 ++++++++++++++++-
 src/FlowEditor/store/slices/edgesSlice.ts | 36 +++++++++++++++++++++++
 3 files changed, 84 insertions(+), 2 deletions(-)

diff --git a/src/FlowEditor/demos/index.tsx b/src/FlowEditor/demos/index.tsx
index 64fc0ad..f7379bd 100644
--- 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
index 7a4f691..abed3eb 100644
--- 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
index 97bf38e..8f3fcd1 100644
--- 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,
+    );
+  },
 });