Merge branch 'main' of github.com:jackfishwick/react-flow into jackfishwick-main

2022-12-08 18:32:33 +01:00
parent 7c51a61f10 2f767408ca
commit badacf763b
17 changed files with 503 additions and 208 deletions
--- a/examples/vite-app/cypress/e2e/basic.cy.ts
+++ b/examples/vite-app/cypress/e2e/basic.cy.ts
@@ -50,9 +50,9 @@ describe('Basic Flow Rendering', () => {
    cy.get('body')
      .type('{shift}', { release: false })
      .wait(50)
-      .get('.react-flow__selectionpane')
-      .trigger('mousedown', 1000, 50, { which: 1, force: true })
-      .trigger('mousemove', 1, 400, { which: 1 })
+      .get('.react-flow__pane')
+      .trigger('mousedown', 1000, 50, { button: 0, force: true })
+      .trigger('mousemove', 1, 400, { button: 0 })
      .wait(50)
      .trigger('mouseup', 1, 200, { force: true });

@@ -70,9 +70,9 @@ describe('Basic Flow Rendering', () => {
  it('selects all nodes', () => {
    cy.get('body')
      .type('{shift}', { release: false })
-      .get('.react-flow__selectionpane')
-      .trigger('mousedown', 'topRight', { which: 1, force: true })
-      .trigger('mousemove', 'bottomLeft', { which: 1 })
+      .get('.react-flow__pane')
+      .trigger('mousedown', 'topRight', { button: 0, force: true })
+      .trigger('mousemove', 'bottomLeft', { button: 0 })
      .wait(50)
      .trigger('mouseup', 'bottomLeft', { force: true })
      .wait(50)
@@ -140,7 +140,7 @@ describe('Basic Flow Rendering', () => {
    // https://github.com/cypress-io/cypress/issues/3441
    cy.window().then((win) => {
      cy.get('.react-flow__pane')
-        .trigger('mousedown', 'topLeft', { which: 1, view: win })
+        .trigger('mousedown', 'topLeft', { button: 0, view: win })
        .trigger('mousemove', 'bottomLeft')
        .wait(50)
        .trigger('mouseup', { force: true, view: win })
--- a/examples/vite-app/cypress/e2e/controls.cy.ts
+++ b/examples/vite-app/cypress/e2e/controls.cy.ts
@@ -37,7 +37,7 @@ describe('Controls Testing', () => {
    // https://github.com/cypress-io/cypress/issues/3441
    cy.window().then((win) => {
      cy.get('.react-flow__renderer')
-        .trigger('mousedown', 'topLeft', { which: 1, view: win })
+        .trigger('mousedown', 'topLeft', { button: 0, view: win })
        .trigger('mousemove', 10, 400)
        .wait(50)
        .trigger('mouseup', 10, 400, { force: true, view: win })
--- a/examples/vite-app/cypress/e2e/empty.cy.ts
+++ b/examples/vite-app/cypress/e2e/empty.cy.ts
@@ -14,9 +14,9 @@ describe('Empty Flow Rendering', () => {
    cy.get('body')
      .type('{shift}', { release: false })
      .wait(50)
-      .get('.react-flow__selectionpane')
-      .trigger('mousedown', 400, 50, { which: 1, force: true })
-      .trigger('mousemove', 200, 200, { which: 1 })
+      .get('.react-flow__pane')
+      .trigger('mousedown', 400, 50, { button: 0, force: true })
+      .trigger('mousemove', 200, 200, { button: 0 })
      .wait(50)
      .trigger('mouseup', 200, 200, { force: true });

--- a/examples/vite-app/cypress/e2e/figma.cy.ts
+++ b/examples/vite-app/cypress/e2e/figma.cy.ts
@@ -0,0 +1,52 @@
+describe('Figma Flow UI', () => {
+  before(() => {
+    cy.visit('/figma');
+  });
+
+  it('renders a flow with three nodes', () => {
+    cy.get('.react-flow__renderer');
+    cy.get('.react-flow-basic-example'); // check if className prop works
+    cy.get('.react-flow__node').should('have.length', 4);
+    cy.get('.react-flow__edge').should('have.length', 2);
+    cy.get('.react-flow__node').children('.react-flow__handle');
+  });
+
+  it('renders a grid', () => {
+    cy.get('.react-flow__background');
+  });
+
+  it('selects all nodes by drag', () => {
+    cy.window().then((win) => {
+      cy.get('.react-flow__pane')
+        .trigger('mousedown', 'topLeft', { button: 0, view: win })
+        .trigger('mousemove', 'bottomRight', { force: true })
+        .wait(50)
+        .trigger('mouseup', { force: true, view: win })
+        .then(() => {
+          cy.get('.react-flow__node').should('have.class', 'selected');
+        });
+    });
+  });
+
+  it('removes selection', () => {
+    cy.get('.react-flow__pane').click('topLeft');
+    cy.get('.react-flow__node').should('not.have.class', 'selected');
+  });
+
+  it('drags using right click', () => {
+    cy.window().then((win) => {
+      cy.get('.react-flow__node:last').isWithinViewport();
+      cy.get('.react-flow__pane')
+        .trigger('mousedown', 'center', { button: 2, view: win })
+        .trigger('mousemove', 'bottom', { force: true })
+        .wait(50)
+        .trigger('mouseup', { force: true, view: win })
+        .then(() => {
+          cy.get('.react-flow__node').should('not.have.class', 'selected');
+          cy.get('.react-flow__node:last').isOutsideViewport();
+        });
+    });
+  });
+});
+
+export {};
--- a/examples/vite-app/cypress/e2e/interaction.cy.ts
+++ b/examples/vite-app/cypress/e2e/interaction.cy.ts
@@ -35,7 +35,18 @@ describe('Interaction Flow Rendering', () => {
  });

  it('tries to do a selection', () => {
-    cy.get('body').type('{shift}', { release: false }).get('.react-flow__selectionpane').should('not.exist');
+    cy.get('body')
+      .type('{shift}', { release: false })
+      .wait(50)
+      .get('.react-flow__pane')
+      .trigger('mousedown', 1000, 50, { button: 0, force: true })
+      .trigger('mousemove', 1, 400, { button: 0 })
+      .wait(50)
+      .get('.react-flow__selection')
+      .should('not.exist');
+
+    cy.get('.react-flow__pane').trigger('mouseup', 1, 200, { force: true });
+
    cy.get('body').type('{shift}', { release: true });
  });

--- a/examples/vite-app/cypress/e2e/minimap.cy.ts
+++ b/examples/vite-app/cypress/e2e/minimap.cy.ts
@@ -9,13 +9,12 @@ describe('Minimap Testing', () => {
  });

  it('has same number of nodes as the pane', () => {
-    const paneNodes = Cypress.$('.react-flow__node').length;
+    cy.get('.react-flow__minimap-node').then(() => {
+      const paneNodes = Cypress.$('.react-flow__node').length;
+      const minimapNodes = Cypress.$('.react-flow__minimap-node').length;

-    cy.wait(200);
-
-    const minimapNodes = Cypress.$('.react-flow__minimap-node').length;
-
-    expect(paneNodes).equal(minimapNodes);
+      expect(paneNodes).equal(minimapNodes);
+    });
  });

  it('changes zoom level', () => {
@@ -60,7 +59,7 @@ describe('Minimap Testing', () => {
    // https://github.com/cypress-io/cypress/issues/3441
    cy.window().then((win) => {
      cy.get('.react-flow__pane')
-        .trigger('mousedown', 'topLeft', { which: 1, view: win })
+        .trigger('mousedown', 'topLeft', { button: 0, view: win })
        .trigger('mousemove', 'bottomLeft')
        .wait(50)
        .trigger('mouseup', { force: true, view: win })
--- a/examples/vite-app/cypress/support/commands.ts
+++ b/examples/vite-app/cypress/support/commands.ts
@@ -36,23 +36,25 @@ Cypress.Commands.add('zoomPane', (wheelDelta: number) =>
 Cypress.Commands.add('isWithinViewport', { prevSubject: true }, (subject) => {
  const rect = subject[0].getBoundingClientRect();

-  expect(rect.top).to.be.within(0, window.innerHeight);
-  expect(rect.right).to.be.within(0, window.innerWidth);
-  expect(rect.bottom).to.be.within(0, window.innerHeight);
-  expect(rect.left).to.be.within(0, window.innerWidth);
+  return cy.window().then((window) => {
+    expect(rect.top).to.be.within(0, window.innerHeight);
+    expect(rect.right).to.be.within(0, window.innerWidth);
+    expect(rect.bottom).to.be.within(0, window.innerHeight);
+    expect(rect.left).to.be.within(0, window.innerWidth);

-  return subject;
+    return subject;
+  });
 });

 Cypress.Commands.add('isOutsideViewport', { prevSubject: true }, (subject) => {
  const rect = subject[0].getBoundingClientRect();

-  expect(rect.top).not.to.be.within(0, window.innerHeight);
-  expect(rect.right).not.to.be.within(0, window.innerWidth);
-  expect(rect.bottom).not.to.be.within(0, window.innerHeight);
-  expect(rect.left).not.to.be.within(0, window.innerWidth);
+  return cy.window().then((window) => {
+    expect(window.innerHeight < rect.top || rect.bottom < 0 || window.innerWidth < rect.left || rect.right < 0).to.be
+      .true;

-  return subject;
+    return subject;
+  });
 });

 export {};
--- a/examples/vite-app/src/App/index.tsx
+++ b/examples/vite-app/src/App/index.tsx
@@ -13,6 +13,7 @@ import Edges from '../examples/Edges';
 import EdgeRenderer from '../examples/EdgeRenderer';
 import EdgeTypes from '../examples/EdgeTypes';
 import Empty from '../examples/Empty';
+import Figma from '../examples/Figma';
 import FloatingEdges from '../examples/FloatingEdges';
 import Hidden from '../examples/Hidden';
 import Interaction from '../examples/Interaction';
@@ -120,6 +121,11 @@ const routes: IRoute[] = [
    path: '/empty',
    component: Empty,
  },
+  {
+    name: 'Figma',
+    path: '/figma',
+    component: Figma,
+  },
  {
    name: 'Floating Edges',
    path: '/floating-edges',
--- a/examples/vite-app/src/examples/Figma/index.tsx
+++ b/examples/vite-app/src/examples/Figma/index.tsx
@@ -0,0 +1,101 @@
+import ReactFlow, {
+  ReactFlowProvider,
+  Background,
+  BackgroundVariant,
+  Node,
+  Edge,
+  useReactFlow,
+  useKeyPress,
+} from 'reactflow';
+
+const MULTI_SELECT_KEY = ['Meta', 'Shift'];
+
+const initialNodes: Node[] = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+];
+
+const defaultEdgeOptions = { zIndex: 0 };
+
+const logEvent = (e: any) => console.log(e);
+
+const BasicFlow = () => {
+  const instance = useReactFlow();
+  const spaceBarPressed = useKeyPress('Space');
+
+  const updatePos = () => {
+    instance.setNodes((nodes) =>
+      nodes.map((node) => {
+        node.position = {
+          x: Math.random() * 400,
+          y: Math.random() * 400,
+        };
+
+        return node;
+      })
+    );
+  };
+
+  const logToObject = () => console.log(instance.toObject());
+  const resetTransform = () => instance.setViewport({ x: 0, y: 0, zoom: 1 });
+
+  const toggleClassnames = () => {
+    instance.setNodes((nodes) =>
+      nodes.map((node) => {
+        node.className = node.className === 'light' ? 'dark' : 'light';
+
+        return node;
+      })
+    );
+  };
+
+  return (
+    <ReactFlow
+      defaultNodes={initialNodes}
+      defaultEdges={initialEdges}
+      selectBoxOnDrag
+      selectBoxMode="Overlap"
+      panOnDrag={spaceBarPressed ? true : 'RightClick'}
+      panOnScroll
+      onPaneContextMenu={logEvent}
+      zoomActivationKeyCode={'Meta'}
+      multiSelectionKeyCode={MULTI_SELECT_KEY}
+      className="react-flow-basic-example"
+      minZoom={0.2}
+      maxZoom={4}
+      fitView
+      defaultEdgeOptions={defaultEdgeOptions}
+      selectNodesOnDrag={false}
+    >
+      <Background variant={BackgroundVariant.Lines} />
+
+      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
+        <button onClick={resetTransform} style={{ marginRight: 5 }}>
+          reset transform
+        </button>
+        <button onClick={updatePos} style={{ marginRight: 5 }}>
+          change pos
+        </button>
+        <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
+          toggle classnames
+        </button>
+        <button onClick={logToObject}>toObject</button>
+      </div>
+    </ReactFlow>
+  );
+};
+
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <BasicFlow />
+    </ReactFlowProvider>
+  );
+}
--- a/packages/core/src/components/UserSelection/index.tsx
+++ b/packages/core/src/components/UserSelection/index.tsx
@@ -4,20 +4,33 @@

 import { memo, useState, useRef } from 'react';
 import shallow from 'zustand/shallow';
+import cc from 'classcat';

+import { containerStyle } from '../../styles';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { getSelectionChanges } from '../../utils/changes';
 import { getConnectedEdges, getNodesInside } from '../../utils/graph';
-import type { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect } from '../../types';
+import type { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect, ReactFlowProps } from '../../types';

 type SelectionRect = Rect & {
  startX: number;
  startY: number;
-  draw: boolean;
 };

+type EventHandlers = { [key: string]: React.MouseEventHandler | React.WheelEventHandler | undefined };
+
 type UserSelectionProps = {
-  selectionKeyPressed: boolean;
+  isSelectionMode: boolean;
+  selectBoxMode?: ReactFlowProps['selectBoxMode'];
+  onSelectionStart?: (e: React.MouseEvent) => void;
+  onSelectionEnd?: (e: React.MouseEvent) => void;
+  onClick?: (e: React.MouseEvent) => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
+  onWheel?: (e: React.WheelEvent) => void;
+  onMouseEnter?: (e: React.MouseEvent) => void;
+  onMouseMove?: (e: React.MouseEvent) => void;
+  onMouseLeave?: (e: React.MouseEvent) => void;
+  children: React.ReactNode;
 };

 function getMousePosition(event: React.MouseEvent, containerBounds: DOMRect): XYPosition {
@@ -27,136 +40,205 @@ function getMousePosition(event: React.MouseEvent, containerBounds: DOMRect): XY
  };
 }

+const wrapHandler = (
+  handler: React.MouseEventHandler | undefined,
+  containerRef: React.MutableRefObject<HTMLDivElement | null>
+): React.MouseEventHandler => {
+  return (event: React.MouseEvent) => {
+    if (event.target !== containerRef.current) {
+      return;
+    }
+    handler?.(event);
+  };
+};
+
+const wrapHandlers = (
+  handlers: EventHandlers,
+  containerRef: React.MutableRefObject<HTMLDivElement | null>
+): EventHandlers =>
+  Object.keys(handlers).reduce((hls, key) => ({ ...hls, [key]: wrapHandler(handlers[key], containerRef) }), {});
+
 const selector = (s: ReactFlowState) => ({
  userSelectionActive: s.userSelectionActive,
  elementsSelectable: s.elementsSelectable,
+  paneDragging: s.paneDragging,
 });

-const initialRect: SelectionRect = {
-  startX: 0,
-  startY: 0,
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-  draw: false,
-};
+const UserSelection = memo(
+  ({
+    isSelectionMode,
+    selectBoxMode = 'Contained',
+    onSelectionStart,
+    onSelectionEnd,
+    onClick,
+    onContextMenu,
+    onWheel,
+    onMouseEnter: onPaneMouseEnter,
+    onMouseMove: onPaneMouseMove,
+    onMouseLeave: onPaneMouseLeave,
+    children,
+  }: UserSelectionProps) => {
+    const container = useRef<HTMLDivElement | null>(null);
+    const store = useStoreApi();
+    const prevSelectedNodesCount = useRef<number>(0);
+    const prevSelectedEdgesCount = useRef<number>(0);
+    const containerBounds = useRef<DOMRect>();
+    const [userSelectionRect, setUserSelectionRect] = useState<SelectionRect | null>(null);
+    const { userSelectionActive, elementsSelectable, paneDragging } = useStore(selector, shallow);

-const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => {
-  const store = useStoreApi();
-  const prevSelectedNodesCount = useRef<number>(0);
-  const prevSelectedEdgesCount = useRef<number>(0);
-  const containerBounds = useRef<DOMRect>();
-  const [userSelectionRect, setUserSelectionRect] = useState<SelectionRect>(initialRect);
-  const { userSelectionActive, elementsSelectable } = useStore(selector, shallow);
+    const resetUserSelection = () => {
+      setUserSelectionRect(null);

-  const renderUserSelectionPane = userSelectionActive || selectionKeyPressed;
+      store.setState({ userSelectionActive: false });

-  if (!elementsSelectable || !renderUserSelectionPane) {
-    return null;
-  }
-
-  const resetUserSelection = () => {
-    setUserSelectionRect(initialRect);
-
-    store.setState({ userSelectionActive: false });
-
-    prevSelectedNodesCount.current = 0;
-    prevSelectedEdgesCount.current = 0;
-  };
-
-  const onMouseDown = (event: React.MouseEvent): void => {
-    const reactFlowNode = (event.target as Element).closest('.react-flow')!;
-    containerBounds.current = reactFlowNode.getBoundingClientRect();
-
-    const mousePos = getMousePosition(event, containerBounds.current!);
-
-    setUserSelectionRect({
-      width: 0,
-      height: 0,
-      startX: mousePos.x,
-      startY: mousePos.y,
-      x: mousePos.x,
-      y: mousePos.y,
-      draw: true,
-    });
-
-    store.setState({ userSelectionActive: true, nodesSelectionActive: false });
-  };
-
-  const onMouseMove = (event: React.MouseEvent): void => {
-    if (!selectionKeyPressed || !userSelectionRect.draw || !containerBounds.current) {
-      return;
-    }
-
-    const mousePos = getMousePosition(event, containerBounds.current!);
-    const startX = userSelectionRect.startX ?? 0;
-    const startY = userSelectionRect.startY ?? 0;
-
-    const nextUserSelectRect = {
-      ...userSelectionRect,
-      x: mousePos.x < startX ? mousePos.x : startX,
-      y: mousePos.y < startY ? mousePos.y : startY,
-      width: Math.abs(mousePos.x - startX),
-      height: Math.abs(mousePos.y - startY),
+      prevSelectedNodesCount.current = 0;
+      prevSelectedEdgesCount.current = 0;
    };

-    const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState();
-    const nodes = Array.from(nodeInternals.values());
-    const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, false, true, nodeOrigin);
-    const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id);
-    const selectedNodeIds = selectedNodes.map((n) => n.id);
-
-    if (prevSelectedNodesCount.current !== selectedNodeIds.length) {
-      prevSelectedNodesCount.current = selectedNodeIds.length;
-      const changes = getSelectionChanges(nodes, selectedNodeIds) as NodeChange[];
-      if (changes.length) {
-        onNodesChange?.(changes);
+    const onMouseDown = (event: React.MouseEvent): void => {
+      if (!elementsSelectable || !isSelectionMode || event.button !== 0 || event.target !== container.current) {
+        return;
      }
-    }

-    if (prevSelectedEdgesCount.current !== selectedEdgeIds.length) {
-      prevSelectedEdgesCount.current = selectedEdgeIds.length;
-      const changes = getSelectionChanges(edges, selectedEdgeIds) as EdgeChange[];
-      if (changes.length) {
-        onEdgesChange?.(changes);
+      store.getState().resetSelectedElements();
+
+      const reactFlowNode = (event.target as Element).closest('.react-flow')!;
+      containerBounds.current = reactFlowNode.getBoundingClientRect();
+
+      const mousePos = getMousePosition(event, containerBounds.current!);
+
+      setUserSelectionRect({
+        width: 0,
+        height: 0,
+        startX: mousePos.x,
+        startY: mousePos.y,
+        x: mousePos.x,
+        y: mousePos.y,
+      });
+
+      onSelectionStart?.(event);
+    };
+
+    const onMouseMove = (event: React.MouseEvent): void => {
+      if (!isSelectionMode || !containerBounds.current || !userSelectionRect) {
+        return;
      }
-    }

-    setUserSelectionRect(nextUserSelectRect);
-  };
+      store.setState({ userSelectionActive: true, nodesSelectionActive: false });

-  const onMouseUp = () => {
-    store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
-    resetUserSelection();
-  };
+      const mousePos = getMousePosition(event, containerBounds.current!);
+      const startX = userSelectionRect.startX ?? 0;
+      const startY = userSelectionRect.startY ?? 0;

-  const onMouseLeave = () => {
-    store.setState({ nodesSelectionActive: false });
-    resetUserSelection();
-  };
+      const nextUserSelectRect = {
+        ...userSelectionRect,
+        x: mousePos.x < startX ? mousePos.x : startX,
+        y: mousePos.y < startY ? mousePos.y : startY,
+        width: Math.abs(mousePos.x - startX),
+        height: Math.abs(mousePos.y - startY),
+      };

-  return (
-    <div
-      className="react-flow__selectionpane react-flow__container"
-      onMouseDown={onMouseDown}
-      onMouseMove={onMouseMove}
-      onMouseUp={onMouseUp}
-      onMouseLeave={onMouseLeave}
-    >
-      {userSelectionRect.draw && (
-        <div
-          className="react-flow__selection react-flow__container"
-          style={{
-            width: userSelectionRect.width,
-            height: userSelectionRect.height,
-            transform: `translate(${userSelectionRect.x}px, ${userSelectionRect.y}px)`,
-          }}
-        />
-      )}
-    </div>
-  );
-});
+      const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState();
+      const nodes = Array.from(nodeInternals.values());
+      const selectedNodes = getNodesInside(
+        nodeInternals,
+        nextUserSelectRect,
+        transform,
+        selectBoxMode === 'Overlap',
+        true,
+        nodeOrigin
+      );
+      const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id);
+      const selectedNodeIds = selectedNodes.map((n) => n.id);
+
+      if (prevSelectedNodesCount.current !== selectedNodeIds.length) {
+        prevSelectedNodesCount.current = selectedNodeIds.length;
+        const changes = getSelectionChanges(nodes, selectedNodeIds) as NodeChange[];
+        if (changes.length) {
+          onNodesChange?.(changes);
+        }
+      }
+
+      if (prevSelectedEdgesCount.current !== selectedEdgeIds.length) {
+        prevSelectedEdgesCount.current = selectedEdgeIds.length;
+        const changes = getSelectionChanges(edges, selectedEdgeIds) as EdgeChange[];
+        if (changes.length) {
+          onEdgesChange?.(changes);
+        }
+      }
+
+      setUserSelectionRect(nextUserSelectRect);
+    };
+
+    const onMouseUp = (event: React.MouseEvent) => {
+      // We only want to trigger click functions when in selection mode if
+      // the user did not move the mouse.
+      if (!userSelectionActive && userSelectionRect && event.target === container.current) {
+        onClick?.(event);
+      }
+
+      store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
+
+      resetUserSelection();
+
+      onSelectionEnd?.(event);
+    };
+
+    const onMouseLeave = (event: React.MouseEvent) => {
+      if (userSelectionActive) {
+        store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
+        onSelectionEnd?.(event);
+      }
+      resetUserSelection();
+    };
+
+    const eventHandlers =
+      elementsSelectable && (isSelectionMode || userSelectionActive)
+        ? {
+            ...wrapHandlers({ onContextMenu, onWheel }, container),
+            onMouseDown,
+            onMouseMove,
+            onMouseUp,
+            onMouseLeave,
+          }
+        : wrapHandlers(
+            {
+              onClick,
+              onContextMenu,
+              onWheel,
+              onMouseEnter: onPaneMouseEnter,
+              onMouseMove: onPaneMouseMove,
+              onMouseLeave: onPaneMouseLeave,
+            },
+            container
+          );
+
+    return (
+      <div
+        className={cc([
+          'react-flow__pane',
+          'react-flow__container',
+          { dragging: paneDragging, selection: isSelectionMode },
+        ])}
+        {...eventHandlers}
+        ref={container}
+        style={containerStyle}
+      >
+        {children}
+        {userSelectionActive && userSelectionRect && (
+          <div
+            className="react-flow__selection react-flow__container"
+            style={{
+              width: userSelectionRect.width,
+              height: userSelectionRect.height,
+              transform: `translate(${userSelectionRect.x}px, ${userSelectionRect.y}px)`,
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+);

 UserSelection.displayName = 'UserSelection';

--- a/packages/core/src/container/FlowRenderer/Pane.tsx
+++ b/packages/core/src/container/FlowRenderer/Pane.tsx
@@ -1,34 +0,0 @@
-import type { MouseEvent } from 'react';
-import cc from 'classcat';
-
-import { useStore } from '../../hooks/useStore';
-import { containerStyle } from '../../styles';
-import type { ReactFlowState } from '../../types';
-import type { FlowRendererProps } from '.';
-
-type PaneProps = Pick<FlowRendererProps, 'onClick' | 'onContextMenu' | 'onWheel'> & {
-  onMouseEnter?: (event: MouseEvent) => void;
-  onMouseMove?: (event: MouseEvent) => void;
-  onMouseLeave?: (event: MouseEvent) => void;
-};
-
-const selector = (s: ReactFlowState) => s.paneDragging;
-
-function Pane({ onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onWheel }: PaneProps) {
-  const dragging = useStore(selector);
-
-  return (
-    <div
-      className={cc(['react-flow__pane', { dragging }])}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseMove={onMouseMove}
-      onMouseLeave={onMouseLeave}
-      onContextMenu={onContextMenu}
-      onWheel={onWheel}
-      style={containerStyle}
-    />
-  );
-}
-
-export default Pane;
--- a/packages/core/src/container/FlowRenderer/index.tsx
+++ b/packages/core/src/container/FlowRenderer/index.tsx
@@ -8,7 +8,6 @@ import { GraphViewProps } from '../GraphView';
 import ZoomPane from '../ZoomPane';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
-import Pane from './Pane';
 import type { ReactFlowState } from '../../types';

 export type FlowRendererProps = Omit<
@@ -44,6 +43,10 @@ const FlowRenderer = ({
  onMoveStart,
  onMoveEnd,
  selectionKeyCode,
+  selectBoxOnDrag,
+  selectBoxMode,
+  onSelectionStart,
+  onSelectionEnd,
  multiSelectionKeyCode,
  zoomActivationKeyCode,
  elementsSelectable,
@@ -68,6 +71,8 @@ const FlowRenderer = ({
  const nodesSelectionActive = useStore(selector);
  const selectionKeyPressed = useKeyPress(selectionKeyCode);

+  const isSelectionMode = selectionKeyPressed || (selectBoxOnDrag && panOnDrag !== true);
+
  useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });

  const onClick = (event: MouseEvent) => {
@@ -76,7 +81,13 @@ const FlowRenderer = ({
    store.setState({ nodesSelectionActive: false });
  };

-  const onContextMenu = onPaneContextMenu ? (event: MouseEvent) => onPaneContextMenu(event) : undefined;
+  const onContextMenu = (event: MouseEvent) => {
+    if (panOnDrag === 'RightClick') {
+      event.preventDefault();
+    } else {
+      onPaneContextMenu?.(event);
+    }
+  };
  const onWheel = onPaneScroll ? (event: WheelEvent) => onPaneScroll(event) : undefined;

  return (
@@ -84,7 +95,7 @@ const FlowRenderer = ({
      onMove={onMove}
      onMoveStart={onMoveStart}
      onMoveEnd={onMoveEnd}
-      selectionKeyPressed={selectionKeyPressed}
+      onPaneContextMenu={onPaneContextMenu}
      elementsSelectable={elementsSelectable}
      zoomOnScroll={zoomOnScroll}
      zoomOnPinch={zoomOnPinch}
@@ -92,7 +103,7 @@ const FlowRenderer = ({
      panOnScrollSpeed={panOnScrollSpeed}
      panOnScrollMode={panOnScrollMode}
      zoomOnDoubleClick={zoomOnDoubleClick}
-      panOnDrag={panOnDrag}
+      panOnDrag={!selectionKeyPressed && panOnDrag}
      defaultViewport={defaultViewport}
      translateExtent={translateExtent}
      minZoom={minZoom}
@@ -102,23 +113,27 @@ const FlowRenderer = ({
      noWheelClassName={noWheelClassName}
      noPanClassName={noPanClassName}
    >
-      {children}
-      <UserSelection selectionKeyPressed={selectionKeyPressed} />
-      {nodesSelectionActive && (
-        <NodesSelection
-          onSelectionContextMenu={onSelectionContextMenu}
-          noPanClassName={noPanClassName}
-          disableKeyboardA11y={disableKeyboardA11y}
-        />
-      )}
-      <Pane
+      <UserSelection
+        onSelectionStart={onSelectionStart}
+        onSelectionEnd={onSelectionEnd}
        onClick={onClick}
        onMouseEnter={onPaneMouseEnter}
        onMouseMove={onPaneMouseMove}
        onMouseLeave={onPaneMouseLeave}
        onContextMenu={onContextMenu}
        onWheel={onWheel}
-      />
+        isSelectionMode={!!isSelectionMode}
+        selectBoxMode={selectBoxMode}
+      >
+        {children}
+        {nodesSelectionActive && (
+          <NodesSelection
+            onSelectionContextMenu={onSelectionContextMenu}
+            noPanClassName={noPanClassName}
+            disableKeyboardA11y={disableKeyboardA11y}
+          />
+        )}
+      </UserSelection>
    </ZoomPane>
  );
 };
--- a/packages/core/src/container/GraphView/index.tsx
+++ b/packages/core/src/container/GraphView/index.tsx
@@ -51,11 +51,15 @@ const GraphView = ({
  onNodeMouseLeave,
  onNodeContextMenu,
  onSelectionContextMenu,
+  onSelectionStart,
+  onSelectionEnd,
  connectionLineType,
  connectionLineStyle,
  connectionLineComponent,
  connectionLineContainerStyle,
  selectionKeyCode,
+  selectBoxOnDrag,
+  selectBoxMode,
  multiSelectionKeyCode,
  zoomActivationKeyCode,
  deleteKeyCode,
@@ -110,6 +114,10 @@ const GraphView = ({
      onPaneScroll={onPaneScroll}
      deleteKeyCode={deleteKeyCode}
      selectionKeyCode={selectionKeyCode}
+      selectBoxOnDrag={selectBoxOnDrag}
+      selectBoxMode={selectBoxMode}
+      onSelectionStart={onSelectionStart}
+      onSelectionEnd={onSelectionEnd}
      multiSelectionKeyCode={multiSelectionKeyCode}
      zoomActivationKeyCode={zoomActivationKeyCode}
      elementsSelectable={elementsSelectable}
--- a/packages/core/src/container/ReactFlow/index.tsx
+++ b/packages/core/src/container/ReactFlow/index.tsx
@@ -92,6 +92,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
      onSelectionDrag,
      onSelectionDragStop,
      onSelectionContextMenu,
+      onSelectionStart,
+      onSelectionEnd,
      connectionMode = ConnectionMode.Strict,
      connectionLineType = ConnectionLineType.Bezier,
      connectionLineStyle,
@@ -99,6 +101,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
      connectionLineContainerStyle,
      deleteKeyCode = 'Backspace',
      selectionKeyCode = 'Shift',
+      selectBoxOnDrag = false,
+      selectBoxMode = 'Contained',
      multiSelectionKeyCode = 'Meta',
      zoomActivationKeyCode = 'Meta',
      snapToGrid = false,
@@ -193,6 +197,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
            connectionLineComponent={connectionLineComponent}
            connectionLineContainerStyle={connectionLineContainerStyle}
            selectionKeyCode={selectionKeyCode}
+            selectBoxOnDrag={selectBoxOnDrag}
+            selectBoxMode={selectBoxMode}
            deleteKeyCode={deleteKeyCode}
            multiSelectionKeyCode={multiSelectionKeyCode}
            zoomActivationKeyCode={zoomActivationKeyCode}
@@ -217,6 +223,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
            onPaneScroll={onPaneScroll}
            onPaneContextMenu={onPaneContextMenu}
            onSelectionContextMenu={onSelectionContextMenu}
+            onSelectionStart={onSelectionStart}
+            onSelectionEnd={onSelectionEnd}
            onEdgeUpdate={onEdgeUpdate}
            onEdgeContextMenu={onEdgeContextMenu}
            onEdgeDoubleClick={onEdgeDoubleClick}
--- a/packages/core/src/container/ZoomPane/index.tsx
+++ b/packages/core/src/container/ZoomPane/index.tsx
@@ -16,8 +16,13 @@ import type { Viewport, ReactFlowState } from '../../types';

 type ZoomPaneProps = Omit<
  FlowRendererProps,
-  'deleteKeyCode' | 'selectionKeyCode' | 'multiSelectionKeyCode' | 'noDragClassName' | 'disableKeyboardA11y'
-> & { selectionKeyPressed: boolean };
+  | 'deleteKeyCode'
+  | 'selectionKeyCode'
+  | 'multiSelectionKeyCode'
+  | 'noDragClassName'
+  | 'disableKeyboardA11y'
+  | 'selectBoxOnDrag'
+>;

 const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean =>
  prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k;
@@ -34,19 +39,20 @@ const selector = (s: ReactFlowState) => ({
  d3Zoom: s.d3Zoom,
  d3Selection: s.d3Selection,
  d3ZoomHandler: s.d3ZoomHandler,
+  userSelectionActive: s.userSelectionActive,
 });

 const ZoomPane = ({
  onMove,
  onMoveStart,
  onMoveEnd,
+  onPaneContextMenu,
  zoomOnScroll = true,
  zoomOnPinch = true,
  panOnScroll = false,
  panOnScrollSpeed = 0.5,
  panOnScrollMode = PanOnScrollMode.Free,
  zoomOnDoubleClick = true,
-  selectionKeyPressed,
  elementsSelectable,
  panOnDrag = true,
  defaultViewport,
@@ -62,9 +68,10 @@ const ZoomPane = ({
  const timerId = useRef<ReturnType<typeof setTimeout>>();
  const store = useStoreApi();
  const isZoomingOrPanning = useRef(false);
+  const hasMouseMoved = useRef(false);
  const zoomPane = useRef<HTMLDivElement>(null);
  const prevTransform = useRef<Viewport>({ x: 0, y: 0, zoom: 0 });
-  const { d3Zoom, d3Selection, d3ZoomHandler } = useStore(selector, shallow);
+  const { d3Zoom, d3Selection, d3ZoomHandler, userSelectionActive } = useStore(selector, shallow);
  const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);

  useResizeHandler(zoomPane);
@@ -94,7 +101,7 @@ const ZoomPane = ({

  useEffect(() => {
    if (d3Selection && d3Zoom) {
-      if (panOnScroll && !zoomActivationKeyPressed) {
+      if (panOnScroll && !zoomActivationKeyPressed && !userSelectionActive) {
        d3Selection.on('wheel.zoom', (event: any) => {
          if (isWrappedWithClass(event, noWheelClassName)) {
            return false;
@@ -138,6 +145,7 @@ const ZoomPane = ({
      }
    }
  }, [
+    userSelectionActive,
    panOnScroll,
    panOnScrollMode,
    d3Selection,
@@ -151,9 +159,9 @@ const ZoomPane = ({

  useEffect(() => {
    if (d3Zoom) {
-      if (selectionKeyPressed && !isZoomingOrPanning.current) {
+      if (userSelectionActive && !isZoomingOrPanning.current) {
        d3Zoom.on('zoom', null);
-      } else if (!selectionKeyPressed) {
+      } else if (!userSelectionActive) {
        d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
          const { onViewportChange } = store.getState();

@@ -165,10 +173,13 @@ const ZoomPane = ({
            onViewportChange?.(flowTransform);
            onMove?.(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
          }
+          if (panOnDrag === 'RightClick' && onPaneContextMenu) {
+            hasMouseMoved.current = true;
+          }
        });
      }
    }
-  }, [selectionKeyPressed, d3Zoom, onMove]);
+  }, [userSelectionActive, d3Zoom, onMove, panOnDrag, onPaneContextMenu]);

  useEffect(() => {
    if (d3Zoom) {
@@ -218,9 +229,19 @@ const ZoomPane = ({
            panOnScroll ? 150 : 0
          );
        }
+
+        if (
+          panOnDrag === 'RightClick' &&
+          onPaneContextMenu &&
+          !hasMouseMoved.current &&
+          event.sourceEvent?.button === 2
+        ) {
+          onPaneContextMenu(event.sourceEvent);
+        }
+        hasMouseMoved.current = false;
      });
    }
-  }, [d3Zoom, onMoveEnd, panOnScroll]);
+  }, [d3Zoom, onMoveEnd, panOnScroll, panOnDrag, onPaneContextMenu]);

  useEffect(() => {
    if (d3Zoom) {
@@ -242,7 +263,7 @@ const ZoomPane = ({
        }

        // during a selection we prevent all other interactions
-        if (selectionKeyPressed) {
+        if (userSelectionActive) {
          return false;
        }

@@ -275,18 +296,30 @@ const ZoomPane = ({
          return false;
        }

+        // if the pane is only movable using right clicks, prevent all other clicks
+        if (
+          panOnDrag === 'RightClick' &&
+          (event.type === 'mousedown' || event.type === 'touchstart') &&
+          event.button !== 2
+        ) {
+          return false;
+        }
+
+        // We only allow right clicks if pan on drag is set to right click
+        const buttonAllowed = panOnDrag === 'RightClick' ? 1 !== event.button : !event.button || event.button <= 1;
+
        // default filter for d3-zoom
-        return (!event.ctrlKey || event.type === 'wheel') && (!event.button || event.button <= 1);
+        return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed;
      });
    }
  }, [
+    userSelectionActive,
    d3Zoom,
    zoomOnScroll,
    zoomOnPinch,
    panOnScroll,
    zoomOnDoubleClick,
    panOnDrag,
-    selectionKeyPressed,
    elementsSelectable,
    zoomActivationKeyPressed,
  ]);
--- a/packages/core/src/styles/init.css
+++ b/packages/core/src/styles/init.css
@@ -11,6 +11,10 @@
  z-index: 1;
  cursor: grab;

+  &.selection {
+    cursor: pointer;
+  }
+
  &.dragging {
    cursor: grabbing;
  }
@@ -26,10 +30,14 @@
  z-index: 4;
 }

-.react-flow__selectionpane {
+.react-flow__pane {
  z-index: 5;
 }

+.react-flow__selection {
+  z-index: 6;
+}
+
 .react-flow__nodesselection-rect:focus,
 .react-flow__nodesselection-rect:focus-visible {
  outline: none;
--- a/packages/core/src/types/component-props.ts
+++ b/packages/core/src/types/component-props.ts
@@ -68,6 +68,8 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
  onSelectionDragStart?: SelectionDragHandler;
  onSelectionDrag?: SelectionDragHandler;
  onSelectionDragStop?: SelectionDragHandler;
+  onSelectionStart?: (event: ReactMouseEvent) => void;
+  onSelectionEnd?: (event: ReactMouseEvent) => void;
  onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
  onConnect?: OnConnect;
  onConnectStart?: OnConnectStart;
@@ -94,6 +96,8 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
  connectionMode?: ConnectionMode;
  deleteKeyCode?: KeyCode | null;
  selectionKeyCode?: KeyCode | null;
+  selectBoxOnDrag?: boolean;
+  selectBoxMode?: 'Overlap' | 'Contained';
  multiSelectionKeyCode?: KeyCode | null;
  zoomActivationKeyCode?: KeyCode | null;
  snapToGrid?: boolean;
@@ -107,7 +111,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
  initNodeOrigin?: NodeOrigin;
  elementsSelectable?: boolean;
  selectNodesOnDrag?: boolean;
-  panOnDrag?: boolean;
+  panOnDrag?: boolean | 'RightClick';
  minZoom?: number;
  maxZoom?: number;
  defaultViewport?: Viewport;