alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(variables): dont use abbreviations

Browse Source
This commit is contained in:
moklick
2020-08-10 12:10:17 +02:00
parent 1f9a76eb89
commit 59742c9526
24 changed files with 160 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@@ -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
- `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 })

4
example/src/Basic/index.js
View File

@@ -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 } },

8
example/src/CustomNode/index.js
View File

@@ -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);

4
example/src/Edges/index.js
View File

@@ -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 } },

4
example/src/Empty/index.js
View File

@@ -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([]);

2
example/src/Hidden/index.js
View File

@@ -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>

10
example/src/Horizontal/index.js
View File

@@ -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);
};

24
example/src/Interaction/index.js
View File

@@ -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"
/>
</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>

6
example/src/Overview/index.js
View File

@@ -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);

2
example/src/Provider/index.js
View File

@@ -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 } },

1
example/src/Stress/index.js
View File

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

14
example/src/Validation/index.js
View File

@@ -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 (
<ReactFlow

8
src/components/Edges/wrapEdge.tsx
View File

@@ -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 });
}
};

10
src/components/Handle/index.tsx
View File

@@ -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);

66
src/components/Nodes/wrapNode.tsx
View File

@@ -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<NodeComponentProps>) => {
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<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 })}
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,

16
src/components/NodesSelection/index.tsx
View File

@@ -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 () => {
<ReactDraggable
scale={tScale}
grid={grid}
onStart={(evt) => onStart(evt as MouseEvent)}
onDrag={(evt) => onDrag(evt as MouseEvent)}
onStart={(event) => onStart(event as MouseEvent)}
onDrag={(event) => onDrag(event as MouseEvent)}
>
<div
className="react-flow__nodesselection-rect"

26
src/components/UserSelection/index.tsx
View File

@@ -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,
y: evt.clientY - containerBounds.top,
x: event.clientX - containerBounds.left,
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 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;

2
src/container/EdgeRenderer/index.tsx
View File

@@ -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;
}

26
src/container/GraphView/index.tsx
View File

@@ -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]
);

14
src/container/NodeRenderer/index.tsx
View File

@@ -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;
}

18
src/container/ReactFlow/index.tsx
View File

@@ -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;
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<HTMLAttributes<HTMLDivElement>, '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;

4
src/hooks/useElementUpdater.ts
View File

@@ -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) => {

8
src/hooks/useKeyPress.ts
View File

@@ -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);
}
};

20
src/types/index.ts
View File

@@ -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;