feat(selection): add drag handlers closes #444

src/container/GraphView/index.tsx

@@ -46,6 +46,9 @@ export interface GraphViewProps {
   onMoveEnd?: (flowTransform?: FlowTransform) => 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}
       />
       <UserSelection selectionKeyPressed={selectionKeyPressed} />
-      {nodesSelectionActive && <NodesSelection />}
+      {nodesSelectionActive && (
+        <NodesSelection
+          onSelectionDragStart={onSelectionDragStart}
+          onSelectionDrag={onSelectionDrag}
+          onSelectionDragStop={onSelectionDragStop}
+        />
+      )}
       <div
         className="react-flow__zoompane"
         onClick={onZoomPaneClick}

src/container/ReactFlow/index.tsx

@@ -53,6 +53,9 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, '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 && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}