Fix/edge updata (#105)

* ✨ feat: add addEdge function, add hotkeymanager switch * ✨ feat: add addNodes function ways --------- Co-authored-by: jiangchu <[email protected]>
ant-design · Aug 7, 2024 · ca49e83 · ca49e83
1 parent ddc8300
commit ca49e83
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 12 deletions.
diff --git 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
@@ -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/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
@@ -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':

diff --git 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);
   },