feat(props): add mouse event to onConnectStart and onConnectStop

README.md

@@ -88,8 +88,8 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `onNodeMouseLeave(evt: MouseEvent, node: Node)`: node mouse leave
 - `onNodeContextMenu(evt: MouseEvent, node: Node)`: node context menu
 - `onConnect({ source, target })`: called when user connects two nodes
-- `onConnectStart({ nodeId, handleType })`: called when user starts to drag connection line
+- `onConnectStart(evt: MouseEvent, { nodeId, handleType })`: called when user starts to drag connection line
-- `onConnectStop()`: called when user stops to drag connection line
+- `onConnectStop(evt: MouseEvent)`: called when user stops to drag connection line
 - `onLoad(reactFlowInstance)`: called after flow is initialized
 - `onMove()`: called when user is panning or zooming
 - `onMoveStart()`: called when user starts panning or zooming

example/src/Validation/index.js

@@ -15,9 +15,9 @@ const isValidConnection = (connection) => connection.target === 'B';
 
 const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
 
-const onConnectStart = ({ nodeId, handleType }) => console.log('on connect start', { nodeId, handleType });
+const onConnectStart = (evt, { nodeId, handleType }) => console.log('on connect start', { nodeId, handleType });
 
-const onConnectStop = () => console.log('on connect stop');
+const onConnectStop = (evt) => console.log('on connect stop', evt);
 
 const CustomInput = () => (
   <>

src/components/Handle/BaseHandle.tsx

@@ -66,7 +66,7 @@ function onMouseDown(
   setConnectionNodeId({ connectionNodeId: nodeId, connectionHandleType: handleType });
 
   if (onConnectStart) {
-    onConnectStart({ nodeId, handleType });
+    onConnectStart(evt, { nodeId, handleType });
   }
 
   function resetRecentHandle(): void {
@@ -142,7 +142,7 @@ function onMouseDown(
     setConnectionNodeId({ connectionNodeId: null, connectionHandleType: null });
 
     if (onConnectStop) {
-      onConnectStop();
+      onConnectStop(evt);
     }
 
     document.removeEventListener('mousemove', onMouseMove);

src/types/index.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, MouseEvent } from 'react';
+import { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
 
 export type ElementId = string;
 
@@ -154,13 +154,13 @@ export interface WrapNodeProps {
   isDraggable: boolean;
   isConnectable: boolean;
   selectNodesOnDrag: boolean;
-  onClick?: (evt: MouseEvent, node: Node) => void;
+  onClick?: (evt: ReactMouseEvent, node: Node) => void;
-  onMouseEnter?: (evt: MouseEvent, node: Node) => void;
+  onMouseEnter?: (evt: ReactMouseEvent, node: Node) => void;
-  onMouseMove?: (evt: MouseEvent, node: Node) => void;
+  onMouseMove?: (evt: ReactMouseEvent, node: Node) => void;
-  onMouseLeave?: (evt: MouseEvent, node: Node) => void;
+  onMouseLeave?: (evt: ReactMouseEvent, node: Node) => void;
-  onContextMenu?: (evt: MouseEvent, node: Node) => void;
+  onContextMenu?: (evt: ReactMouseEvent, node: Node) => void;
-  onNodeDragStart?: (evt: MouseEvent, node: Node) => void;
+  onNodeDragStart?: (evt: ReactMouseEvent, node: Node) => void;
-  onNodeDragStop?: (evt: MouseEvent, node: Node) => void;
+  onNodeDragStop?: (evt: ReactMouseEvent, node: Node) => void;
   style?: CSSProperties;
   className?: string;
   sourcePosition?: Position;
@@ -202,8 +202,8 @@ export type OnConnectStartParams = {
   nodeId: ElementId | null;
   handleType: HandleType | null;
 };
-export type OnConnectStartFunc = (params: OnConnectStartParams) => void;
+export type OnConnectStartFunc = (evt: ReactMouseEvent, params: OnConnectStartParams) => void;
-export type OnConnectStopFunc = () => void;
+export type OnConnectStopFunc = (evt: MouseEvent) => void;
 
 export type SetConnectionId = {
   connectionNodeId: ElementId | null;
@@ -235,7 +235,7 @@ export interface EdgeCompProps {
   labelStyle?: CSSProperties;
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
-  onClick?: (evt: MouseEvent, edge: Edge) => void;
+  onClick?: (evt: ReactMouseEvent, edge: Edge) => void;
   animated?: boolean;
   selected?: boolean;
   data?: any;