🐛 fix: edge click error (#89)

Co-authored-by: jiangchu <[email protected]>

Author: ModestFun

src/FlowEditor/store/slices/edgesSlice.ts

@@ -25,11 +25,6 @@ export interface EdgesSlice extends PublicEdgesAction {
   handleEdgesChange: (changes: EdgeChange[]) => void;
   updateEdgesOnConnection: (connection: Connection) => Edge | undefined;
   updateEdgesOnEdgeChange: (changes: EdgeChange[]) => void;
-  edgesChangeLifecycle: (
-    changes: EdgeChange[],
-    doSomething?: (...args: any) => void,
-    doSomethingParams?: any,
-  ) => void;
 }
 
 export const edgesSlice: StateCreator<
@@ -46,14 +41,25 @@ export const edgesSlice: StateCreator<
   dispatchEdges: (payload, { recordHistory = true } = { recordHistory: true }) => {
     const { type, ...res } = payload;
 
-    const { edgesChangeLifecycle, internalUpdateEdges, yjsDoc } = get();
+    const { beforeEdgesChange, onEdgesChange, afterEdgesChange, internalUpdateEdges, yjsDoc } =
+      get();
 
     const changes = convertEdgeChange(payload);
 
     const flattenEdges = edgesReducer(get().flattenEdges, payload);
     if (isEqual(flattenEdges, get().flattenEdges)) return;
 
-    edgesChangeLifecycle(changes);
+    if (beforeEdgesChange && !beforeEdgesChange(changes)) {
+      return;
+    }
+
+    if (onEdgesChange) {
+      onEdgesChange(changes);
+    }
+
+    if (afterEdgesChange) {
+      afterEdgesChange(changes);
+    }
 
     internalUpdateEdges(flattenEdges, {
       type: `dispatchFlattenEdges/${type}`,
@@ -137,7 +143,14 @@ export const edgesSlice: StateCreator<
   },
 
   handleEdgesChange: (changes) => {
-    const { dispatchEdges, onElementSelectChange, edgesChangeLifecycle, deselectElement } = get();
+    const {
+      dispatchEdges,
+      onElementSelectChange,
+      beforeEdgesChange,
+      onEdgesChange,
+      afterEdgesChange,
+      deselectElement,
+    } = get();
 
     changes.forEach((c) => {
       switch (c.type) {
@@ -152,31 +165,20 @@ export const edgesSlice: StateCreator<
           dispatchEdges({ type: 'deleteEdge', id: c.id });
           break;
         case 'select':
-          edgesChangeLifecycle(changes, onElementSelectChange, {
-            id: c.id,
-            selected: c.selected,
-          });
-      }
-    });
-  },
-
-  edgesChangeLifecycle: (changes, doSomething, doSomethingParams) => {
-    const { beforeEdgesChange, onEdgesChange, afterEdgesChange } = get();
+          if (beforeEdgesChange && !beforeEdgesChange(changes)) {
+            return;
+          }
 
-    if (beforeEdgesChange && !beforeEdgesChange(changes)) {
-      return;
-    }
+          if (onEdgesChange) {
+            onEdgesChange(changes);
+          }
 
-    if (onEdgesChange) {
-      onEdgesChange(changes);
-    }
+          onElementSelectChange(c.id, c.selected);
 
-    if (doSomething) {
-      doSomething(...doSomethingParams);
-    }
-
-    if (afterEdgesChange) {
-      afterEdgesChange(changes);
-    }
+          if (afterEdgesChange) {
+            afterEdgesChange(changes);
+          }
+      }
+    });
   },
 });

src/FlowEditor/store/slices/nodesSlice.ts

@@ -88,11 +88,6 @@ export interface PublicNodesAction {
 export interface NodesSlice extends PublicNodesAction {
   internalUpdateNodes: (flattenNodes: FlattenNodes, payload: ActionPayload) => void;
   handleNodesChange: (changes: NodeChange[]) => void;
-  nodesChangeLifecycle: (
-    changes: NodeChange[],
-    doSomething?: (...args: any) => void,
-    doSomethingParams?: any,
-  ) => void;
 }
 
 export const nodesSlice: StateCreator<
@@ -110,14 +105,25 @@ export const nodesSlice: StateCreator<
   },
 
   dispatchNodes: (payload, { recordHistory = true } = { recordHistory: true }) => {
-    const { nodesChangeLifecycle, internalUpdateNodes, yjsDoc } = get();
+    const { beforeNodesChange, onNodesChange, afterNodesChange, internalUpdateNodes, yjsDoc } =
+      get();
     const { type, ...res } = payload;
     const changes = convertNodeChange(payload);
 
     const flattenNodes = nodeReducer(get().flattenNodes, payload);
     if (isEqual(flattenNodes, get().flattenNodes)) return;
 
-    nodesChangeLifecycle(changes);
+    if (beforeNodesChange && !beforeNodesChange(changes)) {
+      return;
+    }
+
+    if (onNodesChange) {
+      onNodesChange(changes);
+    }
+
+    if (afterNodesChange) {
+      afterNodesChange(changes);
+    }
 
     internalUpdateNodes(flattenNodes, {
       type: `dispatchFlattenNodes/${type}`,
@@ -186,7 +192,14 @@ export const nodesSlice: StateCreator<
   },
 
   handleNodesChange: (changes) => {
-    const { dispatchNodes, onElementSelectChange, deselectElement, nodesChangeLifecycle } = get();
+    const {
+      dispatchNodes,
+      onElementSelectChange,
+      deselectElement,
+      beforeNodesChange,
+      onNodesChange,
+      afterNodesChange,
+    } = get();
 
     changes.forEach((c) => {
       switch (c.type) {
@@ -207,31 +220,20 @@ export const nodesSlice: StateCreator<
           dispatchNodes({ type: 'deleteNode', id: c.id });
           break;
         case 'select':
-          nodesChangeLifecycle(changes, onElementSelectChange, {
-            id: c.id,
-            selected: true,
-          });
-      }
-    });
-  },
-
-  nodesChangeLifecycle: (changes, doSomething, doSomethingParams) => {
-    const { beforeNodesChange, onNodesChange, afterNodesChange } = get();
+          if (beforeNodesChange && !beforeNodesChange(changes)) {
+            return;
+          }
 
-    if (beforeNodesChange && !beforeNodesChange(changes)) {
-      return;
-    }
+          if (onNodesChange) {
+            onNodesChange(changes);
+          }
 
-    if (onNodesChange) {
-      onNodesChange(changes);
-    }
+          onElementSelectChange(c.id, c.selected);
 
-    if (doSomething) {
-      doSomething(...doSomethingParams);
-    }
-
-    if (afterNodesChange) {
-      afterNodesChange(changes);
-    }
+          if (afterNodesChange) {
+            afterNodesChange(changes);
+          }
+      }
+    });
   },
 });