Merge pull request #169 from wbkd/develop

Develop

cypress/integration/flow/basic.spec.js

@@ -47,6 +47,8 @@ describe('Basic Graph Rendering', () => {
       .last()
       .should('have.not.class', 'selected')
       .get('.react-flow__nodesselection-rect');
+
+    cy.get('body').type('{shift}', { release: true });
   });
 
   it('selects all nodes', () => {
@@ -59,6 +61,8 @@ describe('Basic Graph Rendering', () => {
       .get('.react-flow__node')
       .should('have.class', 'selected')
       .get('.react-flow__nodesselection-rect');
+
+    cy.get('body').type('{shift}', { release: true });
   });
 
   it('removes selection', () => {
@@ -73,11 +77,10 @@ describe('Basic Graph Rendering', () => {
   it('drags a node', () => {
     const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
 
-    cy.drag('.react-flow__node:first', { x: 500, y: 25 })
+    cy.drag('.react-flow__node:first', { x: 500, y: 25 }).then(($el) => {
-      .then($el => {
+      const styleAfterDrag = $el.css('transform');
-        const styleAfterDrag = $el.css('transform');
+      expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
-        expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
+    });
-      });
   });
 
   it('removes a node', () => {
@@ -116,7 +119,7 @@ describe('Basic Graph Rendering', () => {
 
     const newPosition = {
       clientX: Cypress.config('viewportWidth') * 0.6,
-      clientY: Cypress.config('viewportHeight') * 0.7
+      clientY: Cypress.config('viewportHeight') * 0.7,
     };
 
     const styleBeforeDrag = Cypress.$('.react-flow__nodes').css('transform');
@@ -137,7 +140,7 @@ describe('Basic Graph Rendering', () => {
     const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
 
     cy.get('.react-flow__zoompane')
-      .trigger('wheel','topLeft', { deltaY: -200 })
+      .trigger('wheel', 'topLeft', { deltaY: -200 })
       .then(() => {
         const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
         expect(styleBeforeZoom).to.not.equal(styleAfterZoom);

cypress/integration/flow/inactive.spec.js

@@ -5,34 +5,27 @@ describe('Inactive Graph Rendering', () => {
     cy.get('.react-flow__renderer');
     cy.get('.react-flow__node').should('have.length', 4);
     cy.get('.react-flow__edge').should('have.length', 2);
-    cy.get('.react-flow__node')
+    cy.get('.react-flow__node').children('div').children('.react-flow__handle');
-      .children('div')
-      .children('.react-flow__handle');
   });
 
   it('tries to select a node by click', () => {
-    cy.get('.react-flow__node:first')
+    cy.get('.react-flow__node:first').click().should('have.not.class', 'selected');
-      .click()
-      .should('have.not.class', 'selected');
   });
 
   it('tries to select an edge by click', () => {
-    cy.get('.react-flow__edge:first')
+    cy.get('.react-flow__edge:first').click().should('have.not.class', 'selected');
-      .click()
-      .should('have.not.class', 'selected');
   });
 
   it('tries to do a selection', () => {
-    cy.get('body')
+    cy.get('body').type('{shift}', { release: false }).get('.react-flow__selectionpane').should('not.exist');
-      .type('{shift}', { release: false })
+
-      .get('.react-flow__selectionpane')
+    cy.get('body').type('{shift}', { release: true });
-      .should('not.exist');
   });
 
   it('tries to drag a node', () => {
     const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
 
-    cy.drag('.react-flow__node:first', { x: 500, y: 25 }).then($el => {
+    cy.drag('.react-flow__node:first', { x: 500, y: 25 }).then(($el) => {
       const styleAfterDrag = $el.css('transform');
       expect(styleBeforeDrag).to.equal(styleAfterDrag);
     });
@@ -58,14 +51,10 @@ describe('Inactive Graph Rendering', () => {
   });
 
   it('selects a node by click', () => {
-    cy.get('.react-flow__node:first')
+    cy.get('.react-flow__node:first').click().should('have.class', 'selected');
-      .click()
-      .should('have.class', 'selected');
   });
 
   it('selects an edge by click', () => {
-    cy.get('.react-flow__edge:first')
+    cy.get('.react-flow__edge:first').click().should('have.class', 'selected');
-      .click()
-      .should('have.class', 'selected');
   });
 });

dist/components/Nodes/utils.d.ts

@@ -0,0 +1,2 @@
+import { HandleElement } from '../../types';
+export declare const getHandleBounds: (selector: string, nodeElement: HTMLDivElement, parentBounds: ClientRect | DOMRect, k: number) => HandleElement[] | null;

dist/components/NodesSelection/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * The nodes selection rectangle gets displayed when a user
+ * made a selectio  with on or several nodes
+ */
 import React from 'react';
 declare const _default: React.MemoExoticComponent<() => JSX.Element>;
 export default _default;

dist/components/UserSelection/index.d.ts

@@ -1,3 +1,6 @@
+/**
+ * The user selection rectangle gets displayed when a user drags the mouse while pressing shift
+ */
 import React from 'react';
 declare type UserSelectionProps = {
     isInteractive: boolean;

dist/contexts/NodeIdContext.d.ts

@@ -2,6 +2,6 @@
 import { ElementId } from '../types';
 declare type ContextProps = ElementId | null;
 export declare const NodeIdContext: import("react").Context<ContextProps>;
-export declare const Provider: import("react").ProviderExoticComponent<import("react").ProviderProps<ContextProps>>;
+export declare const Provider: import("react").Provider<ContextProps>;
-export declare const Consumer: import("react").ExoticComponent<import("react").ConsumerProps<ContextProps>>;
+export declare const Consumer: import("react").Consumer<ContextProps>;
 export default NodeIdContext;

dist/hooks/useElementUpdater.d.ts

@@ -1,3 +1,3 @@
-import { Node, Edge } from '../types';
+import { Elements } from '../types';
-declare const useElementUpdater: (elements: (Node | Edge)[]) => void;
+declare const useElementUpdater: (elements: Elements) => void;
 export default useElementUpdater;

dist/store/hooks.d.ts

@@ -4,19 +4,15 @@ export declare const useStoreActions: <Result>(mapActions: (actions: import("eas
     d3Zoom: import("d3-zoom").ZoomBehavior<Element, unknown> | null;
     d3Selection: import("d3-selection").Selection<Element, unknown, null, undefined> | null;
     selection: import("../types").SelectionRect | null;
+    userSelectionRect: import("../types").SelectionRect;
     connectionPosition: import("../types").XYPosition;
     onConnect: import("../types").OnConnectFunc;
     setOnConnect: import("easy-peasy").Action<StoreModel, import("../types").OnConnectFunc>;
     setNodes: import("easy-peasy").Action<StoreModel, import("../types").Node[]>;
     setEdges: import("easy-peasy").Action<StoreModel, import("../types").Edge[]>;
-    updateNodeData: import("easy-peasy").Action<StoreModel, {
+    updateNodeDimensions: import("easy-peasy").Action<StoreModel, {
         id: string;
-        width: number;
+        nodeElement: HTMLDivElement;
-        height: number;
-        handleBounds: {
-            source: import("../types").HandleElement[] | null;
-            target: import("../types").HandleElement[] | null;
-        };
     }>;
     updateNodePos: import("easy-peasy").Action<StoreModel, {
         id: string;
@@ -27,7 +23,7 @@ export declare const useStoreActions: <Result>(mapActions: (actions: import("eas
         isActive: boolean;
         selection?: import("../types").SelectionRect | undefined;
     }>;
-    setSelectedElements: import("easy-peasy").Action<StoreModel, import("../types").Node | import("../types").Edge | (import("../types").Node | import("../types").Edge)[]>;
+    setSelectedElements: import("easy-peasy").Action<StoreModel, import("../types").Node | import("../types").Edge | import("../types").Elements>;
     updateSelection: import("easy-peasy").Action<StoreModel, import("../types").SelectionRect>;
     updateTransform: import("easy-peasy").Action<StoreModel, {
         x: number;
@@ -46,15 +42,18 @@ export declare const useStoreActions: <Result>(mapActions: (actions: import("eas
     setConnectionPosition: import("easy-peasy").Action<StoreModel, import("../types").XYPosition>;
     setConnectionSourceId: import("easy-peasy").Action<StoreModel, string | null>;
     setInteractive: import("easy-peasy").Action<StoreModel, boolean>;
+    setUserSelection: import("easy-peasy").Action<StoreModel, import("../types").XYPosition>;
+    updateUserSelection: import("easy-peasy").Action<StoreModel, import("../types").XYPosition>;
+    unsetUserSelection: import("easy-peasy").Action<StoreModel, void>;
 }, "1">) => Result) => Result;
 export declare const useStoreDispatch: () => import("easy-peasy").Dispatch<StoreModel, import("redux").Action<any>>;
-export declare const useStoreState: <Result>(mapState: (state: import("easy-peasy").IntermediateStateMapper<{
+export declare const useStoreState: <Result>(mapState: (state: import("easy-peasy").StateMapper<{
     width: number;
     height: number;
-    transform: [number, number, number];
+    transform: import("../types").Transform;
     nodes: import("../types").Node[];
     edges: import("../types").Edge[];
-    selectedElements: (import("../types").Node | import("../types").Edge)[];
+    selectedElements: import("../types").Elements;
     selectedNodesBbox: import("../types").Rect;
     d3Zoom: import("d3-zoom").ZoomBehavior<Element, unknown> | null;
     d3Selection: import("d3-selection").Selection<Element, unknown, null, undefined> | null;
@@ -62,10 +61,11 @@ export declare const useStoreState: <Result>(mapState: (state: import("easy-peas
     nodesSelectionActive: boolean;
     selectionActive: boolean;
     selection: import("../types").SelectionRect | null;
+    userSelectionRect: import("../types").SelectionRect;
     connectionSourceId: string | null;
     connectionPosition: import("../types").XYPosition;
     snapToGrid: boolean;
     snapGrid: [number, number];
     isInteractive: boolean;
     onConnect: import("../types").OnConnectFunc;
-}, "1">) => Result, dependencies?: any[] | undefined) => Result;
+}, "1">) => Result, equalityFn?: ((prev: Result, next: Result) => boolean) | undefined) => Result;

dist/store/index.d.ts

@@ -1,6 +1,6 @@
 import { Action } from 'easy-peasy';
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
-import { ElementId, Elements, Transform, Node, Edge, Rect, Dimensions, XYPosition, OnConnectFunc, SelectionRect, HandleElement } from '../types';
+import { ElementId, Elements, Transform, Node, Edge, Rect, Dimensions, XYPosition, OnConnectFunc, SelectionRect } from '../types';
 declare type TransformXYK = {
     x: number;
     y: number;
@@ -10,14 +10,9 @@ declare type NodePosUpdate = {
     id: ElementId;
     pos: XYPosition;
 };
-declare type NodeUpdate = {
+declare type NodeDimensionUpdate = {
     id: ElementId;
-    width: number;
+    nodeElement: HTMLDivElement;
-    height: number;
-    handleBounds: {
-        source: HandleElement[] | null;
-        target: HandleElement[] | null;
-    };
 };
 declare type SelectionUpdate = {
     isActive: boolean;
@@ -45,6 +40,7 @@ export interface StoreModel {
     nodesSelectionActive: boolean;
     selectionActive: boolean;
     selection: SelectionRect | null;
+    userSelectionRect: SelectionRect;
     connectionSourceId: ElementId | null;
     connectionPosition: XYPosition;
     snapToGrid: boolean;
@@ -54,7 +50,7 @@ export interface StoreModel {
     setOnConnect: Action<StoreModel, OnConnectFunc>;
     setNodes: Action<StoreModel, Node[]>;
     setEdges: Action<StoreModel, Edge[]>;
-    updateNodeData: Action<StoreModel, NodeUpdate>;
+    updateNodeDimensions: Action<StoreModel, NodeDimensionUpdate>;
     updateNodePos: Action<StoreModel, NodePosUpdate>;
     setSelection: Action<StoreModel, boolean>;
     setNodesSelection: Action<StoreModel, SelectionUpdate>;
@@ -67,88 +63,9 @@ export interface StoreModel {
     setConnectionPosition: Action<StoreModel, XYPosition>;
     setConnectionSourceId: Action<StoreModel, ElementId | null>;
     setInteractive: Action<StoreModel, boolean>;
+    setUserSelection: Action<StoreModel, XYPosition>;
+    updateUserSelection: Action<StoreModel, XYPosition>;
+    unsetUserSelection: Action<StoreModel>;
 }
-declare const store: {
+declare const store: import("easy-peasy").Store<StoreModel, import("easy-peasy").EasyPeasyConfig<{}, any>>;
-    getState: () => import("easy-peasy").IntermediateStateMapper<{
-        width: number;
-        height: number;
-        transform: [number, number, number];
-        nodes: Node[];
-        edges: Edge[];
-        selectedElements: (Node | Edge)[];
-        selectedNodesBbox: Rect;
-        d3Zoom: ZoomBehavior<Element, unknown> | null;
-        d3Selection: D3Selection<Element, unknown, null, undefined> | null;
-        d3Initialised: boolean;
-        nodesSelectionActive: boolean;
-        selectionActive: boolean;
-        selection: SelectionRect | null;
-        connectionSourceId: string | null;
-        connectionPosition: XYPosition;
-        snapToGrid: boolean;
-        snapGrid: [number, number];
-        isInteractive: boolean;
-        onConnect: OnConnectFunc;
-    }, "1">;
-    subscribe: (listener: () => void) => import("redux").Unsubscribe;
-    replaceReducer: (nextReducer: import("redux").Reducer<import("easy-peasy").IntermediateStateMapper<{
-        width: number;
-        height: number;
-        transform: [number, number, number];
-        nodes: Node[];
-        edges: Edge[];
-        selectedElements: (Node | Edge)[];
-        selectedNodesBbox: Rect;
-        d3Zoom: ZoomBehavior<Element, unknown> | null;
-        d3Selection: D3Selection<Element, unknown, null, undefined> | null;
-        d3Initialised: boolean;
-        nodesSelectionActive: boolean;
-        selectionActive: boolean;
-        selection: SelectionRect | null;
-        connectionSourceId: string | null;
-        connectionPosition: XYPosition;
-        snapToGrid: boolean;
-        snapGrid: [number, number];
-        isInteractive: boolean;
-        onConnect: OnConnectFunc;
-    }, "1">, import("redux").AnyAction>) => void;
-    dispatch: import("easy-peasy").Dispatch<StoreModel, import("redux").Action<any>>;
-    addModel: <ModelSlice extends object>(key: string, modelSlice: ModelSlice) => void;
-    clearMockedActions: () => void;
-    getActions: () => import("easy-peasy").ActionMapper<{
-        selectedNodesBbox: Rect;
-        d3Zoom: ZoomBehavior<Element, unknown> | null;
-        d3Selection: D3Selection<Element, unknown, null, undefined> | null;
-        selection: SelectionRect | null;
-        connectionPosition: XYPosition;
-        onConnect: OnConnectFunc;
-        setOnConnect: Action<StoreModel, OnConnectFunc>;
-        setNodes: Action<StoreModel, Node[]>;
-        setEdges: Action<StoreModel, Edge[]>;
-        updateNodeData: Action<StoreModel, NodeUpdate>;
-        updateNodePos: Action<StoreModel, NodePosUpdate>;
-        setSelection: Action<StoreModel, boolean>;
-        setNodesSelection: Action<StoreModel, SelectionUpdate>;
-        setSelectedElements: Action<StoreModel, Node | Edge | (Node | Edge)[]>;
-        updateSelection: Action<StoreModel, SelectionRect>;
-        updateTransform: Action<StoreModel, TransformXYK>;
-        updateSize: Action<StoreModel, Dimensions>;
-        initD3: Action<StoreModel, D3Init>;
-        setSnapGrid: Action<StoreModel, SetSnapGrid>;
-        setConnectionPosition: Action<StoreModel, XYPosition>;
-        setConnectionSourceId: Action<StoreModel, string | null>;
-        setInteractive: Action<StoreModel, boolean>;
-    }, "1">;
-    getListeners: () => import("easy-peasy").ListenerMapper<{
-        selectedNodesBbox: Rect;
-        d3Zoom: ZoomBehavior<Element, unknown> | null;
-        d3Selection: D3Selection<Element, unknown, null, undefined> | null;
-        selection: SelectionRect | null;
-        connectionPosition: XYPosition;
-        onConnect: OnConnectFunc;
-    }, "1">;
-    getMockedActions: () => import("easy-peasy").MockedAction[];
-    reconfigure: <NewStoreModel extends object>(model: NewStoreModel) => void;
-    removeModel: (key: string) => void;
-};
 export default store;

dist/utils/graph.d.ts

@@ -1,14 +1,14 @@
-import { Node, Edge, XYPosition, Rect, FitViewParams } from '../types';
+import { Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams } from '../types';
 export declare const isEdge: (element: Node | Edge) => boolean;
 export declare const isNode: (element: Node | Edge) => boolean;
-export declare const getOutgoers: (node: Node, elements: (Node | Edge)[]) => (Node | Edge)[];
+export declare const getOutgoers: (node: Node, elements: Elements) => Elements;
-export declare const removeElements: (elementsToRemove: (Node | Edge)[], elements: (Node | Edge)[]) => (Node | Edge)[];
+export declare const removeElements: (elementsToRemove: Elements, elements: Elements) => Elements;
-export declare const addEdge: (edgeParams: Edge, elements: (Node | Edge)[]) => (Node | Edge)[];
+export declare const addEdge: (edgeParams: Edge, elements: Elements) => Elements;
-export declare const parseElement: (element: Node | Edge, transform: [number, number, number], snapToGrid: boolean, snapGrid: [number, number]) => Node | Edge;
+export declare const parseElement: (element: Node | Edge, transform: Transform, snapToGrid: boolean, snapGrid: [number, number]) => Node | Edge;
 export declare const getBoundsofRects: (rect1: Rect, rect2: Rect) => Rect;
 export declare const getRectOfNodes: (nodes: Node[]) => Rect;
-export declare const graphPosToZoomedPos: ({ x, y }: XYPosition, [tx, ty, tScale]: [number, number, number]) => XYPosition;
+export declare const graphPosToZoomedPos: ({ x, y }: XYPosition, [tx, ty, tScale]: Transform) => XYPosition;
-export declare const getNodesInside: (nodes: Node[], rect: Rect, [tx, ty, tScale]?: [number, number, number], partially?: boolean) => Node[];
+export declare const getNodesInside: (nodes: Node[], rect: Rect, [tx, ty, tScale]?: Transform, partially?: boolean) => Node[];
 export declare const getConnectedEdges: (nodes: Node[], edges: Edge[]) => Edge[];
 export declare const fitView: ({ padding }?: FitViewParams) => void;
 export declare const zoomIn: () => void;

example/package.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react-dom": "^16.10.2",
+    "react-dom": "^16.13.1",
     "react-flow": "file:../",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.2.0"
+    "react-scripts": "3.4.1"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -5,54 +5,54 @@
   "module": "dist/ReactFlow.esm.js",
   "private": true,
   "dependencies": {
-    "@svgr/rollup": "^4.3.3",
+    "@svgr/rollup": "^5.3.0",
-    "@welldone-software/why-did-you-render": "^3.3.9",
+    "@welldone-software/why-did-you-render": "^4.0.6",
     "classnames": "^2.2.6",
     "d3-selection": "^1.4.1",
     "d3-zoom": "^1.8.3",
     "easy-peasy": "^3.3.0",
-    "fast-deep-equal": "^3.0.0-beta.2",
+    "fast-deep-equal": "^3.1.1",
-    "react-draggable": "^4.1.0",
+    "react-draggable": "^4.2.0",
     "resize-observer": "^1.0.0",
-    "scheduler": "^0.17.0"
+    "scheduler": "^0.19.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.4",
+    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-env": "^7.9.0",
-    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-react": "^7.9.4",
-    "@types/classnames": "^2.2.9",
+    "@types/classnames": "^2.2.10",
     "@types/d3": "^5.7.2",
-    "@types/react": "^16.9.22",
+    "@types/react": "^16.9.31",
-    "@types/react-dom": "^16.9.4",
+    "@types/react-dom": "^16.9.6",
-    "autoprefixer": "^9.7.4",
+    "autoprefixer": "^9.7.5",
-    "babel-loader": "^8.0.6",
+    "babel-loader": "^8.1.0",
-    "babel-preset-react-app": "^9.0.2",
+    "babel-preset-react-app": "^9.1.2",
-    "cypress": "^3.6.1",
+    "cypress": "^4.4.0",
     "husky": "^4.2.3",
     "postcss-nested": "^4.2.1",
-    "prettier": "1.19.1",
+    "prettier": "2.0.2",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
-    "rollup": "^1.31.1",
+    "rollup": "^2.3.2",
-    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-livereload": "^1.0.4",
+    "rollup-plugin-livereload": "^1.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.2",
-    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-postcss": "^2.5.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-serve": "^1.0.1",
-    "rollup-plugin-terser": "^5.1.2",
+    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-typescript2": "^0.26.0",
+    "rollup-plugin-typescript2": "^0.27.0",
-    "rollup-plugin-uglify": "^6.0.3",
+    "rollup-plugin-uglify": "^6.0.4",
-    "rollup-plugin-visualizer": "^3.3.1",
+    "rollup-plugin-visualizer": "^4.0.2",
-    "start-server-and-test": "^1.10.6",
+    "start-server-and-test": "^1.10.11",
-    "typescript": "^3.7.2",
+    "typescript": "^3.8.3",
-    "wait-on": "^3.3.0"
+    "wait-on": "^4.0.1"
   },
   "peerDependencies": {
-    "react": "^16.9.0"
+    "react": "^16.13.1"
   },
   "scripts": {
     "build": "rollup -c --environment NODE_ENV:production",

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)}
+        onStart={(evt) => onStart(evt as MouseEvent)}
-        onDrag={evt => onDrag(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 { useStoreActions, useStoreState } from '../../store/hooks';
-import { SelectionRect } from '../../types';
+import { XYPosition } from '../../types';
 
 type UserSelectionProps = {
   isInteractive: boolean;
 };
 
-const initialRect: SelectionRect = {
+function getMousePosition(evt: React.MouseEvent): XYPosition | void {
-  startX: 0,
-  startY: 0,
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-  draw: false,
-};
-
-function getMousePosition(evt: MouseEvent) {
   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 { setUserSelection, updateUserSelection, unsetUserSelection } = useStoreActions((a) => ({
-  const [rect, setRect] = useState(initialRect);
+    setUserSelection: a.setUserSelection,
-  const setSelection = useStoreActions(a => a.setSelection);
+    updateUserSelection: a.updateUserSelection,
-  const updateSelection = useStoreActions(a => a.updateSelection);
+    unsetUserSelection: a.unsetUserSelection,
-  const setNodesSelection = useStoreActions(a => a.setNodesSelection);
+  }));
 
   if (!isInteractive) {
     return null;
   }
 
-  useEffect(() => {
+  function onMouseDown(evt: React.MouseEvent): void {
-    function onMouseDown(evt: MouseEvent): void {
+    const mousePos = getMousePosition(evt);
-      const mousePos = getMousePosition(evt);
+    if (!mousePos) {
-      if (!mousePos) {
+      return;
-        return;
-      }
-
-      setRect(currentRect => ({
-        ...currentRect,
-        startX: mousePos.x,
-        startY: mousePos.y,
-        x: mousePos.x,
-        y: mousePos.y,
-        draw: true,
-      }));
-
-      setSelection(true);
     }
 
-    function onMouseMove(evt: MouseEvent): void {
+    setUserSelection(mousePos);
-      setRect(currentRect => {
+  }
-        if (!currentRect.draw) {
-          return currentRect;
-        }
 
-        const mousePos = getMousePosition(evt);
+  function onMouseMove(evt: React.MouseEvent): void {
-        if (!mousePos) {
+    const mousePos = getMousePosition(evt);
-          return currentRect;
-        }
 
-        const negativeX = mousePos.x < currentRect.startX;
+    if (!mousePos) {
-        const negativeY = mousePos.y < currentRect.startY;
+      return;
-        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;
-      });
     }
 
-    function onMouseUp() {
+    updateUserSelection(mousePos);
-      setRect(currentRect => {
+  }
-        setNodesSelection({ isActive: true, selection: currentRect });
-        setSelection(false);
 
-        return {
+  function onMouseUp() {
-          ...currentRect,
+    unsetUserSelection();
-          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]);
 
   return (
-    <div className="react-flow__selectionpane" ref={selectionPane}>
+    <div
-      {rect.draw && (
+      className="react-flow__selectionpane"
-        <div
+      onMouseDown={onMouseDown}
-          className="react-flow__selection"
+      onMouseMove={onMouseMove}
-          style={{
+      onMouseUp={onMouseUp}
-            width: rect.width,
+    >
-            height: rect.height,
+      <SelectionRect />
-            transform: `translate(${rect.x}px, ${rect.y}px)`,
-          }}
-        />
-      )}
     </div>
   );
 });

src/store/index.ts

@@ -67,6 +67,8 @@ export interface StoreModel {
   selectionActive: boolean;
   selection: SelectionRect | null;
 
+  userSelectionRect: SelectionRect;
+
   connectionSourceId: ElementId | null;
   connectionPosition: XYPosition;
 
@@ -108,6 +110,10 @@ export interface StoreModel {
   setConnectionSourceId: Action<StoreModel, ElementId | null>;
 
   setInteractive: Action<StoreModel, boolean>;
+
+  setUserSelection: Action<StoreModel, XYPosition>;
+  updateUserSelection: Action<StoreModel, XYPosition>;
+  unsetUserSelection: Action<StoreModel>;
 }
 
 const storeModel: StoreModel = {
@@ -127,6 +133,15 @@ const storeModel: StoreModel = {
   selectionActive: false,
   selection: null,
 
+  userSelectionRect: {
+    startX: 0,
+    startY: 0,
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    draw: false,
+  },
   connectionSourceId: null,
   connectionPosition: { x: 0, y: 0 },
 
@@ -152,7 +167,7 @@ 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);
+    const matchingNode = state.nodes.find((n) => n.id === id);
 
     // only update when size change
     if (
@@ -167,7 +182,7 @@ const storeModel: StoreModel = {
       target: getHandleBounds('.target', nodeElement, bounds, state.transform[2]),
     };
 
-    state.nodes.forEach(n => {
+    state.nodes.forEach((n) => {
       if (n.id === id) {
         n.__rg = {
           ...n.__rg,
@@ -191,7 +206,7 @@ const storeModel: StoreModel = {
       };
     }
 
-    state.nodes.forEach(n => {
+    state.nodes.forEach((n) => {
       if (n.id === id) {
         n.__rg = {
           ...n.__rg,
@@ -201,6 +216,66 @@ const storeModel: StoreModel = {
     });
   }),
 
+  setUserSelection: action((state, mousePos) => {
+    state.userSelectionRect = {
+      width: 0,
+      height: 0,
+      startX: mousePos.x,
+      startY: mousePos.y,
+      x: mousePos.x,
+      y: mousePos.y,
+      draw: true,
+    };
+    state.selectionActive = true;
+  }),
+
+  updateUserSelection: action((state, mousePos) => {
+    const startX = state.userSelectionRect.startX || 0;
+    const startY = state.userSelectionRect.startY || 0;
+
+    const negativeX = mousePos.x < startX;
+    const negativeY = mousePos.y < startY;
+    const nextRect = {
+      ...state.userSelectionRect,
+      x: negativeX ? mousePos.x : state.userSelectionRect.x,
+      y: negativeY ? mousePos.y : state.userSelectionRect.y,
+      width: negativeX ? startX - mousePos.x : mousePos.x - startX,
+      height: negativeY ? startY - mousePos.y : mousePos.y - startY,
+    };
+
+    const selectedNodes = getNodesInside(state.nodes, nextRect, state.transform);
+    const selectedEdges = getConnectedEdges(selectedNodes, state.edges);
+
+    const nextSelectedElements = [...selectedNodes, ...selectedEdges];
+    const selectedElementsUpdated = !isEqual(nextSelectedElements, state.selectedElements);
+
+    state.selection = nextRect;
+    state.selectedElements = selectedElementsUpdated ? nextSelectedElements : state.selectedElements;
+    state.userSelectionRect = nextRect;
+  }),
+
+  unsetUserSelection: action((state) => {
+    const selectedNodes = getNodesInside(state.nodes, state.userSelectionRect, state.transform);
+
+    if (!selectedNodes.length) {
+      state.selectionActive = false;
+      state.userSelectionRect = { ...state.userSelectionRect, draw: false };
+      state.nodesSelectionActive = false;
+      state.selectedElements = [];
+
+      return;
+    }
+
+    const selectedNodesBbox = getRectOfNodes(selectedNodes);
+
+    state.selection = state.userSelectionRect;
+    state.nodesSelectionActive = true;
+    state.selectedNodesBbox = selectedNodesBbox;
+
+    state.userSelectionRect = { ...state.userSelectionRect, draw: false };
+    state.selectionActive = false;
+  }),
+
   setSelection: action((state, isActive) => {
     state.selectionActive = isActive;
   }),