refactor(userselection): use store for handling updates

src/components/NodesSelection/index.tsx

@@ -30,7 +30,7 @@ function getStartPositions(nodes: Node[]): StartPositions {
 export default memo(() => {
   const [offset, setOffset] = useState<XYPosition>({ x: 0, y: 0 });
   const [startPositions, setStartPositions] = useState<StartPositions>({});
-  const state = useStoreState(s => ({
+  const state = useStoreState((s) => ({
     transform: s.transform,
     selectedNodesBbox: s.selectedNodesBbox,
     selectedElements: s.selectedElements,
@@ -38,7 +38,7 @@ export default memo(() => {
     snapGrid: s.snapGrid,
     nodes: s.nodes,
   }));
-  const updateNodePos = useStoreActions(a => a.updateNodePos);
+  const updateNodePos = useStoreActions((a) => a.updateNodePos);
   const [tx, ty, tScale] = state.transform;
   const position = state.selectedNodesBbox;
   const grid = (state.snapToGrid ? state.snapGrid : [1, 1])! as [number, number];
@@ -51,7 +51,7 @@ export default memo(() => {
     const offsetX: number = scaledClient.x - position.x - tx;
     const offsetY: number = scaledClient.y - position.y - ty;
     const selectedNodes = (state.selectedElements.filter(isNode) as Node[]).map(
-      selectedNode => state.nodes.find(node => node.id === selectedNode.id)! as Node
+      (selectedNode) => state.nodes.find((node) => node.id === selectedNode.id)! as Node
     );
 
     const nextStartPositions = getStartPositions(selectedNodes);
@@ -68,7 +68,7 @@ export default memo(() => {
       y: evt.clientY / tScale,
     };
 
-    (state.selectedElements.filter(isNode) as Node[]).forEach(node => {
+    (state.selectedElements.filter(isNode) as Node[]).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,
@@ -88,8 +88,8 @@ export default memo(() => {
       <ReactDraggable
         scale={tScale}
         grid={grid}
-        onStart={evt => onStart(evt as MouseEvent)}
-        onDrag={evt => onDrag(evt as MouseEvent)}
+        onStart={(evt) => onStart(evt as MouseEvent)}
+        onDrag={(evt) => onDrag(evt as MouseEvent)}
       >
         <div
           className="react-flow__nodesselection-rect"

src/components/UserSelection/index.tsx

@@ -2,29 +2,19 @@
  * The user selection rectangle gets displayed when a user drags the mouse while pressing shift
  */
 
-import React, { useEffect, useRef, useState, memo } from 'react';
+import React, { memo } from 'react';
 
-import { useStoreActions } from '../../store/hooks';
-import { SelectionRect } from '../../types';
+import { useStoreActions, useStoreState } from '../../store/hooks';
+import { XYPosition } from '../../types';
 
 type UserSelectionProps = {
   isInteractive: boolean;
 };
 
-const initialRect: SelectionRect = {
-  startX: 0,
-  startY: 0,
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-  draw: false,
-};
-
-function getMousePosition(evt: MouseEvent) {
+function getMousePosition(evt: React.MouseEvent): XYPosition | void {
   const reactFlowNode = document.querySelector('.react-flow');
   if (!reactFlowNode) {
-    return false;
+    return;
   }
 
   const containerBounds = reactFlowNode.getBoundingClientRect();
@@ -35,105 +25,67 @@ function getMousePosition(evt: MouseEvent) {
   };
 }
 
+const SelectionRect = () => {
+  const userSelectionRect = useStoreState((s) => s.userSelectionRect);
+
+  if (!userSelectionRect.draw) {
+    return null;
+  }
+
+  return (
+    <div
+      className="react-flow__selection"
+      style={{
+        width: userSelectionRect.width,
+        height: userSelectionRect.height,
+        transform: `translate(${userSelectionRect.x}px, ${userSelectionRect.y}px)`,
+      }}
+    />
+  );
+};
+
 export default memo(({ isInteractive }: UserSelectionProps) => {
-  const selectionPane = useRef<HTMLDivElement>(null);
-  const [rect, setRect] = useState(initialRect);
-  const setSelection = useStoreActions(a => a.setSelection);
-  const updateSelection = useStoreActions(a => a.updateSelection);
-  const setNodesSelection = useStoreActions(a => a.setNodesSelection);
+  const { setUserSelection, updateUserSelection, unsetUserSelection } = useStoreActions((a) => ({
+    setUserSelection: a.setUserSelection,
+    updateUserSelection: a.updateUserSelection,
+    unsetUserSelection: a.unsetUserSelection,
+  }));
 
   if (!isInteractive) {
     return null;
   }
 
-  useEffect(() => {
-    function onMouseDown(evt: MouseEvent): void {
-      const mousePos = getMousePosition(evt);
-      if (!mousePos) {
-        return;
-      }
-
-      setRect(currentRect => ({
-        ...currentRect,
-        startX: mousePos.x,
-        startY: mousePos.y,
-        x: mousePos.x,
-        y: mousePos.y,
-        draw: true,
-      }));
-
-      setSelection(true);
+  function onMouseDown(evt: React.MouseEvent): void {
+    const mousePos = getMousePosition(evt);
+    if (!mousePos) {
+      return;
     }
 
-    function onMouseMove(evt: MouseEvent): void {
-      setRect(currentRect => {
-        if (!currentRect.draw) {
-          return currentRect;
-        }
+    setUserSelection(mousePos);
+  }
 
-        const mousePos = getMousePosition(evt);
-        if (!mousePos) {
-          return currentRect;
-        }
+  function onMouseMove(evt: React.MouseEvent): void {
+    const mousePos = getMousePosition(evt);
 
-        const negativeX = mousePos.x < currentRect.startX;
-        const negativeY = mousePos.y < currentRect.startY;
-        const nextRect = {
-          ...currentRect,
-          x: negativeX ? mousePos.x : currentRect.x,
-          y: negativeY ? mousePos.y : currentRect.y,
-          width: negativeX ? currentRect.startX - mousePos.x : mousePos.x - currentRect.startX,
-          height: negativeY ? currentRect.startY - mousePos.y : mousePos.y - currentRect.startY,
-        };
-
-        updateSelection(nextRect);
-
-        return nextRect;
-      });
+    if (!mousePos) {
+      return;
     }
 
-    function onMouseUp() {
-      setRect(currentRect => {
-        setNodesSelection({ isActive: true, selection: currentRect });
-        setSelection(false);
+    updateUserSelection(mousePos);
+  }
 
-        return {
-          ...currentRect,
-          draw: false,
-        };
-      });
-    }
-
-    if (selectionPane.current) {
-      selectionPane.current.addEventListener('mousedown', onMouseDown);
-      selectionPane.current.addEventListener('mousemove', onMouseMove);
-      selectionPane.current.addEventListener('mouseup', onMouseUp);
-
-      return () => {
-        if (!selectionPane.current) {
-          return;
-        }
-        selectionPane.current.removeEventListener('mousedown', onMouseDown);
-        selectionPane.current.removeEventListener('mousemove', onMouseMove);
-        selectionPane.current.removeEventListener('mouseup', onMouseUp);
-      };
-    }
-
-    return;
-  }, [selectionPane.current]);
+  function onMouseUp() {
+    unsetUserSelection();
+  }
 
   return (
-    <div className="react-flow__selectionpane" ref={selectionPane}>
-      {rect.draw && (
-        <div
-          className="react-flow__selection"
-          style={{
-            width: rect.width,
-            height: rect.height,
-            transform: `translate(${rect.x}px, ${rect.y}px)`,
-          }}
-        />
-      )}
+    <div
+      className="react-flow__selectionpane"
+      onMouseDown={onMouseDown}
+      onMouseMove={onMouseMove}
+      onMouseUp={onMouseUp}
+    >
+      <SelectionRect />
     </div>
   );
 });