refactor(store): add function for updating selection changes

src/store/index.ts

@@ -3,7 +3,6 @@ import createContext from 'zustand/context';
 
 import { clampPosition, getDimensions } from '../utils';
 import { applyNodeChanges } from '../utils/changes';
-
 import {
   ReactFlowState,
   Node,
@@ -18,12 +17,7 @@ import {
 } from '../types';
 import { getHandleBounds } from '../components/Nodes/utils';
 import { createSelectionChange, getSelectionChanges } from '../utils/changes';
-import {
+import { createNodeInternals, fitView, updateNodesAndEdgesSelections } from './utils';
-  createNodeInternals,
-  handleControlledEdgeSelectionChange,
-  handleControlledNodeSelectionChange,
-  fitView,
-} from './utils';
 import initialState from './initialState';
 
 const { Provider, useStore, useStoreApi } = createContext<ReactFlowState>();
@@ -120,17 +114,8 @@ const createStore = () =>
         }
       }
     },
-    // @TODO: can we unify addSelectedNodes and addSelectedEdges somehow?
     addSelectedNodes: (selectedNodeIds: string[]) => {
-      const {
+      const { multiSelectionActive, nodeInternals, edges } = get();
-        multiSelectionActive,
-        onNodesChange,
-        nodeInternals,
-        hasDefaultNodes,
-        onEdgesChange,
-        hasDefaultEdges,
-        edges,
-      } = get();
       let changedNodes: NodeSelectionChange[];
       let changedEdges: EdgeSelectionChange[] | null = null;
 
@@ -141,32 +126,15 @@ const createStore = () =>
         changedEdges = getSelectionChanges(edges, []);
       }
 
-      if (changedNodes.length) {
+      updateNodesAndEdgesSelections({
-        if (hasDefaultNodes) {
+        changedNodes,
-          set({ nodeInternals: handleControlledNodeSelectionChange(changedNodes, nodeInternals) });
+        changedEdges,
-        }
+        get,
-
+        set,
-        onNodesChange?.(changedNodes);
+      });
-      }
-
-      if (changedEdges?.length) {
-        if (hasDefaultEdges) {
-          set({ edges: handleControlledEdgeSelectionChange(changedEdges, edges) });
-        }
-
-        onEdgesChange?.(changedEdges);
-      }
     },
     addSelectedEdges: (selectedEdgeIds: string[]) => {
-      const {
+      const { multiSelectionActive, edges, nodeInternals } = get();
-        multiSelectionActive,
-        onEdgesChange,
-        edges,
-        hasDefaultEdges,
-        nodeInternals,
-        hasDefaultNodes,
-        onNodesChange,
-      } = get();
       let changedEdges: EdgeSelectionChange[];
       let changedNodes: NodeSelectionChange[] | null = null;
 
@@ -177,25 +145,15 @@ const createStore = () =>
         changedNodes = getSelectionChanges(Array.from(nodeInternals.values()), []);
       }
 
-      if (changedEdges.length) {
+      updateNodesAndEdgesSelections({
-        if (hasDefaultEdges) {
+        changedNodes,
-          set({
+        changedEdges,
-            edges: handleControlledEdgeSelectionChange(changedEdges, edges),
+        get,
-          });
+        set,
-        }
+      });
-        onEdgesChange?.(changedEdges);
-      }
-
-      if (changedNodes?.length) {
-        if (hasDefaultNodes) {
-          set({ nodeInternals: handleControlledNodeSelectionChange(changedNodes, nodeInternals) });
-        }
-
-        onNodesChange?.(changedNodes);
-      }
     },
     unselectNodesAndEdges: () => {
-      const { nodeInternals, edges, onNodesChange, onEdgesChange, hasDefaultNodes, hasDefaultEdges } = get();
+      const { nodeInternals, edges } = get();
       const nodes = Array.from(nodeInternals.values());
 
       const nodesToUnselect = nodes.map((n) => {
@@ -204,22 +162,13 @@ const createStore = () =>
       }) as NodeSelectionChange[];
       const edgesToUnselect = edges.map((edge) => createSelectionChange(edge.id, false)) as EdgeSelectionChange[];
 
-      if (nodesToUnselect.length) {
+      updateNodesAndEdgesSelections({
-        if (hasDefaultNodes) {
+        changedNodes: nodesToUnselect,
-          set({ nodeInternals: handleControlledNodeSelectionChange(nodesToUnselect, nodeInternals) });
+        changedEdges: edgesToUnselect,
-        }
+        get,
-        onNodesChange?.(nodesToUnselect);
+        set,
-      }
+      });
-      if (edgesToUnselect.length) {
-        if (hasDefaultEdges) {
-          set({
-            edges: handleControlledEdgeSelectionChange(edgesToUnselect, edges),
-          });
-        }
-        onEdgesChange?.(edgesToUnselect);
-      }
     },
-
     setMinZoom: (minZoom: number) => {
       const { d3Zoom, maxZoom } = get();
       d3Zoom?.scaleExtent([minZoom, maxZoom]);
@@ -239,7 +188,7 @@ const createStore = () =>
       set({ translateExtent });
     },
     resetSelectedElements: () => {
-      const { nodeInternals, edges, onNodesChange, onEdgesChange, hasDefaultNodes, hasDefaultEdges } = get();
+      const { nodeInternals, edges } = get();
       const nodes = Array.from(nodeInternals.values());
 
       const nodesToUnselect = nodes
@@ -249,22 +198,12 @@ const createStore = () =>
         .filter((e) => e.selected)
         .map((e) => createSelectionChange(e.id, false)) as EdgeSelectionChange[];
 
-      if (nodesToUnselect.length) {
+      updateNodesAndEdgesSelections({
-        if (hasDefaultNodes) {
+        changedNodes: nodesToUnselect,
-          set({
+        changedEdges: edgesToUnselect,
-            nodeInternals: handleControlledNodeSelectionChange(nodesToUnselect, nodeInternals),
+        get,
-          });
+        set,
-        }
+      });
-        onNodesChange?.(nodesToUnselect);
-      }
-      if (edgesToUnselect.length) {
-        if (hasDefaultEdges) {
-          set({
-            edges: handleControlledEdgeSelectionChange(edgesToUnselect, edges),
-          });
-        }
-        onEdgesChange?.(edgesToUnselect);
-      }
     },
     setNodeExtent: (nodeExtent: CoordinateExtent) => {
       const { nodeInternals } = get();

src/store/utils.ts

@@ -1,22 +1,17 @@
-// @ts-nocheck
 import { zoomIdentity } from 'd3-zoom';
-import { GetState } from 'zustand';
+import { GetState, SetState } from 'zustand';
 
-import { clampPosition, isNumeric } from '../utils';
+import { isNumeric } from '../utils';
 import { getD3Transition, getRectOfNodes, getTransformForBounds } from '../utils/graph';
 import {
-  CoordinateExtent,
   Edge,
   EdgeSelectionChange,
   Node,
   NodeInternals,
-  NodePositionChange,
   NodeSelectionChange,
   ReactFlowState,
-  XYPosition,
   XYZPosition,
   FitViewOptions,
-  SnapGrid,
 } from '../types';
 
 type ParentNodes = Record<string, boolean>;
@@ -92,15 +87,6 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
   return nextNodeInternals;
 }
 
-type CreatePostionChangeParams = {
-  node: Node;
-  nodeExtent: CoordinateExtent;
-  nodeInternals: NodeInternals;
-  diff?: XYPosition;
-  snapToGrid?: boolean;
-  snapGrid?: SnapGrid;
-};
-
 type InternalFitViewOptions = {
   initial?: boolean;
 } & FitViewOptions;
@@ -166,3 +152,30 @@ export function handleControlledEdgeSelectionChange(edgeChanges: EdgeSelectionCh
     return e;
   });
 }
+
+type UpdateNodesAndEdgesParams = {
+  changedNodes: NodeSelectionChange[] | null;
+  changedEdges: EdgeSelectionChange[] | null;
+  get: GetState<ReactFlowState>;
+  set: SetState<ReactFlowState>;
+};
+
+export function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get, set }: UpdateNodesAndEdgesParams) {
+  const { nodeInternals, edges, onNodesChange, onEdgesChange, hasDefaultNodes, hasDefaultEdges } = get();
+
+  if (changedNodes?.length) {
+    if (hasDefaultNodes) {
+      set({ nodeInternals: handleControlledNodeSelectionChange(changedNodes, nodeInternals) });
+    }
+
+    onNodesChange?.(changedNodes);
+  }
+
+  if (changedEdges?.length) {
+    if (hasDefaultEdges) {
+      set({ edges: handleControlledEdgeSelectionChange(changedEdges, edges) });
+    }
+
+    onEdgesChange?.(changedEdges);
+  }
+}