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( @@ -102,6 +103,7 @@ const FlowEditor = forwardRef( children, background = true, miniMap = true, + hotkeyManager = true, onNodesInit, beforeConnect = () => true, @@ -148,7 +150,7 @@ const FlowEditor = forwardRef( 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/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': 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, 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); },