Merge pull request #400 from namack/add-event-handlers

Add event handlers

README.md

@@ -79,23 +79,23 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `onlyRenderVisibleNodes`: default: `true`
 
 #### Event Handlers
-- `onElementClick(element: Node | Edge)`: called when user clicks node or edge click
+- `onElementClick(evt: MouseEvent, element: Node | Edge)`: called when user clicks node or edge click
 - `onElementsRemove(elements: Elements)`: called when user removes node or edge
-- `onNodeDragStart(node: Node)`: node drag start
+- `onNodeDragStart(evt: MouseEvent, node: Node)`: node drag start
-- `onNodeDragStop(node: Node)`: node drag stop
+- `onNodeDragStop(evt: MouseEvent, node: Node)`: node drag stop
 - `onNodeMouseEnter(evt: MouseEvent, node: Node)`: node mouse enter
 - `onNodeMouseMove(evt: MouseEvent, node: Node)`: node mouse move
 - `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
 - `onMoveEnd()`: called when user ends panning or zooming
 - `onSelectionChange(elements: Elements)`: called when user selects one or multiple elements
-- `onPaneClick()`: called when user clicks directly on the canvas
+- `onPaneClick(evt: MouseEvent)`: called when user clicks directly on the canvas
 
 #### Interaction
 - `nodesDraggable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `draggable` node option.

example/src/Basic/index.js

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 
 import ReactFlow, { removeElements, addEdge, isNode, Background } from 'react-flow-renderer';
 
-const onNodeDragStop = (node) => console.log('drag stop', node);
+const onNodeDragStop = (evt, node) => console.log('drag stop', node);
 const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
-const onElementClick = (element) => console.log('click', element);
+const onElementClick = (evt, element) => console.log('click', element);
 
 const initialElements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },

example/src/CustomNode/index.js

@@ -4,8 +4,8 @@ import ReactFlow, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'r
 
 import ColorSelectorNode from './ColorSelectorNode';
 
-const onNodeDragStop = (node) => console.log('drag stop', node);
+const onNodeDragStop = (evt, node) => console.log('drag stop', node);
-const onElementClick = (element) => console.log('click', element);
+const onElementClick = (evt, element) => console.log('click', element);
 const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
 
 const initBgColor = '#f0e742';

example/src/Edges/index.js

@@ -4,8 +4,8 @@ import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } fro
 
 import CustomEdge from './CustomEdge';
 
-const onNodeDragStop = (node) => console.log('drag stop', node);
+const onNodeDragStop = (evt, node) => console.log('drag stop', node);
-const onElementClick = (element) => console.log('click', element);
+const onElementClick = (evt, element) => console.log('click', element);
 const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
 
 const initialElements = [

example/src/Empty/index.js

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 
 import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
 
-const onNodeDragStop = (node) => console.log('drag stop', node);
+const onNodeDragStop = (evt, node) => console.log('drag stop', node);
 const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
-const onElementClick = (element) => console.log('click', element);
+const onElementClick = (evt, element) => console.log('click', element);
 
 const EmptyFlow = () => {
   const [elements, setElements] = useState([]);

example/src/Interaction/index.js

@@ -11,10 +11,10 @@ const initialElements = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
-const onNodeDragStart = (node) => console.log('drag start', node);
+const onNodeDragStart = (evt, node) => console.log('drag start', node);
-const onNodeDragStop = (node) => console.log('drag stop', node);
+const onNodeDragStop = (evt, node) => console.log('drag stop', node);
-const onElementClick = (element) => console.log('click', element);
+const onElementClick = (evt, element) => console.log('click', evt, element);
-const onPaneClick = () => console.log('onPaneClick');
+const onPaneClick = (evt) => console.log('onPaneClick', evt);
 
 const InteractionFlow = () => {
   const [elements, setElements] = useState(initialElements);

example/src/Overview/index.js

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 
 import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background, isNode } from 'react-flow-renderer';
 
-const onNodeDragStart = (node) => console.log('drag start', node);
+const onNodeDragStart = (evt, node) => console.log('drag start', node);
-const onNodeDragStop = (node) => console.log('drag stop', node);
+const onNodeDragStop = (evt, node) => console.log('drag stop', node);
-const onElementClick = (element) => console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element);
+const onElementClick = (evt, element) => console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element);
 const onSelectionChange = (elements) => console.log('selection change', elements);
 const onLoad = (reactFlowInstance) => {
   console.log('flow loaded:', reactFlowInstance);

example/src/Provider/index.js

@@ -5,7 +5,7 @@ import Sidebar from './Sidebar';
 
 import './provider.css';
 
-const onElementClick = (element) => console.log('click', element);
+const onElementClick = (evt, element) => console.log('click', element);
 
 const initialElements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },

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/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/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/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;
+  onNodeDragStop?: (evt: MouseEvent, node: Node) => void;
-  onClick?: (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;
+  onNodeDragStart?: (evt: MouseEvent, node: Node) => void;
-  onNodeDragStop?: (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(() => {
+  const onZoomPaneClick = useCallback((evt: React.MouseEvent) => {
-    onPaneClick?.();
+    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;
+  onNodeDragStart?: (evt: MouseEvent, node: Node) => void;
-  onNodeDragStop?: (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;
+  onNodeDragStart?: (evt: MouseEvent, node: Node) => void;
-  onNodeDragStop?: (node: Node) => void;
+  onNodeDragStop?: (evt: MouseEvent, node: Node) => void;
   onConnect?: (connection: Edge | Connection) => void;
   onConnectStart?: OnConnectStartFunc;
   onConnectStop?: () => void;

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?: (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?: (node: Node) => void;
+  onNodeDragStart?: (evt: ReactMouseEvent, node: Node) => void;
-  onNodeDragStop?: (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?: (edge: Edge) => void;
+  onClick?: (evt: ReactMouseEvent, edge: Edge) => void;
   animated?: boolean;
   selected?: boolean;
   data?: any;