diff --git a/README.md b/README.md index a6742b7a..eb2c2341 100644 --- a/README.md +++ b/README.md @@ -79,24 +79,24 @@ const BasicFlow = () => ; - `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 -- `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 +- `onNodeDragStart(event: MouseEvent, node: Node)`: node drag start +- `onNodeDragStop(event: MouseEvent, node: Node)`: node drag stop +- `onNodeMouseEnter(event: MouseEvent, node: Node)`: node mouse enter +- `onNodeMouseMove(event: MouseEvent, node: Node)`: node mouse move +- `onNodeMouseLeave(event: MouseEvent, node: Node)`: node mouse leave +- `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 -- `onConnectStop(evt: MouseEvent)`: called when user stops to drag connection line +- `onConnectStart(event: MouseEvent, { nodeId, handleType })`: called when user starts 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 -- `onPaneContextMenu(evt: MouseEvent)`: called when user does a right-click on the canvas +- `onPaneClick(event: MouseEvent)`: called when user clicks directly 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 }) diff --git a/example/src/Basic/index.js b/example/src/Basic/index.js index 0a9b6853..841e731e 100644 --- a/example/src/Basic/index.js +++ b/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 } }, diff --git a/example/src/CustomNode/index.js b/example/src/CustomNode/index.js index 8d6072bb..b633608d 100644 --- a/example/src/CustomNode/index.js +++ b/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); diff --git a/example/src/Edges/index.js b/example/src/Edges/index.js index 2265541e..10657aec 100644 --- a/example/src/Edges/index.js +++ b/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 } }, diff --git a/example/src/Empty/index.js b/example/src/Empty/index.js index 580fa8e0..d0d36b13 100644 --- a/example/src/Empty/index.js +++ b/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([]); diff --git a/example/src/Hidden/index.js b/example/src/Hidden/index.js index 404567f6..1c3ffd5e 100644 --- a/example/src/Hidden/index.js +++ b/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" /> diff --git a/example/src/Horizontal/index.js b/example/src/Horizontal/index.js index 0e18b911..e66e5c8a 100644 --- a/example/src/Horizontal/index.js +++ b/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 onNodeMouseMove = (evt, node) => console.log('mouse move:', node); -const onNodeMouseLeave = (evt, node) => console.log('mouse leave:', node); -const onNodeContextMenu = (evt, node) => { - evt.preventDefault(); +const onNodeMouseEnter = (event, node) => console.log('mouse enter:', node); +const onNodeMouseMove = (event, node) => console.log('mouse move:', node); +const onNodeMouseLeave = (event, node) => console.log('mouse leave:', node); +const onNodeContextMenu = (event, node) => { + event.preventDefault(); console.log('context menu:', node); }; diff --git a/example/src/Interaction/index.js b/example/src/Interaction/index.js index 3a4fba99..8d8da70b 100644 --- a/example/src/Interaction/index.js +++ b/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 onNodeDragStop = (evt, node) => console.log('drag stop', node); -const onElementClick = (evt, element) => console.log('click', evt, element); -const onPaneClick = (evt) => console.log('onPaneClick', evt); -const onPaneContextMenu = (evt) => console.log('onPaneContextMenu', evt); +const onNodeDragStart = (event, node) => console.log('drag start', node); +const onNodeDragStop = (event, node) => console.log('drag stop', node); +const onElementClick = (event, element) => console.log('click', element); +const onPaneClick = (event) => console.log('onPaneClick', event); +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" /> @@ -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" /> @@ -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" /> @@ -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" /> @@ -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" /> @@ -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" /> @@ -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" /> diff --git a/example/src/Overview/index.js b/example/src/Overview/index.js index 7a52c2c5..b08ede0a 100644 --- a/example/src/Overview/index.js +++ b/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 onNodeDragStop = (evt, node) => console.log('drag stop', node); -const onElementClick = (evt, element) => console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element); +const onNodeDragStart = (event, node) => console.log('drag start', node); +const onNodeDragStop = (event, node) => console.log('drag stop', node); +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); diff --git a/example/src/Provider/index.js b/example/src/Provider/index.js index e9c88b9d..07d3ca8d 100644 --- a/example/src/Provider/index.js +++ b/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 } }, diff --git a/example/src/Stress/index.js b/example/src/Stress/index.js index 8e82ef53..0475b516 100644 --- a/example/src/Stress/index.js +++ b/example/src/Stress/index.js @@ -5,7 +5,6 @@ import { getElements } from './utils'; const onLoad = (reactFlowInstance) => { reactFlowInstance.fitView(); - console.log(reactFlowInstance.getElements()); }; diff --git a/example/src/Validation/index.js b/example/src/Validation/index.js index 5a25d165..897029ff 100644 --- a/example/src/Validation/index.js +++ b/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 onConnectStart = (evt, { nodeId, handleType }) => console.log('on connect start', { nodeId, handleType }); - -const onConnectStop = (evt) => console.log('on connect stop', evt); +const isValidConnection = (connection) => connection.target === 'B'; +const onConnectStart = (event, { nodeId, handleType }) => console.log('on connect start', { nodeId, handleType }); +const onConnectStop = (event) => console.log('on connect stop', event); 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 ( void; + onClick?: (event: React.MouseEvent, edge: Edge) => void; animated?: boolean; selected: boolean; elementsSelectable: boolean; @@ -41,7 +41,7 @@ export default (EdgeComponent: ComponentType) => { 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) => { const edgeGroupStyle: CSSProperties = { pointerEvents: elementsSelectable ? 'all' : 'none', }; - const onEdgeClick = (evt: React.MouseEvent): void => { + const onEdgeClick = (event: React.MouseEvent): void => { if (!elementsSelectable) { return; } @@ -59,7 +59,7 @@ export default (EdgeComponent: ComponentType) => { setSelectedElements({ id, source, target }); if (onClick) { - onClick(evt, { id, source, target, type }); + onClick(event, { id, source, target, type }); } }; diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx index cba3d67b..884d22f6 100644 --- a/src/components/Handle/index.tsx +++ b/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 setConnectionNodeId = useStoreActions((a) => a.setConnectionNodeId); - const onConnectAction = useStoreState((s) => s.onConnect); - const onConnectStart = useStoreState((s) => s.onConnectStart); - const onConnectStop = useStoreState((s) => s.onConnectStop); + const setPosition = useStoreActions((actions) => actions.setConnectionPosition); + const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId); + const onConnectAction = useStoreState((state) => state.onConnect); + const onConnectStart = useStoreState((state) => state.onConnectStart); + const onConnectStop = useStoreState((state) => state.onConnectStop); const onConnectExtended = (params: Connection) => { if (onConnectAction) { onConnectAction(params); diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index 6d04ebdf..e1ed6146 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -30,11 +30,11 @@ import { import { noop } from '../../utils'; -const getMouseEvent = (evt: MouseEvent | TouchEvent) => - typeof TouchEvent !== 'undefined' && evt instanceof TouchEvent ? evt.touches[0] : (evt as MouseEvent); +const getMouseEvent = (event: MouseEvent | TouchEvent) => + 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]), - y: startEvt.clientY * (1 / transform[2]), + x: startEvent.clientX * (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 dragEvt = getMouseEvent(evt); +const onDrag = ({ event, setDragging, id, offset, transform, updateNodePos }: OnDragParams): void => { + const dragEvent = getMouseEvent(event); const scaledClient = { - x: dragEvt.clientX / transform[2], - y: dragEvt.clientY / transform[2], + x: dragEvent.clientX / 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; - onClick?: (evt: MouseEvent, node: Node) => void; + onNodeDragStop?: (event: 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) => { targetPosition, isHidden, }: WrapNodeProps) => { - const updateNodeDimensions = useStoreActions((a) => a.updateNodeDimensions); - const setSelectedElements = useStoreActions((a) => a.setSelectedElements); - const updateNodePos = useStoreActions((a) => a.updateNodePos); + const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions); + const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements); + const updateNodePos = useStoreActions((actions) => actions.updateNodePos); const nodeElement = useRef(null); const [offset, setOffset] = useState({ x: 0, y: 0 }); @@ -210,7 +210,7 @@ export default (NodeComponent: ComponentType) => { 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) => { 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) => { 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) => { 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) => { 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) => { return ( + onStart={(event) => onStart({ - evt: evt as MouseEvent, + event: event as MouseEvent, selectNodesOnDrag, isSelectable, onNodeDragStart, @@ -299,10 +299,10 @@ export default (NodeComponent: ComponentType) => { setSelectedElements, }) } - onDrag={(evt) => onDrag({ evt: evt as MouseEvent, setDragging, id, offset, transform, updateNodePos })} - onStop={(evt) => + onDrag={(event) => onDrag({ event: event as MouseEvent, setDragging, id, offset, transform, updateNodePos })} + onStop={(event) => onStop({ - evt: evt as MouseEvent, + event: event as MouseEvent, onNodeDragStop, selectNodesOnDrag, isSelectable, diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx index 49e07041..48db9bf3 100644 --- a/src/components/NodesSelection/index.tsx +++ b/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, - y: evt.clientY / tScale, + x: event.clientX / 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, - y: evt.clientY / tScale, + x: event.clientX / tScale, + y: event.clientY / tScale, }; if (selectedElements) { @@ -95,8 +95,8 @@ export default () => { onStart(evt as MouseEvent)} - onDrag={(evt) => onDrag(evt as MouseEvent)} + onStart={(event) => onStart(event as MouseEvent)} + onDrag={(event) => onDrag(event as MouseEvent)} >
{ - 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 elementsSelectable = useStoreState((s) => s.elementsSelectable); + const selectionActive = useStoreState((state) => state.selectionActive); + const elementsSelectable = useStoreState((state) => state.elementsSelectable); - const setUserSelection = useStoreActions((a) => a.setUserSelection); - const updateUserSelection = useStoreActions((a) => a.updateUserSelection); - const unsetUserSelection = useStoreActions((a) => a.unsetUserSelection); + const setUserSelection = useStoreActions((actions) => actions.setUserSelection); + const updateUserSelection = useStoreActions((actions) => actions.updateUserSelection); + 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 mousePos = getMousePosition(evt); + const onMouseDown = (event: React.MouseEvent): void => { + 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; diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 9f239b3c..ab57b2d8 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/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; } diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index 89ccf623..39ad8de0 100644 --- a/src/container/GraphView/index.tsx +++ b/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; - onNodeMouseMove?: (evt: MouseEvent, node: Node) => void; - onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void; - onNodeContextMenu?: (evt: MouseEvent, node: Node) => void; - onNodeDragStart?: (evt: MouseEvent, node: Node) => void; - onNodeDragStop?: (evt: MouseEvent, node: Node) => void; + onNodeMouseEnter?: (event: MouseEvent, node: Node) => void; + onNodeMouseMove?: (event: MouseEvent, node: Node) => void; + onNodeMouseLeave?: (event: MouseEvent, node: Node) => void; + onNodeContextMenu?: (event: MouseEvent, node: Node) => void; + onNodeDragStart?: (event: 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; - onPaneContextMenu?: (evt: MouseEvent) => void; + onPaneClick?: (event: 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) => { - onPaneClick?.(evt); + (event: React.MouseEvent) => { + onPaneClick?.(event); unsetNodesSelection(); }, [onPaneClick] ); const onZoomPaneContextMenu = useCallback( - (evt: React.MouseEvent) => { - onPaneContextMenu?.(evt); + (event: React.MouseEvent) => { + onPaneContextMenu?.(event); }, [onPaneContextMenu] ); diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx index 4c5d7c84..8960e467 100644 --- a/src/container/NodeRenderer/index.tsx +++ b/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; - 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?: (evt: MouseEvent, node: Node) => void; - onNodeDragStop?: (evt: MouseEvent, node: Node) => void; + onElementClick?: (event: MouseEvent, element: Node | Edge) => void; + onNodeMouseEnter?: (event: MouseEvent, node: Node) => void; + onNodeMouseMove?: (event: MouseEvent, node: Node) => void; + onNodeMouseLeave?: (event: MouseEvent, node: Node) => void; + onNodeContextMenu?: (event: MouseEvent, node: Node) => void; + onNodeDragStart?: (event: MouseEvent, node: Node) => void; + onNodeDragStop?: (event: MouseEvent, node: Node) => void; onlyRenderVisibleNodes?: boolean; } diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index c74871d3..037b3828 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -35,14 +35,14 @@ import '../../style.css'; export interface ReactFlowProps extends Omit, '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; - onNodeMouseMove?: (evt: MouseEvent, node: Node) => void; - onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void; - onNodeContextMenu?: (evt: MouseEvent, node: Node) => void; - onNodeDragStart?: (evt: MouseEvent, node: Node) => void; - onNodeDragStop?: (evt: MouseEvent, node: Node) => void; + onNodeMouseEnter?: (event: MouseEvent, node: Node) => void; + onNodeMouseMove?: (event: MouseEvent, node: Node) => void; + onNodeMouseLeave?: (event: MouseEvent, node: Node) => void; + onNodeContextMenu?: (event: MouseEvent, node: Node) => void; + onNodeDragStart?: (event: 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, 'on onMoveStart?: (flowTransform?: FlowTransform) => void; onMoveEnd?: (flowTransform?: FlowTransform) => void; onSelectionChange?: (elements: Elements | null) => void; - onPaneClick?: (evt: MouseEvent) => void; - onPaneContextMenu?: (evt: MouseEvent) => void; + onPaneClick?: (event: MouseEvent) => void; + onPaneContextMenu?: (event: MouseEvent) => void; nodeTypes: NodeTypesType; edgeTypes: EdgeTypesType; connectionLineType: ConnectionLineType; diff --git a/src/hooks/useElementUpdater.ts b/src/hooks/useElementUpdater.ts index d8498077..2765ab41 100644 --- a/src/hooks/useElementUpdater.ts +++ b/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 setElements = useStoreActions((a) => a.setElements); + const stateElements = useStoreState((state) => state.elements); + const setElements = useStoreActions((actions) => actions.setElements); useEffect(() => { const nextElements: Elements = propElements.map((propElement) => { diff --git a/src/hooks/useKeyPress.ts b/src/hooks/useKeyPress.ts index 992d0523..4fec31f2 100644 --- a/src/hooks/useKeyPress.ts +++ b/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) { - if (evt.keyCode === keyCode && !isInputDOMNode(evt)) { + function downHandler(event: KeyboardEvent) { + if (event.keyCode === keyCode && !isInputDOMNode(event)) { setKeyPressed(true); } } - const upHandler = (evt: KeyboardEvent) => { - if (evt.keyCode === keyCode && !isInputDOMNode(evt)) { + const upHandler = (event: KeyboardEvent) => { + if (event.keyCode === keyCode && !isInputDOMNode(event)) { setKeyPressed(false); } }; diff --git a/src/types/index.ts b/src/types/index.ts index c6ac6b4a..ad5ab4ad 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -154,13 +154,13 @@ export interface WrapNodeProps { isDraggable: boolean; isConnectable: boolean; selectNodesOnDrag: boolean; - onClick?: (evt: ReactMouseEvent, node: Node) => void; - onMouseEnter?: (evt: ReactMouseEvent, node: Node) => void; - onMouseMove?: (evt: ReactMouseEvent, node: Node) => void; - onMouseLeave?: (evt: ReactMouseEvent, node: Node) => void; - onContextMenu?: (evt: ReactMouseEvent, node: Node) => void; - onNodeDragStart?: (evt: ReactMouseEvent, node: Node) => void; - onNodeDragStop?: (evt: ReactMouseEvent, node: Node) => void; + onClick?: (event: ReactMouseEvent, node: Node) => void; + onMouseEnter?: (event: ReactMouseEvent, node: Node) => void; + onMouseMove?: (event: ReactMouseEvent, node: Node) => void; + onMouseLeave?: (event: ReactMouseEvent, node: Node) => void; + onContextMenu?: (event: ReactMouseEvent, node: Node) => void; + onNodeDragStart?: (event: 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 OnConnectStopFunc = (evt: MouseEvent) => void; +export type OnConnectStartFunc = (event: ReactMouseEvent, params: OnConnectStartParams) => 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;