refactor(store): rename/cleanup setNodesSection action

src/components/Nodes/wrapNode.tsx

@@ -95,8 +95,8 @@ const onDrag = ({ evt, setDragging, id, offset, transform, updateNodePos }: OnDr
   const dragEvt = getMouseEvent(evt);
 
   const scaledClient = {
-    x: dragEvt.clientX * (1 / transform[2]),
-    y: dragEvt.clientY * (1 / transform[2]),
+    x: dragEvt.clientX / transform[2],
+    y: dragEvt.clientY / transform[2],
   };
 
   setDragging(true);

src/components/NodesSelection/index.tsx

@@ -30,16 +30,16 @@ function getStartPositions(nodes: Node[]): StartPositions {
 export default () => {
   const [offset, setOffset] = useState<XYPosition>({ x: 0, y: 0 });
   const [startPositions, setStartPositions] = useState<StartPositions>({});
-  const [tX, tY, tScale] = useStoreState((s) => s.transform);
-  const selectedNodesBbox = useStoreState((s) => s.selectedNodesBbox);
-  const selectedElements = useStoreState((s) => s.selectedElements);
-  const snapToGrid = useStoreState((s) => s.snapToGrid);
-  const snapGrid = useStoreState((s) => s.snapGrid);
-  const nodes = useStoreState((s) => s.nodes);
 
-  const updateNodePos = useStoreActions((a) => a.updateNodePos);
+  const [tX, tY, tScale] = useStoreState((state) => state.transform);
+  const selectedNodesBbox = useStoreState((state) => state.selectedNodesBbox);
+  const selectedElements = useStoreState((state) => state.selectedElements);
+  const snapToGrid = useStoreState((state) => state.snapToGrid);
+  const snapGrid = useStoreState((state) => state.snapGrid);
+  const nodes = useStoreState((state) => state.nodes);
+
+  const updateNodePos = useStoreActions((actions) => actions.updateNodePos);
 
-  const position = selectedNodesBbox;
   const grid = (snapToGrid ? snapGrid : [1, 1])! as [number, number];
 
   if (!selectedElements) {
@@ -51,8 +51,8 @@ export default () => {
       x: evt.clientX / tScale,
       y: evt.clientY / tScale,
     };
-    const offsetX: number = scaledClient.x - position.x - tX;
-    const offsetY: number = scaledClient.y - position.y - tY;
+    const offsetX: number = scaledClient.x - selectedNodesBbox.x - tX;
+    const offsetY: number = scaledClient.y - selectedNodesBbox.y - tY;
     const selectedNodes = selectedElements
       ? selectedElements
           .filter(isNode)
@@ -76,8 +76,8 @@ export default () => {
     if (selectedElements) {
       selectedElements.filter(isNode).forEach((node) => {
         const pos: XYPosition = {
-          x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - tX,
-          y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - tY,
+          x: startPositions[node.id].x + scaledClient.x - selectedNodesBbox.x - offset.x - tX,
+          y: startPositions[node.id].y + scaledClient.y - selectedNodesBbox.y - offset.y - tY,
         };
 
         updateNodePos({ id: node.id, pos });

src/container/GraphView/index.tsx

@@ -112,7 +112,7 @@ const GraphView = ({
   const rendererNode = useRef<HTMLDivElement>(null);
   const d3Initialised = useStoreState((state) => state.d3Initialised);
   const nodesSelectionActive = useStoreState((state) => state.nodesSelectionActive);
-  const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
+  const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection);
   const setOnConnect = useStoreActions((actions) => actions.setOnConnect);
   const setOnConnectStart = useStoreActions((actions) => actions.setOnConnectStart);
   const setOnConnectStop = useStoreActions((actions) => actions.setOnConnectStop);
@@ -127,7 +127,7 @@ const GraphView = ({
 
   const onZoomPaneClick = useCallback(() => {
     onPaneClick?.();
-    setNodesSelection({ isActive: false });
+    unsetNodesSelection();
   }, [onPaneClick]);
 
   useResizeHandler(rendererNode);

src/hooks/useGlobalKeyHandler.ts

@@ -11,10 +11,10 @@ interface HookParams {
 }
 
 export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
-  const selectedElements = useStoreState((s) => s.selectedElements);
-  const edges = useStoreState((s) => s.edges);
+  const selectedElements = useStoreState((state) => state.selectedElements);
+  const edges = useStoreState((state) => state.edges);
 
-  const setNodesSelection = useStoreActions((a) => a.setNodesSelection);
+  const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection);
   const deleteKeyPressed = useKeyPress(deleteKeyCode);
 
   useEffect(() => {
@@ -29,7 +29,7 @@ export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
       }
 
       onElementsRemove(elementsToRemove);
-      setNodesSelection({ isActive: false });
+      unsetNodesSelection();
     }
   }, [deleteKeyPressed]);
 };

src/store/index.ts

@@ -38,11 +38,6 @@ type NodeDimensionUpdate = {
   nodeElement: HTMLDivElement;
 };
 
-type SelectionUpdate = {
-  isActive: boolean;
-  selection?: SelectionRect;
-};
-
 type SetMinMaxZoom = {
   minZoom: number;
   maxZoom: number;
@@ -105,7 +100,7 @@ export interface StoreModel {
 
   setSelection: Action<StoreModel, boolean>;
 
-  setNodesSelection: Action<StoreModel, SelectionUpdate>;
+  unsetNodesSelection: Action<StoreModel>;
 
   setSelectedElements: Action<StoreModel, Elements | Node | Edge>;
 
@@ -198,7 +193,6 @@ export const storeModel: StoreModel = {
   }),
 
   updateNodeDimensions: action((state, { id, nodeElement }) => {
-    const bounds = nodeElement.getBoundingClientRect();
     const dimensions = getDimensions(nodeElement);
     const matchingNode = state.nodes.find((n) => n.id === id);
 
@@ -210,6 +204,7 @@ export const storeModel: StoreModel = {
       return;
     }
 
+    const bounds = nodeElement.getBoundingClientRect();
     const handleBounds = {
       source: getHandleBounds('.source', nodeElement, bounds, state.transform[2]),
       target: getHandleBounds('.target', nodeElement, bounds, state.transform[2]),
@@ -315,27 +310,9 @@ export const storeModel: StoreModel = {
     state.selectionActive = isActive;
   }),
 
-  setNodesSelection: action((state, { isActive, selection }) => {
-    if (!isActive || typeof selection === 'undefined') {
-      state.nodesSelectionActive = false;
-      state.selectedElements = null;
-
-      return;
-    }
-    const selectedNodes = getNodesInside(state.nodes, selection, state.transform);
-
-    if (!selectedNodes.length) {
-      state.nodesSelectionActive = false;
-      state.selectedElements = null;
-
-      return;
-    }
-
-    const selectedNodesBbox = getRectOfNodes(selectedNodes);
-
-    state.selection = selection;
-    state.nodesSelectionActive = true;
-    state.selectedNodesBbox = selectedNodesBbox;
+  unsetNodesSelection: action((state) => {
+    state.nodesSelectionActive = false;
+    state.selectedElements = null;
   }),
 
   setSelectedElements: action((state, elements) => {