{
grid={grid}
onStart={(event) => onStart(event as MouseEvent)}
onDrag={(event) => onDrag(event as MouseEvent)}
+ onStop={(event) => onStop(event as MouseEvent)}
>
void;
onPaneClick?: (event: MouseEvent) => void;
onPaneContextMenu?: (event: MouseEvent) => void;
+ onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
+ onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
+ onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
selectionKeyCode: number;
nodeTypes: NodeTypesType;
edgeTypes: EdgeTypesType;
@@ -84,6 +87,9 @@ const GraphView = ({
onNodeContextMenu,
onNodeDragStart,
onNodeDragStop,
+ onSelectionDragStart,
+ onSelectionDrag,
+ onSelectionDragStop,
connectionLineType,
connectionLineStyle,
selectionKeyCode,
@@ -262,7 +268,13 @@ const GraphView = ({
markerEndId={markerEndId}
/>
- {nodesSelectionActive &&
}
+ {nodesSelectionActive && (
+
+ )}
, 'on
onMoveStart?: (flowTransform?: FlowTransform) => void;
onMoveEnd?: (flowTransform?: FlowTransform) => void;
onSelectionChange?: (elements: Elements | null) => void;
+ onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
+ onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
+ onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
onPaneClick?: (event: MouseEvent) => void;
onPaneContextMenu?: (event: MouseEvent) => void;
nodeTypes: NodeTypesType;
@@ -103,6 +106,9 @@ const ReactFlow = ({
onNodeDragStart,
onNodeDragStop,
onSelectionChange,
+ onSelectionDragStart,
+ onSelectionDrag,
+ onSelectionDragStop,
connectionLineType,
connectionLineStyle,
deleteKeyCode,
@@ -175,6 +181,9 @@ const ReactFlow = ({
paneMoveable={paneMoveable}
onPaneClick={onPaneClick}
onPaneContextMenu={onPaneContextMenu}
+ onSelectionDragStart={onSelectionDragStart}
+ onSelectionDrag={onSelectionDrag}
+ onSelectionDragStop={onSelectionDragStop}
/>
{onSelectionChange && }
{children}