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

Merge pull request #676 from wbkd/next

Browse Source 
Next
This commit is contained in:
Christopher Möller
2020-11-16 15:34:32 +01:00
committed by GitHub
parent 803a4aea57 fa80f0993f
commit cc1f09ca2f
28 changed files with 1050 additions and 27978 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cypress/support/index.js
+9 -1
View File
@@ -14,4 +14,12 @@
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
import './commands';
const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/;
Cypress.on('uncaught:exception', (err) => {
if (resizeObserverLoopErrRe.test(err.message)) {
return false;
}
});
example/package-lock.json
Generated
+49 -26883
View File
File diff suppressed because it is too large Load Diff
example/package.json
+1 -1
View File
@@ -4,7 +4,7 @@
"private": true,
"dependencies": {
"@craco/craco": "^5.7.0",
"react-dom": "^16.14.0",
"react-dom": "^17.0.1",
"react-flow-renderer": "file:..",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.4"
example/src/Basic/index.js
+15 -4
View File
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, isNode, Background } from 'react-flow-renderer';
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);
@@ -16,9 +15,11 @@ const initialElements = [
];
const BasicFlow = () => {
const [rfInstance, setRfInstance] = useState(null);
const [elements, setElements] = useState(initialElements);
const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements((els) => addEdge(params, els));
const onLoad = (reactFlowInstance) => setRfInstance(reactFlowInstance);
const updatePos = () => {
setElements((elms) => {
@@ -38,6 +39,10 @@ const BasicFlow = () => {
});
};
const logToObject = () => console.log(rfInstance.toObject());
const resetTransform = () => rfInstance.setTransform({ x: 0, y: 0, zoom: 1 });
return (
<ReactFlow
elements={elements}
@@ -53,9 +58,15 @@ const BasicFlow = () => {
>
<Background variant="lines" />
<button onClick={updatePos} style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}>
change pos
</button>
<div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
<button onClick={resetTransform} style={{ marginRight: 5 }}>
reset transform
</button>
<button onClick={updatePos} style={{ marginRight: 5 }}>
change pos
</button>
<button onClick={logToObject}>toObject</button>
</div>
</ReactFlow>
);
};
example/src/Interaction/index.js
+19
View File
@@ -17,6 +17,7 @@ const onElementClick = (event, element) => console.log('click', element);
const onPaneClick = (event) => console.log('onPaneClick', event);
const onPaneScroll = (event) => console.log('onPaneScroll', event);
const onPaneContextMenu = (event) => console.log('onPaneContextMenu', event);
const onMoveEnd = (event) => console.log('onMoveEnd', event);
const InteractionFlow = () => {
const [elements, setElements] = useState(initialElements);
@@ -27,6 +28,7 @@ const InteractionFlow = () => {
const [isConnectable, setIsConnectable] = useState(false);
const [zoomOnScroll, setZoomOnScroll] = useState(false);
const [panOnScroll, setPanOnScroll] = useState(false);
const [panOnScrollMode, setPanOnScrollMode] = useState('free');
const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(false);
const [paneMoveable, setPaneMoveable] = useState(true);
const [captureZoomClick, setCaptureZoomClick] = useState(false);
@@ -41,6 +43,7 @@ const InteractionFlow = () => {
nodesDraggable={isDraggable}
zoomOnScroll={zoomOnScroll}
panOnScroll={panOnScroll}
panOnScrollMode={panOnScrollMode}
zoomOnDoubleClick={zoomOnDoubleClick}
onConnect={onConnect}
onElementClick={captureElementClick ? onElementClick : undefined}
@@ -50,6 +53,7 @@ const InteractionFlow = () => {
onPaneClick={captureZoomClick ? onPaneClick : undefined}
onPaneScroll={captureZoomScroll ? onPaneScroll : undefined}
onPaneContextMenu={captureZoomClick ? onPaneContextMenu : undefined}
onMoveEnd={onMoveEnd}
>
<MiniMap />
<Controls />
@@ -115,6 +119,21 @@ const InteractionFlow = () => {
/>
</label>
</div>
<div>
<label htmlFor="panonscrollmode">
panOnScrollMode
<select
id="panonscrollmode"
value={panOnScrollMode}
onChange={(event) => setPanOnScrollMode(event.target.value)}
className="react-flow__panonscrollmode"
>
<option value="free">free</option>
<option value="horizontal">horizontal</option>
<option value="vertical">vertical</option>
</select>
</label>
</div>
<div>
<label htmlFor="zoomondbl">
zoomOnDoubleClick
package-lock.json
Generated
+363 -490
View File
File diff suppressed because it is too large Load Diff
package.json
+10 -11
View File
@@ -1,6 +1,6 @@
{
"name": "react-flow-renderer",
"version": "7.1.2",
"version": "8.0.0-next.8",
"main": "dist/ReactFlow.js",
"module": "dist/ReactFlow.esm.js",
"types": "dist/index.d.ts",
@@ -23,18 +23,16 @@
"test:all": "npm run test:chrome && npm run test:firefox",
"test": "npm run dev:wait test:chrome",
"release": "npm run test && release-it",
"release:next": "release-it major --preRelease=next"
"release:next": "release-it --preRelease=next"
},
"dependencies": {
"@babel/runtime": "^7.12.5",
"@welldone-software/why-did-you-render": "^5.0.0",
"classcat": "^4.1.0",
"d3-selection": "^2.0.0",
"d3-zoom": "^2.0.0",
"easy-peasy": "^4.0.1",
"fast-deep-equal": "^3.1.3",
"react-draggable": "^4.4.3",
"resize-observer": "^1.0.0"
"react-draggable": "^4.4.3"
},
"devDependencies": {
"@babel/core": "^7.12.3",
@@ -45,20 +43,21 @@
"@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-node-resolve": "^10.0.0",
"@rollup/plugin-replace": "^2.3.4",
"@svgr/rollup": "^5.4.0",
"@svgr/rollup": "^5.5.0",
"@types/classnames": "^2.2.11",
"@types/d3": "^6.0.0",
"@types/d3": "^6.1.0",
"@types/react": "^16.9.56",
"@types/react-dom": "^16.9.9",
"@types/resize-observer-browser": "^0.1.4",
"autoprefixer": "^9.8.6",
"babel-preset-react-app": "^10.0.0",
"cypress": "^5.5.0",
"cypress": "^5.6.0",
"postcss-nested": "^4.2.3",
"prettier": "2.1.2",
"prop-types": "^15.7.2",
"react": "^16.14.0",
"react": "^17.0.1",
"release-it": "^14.2.1",
"rollup": "^2.33.1",
"rollup": "^2.33.2",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-postcss": "^3.1.8",
"rollup-plugin-typescript2": "^0.29.0",
@@ -66,7 +65,7 @@
"typescript": "^4.0.5"
},
"peerDependencies": {
"react": "^16.14.0"
"react": "16 || 17"
},
"files": [
"dist"
src/additional-components/Controls/index.tsx
+27 -31
View File
@@ -1,4 +1,4 @@
import React, { memo } from 'react';
import React, { memo, useCallback } from 'react';
import cc from 'classcat';
import { useStoreState, useStoreActions } from '../../store/hooks';
@@ -10,6 +10,7 @@ import LockIcon from '../../../assets/icons/lock.svg';
import UnlockIcon from '../../../assets/icons/unlock.svg';
import './style.css';
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
export interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
showZoom?: boolean;
@@ -33,57 +34,52 @@ const Controls = ({
className,
}: ControlProps) => {
const setInteractive = useStoreActions((actions) => actions.setInteractive);
const fitView = useStoreActions((actions) => actions.fitView);
const zoomIn = useStoreActions((actions) => actions.zoomIn);
const zoomOut = useStoreActions((actions) => actions.zoomOut);
const { zoomIn, zoomOut, fitView } = useZoomPanHelper();
const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable);
const mapClasses = cc(['react-flow__controls', className]);
const onZoomInHandler = useCallback(() => {
zoomIn?.();
onZoomIn?.();
}, [zoomIn, onZoomIn]);
const onZoomOutHandler = useCallback(() => {
zoomOut?.();
onZoomOut?.();
}, [zoomOut, onZoomOut]);
const onFitViewHandler = useCallback(() => {
fitView?.();
onFitView?.();
}, [fitView, onFitView]);
const onInteractiveChangeHandler = useCallback(() => {
setInteractive?.(!isInteractive);
onInteractiveChange?.(!isInteractive);
}, [isInteractive, setInteractive, onInteractiveChange]);
return (
<div className={mapClasses} style={style}>
{showZoom && (
<>
<div className="react-flow__controls-button react-flow__controls-zoomin" onClick={() => {
zoomIn();
if (onZoomIn) {
onZoomIn();
}
}}>
<div className="react-flow__controls-button react-flow__controls-zoomin" onClick={onZoomInHandler}>
<PlusIcon />
</div>
<div className="react-flow__controls-button react-flow__controls-zoomout" onClick={() => {
zoomOut();
if (onZoomOut) {
onZoomOut();
}
}}>
<div className="react-flow__controls-button react-flow__controls-zoomout" onClick={onZoomOutHandler}>
<MinusIcon />
</div>
</>
)}
{showFitView && (
<div
className="react-flow__controls-button react-flow__controls-fitview"
onClick={() => {
fitView({ padding: 0.1 });
if (onFitView) {
onFitView();
}
}}
>
<div className="react-flow__controls-button react-flow__controls-fitview" onClick={onFitViewHandler}>
<FitviewIcon />
</div>
)}
{showInteractive && (
<div
className="react-flow__controls-button react-flow__controls-interactive"
onClick={() => {
setInteractive(!isInteractive);
if (onInteractiveChange) {
onInteractiveChange(!isInteractive);
}
}}
onClick={onInteractiveChangeHandler}
>
{isInteractive ? <UnlockIcon /> : <LockIcon />}
</div>
src/additional-components/MiniMap/index.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ const MiniMap = ({
nodeColor = '#fff',
nodeClassName = '',
nodeBorderRadius = 5,
maskColor = '#F0F2F3',
maskColor = 'rgb(240, 242, 243, 0.7)',
}: MiniMapProps) => {
const containerWidth = useStoreState((s) => s.width);
const containerHeight = useStoreState((s) => s.height);
src/components/Edges/SmoothStepEdge.tsx
+26 -41
View File
@@ -8,30 +8,18 @@ import { EdgeSmoothStepProps, Position } from '../../types';
// The name indicates the direction of the path. "bottomLeftCorner" goes
// from bottom to the left and "leftBottomCorner" goes from left to the bottom.
// We have to consider the direction of the paths because of the animated lines.
const bottomLeftCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY - cornerSize}Q ${cornerX},${cornerY} ${cornerX + cornerSize},${cornerY}`;
const leftBottomCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX + cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY - cornerSize}`;
const bottomRightCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY - cornerSize}Q ${cornerX},${cornerY} ${cornerX - cornerSize},${cornerY}`;
const rightBottomCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX - cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY - cornerSize}`;
const leftTopCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX + cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY + cornerSize}`;
const topLeftCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY + cornerSize}Q ${cornerX},${cornerY} ${cornerX + cornerSize},${cornerY}`;
const topRightCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY + cornerSize}Q ${cornerX},${cornerY} ${cornerX - cornerSize},${cornerY}`;
const rightTopCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX - cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY + cornerSize}`;
const bottomLeftCorner = (x: number, y: number, size: number): string =>
`L ${x},${y - size}Q ${x},${y} ${x + size},${y}`;
const leftBottomCorner = (x: number, y: number, size: number): string =>
`L ${x + size},${y}Q ${x},${y} ${x},${y - size}`;
const bottomRightCorner = (x: number, y: number, size: number): string =>
`L ${x},${y - size}Q ${x},${y} ${x - size},${y}`;
const rightBottomCorner = (x: number, y: number, size: number): string =>
`L ${x - size},${y}Q ${x},${y} ${x},${y - size}`;
const leftTopCorner = (x: number, y: number, size: number): string => `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`;
const topLeftCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`;
const topRightCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`;
const rightTopCorner = (x: number, y: number, size: number): string => `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`;
interface GetSmoothStepPathParams {
sourceX: number;
@@ -60,27 +48,12 @@ export function getSmoothStepPath({
const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
const leftAndRight = [Position.Left, Position.Right];
let firstCornerPath = null;
let secondCornerPath = null;
const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
// default case: source and target positions are top or bottom
if (sourceX <= targetX) {
firstCornerPath =
sourceY <= targetY ? bottomLeftCorner(sourceX, cY, cornerSize) : topLeftCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY <= targetY ? rightTopCorner(targetX, cY, cornerSize) : rightBottomCorner(targetX, cY, cornerSize);
} else {
firstCornerPath =
sourceY < targetY ? bottomRightCorner(sourceX, cY, cornerSize) : topRightCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY < targetY ? leftTopCorner(targetX, cY, cornerSize) : leftBottomCorner(targetX, cY, cornerSize);
}
let firstCornerPath = null;
let secondCornerPath = null;
if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
if (sourceX <= targetX) {
@@ -115,6 +88,18 @@ export function getSmoothStepPath({
: topRightCorner(sourceX, targetY, cornerSize);
}
secondCornerPath = '';
} else {
if (sourceX <= targetX) {
firstCornerPath =
sourceY <= targetY ? bottomLeftCorner(sourceX, cY, cornerSize) : topLeftCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY <= targetY ? rightTopCorner(targetX, cY, cornerSize) : rightBottomCorner(targetX, cY, cornerSize);
} else {
firstCornerPath =
sourceY < targetY ? bottomRightCorner(sourceX, cY, cornerSize) : topRightCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY < targetY ? leftTopCorner(targetX, cY, cornerSize) : leftBottomCorner(targetX, cY, cornerSize);
}
}
return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
src/hooks/useElementUpdater.ts → src/components/ElementUpdater/index.tsx
+13 -7
View File
@@ -1,16 +1,20 @@
import { useEffect } from 'react';
import isEqual from 'fast-deep-equal';
import { useStoreState, useStoreActions } from '../store/hooks';
import { parseElement, isNode, isEdge } from '../utils/graph';
import { Elements, Node, Edge, FlowElement } from '../types';
import { useStoreState, useStoreActions } from '../../store/hooks';
import { parseElement, isNode, isEdge } from '../../utils/graph';
import { Elements, Node, Edge, FlowElement } from '../../types';
const useElementUpdater = (propElements: Elements): void => {
interface ElementUpdaterProps {
elements: Elements;
}
const ElementUpdater = ({ elements }: ElementUpdaterProps) => {
const stateElements = useStoreState((state) => state.elements);
const setElements = useStoreActions((actions) => actions.setElements);
useEffect(() => {
const nextElements: Elements = propElements.map((propElement) => {
const nextElements: Elements = elements.map((propElement) => {
const existingElement = stateElements.find((el) => el.id === propElement.id?.toString());
if (existingElement) {
@@ -137,7 +141,9 @@ const useElementUpdater = (propElements: Elements): void => {
if (elementsChanged) {
setElements(nextElements);
}
}, [propElements, stateElements]);
}, [elements, stateElements]);
return null;
};
export default useElementUpdater;
export default ElementUpdater;
src/components/Nodes/wrapNode.tsx
+2 -3
View File
@@ -1,7 +1,6 @@
import React, { useEffect, useRef, memo, ComponentType, CSSProperties, useMemo, MouseEvent, useCallback } from 'react';
import { DraggableCore } from 'react-draggable';
import cc from 'classcat';
import { ResizeObserver } from 'resize-observer';
import { useStoreActions } from '../../store/hooks';
import { Provider } from '../../contexts/NodeIdContext';
@@ -12,7 +11,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
id,
type,
data,
transform,
scale,
xPos,
yPos,
selected,
@@ -199,7 +198,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onStart={onDragStart}
onDrag={onDrag}
onStop={onDragStop}
scale={transform[2]}
scale={scale}
disabled={!isDraggable}
cancel=".nodrag"
nodeRef={nodeElement}
src/container/EdgeRenderer/index.tsx
+52 -132
View File
@@ -4,17 +4,8 @@ import { useStoreState } from '../../store/hooks';
import ConnectionLine from '../../components/ConnectionLine/index';
import { isEdge } from '../../utils/graph';
import MarkerDefinitions from './MarkerDefinitions';
import {
XYPosition,
Position,
Edge,
Node,
ElementId,
HandleElement,
Elements,
ConnectionLineType,
ConnectionLineComponent,
} from '../../types';
import { getEdgePositions, getHandle, isEdgeVisible, getSourceTargetNodes } from './utils';
import { Position, Edge, Node, Elements, ConnectionLineType, ConnectionLineComponent, Transform } from '../../types';
interface EdgeRendererProps {
edgeTypes: any;
@@ -24,109 +15,7 @@ interface EdgeRendererProps {
arrowHeadColor: string;
markerEndId?: string;
connectionLineComponent?: ConnectionLineComponent;
}
interface EdgePositions {
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
}
function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
if (!handle) {
switch (position) {
case Position.Top:
return {
x: node.__rf.width / 2,
y: 0,
};
case Position.Right:
return {
x: node.__rf.width,
y: node.__rf.height / 2,
};
case Position.Bottom:
return {
x: node.__rf.width / 2,
y: node.__rf.height,
};
case Position.Left:
return {
x: 0,
y: node.__rf.height / 2,
};
}
}
switch (position) {
case Position.Top:
return {
x: handle.x + handle.width / 2,
y: handle.y,
};
case Position.Right:
return {
x: handle.x + handle.width,
y: handle.y + handle.height / 2,
};
case Position.Bottom:
return {
x: handle.x + handle.width / 2,
y: handle.y + handle.height,
};
case Position.Left:
return {
x: handle.x,
y: handle.y + handle.height / 2,
};
}
}
function getHandle(bounds: HandleElement[], handleId: ElementId | null): HandleElement | null | undefined {
let handle = null;
if (!bounds) {
return null;
}
// there is no handleId when there are no multiple handles/ handles with ids
// so we just pick the first one
if (bounds.length === 1 || !handleId) {
handle = bounds[0];
} else if (handleId) {
handle = bounds.find((d) => d.id === handleId);
}
if (typeof handle === 'undefined') {
return null;
}
return handle;
}
function getEdgePositions(
sourceNode: Node,
sourceHandle: HandleElement | unknown,
sourcePosition: Position,
targetNode: Node,
targetHandle: HandleElement | unknown,
targetPosition: Position
): EdgePositions {
const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
const sourceX = sourceNode.__rf.position.x + sourceHandlePos.x;
const sourceY = sourceNode.__rf.position.y + sourceHandlePos.y;
const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle);
const targetX = targetNode.__rf.position.x + targetHandlePos.x;
const targetY = targetNode.__rf.position.y + targetHandlePos.y;
return {
sourceX,
sourceY,
targetX,
targetY,
};
onlyRenderVisibleElements: boolean;
}
function renderEdge(
@@ -134,23 +23,23 @@ function renderEdge(
props: EdgeRendererProps,
nodes: Node[],
selectedElements: Elements | null,
elementsSelectable: boolean
elementsSelectable: boolean,
transform: Transform,
width: number,
height: number,
onlyRenderVisibleElements: boolean
) {
const sourceId = edge.source;
const sourceHandleId = edge.sourceHandle || null;
const targetId = edge.target;
const targetHandleId = edge.targetHandle || null;
const sourceNode = nodes.find((n) => n.id === sourceId);
const targetNode = nodes.find((n) => n.id === targetId);
const { sourceNode, targetNode } = getSourceTargetNodes(edge, nodes);
if (!sourceNode) {
console.warn(`couldn't create edge for source id: ${sourceId}`);
console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`);
return null;
}
if (!targetNode) {
console.warn(`couldn't create edge for target id: ${targetId}`);
console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`);
return null;
}
@@ -166,12 +55,12 @@ function renderEdge(
const targetPosition = targetHandle ? targetHandle.position : Position.Top;
if (!sourceHandle) {
console.warn(`couldn't create edge for source handle id: ${sourceHandleId}`);
console.warn(`couldn't create edge for source handle id: ${sourceHandleId}; edge id: ${edge.id}`);
return null;
}
if (!targetHandle) {
console.warn(`couldn't create edge for source handle id: ${targetHandleId}`);
console.warn(`couldn't create edge for target handle id: ${targetHandleId}; edge id: ${edge.id}`);
return null;
}
@@ -184,7 +73,21 @@ function renderEdge(
targetPosition
);
const isSelected = selectedElements ? selectedElements.some((elm) => isEdge(elm) && elm.id === edge.id) : false;
const isVisible = onlyRenderVisibleElements
? isEdgeVisible({
sourcePos: { x: sourceX, y: sourceY },
targetPos: { x: targetX, y: targetY },
width,
height,
transform,
})
: true;
if (!isVisible) {
return null;
}
const isSelected = selectedElements?.some((elm) => isEdge(elm) && elm.id === edge.id) || false;
return (
<EdgeComponent
@@ -222,9 +125,8 @@ function renderEdge(
}
const EdgeRenderer = (props: EdgeRendererProps) => {
const [tX, tY, tScale] = useStoreState((state) => state.transform);
const transform = useStoreState((state) => state.transform);
const edges = useStoreState((state) => state.edges);
const nodes = useStoreState((state) => state.nodes);
const connectionNodeId = useStoreState((state) => state.connectionNodeId);
const connectionHandleId = useStoreState((state) => state.connectionHandleId);
const connectionHandleType = useStoreState((state) => state.connectionHandleType);
@@ -234,21 +136,39 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
const elementsSelectable = useStoreState((state) => state.elementsSelectable);
const width = useStoreState((state) => state.width);
const height = useStoreState((state) => state.height);
const { connectionLineType, arrowHeadColor, connectionLineStyle, connectionLineComponent } = props;
const nodes = useStoreState((state) => state.nodes);
if (!width) {
return null;
}
const transformStyle = `translate(${tX},${tY}) scale(${tScale})`;
const {
connectionLineType,
arrowHeadColor,
connectionLineStyle,
connectionLineComponent,
onlyRenderVisibleElements,
} = props;
const transformStyle = `translate(${transform[0]},${transform[1]}) scale(${transform[2]})`;
const renderConnectionLine = connectionNodeId && connectionHandleType;
return (
<svg width={width} height={height} className="react-flow__edges">
<MarkerDefinitions color={arrowHeadColor} />
<g transform={transformStyle}>
{edges.map((edge: Edge) => renderEdge(edge, props, nodes, selectedElements, elementsSelectable))}
{edges.map((edge: Edge) =>
renderEdge(
edge,
props,
nodes,
selectedElements,
elementsSelectable,
transform,
width,
height,
onlyRenderVisibleElements
)
)}
{renderConnectionLine && (
<ConnectionLine
nodes={nodes}
@@ -257,7 +177,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
connectionHandleType={connectionHandleType!}
connectionPositionX={connectionPosition.x}
connectionPositionY={connectionPosition.y}
transform={[tX, tY, tScale]}
transform={transform}
connectionLineStyle={connectionLineStyle}
connectionLineType={connectionLineType}
isConnectable={nodesConnectable}
src/container/EdgeRenderer/utils.ts
+142 -1
View File
@@ -2,8 +2,19 @@ import { ComponentType } from 'react';
import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
import wrapEdge from '../../components/Edges/wrapEdge';
import { rectToBox } from '../../utils/graph';
import { EdgeTypesType, EdgeProps } from '../../types';
import {
EdgeTypesType,
EdgeProps,
Position,
Node,
XYPosition,
ElementId,
HandleElement,
Transform,
Edge,
} from '../../types';
export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType {
const standardTypes: EdgeTypesType = {
@@ -27,3 +38,133 @@ export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType {
...specialTypes,
};
}
export function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
const x = (handle?.x || 0) + node.__rf.position.x;
const y = (handle?.y || 0) + node.__rf.position.y;
const width = handle?.width || node.__rf.width;
const height = handle?.height || node.__rf.height;
switch (position) {
case Position.Top:
return {
x: x + width / 2,
y,
};
case Position.Right:
return {
x: x + width,
y: y + height / 2,
};
case Position.Bottom:
return {
x: x + width / 2,
y: y + height,
};
case Position.Left:
return {
x,
y: y + height / 2,
};
}
}
export function getHandle(bounds: HandleElement[], handleId: ElementId | null): HandleElement | null {
if (!bounds) {
return null;
}
// there is no handleId when there are no multiple handles/ handles with ids
// so we just pick the first one
let handle = null;
if (bounds.length === 1 || !handleId) {
handle = bounds[0];
} else if (handleId) {
handle = bounds.find((d) => d.id === handleId);
}
return typeof handle === 'undefined' ? null : handle;
}
interface EdgePositions {
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
}
export const getEdgePositions = (
sourceNode: Node,
sourceHandle: HandleElement | unknown,
sourcePosition: Position,
targetNode: Node,
targetHandle: HandleElement | unknown,
targetPosition: Position
): EdgePositions => {
const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle);
return {
sourceX: sourceHandlePos.x,
sourceY: sourceHandlePos.y,
targetX: targetHandlePos.x,
targetY: targetHandlePos.y,
};
};
interface IsEdgeVisibleParams {
sourcePos: XYPosition;
targetPos: XYPosition;
width: number;
height: number;
transform: Transform;
}
export function isEdgeVisible({ sourcePos, targetPos, width, height, transform }: IsEdgeVisibleParams): boolean {
const edgeBox = {
x: Math.min(sourcePos.x, targetPos.x),
y: Math.min(sourcePos.y, targetPos.y),
x2: Math.max(sourcePos.x, targetPos.x),
y2: Math.max(sourcePos.y, targetPos.y),
};
if (edgeBox.x === edgeBox.x2) {
edgeBox.x2 += 1;
}
if (edgeBox.y === edgeBox.y2) {
edgeBox.y2 += 1;
}
const viewBox = rectToBox({
x: (0 - transform[0]) / transform[2],
y: (0 - transform[1]) / transform[2],
width: width / transform[2],
height: height / transform[2],
});
const xOverlap = Math.max(0, Math.min(viewBox.x2, edgeBox.x2) - Math.max(viewBox.x, edgeBox.x));
const yOverlap = Math.max(0, Math.min(viewBox.y2, edgeBox.y2) - Math.max(viewBox.y, edgeBox.y));
const overlappingArea = Math.ceil(xOverlap * yOverlap);
return overlappingArea > 0;
}
type SourceTargetNode = {
sourceNode: Node | null;
targetNode: Node | null;
};
export const getSourceTargetNodes = (edge: Edge, nodes: Node[]): SourceTargetNode => {
return nodes.reduce(
(res, node) => {
if (node.id === edge.source) {
res.sourceNode = node;
} else if (node.id === edge.target) {
res.targetNode = node;
}
return res;
},
{ sourceNode: null, targetNode: null } as SourceTargetNode
);
};
src/container/FlowRenderer/index.tsx
+4 -1
View File
@@ -19,7 +19,8 @@ interface FlowRendererProps
| 'snapGrid'
| 'connectionLineType'
| 'arrowHeadColor'
| 'onlyRenderVisibleNodes'
| 'onlyRenderVisibleElements'
| 'selectNodesOnDrag'
> {
children: ReactNode;
}
@@ -40,6 +41,7 @@ const FlowRenderer = ({
zoomOnScroll,
panOnScroll,
panOnScrollSpeed,
panOnScrollMode,
zoomOnDoubleClick,
paneMoveable,
defaultPosition,
@@ -91,6 +93,7 @@ const FlowRenderer = ({
zoomOnScroll={zoomOnScroll}
panOnScroll={panOnScroll}
panOnScrollSpeed={panOnScrollSpeed}
panOnScrollMode={panOnScrollMode}
zoomOnDoubleClick={zoomOnDoubleClick}
paneMoveable={paneMoveable}
defaultPosition={defaultPosition}
src/container/GraphView/index.tsx
+28 -82
View File
@@ -1,80 +1,30 @@
import React, { useEffect, useRef, memo, CSSProperties, MouseEvent, WheelEvent } from 'react';
import React, { useEffect, useRef, memo } from 'react';
import { useStoreState, useStoreActions, useStore } from '../../store/hooks';
import { useStoreActions, useStore } from '../../store/hooks';
import FlowRenderer from '../FlowRenderer';
import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer';
import useElementUpdater from '../../hooks/useElementUpdater';
import { onLoadProject, onLoadGetElements } from '../../utils/graph';
import {
Elements,
NodeTypesType,
EdgeTypesType,
OnLoadFunc,
Node,
Edge,
Connection,
ConnectionLineType,
ConnectionLineComponent,
FlowTransform,
OnConnectStartFunc,
OnConnectStopFunc,
OnConnectEndFunc,
TranslateExtent,
} from '../../types';
import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
export interface GraphViewProps {
elements: Elements;
onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
onElementsRemove?: (elements: Elements) => 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;
onConnectEnd?: OnConnectEndFunc;
onLoad?: OnLoadFunc;
onMove?: (flowTransform?: FlowTransform) => void;
onMoveStart?: (flowTransform?: FlowTransform) => void;
onMoveEnd?: (flowTransform?: FlowTransform) => void;
onPaneScroll?: (event?: WheelEvent) => void;
onPaneClick?: (event: MouseEvent) => void;
onPaneContextMenu?: (event: MouseEvent) => void;
onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
selectionKeyCode: number;
import { ReactFlowProps } from '../ReactFlow';
import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode } from '../../types';
export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange' | 'elements'> {
nodeTypes: NodeTypesType;
edgeTypes: EdgeTypesType;
selectionKeyCode: KeyCode;
deleteKeyCode: KeyCode;
multiSelectionKeyCode: KeyCode;
connectionLineType: ConnectionLineType;
connectionLineStyle?: CSSProperties;
connectionLineComponent?: ConnectionLineComponent;
deleteKeyCode: number;
multiSelectionKeyCode: number;
snapToGrid: boolean;
snapGrid: [number, number];
onlyRenderVisibleNodes: boolean;
nodesDraggable?: boolean;
nodesConnectable?: boolean;
elementsSelectable?: boolean;
selectNodesOnDrag?: boolean;
minZoom?: number;
maxZoom?: number;
onlyRenderVisibleElements: boolean;
defaultZoom: number;
defaultPosition: [number, number];
translateExtent?: TranslateExtent;
arrowHeadColor: string;
markerEndId?: string;
zoomOnScroll?: boolean;
panOnScroll?: boolean;
panOnScrollSpeed?: number;
zoomOnDoubleClick?: boolean;
paneMoveable?: boolean;
selectNodesOnDrag: boolean;
}
const GraphView = ({
@@ -102,18 +52,17 @@ const GraphView = ({
multiSelectionKeyCode,
onElementsRemove,
deleteKeyCode,
elements,
onConnect,
onConnectStart,
onConnectStop,
onConnectEnd,
snapToGrid,
snapGrid,
onlyRenderVisibleNodes,
onlyRenderVisibleElements,
nodesDraggable,
nodesConnectable,
elementsSelectable,
selectNodesOnDrag = true,
selectNodesOnDrag,
minZoom,
maxZoom,
defaultZoom,
@@ -124,6 +73,7 @@ const GraphView = ({
zoomOnScroll,
panOnScroll,
panOnScrollSpeed,
panOnScrollMode,
zoomOnDoubleClick,
paneMoveable,
onPaneClick,
@@ -131,7 +81,6 @@ const GraphView = ({
onPaneContextMenu,
}: GraphViewProps) => {
const isInitialised = useRef<boolean>(false);
const d3Initialised = useStoreState((state) => state.d3Initialised);
const setOnConnect = useStoreActions((actions) => actions.setOnConnect);
const setOnConnectStart = useStoreActions((actions) => actions.setOnConnectStart);
const setOnConnectStop = useStoreActions((actions) => actions.setOnConnectStop);
@@ -141,35 +90,30 @@ const GraphView = ({
const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable);
const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable);
const setElementsSelectable = useStoreActions((actions) => actions.setElementsSelectable);
const setInitTransform = useStoreActions((actions) => actions.setInitTransform);
const setMinZoom = useStoreActions((actions) => actions.setMinZoom);
const setMaxZoom = useStoreActions((actions) => actions.setMaxZoom);
const setTranslateExtent = useStoreActions((actions) => actions.setTranslateExtent);
const fitView = useStoreActions((actions) => actions.fitView);
const zoom = useStoreActions((actions) => actions.zoom);
const zoomTo = useStoreActions((actions) => actions.zoomTo);
const currentStore = useStore();
useElementUpdater(elements);
const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
useEffect(() => {
if (!isInitialised.current && d3Initialised) {
if (!isInitialised.current && initialized) {
if (onLoad) {
onLoad({
fitView: (params = { padding: 0.1 }) => fitView(params),
zoomIn: () => zoom(0.2),
zoomOut: () => zoom(-0.2),
zoomTo: (zoomLevel) => zoomTo(zoomLevel),
zoomIn,
zoomOut,
zoomTo,
setTransform: transform,
project: onLoadProject(currentStore),
getElements: onLoadGetElements(currentStore),
setTransform: (transform: FlowTransform) =>
setInitTransform({ x: transform.x, y: transform.y, k: transform.zoom }),
toObject: onLoadToObject(currentStore),
});
}
isInitialised.current = true;
}
}, [d3Initialised, onLoad]);
}, [onLoad, zoomIn, zoomOut, zoomTo, transform, fitView, initialized]);
useEffect(() => {
if (onConnect) {
@@ -260,6 +204,7 @@ const GraphView = ({
zoomOnDoubleClick={zoomOnDoubleClick}
panOnScroll={panOnScroll}
panOnScrollSpeed={panOnScrollSpeed}
panOnScrollMode={panOnScrollMode}
paneMoveable={paneMoveable}
defaultPosition={defaultPosition}
defaultZoom={defaultZoom}
@@ -278,10 +223,10 @@ const GraphView = ({
onNodeContextMenu={onNodeContextMenu}
onNodeDragStop={onNodeDragStop}
onNodeDragStart={onNodeDragStart}
onlyRenderVisibleNodes={onlyRenderVisibleNodes}
selectNodesOnDrag={selectNodesOnDrag}
snapToGrid={snapToGrid}
snapGrid={snapGrid}
onlyRenderVisibleElements={onlyRenderVisibleElements}
/>
<EdgeRenderer
edgeTypes={edgeTypes}
@@ -291,6 +236,7 @@ const GraphView = ({
arrowHeadColor={arrowHeadColor}
markerEndId={markerEndId}
connectionLineComponent={connectionLineComponent}
onlyRenderVisibleElements={onlyRenderVisibleElements}
/>
</FlowRenderer>
);
src/container/NodeRenderer/index.tsx
+63 -74
View File
@@ -1,8 +1,8 @@
import React, { memo, ComponentType, MouseEvent } from 'react';
import React, { memo, useMemo, ComponentType, MouseEvent } from 'react';
import { useStoreState } from '../../store/hooks';
import { getNodesInside } from '../../utils/graph';
import { Node, Transform, NodeTypesType, WrapNodeProps, Elements, Edge } from '../../types';
import { useStoreState } from '../../store/hooks';
import { Node, NodeTypesType, WrapNodeProps, Edge } from '../../types';
interface NodeRendererProps {
nodeTypes: NodeTypesType;
@@ -14,87 +14,76 @@ interface NodeRendererProps {
onNodeContextMenu?: (event: MouseEvent, node: Node) => void;
onNodeDragStart?: (event: MouseEvent, node: Node) => void;
onNodeDragStop?: (event: MouseEvent, node: Node) => void;
onlyRenderVisibleNodes: boolean;
snapToGrid: boolean;
snapGrid: [number, number];
}
function renderNode(
node: Node,
props: NodeRendererProps,
transform: Transform,
selectedElements: Elements | null,
nodesDraggable: boolean,
nodesConnectable: boolean,
elementsSelectable: boolean
) {
const nodeType = node.type || 'default';
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
if (!props.nodeTypes[nodeType]) {
console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
}
const isSelected = selectedElements ? selectedElements.some(({ id }) => id === node.id) : false;
const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
const isInitialized = node.__rf.width !== null && node.__rf.height !== null;
return (
<NodeComponent
key={node.id}
id={node.id}
type={nodeType}
data={node.data}
xPos={node.__rf.position.x}
yPos={node.__rf.position.y}
isDragging={node.__rf.isDragging}
onClick={props.onElementClick}
onMouseEnter={props.onNodeMouseEnter}
onMouseMove={props.onNodeMouseMove}
onMouseLeave={props.onNodeMouseLeave}
onContextMenu={props.onNodeContextMenu}
onNodeDragStart={props.onNodeDragStart}
onNodeDragStop={props.onNodeDragStop}
transform={transform}
selected={isSelected}
style={node.style}
className={node.className}
isDraggable={isDraggable}
isSelectable={isSelectable}
isConnectable={isConnectable}
sourcePosition={node.sourcePosition}
targetPosition={node.targetPosition}
selectNodesOnDrag={props.selectNodesOnDrag}
isHidden={node.isHidden}
isInitialized={isInitialized}
snapGrid={props.snapGrid}
snapToGrid={props.snapToGrid}
/>
);
onlyRenderVisibleElements: boolean;
}
const NodeRenderer = (props: NodeRendererProps) => {
const nodes = useStoreState((s) => s.nodes);
const transform = useStoreState((s) => s.transform);
const selectedElements = useStoreState((s) => s.selectedElements);
const viewportBox = useStoreState((s) => s.viewportBox);
const nodesDraggable = useStoreState((s) => s.nodesDraggable);
const nodesConnectable = useStoreState((s) => s.nodesConnectable);
const elementsSelectable = useStoreState((s) => s.elementsSelectable);
const transform = useStoreState((state) => state.transform);
const selectedElements = useStoreState((state) => state.selectedElements);
const nodesDraggable = useStoreState((state) => state.nodesDraggable);
const nodesConnectable = useStoreState((state) => state.nodesConnectable);
const elementsSelectable = useStoreState((state) => state.elementsSelectable);
const viewportBox = useStoreState((state) => state.viewportBox);
const nodes = useStoreState((state) => state.nodes);
const transformStyle = {
transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
};
const visibleNodes = props.onlyRenderVisibleElements ? getNodesInside(nodes, viewportBox, transform, true) : nodes;
const renderNodes = props.onlyRenderVisibleNodes ? getNodesInside(nodes, viewportBox, transform, true) : nodes;
const transformStyle = useMemo(
() => ({
transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
}),
[transform[0], transform[1], transform[2]]
);
return (
<div className="react-flow__nodes" style={transformStyle}>
{renderNodes.map((node) =>
renderNode(node, props, transform, selectedElements, nodesDraggable, nodesConnectable, elementsSelectable)
)}
{visibleNodes.map((node) => {
const nodeType = node.type || 'default';
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
if (!props.nodeTypes[nodeType]) {
console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
}
const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
return (
<NodeComponent
key={node.id}
id={node.id}
className={node.className}
style={node.style}
type={nodeType}
data={node.data}
sourcePosition={node.sourcePosition}
targetPosition={node.targetPosition}
isHidden={node.isHidden}
xPos={node.__rf.position.x}
yPos={node.__rf.position.y}
isDragging={node.__rf.isDragging}
isInitialized={node.__rf.width !== null && node.__rf.height !== null}
snapGrid={props.snapGrid}
snapToGrid={props.snapToGrid}
selectNodesOnDrag={props.selectNodesOnDrag}
onClick={props.onElementClick}
onMouseEnter={props.onNodeMouseEnter}
onMouseMove={props.onNodeMouseMove}
onMouseLeave={props.onNodeMouseLeave}
onContextMenu={props.onNodeContextMenu}
onNodeDragStart={props.onNodeDragStart}
onNodeDragStop={props.onNodeDragStop}
scale={transform[2]}
selected={selectedElements?.some(({ id }) => id === node.id) || false}
isDraggable={isDraggable}
isSelectable={isSelectable}
isConnectable={isConnectable}
/>
);
})}
</div>
);
};
src/container/ReactFlow/Wrapper.tsx
+4 -3
View File
@@ -1,10 +1,11 @@
import React, { FC } from 'react';
import { StoreProvider, useStore } from 'easy-peasy';
import { StoreProvider } from 'easy-peasy';
import store, { StoreModel } from '../../store';
import store from '../../store';
import { useStore } from '../../store/hooks';
const Wrapper: FC = ({ children }) => {
const easyPeasyStore = useStore<StoreModel>();
const easyPeasyStore = useStore();
const isWrapepdWithReactFlowProvider = easyPeasyStore?.getState()?.reactFlowVersion;
if (isWrapepdWithReactFlowProvider) {
src/container/ReactFlow/index.tsx
+16 -17
View File
@@ -1,14 +1,8 @@
import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent, WheelEvent } from 'react';
import cc from 'classcat';
const nodeEnv: string = (typeof __ENV__ !== 'undefined' && __ENV__) as string;
if (nodeEnv !== 'production') {
const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React);
}
import GraphView from '../GraphView';
import ElementUpdater from '../../components/ElementUpdater';
import DefaultNode from '../../components/Nodes/DefaultNode';
import InputNode from '../../components/Nodes/InputNode';
import OutputNode from '../../components/Nodes/OutputNode';
@@ -32,6 +26,8 @@ import {
OnConnectStopFunc,
OnConnectEndFunc,
TranslateExtent,
KeyCode,
PanOnScrollMode,
} from '../../types';
import '../../style.css';
@@ -80,12 +76,12 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
connectionLineType?: ConnectionLineType;
connectionLineStyle?: CSSProperties;
connectionLineComponent?: ConnectionLineComponent;
deleteKeyCode?: number;
selectionKeyCode?: number;
multiSelectionKeyCode?: number;
deleteKeyCode?: KeyCode;
selectionKeyCode?: KeyCode;
multiSelectionKeyCode?: KeyCode;
snapToGrid?: boolean;
snapGrid?: [number, number];
onlyRenderVisibleNodes?: boolean;
onlyRenderVisibleElements?: boolean;
nodesDraggable?: boolean;
nodesConnectable?: boolean;
elementsSelectable?: boolean;
@@ -101,6 +97,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
zoomOnScroll?: boolean;
panOnScroll?: boolean;
panOnScrollSpeed?: number;
panOnScrollMode?: PanOnScrollMode;
zoomOnDoubleClick?: boolean;
}
@@ -133,12 +130,12 @@ const ReactFlow = ({
connectionLineType = ConnectionLineType.Bezier,
connectionLineStyle,
connectionLineComponent,
deleteKeyCode = 8,
selectionKeyCode = 16,
multiSelectionKeyCode = 91,
deleteKeyCode = 'Backspace',
selectionKeyCode = 'Shift',
multiSelectionKeyCode = 'Meta',
snapToGrid = false,
snapGrid = [15, 15],
onlyRenderVisibleNodes = true,
onlyRenderVisibleElements = true,
selectNodesOnDrag = true,
nodesDraggable,
nodesConnectable,
@@ -153,6 +150,7 @@ const ReactFlow = ({
zoomOnScroll = true,
panOnScroll = false,
panOnScrollSpeed = 0.5,
panOnScrollMode = PanOnScrollMode.Free,
zoomOnDoubleClick = true,
paneMoveable = true,
onPaneClick,
@@ -189,14 +187,13 @@ const ReactFlow = ({
onElementsRemove={onElementsRemove}
deleteKeyCode={deleteKeyCode}
multiSelectionKeyCode={multiSelectionKeyCode}
elements={elements}
onConnect={onConnect}
onConnectStart={onConnectStart}
onConnectStop={onConnectStop}
onConnectEnd={onConnectEnd}
snapToGrid={snapToGrid}
snapGrid={snapGrid}
onlyRenderVisibleNodes={onlyRenderVisibleNodes}
onlyRenderVisibleElements={onlyRenderVisibleElements}
nodesDraggable={nodesDraggable}
nodesConnectable={nodesConnectable}
elementsSelectable={elementsSelectable}
@@ -212,6 +209,7 @@ const ReactFlow = ({
zoomOnDoubleClick={zoomOnDoubleClick}
panOnScroll={panOnScroll}
panOnScrollSpeed={panOnScrollSpeed}
panOnScrollMode={panOnScrollMode}
paneMoveable={paneMoveable}
onPaneClick={onPaneClick}
onPaneScroll={onPaneScroll}
@@ -221,6 +219,7 @@ const ReactFlow = ({
onSelectionDragStop={onSelectionDragStop}
onSelectionContextMenu={onSelectionContextMenu}
/>
<ElementUpdater elements={elements} />
{onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
{children}
</Wrapper>
src/container/ZoomPane/index.tsx
+35 -10
View File
@@ -1,8 +1,12 @@
import React, { useEffect, useRef, ReactNode } from 'react';
import { zoom, zoomIdentity } from 'd3-zoom';
import { select } from 'd3-selection';
import { clamp } from '../../utils';
import useResizeHandler from '../../hooks/useResizeHandler';
import { useStoreState, useStoreActions } from '../../store/hooks';
import { FlowTransform, TranslateExtent } from '../../types';
import { useStoreState, useStoreActions, useStore } from '../../store/hooks';
import { FlowTransform, TranslateExtent, PanOnScrollMode } from '../../types';
interface ZoomPaneProps {
selectionKeyPressed: boolean;
@@ -10,6 +14,7 @@ interface ZoomPaneProps {
zoomOnScroll?: boolean;
panOnScroll?: boolean;
panOnScrollSpeed?: number;
panOnScrollMode?: PanOnScrollMode;
zoomOnDoubleClick?: boolean;
paneMoveable?: boolean;
defaultPosition?: [number, number];
@@ -39,6 +44,7 @@ const ZoomPane = ({
zoomOnScroll = true,
panOnScroll = false,
panOnScrollSpeed = 0.5,
panOnScrollMode = PanOnScrollMode.Free,
zoomOnDoubleClick = true,
selectionKeyPressed,
elementsSelectable,
@@ -51,18 +57,37 @@ const ZoomPane = ({
const zoomPane = useRef<HTMLDivElement>(null);
const prevTransform = useRef<FlowTransform>({ x: 0, y: 0, zoom: 0 });
const store = useStore();
const d3Zoom = useStoreState((s) => s.d3Zoom);
const d3Selection = useStoreState((s) => s.d3Selection);
const d3ZoomHandler = useStoreState((s) => s.d3ZoomHandler);
const initD3 = useStoreActions((actions) => actions.initD3);
const initD3Zoom = useStoreActions((actions) => actions.initD3Zoom);
const updateTransform = useStoreActions((actions) => actions.updateTransform);
useResizeHandler(zoomPane);
useEffect(() => {
if (zoomPane.current) {
initD3({ zoomPane: zoomPane.current, defaultPosition, defaultZoom, translateExtent });
const state = store.getState();
const currentTranslateExtent = typeof translateExtent !== 'undefined' ? translateExtent : state.translateExtent;
const d3ZoomInstance = zoom().scaleExtent([state.minZoom, state.maxZoom]).translateExtent(currentTranslateExtent);
const selection = select(zoomPane.current as Element).call(d3ZoomInstance);
const clampedX = clamp(defaultPosition[0], currentTranslateExtent[0][0], currentTranslateExtent[1][0]);
const clampedY = clamp(defaultPosition[1], currentTranslateExtent[0][1], currentTranslateExtent[1][1]);
const clampedZoom = clamp(defaultZoom, state.minZoom, state.maxZoom);
const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom);
d3ZoomInstance.transform(selection, updatedTransform);
initD3Zoom({
d3Zoom: d3ZoomInstance,
d3Selection: selection,
d3ZoomHandler: selection.on('wheel.zoom'),
// we need to pass transform because zoom handler is not registered when we set the initial transform
transform: [clampedX, clampedY, clampedZoom],
});
}
}, []);
@@ -78,13 +103,13 @@ const ZoomPane = ({
// increase scroll speed in firefox
// firefox: deltaMode === 1; chrome: deltaMode === 0
const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
const deltaX = event.deltaX * deltaNormalize;
const deltaY = event.deltaY * deltaNormalize;
const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
d3Zoom.translateBy(
d3Selection,
(deltaX / currentZoom) * panOnScrollSpeed,
(deltaY / currentZoom) * panOnScrollSpeed
-(deltaX / currentZoom) * panOnScrollSpeed,
-(deltaY / currentZoom) * panOnScrollSpeed
);
})
.on('wheel.zoom', null);
@@ -92,7 +117,7 @@ const ZoomPane = ({
d3Selection.on('wheel', null).on('wheel.zoom', d3ZoomHandler);
}
}
}, [panOnScroll, d3Selection, d3Zoom, d3ZoomHandler]);
}, [panOnScroll, panOnScrollMode, d3Selection, d3Zoom, d3ZoomHandler]);
useEffect(() => {
if (d3Zoom) {
@@ -100,7 +125,7 @@ const ZoomPane = ({
d3Zoom.on('zoom', null);
} else {
d3Zoom.on('zoom', (event: any) => {
updateTransform(event.transform);
updateTransform([event.transform.x, event.transform.y, event.transform.k]);
if (onMove) {
const flowTransform = eventToFlowTransform(event.transform);
src/hooks/useGlobalKeyHandler.ts
+6 -6
View File
@@ -1,19 +1,18 @@
import { useEffect } from 'react';
import { useStoreState, useStoreActions } from '../store/hooks';
import { useStore, useStoreActions } from '../store/hooks';
import useKeyPress from './useKeyPress';
import { isNode, getConnectedEdges } from '../utils/graph';
import { Elements } from '../types';
import { Elements, KeyCode } from '../types';
interface HookParams {
deleteKeyCode: number;
multiSelectionKeyCode: number;
deleteKeyCode: KeyCode;
multiSelectionKeyCode: KeyCode;
onElementsRemove?: (elements: Elements) => void;
}
export default ({ deleteKeyCode, multiSelectionKeyCode, onElementsRemove }: HookParams): void => {
const selectedElements = useStoreState((state) => state.selectedElements);
const edges = useStoreState((state) => state.edges);
const store = useStore();
const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection);
const setMultiSelectionActive = useStoreActions((actions) => actions.setMultiSelectionActive);
@@ -23,6 +22,7 @@ export default ({ deleteKeyCode, multiSelectionKeyCode, onElementsRemove }: Hook
const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
useEffect(() => {
const { edges, selectedElements } = store.getState();
if (onElementsRemove && deleteKeyPressed && selectedElements) {
let elementsToRemove = selectedElements;
src/hooks/useKeyPress.ts
+21 -14
View File
@@ -1,31 +1,38 @@
import { useState, useEffect } from 'react';
import { isInputDOMNode } from '../utils';
import { KeyCode } from '../types';
export default (keyCode: number): boolean => {
export default (keyCode: KeyCode): boolean => {
const [keyPressed, setKeyPressed] = useState(false);
function downHandler(event: KeyboardEvent) {
if (event.keyCode === keyCode && !isInputDOMNode(event)) {
setKeyPressed(true);
}
}
const upHandler = (event: KeyboardEvent) => {
if (event.keyCode === keyCode && !isInputDOMNode(event)) {
setKeyPressed(false);
}
};
useEffect(() => {
const downHandler = (event: KeyboardEvent) => {
if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
event.preventDefault();
setKeyPressed(true);
}
};
const upHandler = (event: KeyboardEvent) => {
if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
setKeyPressed(false);
}
};
const resetHandler = () => setKeyPressed(false);
window.addEventListener('keydown', downHandler);
window.addEventListener('keyup', upHandler);
window.addEventListener('blur', resetHandler);
return () => {
window.removeEventListener('keydown', downHandler);
window.removeEventListener('keyup', upHandler);
window.removeEventListener('blur', resetHandler);
};
}, []);
}, [keyCode, setKeyPressed]);
return keyPressed;
};
src/hooks/useResizeHandler.ts
-1
View File
@@ -1,5 +1,4 @@
import { useEffect, MutableRefObject } from 'react';
import { ResizeObserver } from 'resize-observer';
import { useStoreActions } from '../store/hooks';
import { getDimensions } from '../utils';
src/hooks/useZoomPanHelper.ts
+64
View File
@@ -0,0 +1,64 @@
import { useMemo } from 'react';
import { zoomIdentity } from 'd3-zoom';
import { useStoreState, useStore } from '../store/hooks';
import { clamp } from '../utils';
import { getRectOfNodes } from '../utils/graph';
import { FitViewParams, FlowTransform, ZoomPanHelperFunctions } from '../types';
const initialZoomPanHelper: ZoomPanHelperFunctions = {
zoomIn: () => {},
zoomOut: () => {},
zoomTo: (_: number) => {},
transform: (_: FlowTransform) => {},
fitView: (_: FitViewParams = { padding: 0.1 }) => {},
initialized: false,
};
const usePanZoomHelper = (): ZoomPanHelperFunctions => {
const store = useStore();
const d3Zoom = useStoreState((s) => s.d3Zoom);
const d3Selection = useStoreState((s) => s.d3Selection);
const zoomPanHelperFunctions = useMemo<ZoomPanHelperFunctions>(() => {
if (d3Selection && d3Zoom) {
return {
zoomIn: () => d3Zoom.scaleBy(d3Selection, 1.2),
zoomOut: () => d3Zoom.scaleBy(d3Selection, 1 / 1.2),
zoomTo: (zoomLevel: number) => d3Zoom.scaleTo(d3Selection, zoomLevel),
transform: (transform: FlowTransform) => {
const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom);
d3Zoom.transform(d3Selection, nextTransform);
},
fitView: (options: FitViewParams = { padding: 0.1 }) => {
const { nodes, width, height, minZoom, maxZoom } = store.getState();
if (!nodes.length) {
return;
}
const bounds = getRectOfNodes(nodes);
const xZoom = width / (bounds.width * (1 + options.padding));
const yZoom = height / (bounds.height * (1 + options.padding));
const zoom = Math.min(xZoom, yZoom);
const clampedZoom = clamp(zoom, minZoom, maxZoom);
const boundsCenterX = bounds.x + bounds.width / 2;
const boundsCenterY = bounds.y + bounds.height / 2;
const x = width / 2 - boundsCenterX * clampedZoom;
const y = height / 2 - boundsCenterY * clampedZoom;
const transform = zoomIdentity.translate(x, y).scale(clampedZoom);
d3Zoom.transform(d3Selection, transform);
},
initialized: true,
};
}
return initialZoomPanHelper;
}, [d3Zoom, d3Selection]);
return zoomPanHelperFunctions;
};
export default usePanZoomHelper;
src/index.ts
+1
View File
@@ -9,6 +9,7 @@ export { getSmoothStepPath } from './components/Edges/SmoothStepEdge';
export { getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils';
export { isNode, isEdge, removeElements, addEdge, getOutgoers, getIncomers, getConnectedEdges } from './utils/graph';
export { default as useZoomPanHelper } from './hooks/useZoomPanHelper';
export * from './additional-components';
export * from './store/hooks';
src/store/index.ts
+23 -129
View File
@@ -1,13 +1,11 @@
import { createStore, Action, action, Thunk, thunk, computed, Computed } from 'easy-peasy';
import isEqual from 'fast-deep-equal';
import { Selection as D3Selection, ZoomBehavior } from 'd3';
import { zoom, zoomIdentity } from 'd3-zoom';
import { select } from 'd3-selection';
import { getDimensions, clamp } from '../utils';
import { getDimensions } from '../utils';
import { getNodesInside, getConnectedEdges, getRectOfNodes, isNode, isEdge } from '../utils/graph';
import { getHandleBounds } from '../components/Nodes/utils';
import { getNodesInside, getConnectedEdges, getRectOfNodes, isNode, isEdge } from '../utils/graph';
import {
ElementId,
Elements,
@@ -26,43 +24,35 @@ import {
SetConnectionId,
NodePosUpdate,
NodeDiffUpdate,
FitViewParams,
TranslateExtent,
SnapGrid,
} from '../types';
type TransformXYK = {
x: number;
y: number;
k: number;
};
type NodeDimensionUpdate = {
id: ElementId;
nodeElement: HTMLDivElement;
};
type InitD3 = {
zoomPane: Element;
defaultPosition: [number, number];
defaultZoom: number;
translateExtent?: TranslateExtent;
type InitD3Zoom = {
d3Zoom: ZoomBehavior<Element, unknown>;
d3Selection: D3Selection<Element, unknown, null, undefined>;
d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined;
transform: Transform;
};
export interface StoreModel {
width: number;
height: number;
viewportBox: Computed<StoreModel, Rect>;
transform: Transform;
elements: Elements;
nodes: Computed<StoreModel, Node[]>;
edges: Computed<StoreModel, Edge[]>;
selectedElements: Elements | null;
selectedNodesBbox: Rect;
viewportBox: Computed<StoreModel, Rect>;
d3Zoom: ZoomBehavior<Element, unknown> | null;
d3Selection: D3Selection<Element, unknown, null, undefined> | null;
d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined;
d3Initialised: boolean;
minZoom: number;
maxZoom: number;
translateExtent: TranslateExtent;
@@ -113,13 +103,11 @@ export interface StoreModel {
setSelectedElements: Action<StoreModel, Elements | Node | Edge>;
addSelectedElements: Thunk<StoreModel, Elements | Node | Edge>;
updateTransform: Action<StoreModel, TransformXYK>;
setInitTransform: Action<StoreModel, TransformXYK>;
updateTransform: Action<StoreModel, Transform>;
updateSize: Action<StoreModel, Dimensions>;
initD3: Action<StoreModel, InitD3>;
initD3Zoom: Action<StoreModel, InitD3Zoom>;
setMinZoom: Action<StoreModel, number>;
setMaxZoom: Action<StoreModel, number>;
@@ -142,29 +130,22 @@ export interface StoreModel {
updateUserSelection: Action<StoreModel, XYPosition>;
unsetUserSelection: Action<StoreModel>;
fitView: Action<StoreModel, FitViewParams>;
zoomTo: Action<StoreModel, number>;
zoom: Thunk<StoreModel, number, any, StoreModel>;
zoomIn: Thunk<StoreModel>;
zoomOut: Thunk<StoreModel>;
setMultiSelectionActive: Action<StoreModel, boolean>;
}
export const storeModel: StoreModel = {
width: 0,
height: 0,
viewportBox: computed((state) => ({ x: 0, y: 0, width: state.width, height: state.height })),
transform: [0, 0, 1],
elements: [],
nodes: computed((state) => state.elements.filter((el) => isNode(el)) as Node[]),
edges: computed((state) => state.elements.filter((el) => isEdge(el)) as Edge[]),
nodes: computed((state) => state.elements.filter(isNode)),
viewportBox: computed((state) => ({ x: 0, y: 0, width: state.width, height: state.height })),
edges: computed((state) => state.elements.filter(isEdge)),
selectedElements: null,
selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
d3Zoom: null,
d3Selection: null,
d3Initialised: false,
d3ZoomHandler: undefined,
minZoom: 0.5,
maxZoom: 2,
@@ -373,21 +354,9 @@ export const storeModel: StoreModel = {
}),
updateTransform: action((state, transform) => {
state.transform[0] = transform.x;
state.transform[1] = transform.y;
state.transform[2] = transform.k;
}),
setInitTransform: action((state, transform) => {
state.transform[0] = transform.x;
state.transform[1] = transform.y;
state.transform[2] = transform.k;
if (state.d3Selection) {
const updatedTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.k);
// we need to sync the d3 zoom transform with the updated transform
state.d3Selection.property('__zoom', updatedTransform);
}
state.transform[0] = transform[0];
state.transform[1] = transform[1];
state.transform[2] = transform[2];
}),
updateSize: action((state, size) => {
@@ -397,27 +366,14 @@ export const storeModel: StoreModel = {
state.height = size.height || 500;
}),
initD3: action((state, { zoomPane, defaultPosition, defaultZoom, translateExtent }) => {
const currentTranslateExtent = typeof translateExtent !== 'undefined' ? translateExtent : state.translateExtent;
const d3ZoomInstance = zoom().scaleExtent([state.minZoom, state.maxZoom]).translateExtent(currentTranslateExtent);
const selection = select(zoomPane).call(d3ZoomInstance);
initD3Zoom: action((state, { d3Zoom, d3Selection, d3ZoomHandler, transform }) => {
state.d3Zoom = d3Zoom;
state.d3Selection = d3Selection;
state.d3ZoomHandler = d3ZoomHandler;
const clampedX = clamp(defaultPosition[0], currentTranslateExtent[0][0], currentTranslateExtent[1][0]);
const clampedY = clamp(defaultPosition[1], currentTranslateExtent[0][1], currentTranslateExtent[1][1]);
const clampedZoom = clamp(defaultZoom, state.minZoom, state.maxZoom);
const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom);
selection.property('__zoom', updatedTransform);
const defaultHandler = selection.on('wheel.zoom');
state.transform[0] = clampedX;
state.transform[1] = clampedY;
state.transform[2] = clampedZoom;
state.d3Zoom = d3ZoomInstance;
state.d3Selection = selection;
state.d3ZoomHandler = defaultHandler;
state.d3Initialised = true;
state.transform[0] = transform[0];
state.transform[1] = transform[1];
state.transform[2] = transform[2];
}),
setMinZoom: action((state, minZoom) => {
@@ -481,68 +437,6 @@ export const storeModel: StoreModel = {
state.elementsSelectable = elementsSelectable;
}),
fitView: action((state, payload = { padding: 0.1 }) => {
const { padding } = payload;
const { nodes, width, height, d3Selection, minZoom, maxZoom } = state;
if (!d3Selection || !nodes.length) {
return;
}
const bounds = getRectOfNodes(nodes);
const xZoom = width / (bounds.width * (1 + padding));
const yZoom = height / (bounds.height * (1 + padding));
const zoom = Math.min(xZoom, yZoom);
const clampedZoom = clamp(zoom, minZoom, maxZoom);
const boundsCenterX = bounds.x + bounds.width / 2;
const boundsCenterY = bounds.y + bounds.height / 2;
const transform = [width / 2 - boundsCenterX * clampedZoom, height / 2 - boundsCenterY * clampedZoom];
const fittedTransform = zoomIdentity.translate(transform[0], transform[1]).scale(clampedZoom);
// we need to sync the d3 zoom transform with the fitted transform
d3Selection.property('__zoom', fittedTransform);
state.transform[0] = fittedTransform.x;
state.transform[1] = fittedTransform.y;
state.transform[2] = fittedTransform.k;
}),
zoomTo: action((state, zoomLevel) => {
const { d3Selection, transform, minZoom, maxZoom } = state;
const nextZoom = clamp(zoomLevel, minZoom, maxZoom);
if (d3Selection) {
// we want to zoom in and out to the center of the zoom pane
const center = [state.width / 2, state.height / 2];
const centerInverted = [(center[0] - transform[0]) / transform[2], (center[1] - transform[1]) / transform[2]];
const x = center[0] - centerInverted[0] * nextZoom;
const y = center[1] - centerInverted[1] * nextZoom;
const zoomedTransform = zoomIdentity.translate(x, y).scale(nextZoom);
// we need to sync the d3 zoom transform with the zoomed transform
d3Selection.property('__zoom', zoomedTransform);
state.transform[0] = zoomedTransform.x;
state.transform[1] = zoomedTransform.y;
state.transform[2] = zoomedTransform.k;
}
}),
zoom: thunk((actions, amount, helpers) => {
const { transform } = helpers.getState();
const nextZoom = transform[2] + amount;
actions.zoomTo(nextZoom);
}),
zoomIn: thunk((actions) => {
actions.zoom(0.2);
}),
zoomOut: thunk((actions) => {
actions.zoom(-0.2);
}),
setMultiSelectionActive: action((state, isActive) => {
state.multiSelectionActive = isActive;
}),
src/types/index.ts
+27 -1
View File
@@ -201,7 +201,7 @@ export interface WrapNodeProps {
type: string;
data: any;
selected: boolean;
transform: Transform;
scale: number;
xPos: number;
yPos: number;
isSelectable: boolean;
@@ -229,8 +229,16 @@ export interface WrapNodeProps {
export type FitViewParams = {
padding: number;
};
export type FlowExportObject = {
elements: Elements;
position: [number, number];
zoom: number;
};
export type FitViewFunc = (fitViewOptions?: FitViewParams) => void;
export type ProjectFunc = (position: XYPosition) => XYPosition;
export type ToObjectFunc = () => FlowExportObject;
export type OnLoadParams = {
zoomIn: () => void;
@@ -240,6 +248,7 @@ export type OnLoadParams = {
project: ProjectFunc;
getElements: () => Elements;
setTransform: (transform: FlowTransform) => void;
toObject: ToObjectFunc;
};
export type OnLoadFunc = (params: OnLoadParams) => void;
@@ -320,3 +329,20 @@ export type FlowTransform = {
};
export type TranslateExtent = [[number, number], [number, number]];
export type KeyCode = number | string;
export enum PanOnScrollMode {
Free = 'free',
Vertical = 'vertical',
Horizontal = 'horizontal',
}
export interface ZoomPanHelperFunctions {
zoomIn: () => void;
zoomOut: () => void;
zoomTo: (zoomLevel: number) => void;
transform: (transform: FlowTransform) => void;
fitView: (params?: FitViewParams) => void;
initialized: boolean;
}
src/utils/graph.ts
+29 -34
View File
@@ -1,7 +1,17 @@
import { Store } from 'easy-peasy';
import store, { StoreModel } from '../store';
import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams, Box, Connection } from '../types';
import { StoreModel } from '../store';
import {
ElementId,
Node,
Edge,
Elements,
Transform,
XYPosition,
Rect,
Box,
Connection,
FlowExportObject,
} from '../types';
export const isEdge = (element: Node | Connection | Edge): element is Edge =>
'id' in element && 'source' in element && 'target' in element;
@@ -106,12 +116,6 @@ export const onLoadProject = (currentStore: Store<StoreModel>) => {
};
};
export const project = (position: XYPosition): XYPosition => {
const { transform, snapToGrid, snapGrid } = store.getState();
return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
};
export const parseElement = (element: Node | Edge): Node | Edge => {
if (!element.id) {
throw new Error('All nodes and edges need to have an id.');
@@ -150,14 +154,14 @@ const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({
y2: Math.max(box1.y2, box2.y2),
});
const rectToBox = ({ x, y, width, height }: Rect): Box => ({
export const rectToBox = ({ x, y, width, height }: Rect): Box => ({
x,
y,
x2: x + width,
y2: y + height,
});
const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
x,
y,
width: x2 - x,
@@ -202,7 +206,7 @@ export const getNodesInside = (
const overlappingArea = Math.ceil(xOverlap * yOverlap);
if (width === null || height === null || isDragging) {
// at the beginnning all nodes have width & height === 0
// nodes are initialized with width and height = null
return true;
}
@@ -217,33 +221,18 @@ export const getNodesInside = (
};
export const getConnectedEdges = (nodes: Node[], edges: Edge[]): Edge[] => {
const nodeIds = nodes.map((n) => n.id);
const nodeIds = nodes.map((node) => node.id);
return edges.filter((e) => {
const sourceId = e.source.split('__')[0];
const targetId = e.target.split('__')[0];
return nodeIds.includes(sourceId) || nodeIds.includes(targetId);
});
return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target));
};
export const fitView = (params: FitViewParams = { padding: 0.1 }): void => {
store.getActions().fitView(params);
};
const zoom = (amount: number): void => {
store.getActions().zoom(amount);
};
export const zoomIn = (): void => zoom(0.2);
export const zoomOut = (): void => zoom(-0.2);
const parseElements = (nodes: Node[], edges: Edge[]): Elements => {
return [
...nodes.map((node) => {
const n = { ...node };
n.position = n.__rf.position;
delete n.__rf;
return n;
}),
@@ -259,8 +248,14 @@ export const onLoadGetElements = (currentStore: Store<StoreModel>) => {
};
};
export const getElements = (): Elements => {
const { nodes = [], edges = [] } = store.getState();
export const onLoadToObject = (currentStore: Store<StoreModel>) => {
return (): FlowExportObject => {
const { nodes = [], edges = [], transform } = currentStore.getState();
return parseElements(nodes, edges);
return {
elements: parseElements(nodes, edges),
position: [transform[0], transform[1]],
zoom: transform[2],
};
};
};