✨ feat: add beforeChange and beforeConnect function for FlowEditor. (#56

) * 📝 feat: rm block * 📝 fix: ci * 📝 fix: ci * 📝 fix: quick-start link * 🐛 fix: ci * ✨ feat: add before function * 🐛 fix: remove console log * 🐛 fix: remove button * 🐛 fix: demo recode --------- Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
ant-design · Dec 26, 2023 · 5b083e3 · 5b083e3
1 parent 5ea82f1
commit 5b083e3
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 11 deletions.
diff --git a/docs/guide/demos/flowEditor/btnGroup.tsx b/docs/guide/demos/flowEditor/btnGroup.tsx
@@ -22,7 +22,6 @@ export const BtnGroup = (props) => {
         onClick={() => {
           const nodes = editor.getFlattenNodes();
           const index = nodes ? Object.keys(nodes).length + 1 : 1;
-          console.log(index);
 
           editor.addNode({
             id: `a${index}`,
@@ -43,7 +42,6 @@ export const BtnGroup = (props) => {
       <button
         onClick={() => {
           editor.getSelectedKeys().forEach((id) => {
-            console.log(id);
             editor.deleteNode(id);
           });
         }}

diff --git a/src/FlowEditor/container/FlowEditor.tsx b/src/FlowEditor/container/FlowEditor.tsx
@@ -6,7 +6,10 @@ import { Flexbox } from 'react-layout-kit';
 import ReactFlow, {
   Background,
   BackgroundVariant,
+  Connection,
+  EdgeChange,
   Node,
+  NodeChange,
   NodeTypes,
   SelectionMode,
   Viewport,
@@ -66,6 +69,9 @@ export interface FlowEditorAppProps {
   contextMenuEnabled?: boolean;
   onNodesInit?: (editor: FlowEditorInstance) => void;
   onNodesInitChange?: (init: boolean) => void;
+  beforeNodesChange?: (changes: NodeChange[]) => boolean;
+  beforeEdgesChange?: (changes: EdgeChange[]) => boolean;
+  beforeConnect?: (connection: Connection) => boolean;
   style?: React.CSSProperties;
   flowProps?: ComponentProps<typeof ReactFlow>;
   className?: string;
@@ -87,6 +93,9 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
       background = true,
       miniMap = true,
       onNodesInit,
+      beforeNodesChange = () => true,
+      beforeEdgesChange = () => true,
+      beforeConnect = () => true,
     },
     ref,
   ) => {
@@ -172,6 +181,9 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
           multiSelectionKeyCode={['Meta', 'Shift']}
           selectNodesOnDrag
           onNodesChange={(changes) => {
+            if (!beforeNodesChange(changes)) {
+              return;
+            }
             // 选择逻辑 nodes 和 edges 一致
             changes.forEach((c) => {
               switch (c.type) {
@@ -199,6 +211,10 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
             }
           }}
           onEdgesChange={(changes) => {
+            if (!beforeEdgesChange(changes)) {
+              return;
+            }
+
             updateEdgesOnEdgeChange(changes);
 
             // 选择逻辑 nodes 和 edges 一致
@@ -213,7 +229,12 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
               onEdgesChange(changes);
             }
           }}
-          onConnect={updateEdgesOnConnection}
+          onConnect={(connection) => {
+            if (!beforeConnect(connection)) {
+              return;
+            }
+            updateEdgesOnConnection(connection);
+          }}
           disableKeyboardA11y={true}
           proOptions={{ hideAttribution: true }}
         >

diff --git a/src/FlowEditor/container/index.tsx b/src/FlowEditor/container/index.tsx
@@ -14,6 +14,9 @@ const FlowEditor = forwardRef<any, FlowEditorProps>(
     {
       devtools,
       onNodesInit,
+      beforeNodesChange,
+      beforeEdgesChange,
+      beforeConnect,
       defaultViewport,
       contextMenuEnabled,
       flowProps,
@@ -34,6 +37,9 @@ const FlowEditor = forwardRef<any, FlowEditorProps>(
             miniMap={miniMap}
             background={background}
             onNodesInit={onNodesInit}
+            beforeNodesChange={beforeNodesChange}
+            beforeEdgesChange={beforeEdgesChange}
+            beforeConnect={beforeConnect}
             contextMenuEnabled={contextMenuEnabled}
             defaultViewport={defaultViewport}
             flowProps={flowProps}

diff --git a/src/FlowEditor/demos/index.tsx b/src/FlowEditor/demos/index.tsx
@@ -39,7 +39,6 @@ const ProFlowDemo = () => {
   const editor = useFlowEditor();
   const { styles } = useStyles();
 
-  console.log(editor);
   useEffect(() => {
     editor.addNode({
       id: 'a1',

diff --git a/src/FlowEditor/hooks/useHotkeyManager.ts b/src/FlowEditor/hooks/useHotkeyManager.ts
@@ -3,21 +3,22 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useStore } from '../store';
 
 export const useHotkeyManager = () => {
-  const [selectAll, undo, redo, deleteSelection, copySelection, paste] = useStore((s) => [
+  const [selectAll, undo, redo, copySelection, paste] = useStore((s) => [
     s.selectAll,
     s.undo,
     s.redo,
-    s.deleteSelection,
     s.copySelection,
     s.paste,
   ]);
 
   useHotkeys('meta+a', (e) => {
     e.preventDefault();
+
     selectAll();
   });
   useHotkeys('meta+z', (e) => {
     e.preventDefault();
+
     undo();
   });
   useHotkeys('meta+c', (e) => {
@@ -42,6 +43,6 @@ export const useHotkeyManager = () => {
   useHotkeys('backspace', (e) => {
     e.preventDefault();
 
-    deleteSelection();
+    // beforeActionCallback(handleDelete, HotKeyAction.deleteSelection);
   });
 };
diff --git a/src/FlowEditor/store/slices/generalActionSlice.ts b/src/FlowEditor/store/slices/generalActionSlice.ts
@@ -61,7 +61,6 @@ export interface PublicGeneralAction {
    */
   paste: () => Promise<void>;
 }
-
 export interface GeneralActionSlice extends PublicGeneralAction {
   internalUpdateSelection: (selectedKeys: string[], payload: ActionPayload) => void;
   onElementSelectChange: (id: string, selected: boolean) => void;
@@ -114,8 +113,6 @@ export const generalActionSlice: StateCreator<
 
     const ids = [...nodes.map((n) => n.id), ...edges.map((e) => e.id)];
 
-    console.log(ids);
-
     get().internalUpdateSelection(ids, { type: 'selection/selectAll', payload: { ids } });
   },
 
@@ -134,6 +131,7 @@ export const generalActionSlice: StateCreator<
 
   deleteSelection: () => {
     const { selectedKeys, flattenEdges, flattenNodes, dispatchNodes, dispatchEdges } = get();
+
     selectedKeys.forEach((id) => {
       if (flattenNodes[id]) dispatchNodes({ type: 'deleteNode', id });
       if (flattenEdges[id]) dispatchEdges({ type: 'deleteEdge', id });
@@ -249,7 +247,7 @@ export const generalActionSlice: StateCreator<
     internalUpdateNodes(flattenNodes || {}, { type: 'history/undo', payload: stack });
 
     // if (!!flattenEdges)
-    internalUpdateEdges(flattenEdges, { type: 'history/undo', payload: stack });
+    internalUpdateEdges(flattenEdges || {}, { type: 'history/undo', payload: stack });
   },
   redo: () => {
     const { yjsDoc, internalUpdateEdges, internalUpdateNodes } = get();