From c7eea158493f8e9bf28780b908858fcb6f7e2848 Mon Sep 17 00:00:00 2001
From: jiangchu <jiangchu.wzy@antgroup.com>
Date: Mon, 22 Jul 2024 10:59:32 +0800
Subject: [PATCH 1/2] :sparkles: feat: add addEdge function, add hotkeymanager
 switch

---
 src/FlowEditor/container/FlowEditor.tsx   | 4 +++-
 src/FlowEditor/hooks/useHotkeyManager.ts  | 8 +++++++-
 src/FlowEditor/store/slices/edgesSlice.ts | 5 +++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/FlowEditor/container/FlowEditor.tsx b/src/FlowEditor/container/FlowEditor.tsx
index bed2571..7addbad 100644
--- a/src/FlowEditor/container/FlowEditor.tsx
+++ b/src/FlowEditor/container/FlowEditor.tsx
@@ -88,6 +88,7 @@ export interface FlowEditorAppProps {
   children?: React.ReactNode;
   background?: boolean;
   miniMap?: boolean;
+  hotkeyManager?: boolean;
 }
 
 const FlowEditor = forwardRef<any, FlowEditorAppProps>(
@@ -102,6 +103,7 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
       children,
       background = true,
       miniMap = true,
+      hotkeyManager = true,
       onNodesInit,
 
       beforeConnect = () => true,
@@ -148,7 +150,7 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
     const instance = useReactFlow();
 
     // 添加快捷键监听
-    useHotkeyManager();
+    useHotkeyManager(hotkeyManager);
 
     // 抛出 viewport 变化的事件
     useOnViewportChange({
diff --git a/src/FlowEditor/hooks/useHotkeyManager.ts b/src/FlowEditor/hooks/useHotkeyManager.ts
index 81e88be..15cbcfd 100644
--- a/src/FlowEditor/hooks/useHotkeyManager.ts
+++ b/src/FlowEditor/hooks/useHotkeyManager.ts
@@ -2,7 +2,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 
 import { useStore } from '../store';
 
-export const useHotkeyManager = () => {
+export const useHotkeyManager = (open = true) => {
   const [selectAll, undo, redo, copySelection, paste] = useStore((s) => [
     s.selectAll,
     s.undo,
@@ -12,27 +12,32 @@ export const useHotkeyManager = () => {
   ]);
 
   useHotkeys('meta+a', (e) => {
+    if (!open) return;
     e.preventDefault();
 
     selectAll();
   });
   useHotkeys('meta+z', (e) => {
+    if (!open) return;
     e.preventDefault();
 
     undo();
   });
   useHotkeys('meta+c', (e) => {
+    if (!open) return;
     e.preventDefault();
 
     copySelection();
   });
   useHotkeys('meta+v', (e) => {
+    if (!open) return;
     e.preventDefault();
 
     paste();
   });
 
   useHotkeys('meta+shift+z', (e) => {
+    if (!open) return;
     e.preventDefault();
 
     redo();
@@ -41,6 +46,7 @@ export const useHotkeyManager = () => {
   // 由于 react-flow 的 Backspace 实现逻辑有瑕疵，因此自行实现了一遍
   // refs: https://github.com/wbkd/react-flow/issues/2826
   useHotkeys('backspace', (e) => {
+    if (!open) return;
     e.preventDefault();
 
     // beforeActionCallback(handleDelete, HotKeyAction.deleteSelection);
diff --git a/src/FlowEditor/store/slices/edgesSlice.ts b/src/FlowEditor/store/slices/edgesSlice.ts
index d8800ac..21a0c78 100644
--- a/src/FlowEditor/store/slices/edgesSlice.ts
+++ b/src/FlowEditor/store/slices/edgesSlice.ts
@@ -9,6 +9,7 @@ import { EdgeDispatch, edgesReducer } from '../reducers/edge';
 
 export interface PublicEdgesAction {
   dispatchEdges: (payload: EdgeDispatch, options?: ActionOptions) => void;
+  addEdge: (edge: Edge) => void;
   addEdges: (edges: Record<string, Edge>, options?: ActionOptions) => void;
   deleteEdge: (id: string) => void;
   deleteEdges: (ids: string[]) => void;
@@ -73,6 +74,10 @@ export const edgesSlice: StateCreator<
       );
     }
   },
+  addEdge: (edge) => {
+    get().dispatchEdges({ type: 'addEdge', edge: edge });
+  },
+
   addEdges: (edges, options) => {
     get().dispatchEdges({ type: 'addEdges', edges: edges }, options);
   },

From 1265d946e63ce869b6442fbddabb075af535838e Mon Sep 17 00:00:00 2001
From: jiangchu <jiangchu.wzy@antgroup.com>
Date: Mon, 22 Jul 2024 16:34:55 +0800
Subject: [PATCH 2/2] :sparkles: feat: add addNodes function ways

---
 src/FlowEditor/store/reducers/edge.ts | 16 +++++++++++-----
 src/FlowEditor/store/reducers/node.ts | 16 +++++++++++-----
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/FlowEditor/store/reducers/edge.ts b/src/FlowEditor/store/reducers/edge.ts
index 1660368..4f7d60c 100644
--- a/src/FlowEditor/store/reducers/edge.ts
+++ b/src/FlowEditor/store/reducers/edge.ts
@@ -58,11 +58,17 @@ export const edgesReducer = (state: EdgesState, payload: EdgeDispatch): EdgesSta
         const { edges } = payload;
         if (!edges) return;
 
-        Object.keys(edges).forEach((id) => {
-          if (!draftState[id]) {
-            draftState[id] = edges[id];
-          }
-        });
+        if (Array.isArray(edges)) {
+          edges.forEach((edge) => {
+            draftState[edge.id] = edge;
+          });
+        } else if (typeof edges === 'object') {
+          Object.keys(edges).forEach((id) => {
+            if (!draftState[id]) {
+              draftState[id] = edges[id];
+            }
+          });
+        }
       });
 
     case 'updateEdge':
diff --git a/src/FlowEditor/store/reducers/node.ts b/src/FlowEditor/store/reducers/node.ts
index f2b24e5..3cd765b 100644
--- a/src/FlowEditor/store/reducers/node.ts
+++ b/src/FlowEditor/store/reducers/node.ts
@@ -76,11 +76,17 @@ export const nodeReducer = (state: FlattenNodes, action: NodeDispatch): FlattenN
         const { nodes } = action;
         if (!nodes) return;
 
-        Object.keys(nodes).forEach((id) => {
-          if (!draftState[id]) {
-            draftState[id] = nodes[id];
-          }
-        });
+        if (Array.isArray(nodes)) {
+          nodes.forEach((node) => {
+            draftState[node.id] = node;
+          });
+        } else if (typeof nodes === 'object') {
+          Object.keys(nodes).forEach((id) => {
+            if (!draftState[id]) {
+              draftState[id] = nodes[id];
+            }
+          });
+        }
       });
 
     case 'deleteNode':