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] :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);
   },