diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 693ba368..fa2fdc4f 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -8,7 +8,7 @@ import shallow from 'zustand/shallow'; 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; @@ -19,6 +19,7 @@ type EventHandlers = { [key: string]: React.MouseEventHandler | React.WheelEvent type UserSelectionProps = { isSelectionMode: boolean; + selectBoxMode?: ReactFlowProps['selectBoxMode']; onSelectionStart?: (e: React.MouseEvent) => void; onSelectionEnd?: (e: React.MouseEvent) => void; onClick?: (e: React.MouseEvent) => void; @@ -60,6 +61,7 @@ const selector = (s: ReactFlowState) => ({ const UserSelection = memo( ({ isSelectionMode, + selectBoxMode = 'Contained', onSelectionStart, onSelectionEnd, onClick, @@ -130,7 +132,14 @@ const UserSelection = memo( const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState(); const nodes = Array.from(nodeInternals.values()); - const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, true, true, nodeOrigin); + 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); diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index a5853a09..de1f3dd5 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/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 && ( diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index 54733d12..a0cedc43 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/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} diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index ca9aefbb..46e6971c 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -102,6 +102,7 @@ const ReactFlow = forwardRef( deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectBoxOnDrag = false, + selectBoxMode = 'Contained', multiSelectionKeyCode = 'Meta', zoomActivationKeyCode = 'Meta', snapToGrid = false, @@ -197,6 +198,7 @@ const ReactFlow = forwardRef( connectionLineContainerStyle={connectionLineContainerStyle} selectionKeyCode={selectionKeyCode} selectBoxOnDrag={selectBoxOnDrag} + selectBoxMode={selectBoxMode} deleteKeyCode={deleteKeyCode} multiSelectionKeyCode={multiSelectionKeyCode} zoomActivationKeyCode={zoomActivationKeyCode} diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index 27498ba0..a96f006e 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -97,6 +97,7 @@ export type ReactFlowProps = HTMLAttributes & { deleteKeyCode?: KeyCode | null; selectionKeyCode?: KeyCode | null; selectBoxOnDrag?: boolean; + selectBoxMode?: 'Overlap' | 'Contained'; multiSelectionKeyCode?: KeyCode | null; zoomActivationKeyCode?: KeyCode | null; snapToGrid?: boolean;