Merge pull request #417 from wbkd/develop

Develop

README.md

@@ -79,24 +79,24 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `onlyRenderVisibleNodes`: default: `true`
 
 #### Event Handlers
-- `onElementClick(evt: MouseEvent, element: Node | Edge)`: called when user clicks node or edge click
+- `onElementClick(event: MouseEvent, element: Node | Edge)`: called when user clicks node or edge click
 - `onElementsRemove(elements: Elements)`: called when user removes node or edge
-- `onNodeDragStart(evt: MouseEvent, node: Node)`: node drag start
+- `onNodeDragStart(event: MouseEvent, node: Node)`: node drag start
-- `onNodeDragStop(evt: MouseEvent, node: Node)`: node drag stop
+- `onNodeDragStop(event: MouseEvent, node: Node)`: node drag stop
-- `onNodeMouseEnter(evt: MouseEvent, node: Node)`: node mouse enter
+- `onNodeMouseEnter(event: MouseEvent, node: Node)`: node mouse enter
-- `onNodeMouseMove(evt: MouseEvent, node: Node)`: node mouse move
+- `onNodeMouseMove(event: MouseEvent, node: Node)`: node mouse move
-- `onNodeMouseLeave(evt: MouseEvent, node: Node)`: node mouse leave
+- `onNodeMouseLeave(event: MouseEvent, node: Node)`: node mouse leave
-- `onNodeContextMenu(evt: MouseEvent, node: Node)`: node context menu
+- `onNodeContextMenu(event: MouseEvent, node: Node)`: node context menu
 - `onConnect({ source, target })`: called when user connects two nodes
-- `onConnectStart(evt: MouseEvent, { nodeId, handleType })`: called when user starts to drag connection line
+- `onConnectStart(event: MouseEvent, { nodeId, handleType })`: called when user starts to drag connection line
-- `onConnectStop(evt: MouseEvent)`: called when user stops to drag connection line
+- `onConnectStop(event: 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(evt: MouseEvent)`: called when user clicks directly on the canvas
+- `onPaneClick(event: MouseEvent)`: called when user clicks directly on the canvas
-- `onPaneContextMenu(evt: MouseEvent)`: called when user does a right-click on the canvas
+- `onPaneContextMenu(event: MouseEvent)`: called when user does a right-click 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.
@@ -550,7 +550,7 @@ import React, { useEffect } from 'react';
 import { useStoreActions } from 'react-flow-renderer'
 
 const TransformUpdater = ({ x, y, zoom }) => {
-  const setTransform = useStoreActions(a => a.setInitTransform);
+  const setTransform = useStoreActions(actions => actions.setInitTransform);
 
   useEffect(() => {
     setTransform({ x, y, k: zoom })

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 = (evt, node) => console.log('drag stop', node);
 const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
-const onElementClick = (evt, element) => console.log('click', element);
+const onNodeDragStop = (event, node) => console.log('drag stop', node);
+const onElementClick = (event, 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,9 +4,9 @@ import ReactFlow, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'r
 
 import ColorSelectorNode from './ColorSelectorNode';
 
-const onNodeDragStop = (evt, node) => console.log('drag stop', node);
-const onElementClick = (evt, element) => console.log('click', element);
 const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
+const onNodeDragStop = (event, node) => console.log('drag stop', node);
+const onElementClick = (event, element) => console.log('click', element);
 
 const initBgColor = '#f0e742';
 
@@ -21,14 +21,14 @@ const CustomNodeFlow = () => {
   const [bgColor, setBgColor] = useState(initBgColor);
 
   useEffect(() => {
-    const onChange = (evt) => {
+    const onChange = (event) => {
       setElements((els) =>
         els.map((e) => {
           if (isEdge(e) || e.id !== '2') {
             return e;
           }
 
-          const color = evt.target.value;
+          const color = event.target.value;
 
           setBgColor(color);
 

example/src/Edges/index.js

@@ -4,9 +4,9 @@ import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } fro
 
 import CustomEdge from './CustomEdge';
 
-const onNodeDragStop = (evt, node) => console.log('drag stop', node);
-const onElementClick = (evt, element) => console.log('click', element);
 const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
+const onNodeDragStop = (event, node) => console.log('drag stop', node);
+const onElementClick = (event, element) => console.log('click', element);
 
 const initialElements = [
   { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },

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 = (evt, node) => console.log('drag stop', node);
 const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
-const onElementClick = (evt, element) => console.log('click', element);
+const onElementClick = (event, element) => console.log('click', element);
+const onNodeDragStop = (event, node) => console.log('drag stop', node);
 
 const EmptyFlow = () => {
   const [elements, setElements] = useState([]);

example/src/Hidden/index.js

@@ -42,7 +42,7 @@ const HiddenFlow = () => {
               id="ishidden"
               type="checkbox"
               checked={isHidden}
-              onChange={(evt) => setIsHidden(evt.target.checked)}
+              onChange={(event) => setIsHidden(event.target.checked)}
               className="react-flow__ishidden"
             />
           </label>

example/src/Horizontal/index.js

@@ -4,11 +4,11 @@ import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer';
 
 const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
 
-const onNodeMouseEnter = (evt, node) => console.log('mouse enter:', node);
+const onNodeMouseEnter = (event, node) => console.log('mouse enter:', node);
-const onNodeMouseMove = (evt, node) => console.log('mouse move:', node);
+const onNodeMouseMove = (event, node) => console.log('mouse move:', node);
-const onNodeMouseLeave = (evt, node) => console.log('mouse leave:', node);
+const onNodeMouseLeave = (event, node) => console.log('mouse leave:', node);
-const onNodeContextMenu = (evt, node) => {
+const onNodeContextMenu = (event, node) => {
-  evt.preventDefault();
+  event.preventDefault();
   console.log('context menu:', node);
 };
 

example/src/Interaction/index.js

@@ -11,11 +11,11 @@ const initialElements = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
-const onNodeDragStart = (evt, node) => console.log('drag start', node);
+const onNodeDragStart = (event, node) => console.log('drag start', node);
-const onNodeDragStop = (evt, node) => console.log('drag stop', node);
+const onNodeDragStop = (event, node) => console.log('drag stop', node);
-const onElementClick = (evt, element) => console.log('click', evt, element);
+const onElementClick = (event, element) => console.log('click', element);
-const onPaneClick = (evt) => console.log('onPaneClick', evt);
+const onPaneClick = (event) => console.log('onPaneClick', event);
-const onPaneContextMenu = (evt) => console.log('onPaneContextMenu', evt);
+const onPaneContextMenu = (event) => console.log('onPaneContextMenu', event);
 
 const InteractionFlow = () => {
   const [elements, setElements] = useState(initialElements);
@@ -56,7 +56,7 @@ const InteractionFlow = () => {
               id="draggable"
               type="checkbox"
               checked={isDraggable}
-              onChange={(evt) => setIsDraggable(evt.target.checked)}
+              onChange={(event) => setIsDraggable(event.target.checked)}
               className="react-flow__draggable"
             />
           </label>
@@ -68,7 +68,7 @@ const InteractionFlow = () => {
               id="connectable"
               type="checkbox"
               checked={isConnectable}
-              onChange={(evt) => setIsConnectable(evt.target.checked)}
+              onChange={(event) => setIsConnectable(event.target.checked)}
               className="react-flow__connectable"
             />
           </label>
@@ -80,7 +80,7 @@ const InteractionFlow = () => {
               id="selectable"
               type="checkbox"
               checked={isSelectable}
-              onChange={(evt) => setIsSelectable(evt.target.checked)}
+              onChange={(event) => setIsSelectable(event.target.checked)}
               className="react-flow__selectable"
             />
           </label>
@@ -92,7 +92,7 @@ const InteractionFlow = () => {
               id="zoomonscroll"
               type="checkbox"
               checked={zoomOnScroll}
-              onChange={(evt) => setZoomOnScroll(evt.target.checked)}
+              onChange={(event) => setZoomOnScroll(event.target.checked)}
               className="react-flow__zoomonscroll"
             />
           </label>
@@ -104,7 +104,7 @@ const InteractionFlow = () => {
               id="zoomondbl"
               type="checkbox"
               checked={zoomOnDoubleClick}
-              onChange={(evt) => setZoomOnDoubleClick(evt.target.checked)}
+              onChange={(event) => setZoomOnDoubleClick(event.target.checked)}
               className="react-flow__zoomondbl"
             />
           </label>
@@ -116,7 +116,7 @@ const InteractionFlow = () => {
               id="panemoveable"
               type="checkbox"
               checked={paneMoveable}
-              onChange={(evt) => setPaneMoveable(evt.target.checked)}
+              onChange={(event) => setPaneMoveable(event.target.checked)}
               className="react-flow__panemoveable"
             />
           </label>
@@ -128,7 +128,7 @@ const InteractionFlow = () => {
               id="capturezoompaneclick"
               type="checkbox"
               checked={captureZoomClick}
-              onChange={(evt) => setCaptureZoomClick(evt.target.checked)}
+              onChange={(event) => setCaptureZoomClick(event.target.checked)}
               className="react-flow__capturezoompaneclick"
             />
           </label>

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 = (evt, node) => console.log('drag start', node);
+const onNodeDragStart = (event, node) => console.log('drag start', node);
-const onNodeDragStop = (evt, node) => console.log('drag stop', node);
+const onNodeDragStop = (event, node) => console.log('drag stop', node);
-const onElementClick = (evt, element) => console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element);
+const onElementClick = (event, 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 = (evt, element) => console.log('click', element);
+const onElementClick = (event, element) => console.log('click', element);
 
 const initialElements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },

example/src/Stress/index.js

@@ -5,7 +5,6 @@ import { getElements } from './utils';
 
 const onLoad = (reactFlowInstance) => {
   reactFlowInstance.fitView();
-
   console.log(reactFlowInstance.getElements());
 };
 

example/src/Validation/index.js

@@ -11,13 +11,10 @@ const initialElements = [
   { id: 'C', type: 'customnode', position: { x: 250, y: 300 } },
 ];
 
-const isValidConnection = (connection) => connection.target === 'B';
-
 const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
-
+const isValidConnection = (connection) => connection.target === 'B';
-const onConnectStart = (evt, { nodeId, handleType }) => console.log('on connect start', { nodeId, handleType });
+const onConnectStart = (event, { nodeId, handleType }) => console.log('on connect start', { nodeId, handleType });
-
+const onConnectStop = (event) => console.log('on connect stop', event);
-const onConnectStop = (evt) => console.log('on connect stop', evt);
 
 const CustomInput = () => (
   <>
@@ -41,7 +38,10 @@ const nodeTypes = {
 
 const HorizontalFlow = () => {
   const [elements, setElements] = useState(initialElements);
-  const onConnect = (params) => setElements((els) => addEdge(params, els));
+  const onConnect = (params) => {
+    console.log('on connect', params);
+    setElements((els) => addEdge(params, els));
+  };
 
   return (
     <ReactFlow

src/components/Edges/wrapEdge.tsx

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

src/components/Handle/BaseHandle.tsx

@@ -39,7 +39,7 @@ type Result = {
 };
 
 function onMouseDown(
-  evt: ReactMouseEvent,
+  event: ReactMouseEvent,
   nodeId: ElementId,
   setConnectionNodeId: SetSourceIdFunc,
   setPosition: (pos: XYPosition) => void,
@@ -60,13 +60,13 @@ function onMouseDown(
   let recentHoveredHandle: Element;
 
   setPosition({
-    x: evt.clientX - containerBounds.left,
+    x: event.clientX - containerBounds.left,
-    y: evt.clientY - containerBounds.top,
+    y: event.clientY - containerBounds.top,
   });
   setConnectionNodeId({ connectionNodeId: nodeId, connectionHandleType: handleType });
 
   if (onConnectStart) {
-    onConnectStart(evt, { nodeId, handleType });
+    onConnectStart(event, { nodeId, handleType });
   }
 
   function resetRecentHandle(): void {
@@ -79,8 +79,8 @@ function onMouseDown(
   }
 
   // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
-  function checkElementBelowIsValid(evt: MouseEvent) {
+  function checkElementBelowIsValid(event: MouseEvent) {
-    const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
+    const elementBelow = document.elementFromPoint(event.clientX, event.clientY);
 
     const result: Result = {
       elementBelow,
@@ -110,13 +110,13 @@ function onMouseDown(
     return result;
   }
 
-  function onMouseMove(evt: MouseEvent) {
+  function onMouseMove(event: MouseEvent) {
     setPosition({
-      x: evt.clientX - containerBounds.left,
+      x: event.clientX - containerBounds.left,
-      y: evt.clientY - containerBounds.top,
+      y: event.clientY - containerBounds.top,
     });
 
-    const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(evt);
+    const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(event);
 
     if (!isHoveringHandle) {
       return resetRecentHandle();
@@ -131,8 +131,12 @@ function onMouseDown(
     }
   }
 
-  function onMouseUp(evt: MouseEvent) {
+  function onMouseUp(event: MouseEvent) {
-    const { connection, isValid } = checkElementBelowIsValid(evt);
+    const { connection, isValid } = checkElementBelowIsValid(event);
+
+    if (onConnectStop) {
+      onConnectStop(event);
+    }
 
     if (isValid && onConnect) {
       onConnect(connection);
@@ -141,10 +145,6 @@ function onMouseDown(
     resetRecentHandle();
     setConnectionNodeId({ connectionNodeId: null, connectionHandleType: null });
 
-    if (onConnectStop) {
-      onConnectStop(evt);
-    }
-
     document.removeEventListener('mousemove', onMouseMove);
     document.removeEventListener('mouseup', onMouseUp);
   }
@@ -186,9 +186,9 @@ const BaseHandle = ({
       data-nodeid={nodeIdWithHandleId}
       data-handlepos={position}
       className={handleClasses}
-      onMouseDown={(evt) =>
+      onMouseDown={(event) =>
         onMouseDown(
-          evt,
+          event,
           nodeIdWithHandleId,
           setConnectionNodeId,
           setPosition,

src/components/Handle/index.tsx

@@ -18,11 +18,11 @@ const Handle = ({
   onConnect,
 }: HandleProps) => {
   const nodeId = useContext(NodeIdContext) as ElementId;
-  const setPosition = useStoreActions((a) => a.setConnectionPosition);
+  const setPosition = useStoreActions((actions) => actions.setConnectionPosition);
-  const setConnectionNodeId = useStoreActions((a) => a.setConnectionNodeId);
+  const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
-  const onConnectAction = useStoreState((s) => s.onConnect);
+  const onConnectAction = useStoreState((state) => state.onConnect);
-  const onConnectStart = useStoreState((s) => s.onConnectStart);
+  const onConnectStart = useStoreState((state) => state.onConnectStart);
-  const onConnectStop = useStoreState((s) => s.onConnectStop);
+  const onConnectStop = useStoreState((state) => state.onConnectStop);
   const onConnectExtended = (params: Connection) => {
     if (onConnectAction) {
       onConnectAction(params);

src/components/Nodes/wrapNode.tsx

@@ -30,11 +30,11 @@ import {
 
 import { noop } from '../../utils';
 
-const getMouseEvent = (evt: MouseEvent | TouchEvent) =>
+const getMouseEvent = (event: MouseEvent | TouchEvent) =>
-  typeof TouchEvent !== 'undefined' && evt instanceof TouchEvent ? evt.touches[0] : (evt as MouseEvent);
+  typeof TouchEvent !== 'undefined' && event instanceof TouchEvent ? event.touches[0] : (event as MouseEvent);
 
 interface OnDragStartParams {
-  evt: MouseEvent | TouchEvent;
+  event: MouseEvent | TouchEvent;
   id: ElementId;
   type: string;
   data: any;
@@ -44,11 +44,11 @@ interface OnDragStartParams {
   transform: Transform;
   position: XYPosition;
   setSelectedElements: (elms: Elements | Node | Edge) => void;
-  onNodeDragStart?: (evt: MouseEvent, node: Node) => void;
+  onNodeDragStart?: (event: MouseEvent, node: Node) => void;
 }
 
 const onStart = ({
-  evt,
+  event,
   onNodeDragStart,
   id,
   type,
@@ -60,11 +60,11 @@ const onStart = ({
   setSelectedElements,
   isSelectable,
 }: OnDragStartParams): false | void => {
-  const startEvt = getMouseEvent(evt);
+  const startEvent = getMouseEvent(event);
 
   const scaledClient: XYPosition = {
-    x: startEvt.clientX * (1 / transform[2]),
+    x: startEvent.clientX * (1 / transform[2]),
-    y: startEvt.clientY * (1 / transform[2]),
+    y: startEvent.clientY * (1 / transform[2]),
   };
 
   const offsetX = scaledClient.x - position.x - transform[0];
@@ -74,7 +74,7 @@ const onStart = ({
   setOffset({ x: offsetX, y: offsetY });
 
   if (onNodeDragStart) {
-    onNodeDragStart(evt as MouseEvent, node);
+    onNodeDragStart(event as MouseEvent, node);
   }
 
   if (selectNodesOnDrag && isSelectable) {
@@ -83,7 +83,7 @@ const onStart = ({
 };
 
 interface OnDragParams {
-  evt: MouseEvent | TouchEvent;
+  event: MouseEvent | TouchEvent;
   setDragging: (isDragging: boolean) => void;
   id: ElementId;
   offset: XYPosition;
@@ -91,12 +91,12 @@ interface OnDragParams {
   updateNodePos: (params: NodePosUpdate) => void;
 }
 
-const onDrag = ({ evt, setDragging, id, offset, transform, updateNodePos }: OnDragParams): void => {
+const onDrag = ({ event, setDragging, id, offset, transform, updateNodePos }: OnDragParams): void => {
-  const dragEvt = getMouseEvent(evt);
+  const dragEvent = getMouseEvent(event);
 
   const scaledClient = {
-    x: dragEvt.clientX / transform[2],
+    x: dragEvent.clientX / transform[2],
-    y: dragEvt.clientY / transform[2],
+    y: dragEvent.clientY / transform[2],
   };
 
   setDragging(true);
@@ -110,7 +110,7 @@ const onDrag = ({ evt, setDragging, id, offset, transform, updateNodePos }: OnDr
 };
 
 interface OnDragStopParams {
-  evt: MouseEvent;
+  event: MouseEvent;
   isDragging: boolean;
   setDragging: (isDragging: boolean) => void;
   id: ElementId;
@@ -120,12 +120,12 @@ interface OnDragStopParams {
   selectNodesOnDrag: boolean;
   isSelectable: boolean;
   setSelectedElements: (elms: Elements | Node | Edge) => void;
-  onNodeDragStop?: (evt: MouseEvent, node: Node) => void;
+  onNodeDragStop?: (event: MouseEvent, node: Node) => void;
-  onClick?: (evt: MouseEvent, node: Node) => void;
+  onClick?: (event: MouseEvent, node: Node) => void;
 }
 
 const onStop = ({
-  evt,
+  event,
   id,
   type,
   position,
@@ -150,14 +150,14 @@ const onStop = ({
     }
 
     if (onClick) {
-      return onClick(evt, node);
+      return onClick(event, node);
     }
   }
 
   setDragging(false);
 
   if (onNodeDragStop) {
-    onNodeDragStop(evt, node);
+    onNodeDragStop(event, node);
   }
 };
 
@@ -187,9 +187,9 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     targetPosition,
     isHidden,
   }: WrapNodeProps) => {
-    const updateNodeDimensions = useStoreActions((a) => a.updateNodeDimensions);
+    const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
-    const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
+    const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
-    const updateNodePos = useStoreActions((a) => a.updateNodePos);
+    const updateNodePos = useStoreActions((actions) => actions.updateNodePos);
 
     const nodeElement = useRef<HTMLDivElement>(null);
     const [offset, setOffset] = useState({ x: 0, y: 0 });
@@ -210,7 +210,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         return noop;
       }
 
-      return (evt: MouseEvent) => onMouseEnter(evt, node);
+      return (event: MouseEvent) => onMouseEnter(event, node);
     }, [onMouseEnter, isDragging]);
 
     const onMouseMoveHandler = useMemo(() => {
@@ -218,7 +218,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         return noop;
       }
 
-      return (evt: MouseEvent) => onMouseMove(evt, node);
+      return (event: MouseEvent) => onMouseMove(event, node);
     }, [onMouseMove, isDragging]);
 
     const onMouseLeaveHandler = useMemo(() => {
@@ -226,7 +226,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         return noop;
       }
 
-      return (evt: MouseEvent) => onMouseLeave(evt, node);
+      return (event: MouseEvent) => onMouseLeave(event, node);
     }, [onMouseLeave, isDragging]);
 
     const onContextMenuHandler = useMemo(() => {
@@ -234,7 +234,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         return noop;
       }
 
-      return (evt: MouseEvent) => onContextMenu(evt, node);
+      return (event: MouseEvent) => onContextMenu(event, node);
     }, [onContextMenu]);
 
     const onSelectNodeHandler = useCallback(() => {
@@ -242,7 +242,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         setSelectedElements({ id: node.id, type: node.type } as Node);
 
         if (onClick) {
-          return (evt: MouseEvent) => onClick(evt, node);
+          return (event: MouseEvent) => onClick(event, node);
         }
       }
 
@@ -284,9 +284,9 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
     return (
       <DraggableCore
-        onStart={(evt) =>
+        onStart={(event) =>
           onStart({
-            evt: evt as MouseEvent,
+            event: event as MouseEvent,
             selectNodesOnDrag,
             isSelectable,
             onNodeDragStart,
@@ -299,10 +299,10 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
             setSelectedElements,
           })
         }
-        onDrag={(evt) => onDrag({ evt: evt as MouseEvent, setDragging, id, offset, transform, updateNodePos })}
+        onDrag={(event) => onDrag({ event: event as MouseEvent, setDragging, id, offset, transform, updateNodePos })}
-        onStop={(evt) =>
+        onStop={(event) =>
           onStop({
-            evt: evt as MouseEvent,
+            event: event as MouseEvent,
             onNodeDragStop,
             selectNodesOnDrag,
             isSelectable,

src/components/NodesSelection/index.tsx

@@ -46,10 +46,10 @@ export default () => {
     return null;
   }
 
-  const onStart = (evt: MouseEvent) => {
+  const onStart = (event: MouseEvent) => {
     const scaledClient: XYPosition = {
-      x: evt.clientX / tScale,
+      x: event.clientX / tScale,
-      y: evt.clientY / tScale,
+      y: event.clientY / tScale,
     };
     const offsetX: number = scaledClient.x - selectedNodesBbox.x - tX;
     const offsetY: number = scaledClient.y - selectedNodesBbox.y - tY;
@@ -67,10 +67,10 @@ export default () => {
     }
   };
 
-  const onDrag = (evt: MouseEvent) => {
+  const onDrag = (event: MouseEvent) => {
     const scaledClient: XYPosition = {
-      x: evt.clientX / tScale,
+      x: event.clientX / tScale,
-      y: evt.clientY / tScale,
+      y: event.clientY / tScale,
     };
 
     if (selectedElements) {
@@ -95,8 +95,8 @@ export default () => {
       <ReactDraggable
         scale={tScale}
         grid={grid}
-        onStart={(evt) => onStart(evt as MouseEvent)}
+        onStart={(event) => onStart(event as MouseEvent)}
-        onDrag={(evt) => onDrag(evt as MouseEvent)}
+        onDrag={(event) => onDrag(event as MouseEvent)}
       >
         <div
           className="react-flow__nodesselection-rect"

src/components/UserSelection/index.tsx

@@ -11,7 +11,7 @@ type UserSelectionProps = {
   selectionKeyPressed: boolean;
 };
 
-function getMousePosition(evt: React.MouseEvent): XYPosition | void {
+function getMousePosition(event: React.MouseEvent): XYPosition | void {
   const reactFlowNode = document.querySelector('.react-flow');
   if (!reactFlowNode) {
     return;
@@ -20,13 +20,13 @@ function getMousePosition(evt: React.MouseEvent): XYPosition | void {
   const containerBounds = reactFlowNode.getBoundingClientRect();
 
   return {
-    x: evt.clientX - containerBounds.left,
+    x: event.clientX - containerBounds.left,
-    y: evt.clientY - containerBounds.top,
+    y: event.clientY - containerBounds.top,
   };
 }
 
 const SelectionRect = () => {
-  const userSelectionRect = useStoreState((s) => s.userSelectionRect);
+  const userSelectionRect = useStoreState((state) => state.userSelectionRect);
 
   if (!userSelectionRect.draw) {
     return null;
@@ -45,12 +45,12 @@ const SelectionRect = () => {
 };
 
 export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
-  const selectionActive = useStoreState((s) => s.selectionActive);
+  const selectionActive = useStoreState((state) => state.selectionActive);
-  const elementsSelectable = useStoreState((s) => s.elementsSelectable);
+  const elementsSelectable = useStoreState((state) => state.elementsSelectable);
 
-  const setUserSelection = useStoreActions((a) => a.setUserSelection);
+  const setUserSelection = useStoreActions((actions) => actions.setUserSelection);
-  const updateUserSelection = useStoreActions((a) => a.updateUserSelection);
+  const updateUserSelection = useStoreActions((actions) => actions.updateUserSelection);
-  const unsetUserSelection = useStoreActions((a) => a.unsetUserSelection);
+  const unsetUserSelection = useStoreActions((actions) => actions.unsetUserSelection);
   const renderUserSelectionPane = selectionActive || selectionKeyPressed;
 
   useEffect(() => {
@@ -63,8 +63,8 @@ export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
     return null;
   }
 
-  const onMouseDown = (evt: React.MouseEvent): void => {
+  const onMouseDown = (event: React.MouseEvent): void => {
-    const mousePos = getMousePosition(evt);
+    const mousePos = getMousePosition(event);
     if (!mousePos) {
       return;
     }
@@ -72,11 +72,11 @@ export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
     setUserSelection(mousePos);
   };
 
-  const onMouseMove = (evt: React.MouseEvent): void => {
+  const onMouseMove = (event: React.MouseEvent): void => {
     if (!selectionKeyPressed || !selectionActive) {
       return;
     }
-    const mousePos = getMousePosition(evt);
+    const mousePos = getMousePosition(event);
 
     if (!mousePos) {
       return;

src/container/EdgeRenderer/index.tsx

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

src/container/GraphView/index.tsx

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

src/container/NodeRenderer/index.tsx

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

src/container/ReactFlow/index.tsx

@@ -35,14 +35,14 @@ import '../../style.css';
 
 export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad'> {
   elements: Elements;
-  onElementClick?: (evt: MouseEvent, element: Node | Edge) => void;
+  onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
   onElementsRemove?: (elements: Elements) => void;
-  onNodeMouseEnter?: (evt: MouseEvent, node: Node) => void;
+  onNodeMouseEnter?: (event: MouseEvent, node: Node) => void;
-  onNodeMouseMove?: (evt: MouseEvent, node: Node) => void;
+  onNodeMouseMove?: (event: MouseEvent, node: Node) => void;
-  onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void;
+  onNodeMouseLeave?: (event: MouseEvent, node: Node) => void;
-  onNodeContextMenu?: (evt: MouseEvent, node: Node) => void;
+  onNodeContextMenu?: (event: MouseEvent, node: Node) => void;
-  onNodeDragStart?: (evt: MouseEvent, node: Node) => void;
+  onNodeDragStart?: (event: MouseEvent, node: Node) => void;
-  onNodeDragStop?: (evt: MouseEvent, node: Node) => void;
+  onNodeDragStop?: (event: MouseEvent, node: Node) => void;
   onConnect?: (connection: Edge | Connection) => void;
   onConnectStart?: OnConnectStartFunc;
   onConnectStop?: OnConnectStopFunc;
@@ -51,8 +51,8 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onMoveStart?: (flowTransform?: FlowTransform) => void;
   onMoveEnd?: (flowTransform?: FlowTransform) => void;
   onSelectionChange?: (elements: Elements | null) => void;
-  onPaneClick?: (evt: MouseEvent) => void;
+  onPaneClick?: (event: MouseEvent) => void;
-  onPaneContextMenu?: (evt: MouseEvent) => void;
+  onPaneContextMenu?: (event: MouseEvent) => void;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
   connectionLineType: ConnectionLineType;

src/hooks/useElementUpdater.ts

@@ -6,8 +6,8 @@ import { parseElement, isNode, isEdge } from '../utils/graph';
 import { Elements, Node, Edge, FlowElement } from '../types';
 
 const useElementUpdater = (propElements: Elements): void => {
-  const stateElements = useStoreState((s) => s.elements);
+  const stateElements = useStoreState((state) => state.elements);
-  const setElements = useStoreActions((a) => a.setElements);
+  const setElements = useStoreActions((actions) => actions.setElements);
 
   useEffect(() => {
     const nextElements: Elements = propElements.map((propElement) => {

src/hooks/useKeyPress.ts

@@ -5,14 +5,14 @@ import { isInputDOMNode } from '../utils';
 export default (keyCode: number): boolean => {
   const [keyPressed, setKeyPressed] = useState(false);
 
-  function downHandler(evt: KeyboardEvent) {
+  function downHandler(event: KeyboardEvent) {
-    if (evt.keyCode === keyCode && !isInputDOMNode(evt)) {
+    if (event.keyCode === keyCode && !isInputDOMNode(event)) {
       setKeyPressed(true);
     }
   }
 
-  const upHandler = (evt: KeyboardEvent) => {
+  const upHandler = (event: KeyboardEvent) => {
-    if (evt.keyCode === keyCode && !isInputDOMNode(evt)) {
+    if (event.keyCode === keyCode && !isInputDOMNode(event)) {
       setKeyPressed(false);
     }
   };

src/types/index.ts

@@ -154,13 +154,13 @@ export interface WrapNodeProps {
   isDraggable: boolean;
   isConnectable: boolean;
   selectNodesOnDrag: boolean;
-  onClick?: (evt: ReactMouseEvent, node: Node) => void;
+  onClick?: (event: ReactMouseEvent, node: Node) => void;
-  onMouseEnter?: (evt: ReactMouseEvent, node: Node) => void;
+  onMouseEnter?: (event: ReactMouseEvent, node: Node) => void;
-  onMouseMove?: (evt: ReactMouseEvent, node: Node) => void;
+  onMouseMove?: (event: ReactMouseEvent, node: Node) => void;
-  onMouseLeave?: (evt: ReactMouseEvent, node: Node) => void;
+  onMouseLeave?: (event: ReactMouseEvent, node: Node) => void;
-  onContextMenu?: (evt: ReactMouseEvent, node: Node) => void;
+  onContextMenu?: (event: ReactMouseEvent, node: Node) => void;
-  onNodeDragStart?: (evt: ReactMouseEvent, node: Node) => void;
+  onNodeDragStart?: (event: ReactMouseEvent, node: Node) => void;
-  onNodeDragStop?: (evt: ReactMouseEvent, node: Node) => void;
+  onNodeDragStop?: (event: 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 = (evt: ReactMouseEvent, params: OnConnectStartParams) => void;
+export type OnConnectStartFunc = (event: ReactMouseEvent, params: OnConnectStartParams) => void;
-export type OnConnectStopFunc = (evt: MouseEvent) => void;
+export type OnConnectStopFunc = (event: MouseEvent) => void;
 
 export type SetConnectionId = {
   connectionNodeId: ElementId | null;
@@ -235,7 +235,7 @@ export interface EdgeCompProps {
   labelStyle?: CSSProperties;
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
-  onClick?: (evt: ReactMouseEvent, edge: Edge) => void;
+  onClick?: (event: ReactMouseEvent, edge: Edge) => void;
   animated?: boolean;
   selected?: boolean;
   data?: any;