feat: add events for when selection starts and ends.

packages/core/src/components/UserSelection/index.tsx

@@ -19,6 +19,8 @@ type EventHandlers = { [key: string]: React.MouseEventHandler | React.WheelEvent
 
 type UserSelectionProps = {
   isSelectionMode: boolean;
+  onSelectionStart?: (e: React.MouseEvent) => void;
+  onSelectionEnd?: (e: React.MouseEvent) => void;
   onClick?: (e: React.MouseEvent) => void;
   onContextMenu?: (e: React.MouseEvent) => void;
   onWheel?: (e: React.WheelEvent) => void;
@@ -55,7 +57,16 @@ const selector = (s: ReactFlowState) => ({
   elementsSelectable: s.elementsSelectable,
 });
 
-const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, children }: UserSelectionProps) => {
+const UserSelection = memo(
+  ({
+    isSelectionMode,
+    onSelectionStart,
+    onSelectionEnd,
+    onClick,
+    onContextMenu,
+    onWheel,
+    children,
+  }: UserSelectionProps) => {
     const container = useRef<HTMLDivElement | null>(null);
     const store = useStoreApi();
     const prevSelectedNodesCount = useRef<number>(0);
@@ -93,6 +104,8 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel,
         x: mousePos.x,
         y: mousePos.y,
       });
+
+      onSelectionStart?.(event);
     };
 
     const onMouseMove = (event: React.MouseEvent): void => {
@@ -150,11 +163,14 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel,
       store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
 
       resetUserSelection();
+
+      onSelectionEnd?.(event);
     };
 
-  const onMouseLeave = () => {
+    const onMouseLeave = (event: React.MouseEvent) => {
       if (userSelectionActive) {
         store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
+        onSelectionEnd?.(event);
       }
       resetUserSelection();
     };
@@ -192,7 +208,8 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel,
         )}
       </div>
     );
-});
+  }
+);
 
 UserSelection.displayName = 'UserSelection';
 

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

@@ -45,6 +45,8 @@ const FlowRenderer = ({
   onMoveEnd,
   selectionKeyCode,
   selectBoxOnDrag,
+  onSelectionStart,
+  onSelectionEnd,
   multiSelectionKeyCode,
   zoomActivationKeyCode,
   elementsSelectable,
@@ -112,6 +114,8 @@ const FlowRenderer = ({
       noPanClassName={noPanClassName}
     >
       <UserSelection
+        onSelectionStart={onSelectionStart}
+        onSelectionEnd={onSelectionEnd}
         onClick={onClick}
         onMouseEnter={onPaneMouseEnter}
         onMouseMove={onPaneMouseMove}

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

@@ -92,6 +92,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       onSelectionDrag,
       onSelectionDragStop,
       onSelectionContextMenu,
+      onSelectionStart,
+      onSelectionEnd,
       connectionMode = ConnectionMode.Strict,
       connectionLineType = ConnectionLineType.Bezier,
       connectionLineStyle,
@@ -219,6 +221,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onPaneScroll={onPaneScroll}
             onPaneContextMenu={onPaneContextMenu}
             onSelectionContextMenu={onSelectionContextMenu}
+            onSelectionStart={onSelectionStart}
+            onSelectionEnd={onSelectionEnd}
             onEdgeUpdate={onEdgeUpdate}
             onEdgeContextMenu={onEdgeContextMenu}
             onEdgeDoubleClick={onEdgeDoubleClick}

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

@@ -68,6 +68,8 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
   onSelectionDragStart?: SelectionDragHandler;
   onSelectionDrag?: SelectionDragHandler;
   onSelectionDragStop?: SelectionDragHandler;
+  onSelectionStart?: (event: ReactMouseEvent) => void;
+  onSelectionEnd?: (event: ReactMouseEvent) => void;
   onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
   onConnect?: OnConnect;
   onConnectStart?: OnConnectStart;