feat: allow customisation of how the select box works.

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

@@ -45,6 +45,7 @@ const FlowRenderer = ({
   onMoveEnd,
   selectionKeyCode,
   selectBoxOnDrag,
+  selectBoxMode,
   onSelectionStart,
   onSelectionEnd,
   multiSelectionKeyCode,
@@ -123,6 +124,7 @@ const FlowRenderer = ({
         onContextMenu={onContextMenu}
         onWheel={onWheel}
         isSelectionMode={isSelectionMode}
+        selectBoxMode={selectBoxMode}
       >
         {children}
         {nodesSelectionActive && (

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

@@ -59,6 +59,7 @@ const GraphView = ({
   connectionLineContainerStyle,
   selectionKeyCode,
   selectBoxOnDrag,
+  selectBoxMode,
   multiSelectionKeyCode,
   zoomActivationKeyCode,
   deleteKeyCode,
@@ -114,6 +115,7 @@ const GraphView = ({
       deleteKeyCode={deleteKeyCode}
       selectionKeyCode={selectionKeyCode}
       selectBoxOnDrag={selectBoxOnDrag}
+      selectBoxMode={selectBoxMode}
       onSelectionStart={onSelectionStart}
       onSelectionEnd={onSelectionEnd}
       multiSelectionKeyCode={multiSelectionKeyCode}

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

@@ -102,6 +102,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       deleteKeyCode = 'Backspace',
       selectionKeyCode = 'Shift',
       selectBoxOnDrag = false,
+      selectBoxMode = 'Contained',
       multiSelectionKeyCode = 'Meta',
       zoomActivationKeyCode = 'Meta',
       snapToGrid = false,
@@ -197,6 +198,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             connectionLineContainerStyle={connectionLineContainerStyle}
             selectionKeyCode={selectionKeyCode}
             selectBoxOnDrag={selectBoxOnDrag}
+            selectBoxMode={selectBoxMode}
             deleteKeyCode={deleteKeyCode}
             multiSelectionKeyCode={multiSelectionKeyCode}
             zoomActivationKeyCode={zoomActivationKeyCode}