feat: add a selectBoxOnDrag prop which allows select box to be triggered without an additional key press.

packages/core/src/container/FlowRenderer/index.tsx

@@ -44,6 +44,7 @@ const FlowRenderer = ({
   onMoveStart,
   onMoveEnd,
   selectionKeyCode,
+  selectBoxOnDrag,
   multiSelectionKeyCode,
   zoomActivationKeyCode,
   elementsSelectable,
@@ -84,7 +85,6 @@ const FlowRenderer = ({
       onMove={onMove}
       onMoveStart={onMoveStart}
       onMoveEnd={onMoveEnd}
-      selectionKeyPressed={selectionKeyPressed}
       elementsSelectable={elementsSelectable}
       zoomOnScroll={zoomOnScroll}
       zoomOnPinch={zoomOnPinch}
@@ -103,7 +103,7 @@ const FlowRenderer = ({
       noPanClassName={noPanClassName}
     >
       {children}
-      <UserSelection selectionKeyPressed={selectionKeyPressed} />
+      <UserSelection selectionKeyPressed={selectionKeyPressed || (selectBoxOnDrag && !panOnDrag)} />
       {nodesSelectionActive && (
         <NodesSelection
           onSelectionContextMenu={onSelectionContextMenu}

packages/core/src/container/GraphView/index.tsx

@@ -56,6 +56,7 @@ const GraphView = ({
   connectionLineComponent,
   connectionLineContainerStyle,
   selectionKeyCode,
+  selectBoxOnDrag,
   multiSelectionKeyCode,
   zoomActivationKeyCode,
   deleteKeyCode,
@@ -110,6 +111,7 @@ const GraphView = ({
       onPaneScroll={onPaneScroll}
       deleteKeyCode={deleteKeyCode}
       selectionKeyCode={selectionKeyCode}
+      selectBoxOnDrag={selectBoxOnDrag}
       multiSelectionKeyCode={multiSelectionKeyCode}
       zoomActivationKeyCode={zoomActivationKeyCode}
       elementsSelectable={elementsSelectable}

packages/core/src/container/ReactFlow/index.tsx

@@ -99,6 +99,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       connectionLineContainerStyle,
       deleteKeyCode = 'Backspace',
       selectionKeyCode = 'Shift',
+      selectBoxOnDrag = false,
       multiSelectionKeyCode = 'Meta',
       zoomActivationKeyCode = 'Meta',
       snapToGrid = false,
@@ -193,6 +194,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             connectionLineComponent={connectionLineComponent}
             connectionLineContainerStyle={connectionLineContainerStyle}
             selectionKeyCode={selectionKeyCode}
+            selectBoxOnDrag={selectBoxOnDrag}
             deleteKeyCode={deleteKeyCode}
             multiSelectionKeyCode={multiSelectionKeyCode}
             zoomActivationKeyCode={zoomActivationKeyCode}

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'
+  | 'deleteKeyCode'
-> & { selectionKeyPressed: boolean };
+  | 'selectionKeyCode'
+  | 'multiSelectionKeyCode'
+  | 'noDragClassName'
+  | 'disableKeyboardA11y'
+  | 'selectBoxOnDrag'
+>;
 
 const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean =>
   prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k;
@@ -46,7 +51,6 @@ const ZoomPane = ({
   panOnScrollSpeed = 0.5,
   panOnScrollMode = PanOnScrollMode.Free,
   zoomOnDoubleClick = true,
-  selectionKeyPressed,
   elementsSelectable,
   panOnDrag = true,
   defaultViewport,
@@ -151,9 +155,9 @@ const ZoomPane = ({
 
   useEffect(() => {
     if (d3Zoom) {
-      if (selectionKeyPressed && !isZoomingOrPanning.current) {
+      if (store.getState().userSelectionActive && !isZoomingOrPanning.current) {
         d3Zoom.on('zoom', null);
-      } else if (!selectionKeyPressed) {
+      } else if (!store.getState().userSelectionActive) {
         d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
           const { onViewportChange } = store.getState();
 
@@ -168,7 +172,7 @@ const ZoomPane = ({
         });
       }
     }
-  }, [selectionKeyPressed, d3Zoom, onMove]);
+  }, [store, d3Zoom, onMove]);
 
   useEffect(() => {
     if (d3Zoom) {
@@ -238,7 +242,7 @@ const ZoomPane = ({
         }
 
         // during a selection we prevent all other interactions
-        if (selectionKeyPressed) {
+        if (store.getState().userSelectionActive) {
           return false;
         }
 
@@ -276,13 +280,13 @@ const ZoomPane = ({
       });
     }
   }, [
+    store,
     d3Zoom,
     zoomOnScroll,
     zoomOnPinch,
     panOnScroll,
     zoomOnDoubleClick,
     panOnDrag,
-    selectionKeyPressed,
     elementsSelectable,
     zoomActivationKeyPressed,
   ]);

packages/core/src/types/component-props.ts

@@ -94,6 +94,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
   connectionMode?: ConnectionMode;
   deleteKeyCode?: KeyCode | null;
   selectionKeyCode?: KeyCode | null;
+  selectBoxOnDrag?: boolean;
   multiSelectionKeyCode?: KeyCode | null;
   zoomActivationKeyCode?: KeyCode | null;
   snapToGrid?: boolean;