✨ feat: add addEdge function, add hotkeymanager switch

ant-design · Jul 22, 2024 · c7eea15 · c7eea15
1 parent ddc8300
commit c7eea15
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 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/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);
   },