feat(props): add mouse event to onNodeDragStart, onNodeDragStop, onElementClick, and onPaneClick

src/components/Edges/wrapEdge.tsx

@@ -14,7 +14,7 @@ interface EdgeWrapperProps {
   labelShowBg?: boolean;
   labelBgStyle: CSSProperties;
   className?: string;
-  onClick?: (edge: Edge) => void;
+  onClick?: (evt: React.MouseEvent, edge: Edge) => void;
   animated?: boolean;
   selected: boolean;
   elementsSelectable: boolean;
@@ -51,7 +51,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
     const edgeGroupStyle: CSSProperties = {
       pointerEvents: elementsSelectable ? 'all' : 'none',
     };
-    const onEdgeClick = (): void => {
+    const onEdgeClick = (evt: React.MouseEvent<SVGGElement, MouseEvent>): void => {
       if (!elementsSelectable) {
         return;
       }
@@ -59,7 +59,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
       setSelectedElements({ id, source, target });
 
       if (onClick) {
-        onClick({ id, source, target, type });
+        onClick(evt, { id, source, target, type });
       }
     };
 

src/components/Nodes/wrapNode.tsx

@@ -44,7 +44,7 @@ interface OnDragStartParams {
   transform: Transform;
   position: XYPosition;
   setSelectedElements: (elms: Elements | Node | Edge) => void;
-  onNodeDragStart?: (node: Node) => void;
+  onNodeDragStart?: (evt: MouseEvent, node: Node) => void;
 }
 
 const onStart = ({
@@ -74,7 +74,7 @@ const onStart = ({
   setOffset({ x: offsetX, y: offsetY });
 
   if (onNodeDragStart) {
-    onNodeDragStart(node);
+    onNodeDragStart(evt as MouseEvent, node);
   }
 
   if (selectNodesOnDrag && isSelectable) {
@@ -110,6 +110,7 @@ const onDrag = ({ evt, setDragging, id, offset, transform, updateNodePos }: OnDr
 };
 
 interface OnDragStopParams {
+  evt: MouseEvent;
   isDragging: boolean;
   setDragging: (isDragging: boolean) => void;
   id: ElementId;
@@ -119,11 +120,12 @@ interface OnDragStopParams {
   selectNodesOnDrag: boolean;
   isSelectable: boolean;
   setSelectedElements: (elms: Elements | Node | Edge) => void;
-  onNodeDragStop?: (node: Node) => void;
-  onClick?: (node: Node) => void;
+  onNodeDragStop?: (evt: MouseEvent, node: Node) => void;
+  onClick?: (evt: MouseEvent, node: Node) => void;
 }
 
 const onStop = ({
+  evt,
   id,
   type,
   position,
@@ -148,14 +150,14 @@ const onStop = ({
     }
 
     if (onClick) {
-      return onClick(node);
+      return onClick(evt, node);
     }
   }
 
   setDragging(false);
 
   if (onNodeDragStop) {
-    onNodeDragStop(node);
+    onNodeDragStop(evt, node);
   }
 };
 
@@ -240,7 +242,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         setSelectedElements({ id: node.id, type: node.type } as Node);
 
         if (onClick) {
-          onClick(node);
+          return (evt: MouseEvent) => onClick(evt, node);
         }
       }
 
@@ -298,8 +300,9 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
           })
         }
         onDrag={(evt) => onDrag({ evt: evt as MouseEvent, setDragging, id, offset, transform, updateNodePos })}
-        onStop={() =>
+        onStop={(evt) =>
           onStop({
+            evt: evt as MouseEvent,
             onNodeDragStop,
             selectNodesOnDrag,
             isSelectable,

src/container/EdgeRenderer/index.tsx

@@ -10,7 +10,7 @@ interface EdgeRendererProps {
   edgeTypes: any;
   connectionLineType: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
-  onElementClick?: (element: Node | Edge) => void;
+  onElementClick?: (evt: React.MouseEvent, element: Node | Edge) => void;
   arrowHeadColor: string;
   markerEndId?: string;
 }

src/container/GraphView/index.tsx

@@ -26,14 +26,14 @@ import {
 
 export interface GraphViewProps {
   elements: Elements;
-  onElementClick?: (element: Node | Edge) => void;
+  onElementClick?: (evt: MouseEvent, element: Node | Edge) => void;
   onElementsRemove?: (elements: Elements) => void;
   onNodeMouseEnter?: (evt: MouseEvent, node: Node) => void;
   onNodeMouseMove?: (evt: MouseEvent, node: Node) => void;
   onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void;
   onNodeContextMenu?: (evt: MouseEvent, node: Node) => void;
-  onNodeDragStart?: (node: Node) => void;
-  onNodeDragStop?: (node: Node) => void;
+  onNodeDragStart?: (evt: MouseEvent, node: Node) => void;
+  onNodeDragStop?: (evt: MouseEvent, node: Node) => void;
   onConnect?: (connection: Connection | Edge) => void;
   onConnectStart?: OnConnectStartFunc;
   onConnectStop?: () => void;
@@ -41,7 +41,7 @@ export interface GraphViewProps {
   onMove?: (flowTransform?: FlowTransform) => void;
   onMoveStart?: (flowTransform?: FlowTransform) => void;
   onMoveEnd?: (flowTransform?: FlowTransform) => void;
-  onPaneClick?: () => void;
+  onPaneClick?: (evt: MouseEvent) => void;
   selectionKeyCode: number;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
@@ -125,8 +125,8 @@ const GraphView = ({
   const fitView = useStoreActions((actions) => actions.fitView);
   const zoom = useStoreActions((actions) => actions.zoom);
 
-  const onZoomPaneClick = useCallback(() => {
-    onPaneClick?.();
+  const onZoomPaneClick = useCallback((evt: React.MouseEvent) => {
+    onPaneClick?.(evt);
     unsetNodesSelection();
   }, [onPaneClick]);
 

src/container/NodeRenderer/index.tsx

@@ -7,13 +7,13 @@ import { Node, Transform, NodeTypesType, WrapNodeProps, Elements, Edge } from '.
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
   selectNodesOnDrag: boolean;
-  onElementClick?: (element: Node | Edge) => void;
+  onElementClick?: (evt: MouseEvent, element: Node | Edge) => void;
   onNodeMouseEnter?: (evt: MouseEvent, node: Node) => void;
   onNodeMouseMove?: (evt: MouseEvent, node: Node) => void;
   onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void;
   onNodeContextMenu?: (evt: MouseEvent, node: Node) => void;
-  onNodeDragStart?: (node: Node) => void;
-  onNodeDragStop?: (node: Node) => void;
+  onNodeDragStart?: (evt: MouseEvent, node: Node) => void;
+  onNodeDragStop?: (evt: MouseEvent, node: Node) => void;
   onlyRenderVisibleNodes?: boolean;
 }
 

src/container/ReactFlow/index.tsx

@@ -34,14 +34,14 @@ import '../../style.css';
 
 export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad'> {
   elements: Elements;
-  onElementClick?: (element: Node | Edge) => void;
+  onElementClick?: (evt: MouseEvent, element: Node | Edge) => void;
   onElementsRemove?: (elements: Elements) => void;
   onNodeMouseEnter?: (evt: MouseEvent, node: Node) => void;
   onNodeMouseMove?: (evt: MouseEvent, node: Node) => void;
   onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void;
   onNodeContextMenu?: (evt: MouseEvent, node: Node) => void;
-  onNodeDragStart?: (node: Node) => void;
-  onNodeDragStop?: (node: Node) => void;
+  onNodeDragStart?: (evt: MouseEvent, node: Node) => void;
+  onNodeDragStop?: (evt: MouseEvent, node: Node) => void;
   onConnect?: (connection: Edge | Connection) => void;
   onConnectStart?: OnConnectStartFunc;
   onConnectStop?: () => void;

src/types/index.ts

@@ -154,13 +154,13 @@ export interface WrapNodeProps {
   isDraggable: boolean;
   isConnectable: boolean;
   selectNodesOnDrag: boolean;
-  onClick?: (node: Node) => void;
+  onClick?: (evt: MouseEvent, node: Node) => void;
   onMouseEnter?: (evt: MouseEvent, node: Node) => void;
   onMouseMove?: (evt: MouseEvent, node: Node) => void;
   onMouseLeave?: (evt: MouseEvent, node: Node) => void;
   onContextMenu?: (evt: MouseEvent, node: Node) => void;
-  onNodeDragStart?: (node: Node) => void;
-  onNodeDragStop?: (node: Node) => void;
+  onNodeDragStart?: (evt: MouseEvent, node: Node) => void;
+  onNodeDragStop?: (evt: MouseEvent, node: Node) => void;
   style?: CSSProperties;
   className?: string;
   sourcePosition?: Position;
@@ -235,7 +235,7 @@ export interface EdgeCompProps {
   labelStyle?: CSSProperties;
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
-  onClick?: (edge: Edge) => void;
+  onClick?: (evt: MouseEvent, edge: Edge) => void;
   animated?: boolean;
   selected?: boolean;
   data?: any;