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

Develop (#35)

Browse Source 
* refactor(ts): add ReactFlowProps

* Refactor/grid.tsx (#24)

* chore(deps-dev): bump start-server-and-test from 1.10.4 to 1.10.5

Bumps [start-server-and-test](https://github.com/bahmutov/start-server-and-test) from 1.10.4 to 1.10.5.
- [Release notes](https://github.com/bahmutov/start-server-and-test/releases)
- [Commits](https://github.com/bahmutov/start-server-and-test/compare/v1.10.4...v1.10.5)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* chore(deps-dev): bump typescript from 3.6.3 to 3.6.4

Bumps [typescript](https://github.com/Microsoft/TypeScript) from 3.6.3 to 3.6.4.
- [Release notes](https://github.com/Microsoft/TypeScript/releases)
- [Commits](https://github.com/Microsoft/TypeScript/compare/v3.6.3...v3.6.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* refactor: grid.js -> grid.tsx

* refactor(bg): remove unused renderer

* refactor(connectionline): use ts

* refactor(ts): edges

* chore(build): update

* Refactor/typescript (WIP) (#25)

* refactor(store): use ts

* refactor(edgewrapper): use ts

* fix(handle): provide onConnect default func

* refactor(nodeselection): use ts

* refactor(userselction): use ts

* refactor(plugins): use ts

* refactor(hooks): use ts

* refactor(nodes): use ts

* refactor(edgerenderer): use ts

* refactor(graphview): use ts

* refactor(utils): rename js to ts

* refactor(app): fix ts errors

* fix(ts): errors

* fix(app): ts errors

* refactor(app): ts erros

* refactor(app): ts errors

* fix(utils): removeElements

* feat(example): add empty renderer closes #34

* fix(connect): dont drag node on connect

* chore(build): update
This commit is contained in:
Moritz
2019-10-15 22:44:10 +02:00
committed by GitHub
parent 1651ed332a
commit c5632323c3
55 changed files with 4399 additions and 13047 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+3
View File
@@ -0,0 +1,3 @@
{
"typescript.tsdk": "node_modules/typescript/lib"
}
dist/ReactFlow.esm.js
Vendored
+1533 -2184
View File
File diff suppressed because it is too large Load Diff
dist/ReactFlow.esm.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/ReactFlow.js
Vendored
+1533 -2184
View File
File diff suppressed because it is too large Load Diff
dist/ReactFlow.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
example/package-lock.json
Generated
+60 -7924
View File
File diff suppressed because it is too large Load Diff
example/src/Empty/index.js
+83
View File
@@ -0,0 +1,83 @@
import React, { PureComponent } from 'react';
import Graph, { removeElements, addEdge, getOutgoers } from 'react-flow';
const onNodeDragStop = node => console.log('drag stop', node);
class App extends PureComponent {
constructor() {
super();
this.state = {
graphLoaded: false,
elements: []
};
}
onLoad(graphInstance) {
console.log('graph loaded:', graphInstance);
this.graphInstance = graphInstance;
this.setState({
graphLoaded: true
});
}
onElementClick(element) {
console.log('click', element);
console.log('outgoers', getOutgoers(element, this.state.elements));
}
onElementsRemove(elementsToRemove) {
this.setState(prevState => ({
elements: removeElements(elementsToRemove, prevState.elements)
}));
}
onConnect(params) {
console.log('connect', params);
this.setState(prevState => ({
elements: addEdge(params, prevState.elements)
}));
}
onAdd() {
this.setState((prevState) => {
const nodeId = (prevState.elements.length + 1).toString();
return {
...prevState,
elements: prevState.elements.concat({
id: nodeId,
data: { label: `Node: ${nodeId}` },
position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
})
};
});
}
render() {
return (
<Graph
elements={this.state.elements}
onLoad={graphInstance => this.onLoad(graphInstance)}
onElementClick={element => this.onElementClick(element)}
onElementsRemove={elements => this.onElementsRemove(elements)}
onConnect={params => this.onConnect(params)}
onNodeDragStop={onNodeDragStop}
style={{ width: '100%', height: '100%' }}
backgroundType="lines"
>
<button
type="button"
onClick={() => this.onAdd()}
style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
>
add
</button>
</Graph>
);
}
}
export default App;
example/src/index.js
+4
View File
@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Advanced from './Advanced';
import Basic from './Basic';
import Empty from './Empty';
import './index.css';
@@ -13,6 +14,9 @@ ReactDOM.render((
<Route path="/basic">
<Basic />
</Route>
<Route path="/empty">
<Empty />
</Route>
<Route path="/">
<Advanced />
</Route>
package-lock.json
Generated
+14 -3
View File
@@ -1315,6 +1315,12 @@
"rollup-pluginutils": "^2.8.1"
}
},
"@types/classnames": {
"version": "2.2.9",
"resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.9.tgz",
"integrity": "sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A==",
"dev": true
},
"@types/d3": {
"version": "5.7.2",
"resolved": "https://registry.npmjs.org/@types/d3/-/d3-5.7.2.tgz",
@@ -1588,9 +1594,9 @@
"dev": true
},
"@types/node": {
"version": "12.7.11",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.11.tgz",
"integrity": "sha512-Otxmr2rrZLKRYIybtdG/sgeO+tHY20GxeDjcGmUnmmlCWyEnv2a2x1ZXBo3BTec4OiTXMQCiazB8NMBf0iRlFw==",
"version": "12.7.12",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.12.tgz",
"integrity": "sha512-KPYGmfD0/b1eXurQ59fXD1GBzhSQfz6/lKBxkaHX9dKTzjXbK68Zt7yGUxUsCS1jeTy/8aL+d9JEr+S54mpkWQ==",
"dev": true
},
"@types/normalize-package-data": {
@@ -7046,6 +7052,11 @@
"integrity": "sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=",
"dev": true
},
"resize-observer": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/resize-observer/-/resize-observer-1.0.0.tgz",
"integrity": "sha512-D7UFShDm2TgrEDEyeg+/tTEbvOgPWlvPAfJtxiKp+qutu6HowmcGJKjECgGru0PPDIj3SAucn3ZPpOx54fF7DQ=="
},
"resolve": {
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.0.tgz",
package.json
+2
View File
@@ -13,12 +13,14 @@
"easy-peasy": "^3.1.0",
"fast-deep-equal": "^3.0.0-beta.2",
"react-draggable": "^4.0.3",
"resize-observer": "^1.0.0",
"scheduler": "^0.16.2"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3",
"@types/classnames": "^2.2.9",
"@types/d3": "^5.7.2",
"@types/react": "^16.9.6",
"@types/react-dom": "^16.9.2",
src/components/BackgroundGrid/index.tsx
+85
View File
@@ -0,0 +1,85 @@
import React, {memo} from 'react';
import classnames from 'classnames';
import { useStoreState } from '../../store/hooks';
import { GridType } from '../../types';
interface GridProps {
backgroundType?: GridType;
gap?: number;
color?: string;
size?: number;
style?: React.CSSProperties;
className?: string | null;
};
const baseStyles: React.CSSProperties = {
position: 'absolute',
top: 0,
left: 0,
};
const createGridLines = (width: number, height: number, xOffset: number, yOffset: number, gap: number): string => {
const lineCountX = Math.ceil(width / gap) + 1;
const lineCountY = Math.ceil(height / gap) + 1;
const xValues = Array.from({length: lineCountX}, (_, i) => `M${i * gap + xOffset} 0 V${height}`);
const yValues = Array.from({length: lineCountY}, (_, i) => `M0 ${i * gap + yOffset} H${width}`);
return [...xValues, ...yValues].join(' ');
};
const createGridDots = (
width: number,
height: number,
xOffset: number,
yOffset: number,
gap: number,
size: number
): string => {
const lineCountX = Math.ceil(width / gap) + 1;
const lineCountY = Math.ceil(height / gap) + 1;
const values = Array.from({length: lineCountX}, (_, col) => {
const x = col * gap + xOffset;
return Array.from({length: lineCountY}, (_, row) => {
const y = row * gap + yOffset;
return `M${x} ${y - size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`;
}).join(' ');
});
return values.join(' ');
};
const Grid = memo(
({gap = 24, color = '#aaa', size = 0.5, style = {}, className = null, backgroundType = GridType.Dots}: GridProps) => {
const {
width,
height,
transform: [x, y, scale],
} = useStoreState(s => s);
const gridClasses = classnames('react-flow__grid', className);
const scaledGap = gap * scale;
const xOffset = x % scaledGap;
const yOffset = y % scaledGap;
const isLines = backgroundType === 'lines';
const path = isLines
? createGridLines(width, height, xOffset, yOffset, scaledGap)
: createGridDots(width, height, xOffset, yOffset, scaledGap, size);
const fill = isLines ? 'none' : color;
const stroke = isLines ? color : 'none';
return (
<svg width={width} height={height} style={{...baseStyles, ...style}} className={gridClasses}>
<path fill={fill} stroke={stroke} strokeWidth={size} d={path} />
</svg>
);
}
);
Grid.displayName = 'Grid';
export default Grid;
src/components/ConnectionLine/index.js
-49
View File
@@ -1,49 +0,0 @@
import React, { useEffect, useState } from 'react';
import cx from 'classnames';
export default (props) => {
const [sourceNode, setSourceNode] = useState(null);
const hasHandleId = props.connectionSourceId.includes('__');
const sourceIdSplitted = props.connectionSourceId.split('__');
const nodeId = sourceIdSplitted[0];
const handleId = hasHandleId ? sourceIdSplitted[1] : null;
useEffect(() => {
setSourceNode(props.nodes.find(n => n.id === nodeId));
}, []);
if (!sourceNode) {
return null;
}
const style = props.connectionLineStyle || {};
const className = cx('react-flow__edge', 'connection', props.className);
const sourceHandle = handleId ? sourceNode.__rg.handleBounds.source.find(d => d.id === handleId) : sourceNode.__rg.handleBounds.source[0];
const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
const sourceHandleY = sourceHandle ? sourceHandle.y + (sourceHandle.height / 2) : sourceNode.__rg.height;
const sourceX = sourceNode.__rg.position.x + sourceHandleX;
const sourceY = sourceNode.__rg.position.y + sourceHandleY;
const targetX = (props.connectionPositionX - props.transform[0]) * (1 / props.transform[2]);
const targetY = (props.connectionPositionY - props.transform[1]) * (1 / props.transform[2]);
let dAttr = '';
if (props.connectionLineType === 'bezier') {
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
} else {
dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`;
}
return (
<g className={className}>
<path
d={dAttr}
{...style}
/>
</g>
);
};
src/components/ConnectionLine/index.tsx
+67
View File
@@ -0,0 +1,67 @@
import React, { useEffect, useState, SVGAttributes } from 'react';
import cx from 'classnames';
import { ElementId, Node, Transform, HandleElement } from '../../types';
interface ConnectionLineProps {
connectionSourceId: ElementId;
connectionPositionX: number;
connectionPositionY: number;
connectionLineType?: string | null;
nodes: Node[];
transform: Transform;
connectionLineStyle?: SVGAttributes<{}>;
className?: string;
};
export default ({
connectionSourceId, connectionLineStyle = {}, connectionPositionX, connectionPositionY,
connectionLineType, nodes = [], className, transform
}: ConnectionLineProps) => {
const [sourceNode, setSourceNode] = useState<Node | null>(null);
const hasHandleId = connectionSourceId.includes('__');
const sourceIdSplitted = connectionSourceId.split('__');
const nodeId = sourceIdSplitted[0];
const handleId = hasHandleId ? sourceIdSplitted[1] : null;
useEffect(() => {
const nextSourceNode = nodes.find(n => n.id === nodeId) || null;
setSourceNode(nextSourceNode);
}, []);
if (!sourceNode) {
return null;
}
const edgeClasses: string = cx('react-flow__edge', 'connection', className);
const sourceHandle = handleId ?
sourceNode.__rg.handleBounds.source.find((d: HandleElement) => d.id === handleId) :
sourceNode.__rg.handleBounds.source[0];
const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
const sourceHandleY = sourceHandle ? sourceHandle.y + (sourceHandle.height / 2) : sourceNode.__rg.height;
const sourceX = sourceNode.__rg.position.x + sourceHandleX;
const sourceY = sourceNode.__rg.position.y + sourceHandleY;
const targetX = (connectionPositionX - transform[0]) * (1 / transform[2]);
const targetY = (connectionPositionY - transform[1]) * (1 / transform[2]);
let dAttr: string = '';
if (connectionLineType === 'bezier') {
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
} else {
dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`;
}
return (
<g className={edgeClasses}>
<path
d={dAttr}
{...connectionLineStyle}
/>
</g>
);
};
src/components/Edges/BezierEdge.js → src/components/Edges/BezierEdge.tsx
+4 -2
View File
@@ -1,9 +1,11 @@
import React, { memo } from 'react';
import { EdgeBezierProps } from '../../types';
export default memo(({
sourceX, sourceY, targetX, targetY,
sourcePosition, targetPosition, style = {}
}) => {
sourcePosition = 'bottom', targetPosition = 'top', style = {}
}: EdgeBezierProps) => {
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
src/components/Edges/StepEdge.js → src/components/Edges/StepEdge.tsx
+4 -4
View File
@@ -1,10 +1,10 @@
import React, { memo } from 'react';
export default memo((props) => {
const {
sourceX, sourceY, targetX, targetY, style = {}
} = props;
import { EdgeProps } from '../../types';
export default memo(({
sourceX, sourceY, targetX, targetY, style = {}
} : EdgeProps) => {
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
src/components/Edges/StraightEdge.js → src/components/Edges/StraightEdge.tsx
+4 -4
View File
@@ -1,10 +1,10 @@
import React, { memo } from 'react';
export default memo((props) => {
const {
sourceX, sourceY, targetX, targetY, style = {}
} = props;
import { EdgeProps } from '../../types';
export default memo(({
sourceX, sourceY, targetX, targetY, style = {}
}: EdgeProps) => {
return (
<path
{...style}
src/components/Edges/wrapEdge.js
-37
View File
@@ -1,37 +0,0 @@
import React, { memo } from 'react';
import cx from 'classnames';
import { inInputDOMNode } from '../../utils';
import store from '../../store';
export default EdgeComponent => {
const EdgeWrapper = memo((props) => {
const {
id, source, target, type,
animated, selected, onClick
} = props;
const edgeClasses = cx('react-flow__edge', { selected, animated });
const onEdgeClick = (evt) => {
if (inInputDOMNode(evt)) {
return false;
}
store.dispatch.setSelectedElements({ id, source, target });
onClick({ id, source, target, type });
};
return (
<g
className={edgeClasses}
onClick={onEdgeClick}
>
<EdgeComponent {...props} />
</g>
);
});
EdgeWrapper.displayName = 'EdgeWrapper';
EdgeWrapper.whyDidYouRender = false;
return EdgeWrapper;
};
src/components/Edges/wrapEdge.tsx
+46
View File
@@ -0,0 +1,46 @@
import React, { memo, MouseEvent, ComponentType } from 'react';
import cx from 'classnames';
import { isInputDOMNode } from '../../utils';
import store from '../../store';
import { EdgeWrapperProps } from '../../types';
export default (EdgeComponent: ComponentType<EdgeWrapperProps>) => {
const EdgeWrapper = memo(({
id, source, target, type,
animated, selected, onClick,
...rest
}: EdgeWrapperProps) => {
const edgeClasses = cx('react-flow__edge', { selected, animated });
const onEdgeClick = (evt: MouseEvent) => {
if (isInputDOMNode(evt)) {
return false;
}
store.dispatch.setSelectedElements({ id, source, target });
onClick({ id, source, target, type });
};
return (
<g
className={edgeClasses}
onClick={onEdgeClick}
>
<EdgeComponent
id={id}
source={source}
target={target}
type={type}
animated={animated}
selected={selected}
onClick={onClick}
{...rest}
/>
</g>
);
});
EdgeWrapper.displayName = 'EdgeWrapper';
return EdgeWrapper;
};
src/components/Handle/BaseHandle.js → src/components/Handle/BaseHandle.tsx
+55 -22
View File
@@ -1,35 +1,69 @@
import React, { memo } from 'react';
import React, { memo, MouseEvent as ReactMouseEvent } from 'react';
import cx from 'classnames';
function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarget, isValidConnection }) {
const containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
let recentHoveredHandle = null;
import { HandleType, ElementId, Position, XYPosition, OnConnectFunc, Connection } from '../../types';
type ValidConnectionFunc = (connection: Connection) => boolean;
interface BaseHandleProps {
type: HandleType;
nodeId: ElementId;
onConnect: OnConnectFunc;
position: Position;
setSourceId: (nodeId: ElementId) => void;
setPosition: (pos: XYPosition) => void;
isValidConnection: ValidConnectionFunc;
id?: ElementId | boolean;
className?: string;
};
type Result = {
elementBelow: Element;
isValid: boolean;
connection: Connection;
isHoveringHandle: boolean;
};
function onMouseDown(
evt: ReactMouseEvent, nodeId: ElementId, setSourceId: (nodeId: ElementId) => void, setPosition: (pos: XYPosition) => any,
onConnect: OnConnectFunc, isTarget: boolean, isValidConnection: ValidConnectionFunc
): void {
const reactFlowNode = document.querySelector('.react-flow');
if (!reactFlowNode) {
return null;
}
const containerBounds = reactFlowNode.getBoundingClientRect();
let recentHoveredHandle: Element = null;
setPosition({
x: evt.clientX - containerBounds.x,
y: evt.clientY - containerBounds.y,
x: evt.clientX - containerBounds.left,
y: evt.clientY - containerBounds.top,
});
setSourceId(nodeId);
function resetRecentHandle() {
if (recentHoveredHandle) {
recentHoveredHandle.classList.remove('valid');
recentHoveredHandle.classList.remove('connecting');
if (!recentHoveredHandle) {
return false;
}
recentHoveredHandle.classList.remove('valid');
recentHoveredHandle.classList.remove('connecting');
}
// checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
function checkElementBelowIsValid(evt) {
function checkElementBelowIsValid(evt: MouseEvent) {
const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
const result = {
const result: Result = {
elementBelow,
isValid: false,
connection: null,
connection: { source: null, target: null },
isHoveringHandle: false
};
if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
let connection = null;
let connection: Connection = { source: null, target: null };
if (isTarget) {
const sourceId = elementBelow.getAttribute('data-nodeid');
@@ -49,10 +83,10 @@ function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarg
return result;
}
function onMouseMove(evt) {
function onMouseMove(evt: MouseEvent) {
setPosition({
x: evt.clientX - containerBounds.x,
y: evt.clientY - containerBounds.y,
x: evt.clientX - containerBounds.left,
y: evt.clientY - containerBounds.top,
});
const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(evt);
@@ -70,7 +104,7 @@ function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarg
}
}
function onMouseUp(evt) {
function onMouseUp(evt: MouseEvent) {
const { connection, isValid } = checkElementBelowIsValid(evt);
if (isValid) {
@@ -92,7 +126,7 @@ const BaseHandle = memo(({
type, nodeId, onConnect, position,
setSourceId, setPosition, className,
id = false, isValidConnection, ...rest
}) => {
}: BaseHandleProps) => {
const isTarget = type === 'target';
const handleClasses = cx(
'react-flow__handle',
@@ -108,16 +142,15 @@ const BaseHandle = memo(({
data-nodeid={nodeIdWithHandleId}
data-handlepos={position}
className={handleClasses}
onMouseDown={evt => onMouseDown(evt, {
nodeId: nodeIdWithHandleId, setSourceId, setPosition,
onMouseDown={evt => onMouseDown(evt,
nodeIdWithHandleId, setSourceId, setPosition,
onConnect, isTarget, isValidConnection
})}
)}
{...rest}
/>
);
});
BaseHandle.displayName = 'BaseHandle';
BaseHandle.whyDidYouRender = false;
export default BaseHandle;
src/components/Handle/index.js → src/components/Handle/index.tsx
+19 -19
View File
@@ -1,18 +1,29 @@
import React, { memo, useContext } from 'react';
import PropTypes from 'prop-types';
import { useStoreActions, useStoreState } from 'easy-peasy';
import { useStoreActions, useStoreState } from '../../store/hooks';
import BaseHandle from './BaseHandle';
import NodeIdContext from '../../contexts/NodeIdContext'
const Handle = memo(({ onConnect, ...rest }) => {
const nodeId = useContext(NodeIdContext);
import { HandleType, ElementId, Position, OnConnectParams, OnConnectFunc } from '../../types';
interface HandleProps {
type: HandleType,
position: Position,
onConnect?: OnConnectFunc,
isValidConnection?: () => boolean
};
const Handle = memo(({
onConnect = _ => {}, type = 'source', position = 'top', isValidConnection = () => true,
...rest
}: HandleProps) => {
const nodeId = useContext(NodeIdContext) as ElementId;
const { setPosition, setSourceId } = useStoreActions(a => ({
setPosition: a.setConnectionPosition,
setSourceId: a.setConnectionSourceId
}));
const onConnectAction = useStoreState(s => s.onConnect);
const onConnectExtended = (params) => {
const onConnectExtended = (params: OnConnectParams) => {
onConnectAction(params);
onConnect(params);
};
@@ -23,6 +34,9 @@ const Handle = memo(({ onConnect, ...rest }) => {
setPosition={setPosition}
setSourceId={setSourceId}
onConnect={onConnectExtended}
type={type}
position={position}
isValidConnection={isValidConnection}
{...rest}
/>
);
@@ -30,18 +44,4 @@ const Handle = memo(({ onConnect, ...rest }) => {
Handle.displayName = 'Handle';
Handle.propTypes = {
type: PropTypes.oneOf(['source', 'target']),
position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
onConnect: PropTypes.func,
isValidConnection: PropTypes.func
};
Handle.defaultProps = {
type: 'source',
position: 'top',
onConnect: () => {},
isValidConnection: () => true
};
export default Handle;
src/components/Nodes/DefaultNode.js → src/components/Nodes/DefaultNode.tsx
+4 -3
View File
@@ -1,15 +1,16 @@
import React from 'react';
import React, { CSSProperties } from 'react';
import Handle from '../../components/Handle';
import { NodeProps } from '../../types';
const nodeStyles = {
const nodeStyles: CSSProperties = {
background: '#ff6060',
padding: 10,
borderRadius: 5,
width: 150
};
export default ({ data, style }) => (
export default ({ data, style }: NodeProps) => (
<div style={{ ...nodeStyles, ...style }}>
<Handle type="target" position="top" />
{data.label}
src/components/Nodes/InputNode.js → src/components/Nodes/InputNode.tsx
+4 -3
View File
@@ -1,15 +1,16 @@
import React from 'react';
import React, { CSSProperties } from 'react';
import Handle from '../../components/Handle';
import { NodeProps } from '../../types';
const nodeStyles = {
const nodeStyles: CSSProperties = {
background: '#9999ff',
padding: 10,
borderRadius: 5,
width: 150
};
export default ({ data, style }) => (
export default ({ data, style }: NodeProps) => (
<div style={{ ...nodeStyles, ...style }}>
{data.label}
<Handle type="source" position="bottom" />
src/components/Nodes/OutputNode.js → src/components/Nodes/OutputNode.tsx
+4 -3
View File
@@ -1,15 +1,16 @@
import React from 'react';
import React, { CSSProperties } from 'react';
import Handle from '../../components/Handle';
import { NodeProps } from '../../types';
const nodeStyles = {
const nodeStyles: CSSProperties = {
background: '#55dd99',
padding: 10,
borderRadius: 5,
width: 150
};
export default ({ data, style }) => (
export default ({ data, style }: NodeProps) => (
<div style={{ ...nodeStyles, ...style }}>
<Handle type="target" position="top" />
{data.label}
src/components/Nodes/wrapNode.js
-166
View File
@@ -1,166 +0,0 @@
import React, { useEffect, useRef, useState, memo } from 'react';
import ReactDraggable from 'react-draggable';
import cx from 'classnames';
import { getDimensions, inInputDOMNode } from '../../utils';
import { Provider } from '../../contexts/NodeIdContext';
import store from '../../store';
const isHandle = e => (
e.target.className &&
e.target.className.includes &&
(e.target.className.includes('source') || e.target.className.includes('target'))
);
const hasResizeObserver = !!window.ResizeObserver;
const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
const handles = nodeElement.querySelectorAll(sel);
if (!handles || !handles.length) {
return null;
}
return [].map.call(handles, (handle) => {
const bounds = handle.getBoundingClientRect();
const dimensions = getDimensions(handle);
const nodeIdAttr = handle.getAttribute('data-nodeid');
const handlePosition = handle.getAttribute('data-handlepos');
const nodeIdSplitted = nodeIdAttr.split('__');
let handleId = null;
if (nodeIdSplitted) {
handleId = nodeIdSplitted.length ? nodeIdSplitted[1] : nodeIdSplitted;
}
return {
id: handleId,
position: handlePosition,
x: (bounds.x - parentBounds.x) * (1 / k),
y: (bounds.y - parentBounds.y) * (1 / k),
...dimensions
};
});
};
const onStart = (evt, { setOffset, onClick, id, type, data, position, transform }) => {
if (inInputDOMNode(evt) || isHandle(evt)) {
return false;
}
const scaledClient = {
x: evt.clientX * (1 / [transform[2]]),
y: evt.clientY * (1 / [transform[2]])
};
const offsetX = scaledClient.x - position.x - transform[0];
const offsetY = scaledClient.y - position.y - transform[1];
const node = { id, type, position, data };
store.dispatch.setSelectedElements({ id, type });
setOffset({ x: offsetX, y: offsetY });
onClick(node);
};
const onDrag = (evt, { setDragging, id, offset, transform }) => {
const scaledClient = {
x: evt.clientX * (1 / transform[2]),
y: evt.clientY * (1 / transform[2])
};
setDragging(true);
store.dispatch.updateNodePos({ id, pos: {
x: scaledClient.x - transform[0] - offset.x,
y: scaledClient.y - transform[1] - offset.y
}});
};
const onStop = ({ onNodeDragStop, setDragging, isDragging, id, type, position, data }) => {
if (!isDragging) {
return false;
}
setDragging(false);
onNodeDragStop({
id, type, position, data
});
};
export default NodeComponent => {
const NodeWrapper = memo((props) => {
const nodeElement = useRef(null);
const [offset, setOffset] = useState({ x: 0, y: 0 });
const [isDragging, setDragging] = useState(false);
const {
id, type, data, transform, xPos, yPos, selected,
onClick, onNodeDragStop, style
} = props;
const position = { x: xPos, y: yPos };
const nodeClasses = cx('react-flow__node', { selected });
const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };
const updateNode = () => {
const storeState = store.getState()
const bounds = nodeElement.current.getBoundingClientRect();
const dimensions = getDimensions(nodeElement.current);
const handleBounds = {
source: getHandleBounds('.source', nodeElement.current, bounds, storeState.transform[2]),
target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2])
};
store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });
}
useEffect(() => {
updateNode();
let resizeObserver = null;
if (hasResizeObserver) {
resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
updateNode();
}
});
resizeObserver.observe(nodeElement.current);
}
return () => {
if (hasResizeObserver && resizeObserver) {
resizeObserver.unobserve(nodeElement.current);
}
}
}, []);
return (
<ReactDraggable.DraggableCore
onStart={evt => onStart(evt, { onClick, id, type, data, setOffset, transform, position })}
onDrag={evt => onDrag(evt, { setDragging, id, offset, transform })}
onStop={() => onStop({ onNodeDragStop, isDragging, setDragging, id, type, position, data })}
scale={transform[2]}
>
<div
className={nodeClasses}
ref={nodeElement}
style={nodeStyle}
>
<Provider value={id}>
<NodeComponent
id={id}
data={data}
type={type}
style={style}
selected={selected}
/>
</Provider>
</div>
</ReactDraggable.DraggableCore>
);
});
NodeWrapper.displayName = 'NodeWrapper';
NodeWrapper.whyDidYouRender = false;
return NodeWrapper;
};
src/components/Nodes/wrapNode.tsx
+180
View File
@@ -0,0 +1,180 @@
import React, { useEffect, useRef, useState, memo, ComponentType } from 'react';
import { DraggableCore, DraggableEvent } from 'react-draggable';
import cx from 'classnames';
import { ResizeObserver } from 'resize-observer';
import { getDimensions, isInputDOMNode } from '../../utils';
import { Provider } from '../../contexts/NodeIdContext';
import store from '../../store';
import { NodeComponentProps, Node, XYPosition, HandleElement, Position, Transform, ElementId } from '../../types';
const isHandle = (evt: MouseEvent | DraggableEvent) => {
const target = evt.target as HTMLElement;
return (
target.className &&
target.className.includes &&
(target.className.includes('source') || target.className.includes('target'))
);
};
const getHandleBounds = (
selector: string, nodeElement: HTMLDivElement, parentBounds: ClientRect | DOMRect, k: number
): HandleElement => {
const handles = nodeElement.querySelectorAll(selector);
if (!handles || !handles.length) {
return null;
}
return [].map.call(handles, (handle: HTMLDivElement): HandleElement => {
const bounds = handle.getBoundingClientRect();
const dimensions = getDimensions(handle);
const nodeIdAttr = handle.getAttribute('data-nodeid');
const handlePosition = handle.getAttribute('data-handlepos') as unknown as Position;
const nodeIdSplitted = nodeIdAttr.split('__');
let handleId = null;
if (nodeIdSplitted) {
handleId = (nodeIdSplitted.length ? nodeIdSplitted[1] : nodeIdSplitted) as string;
}
return {
id: handleId,
position: handlePosition,
x: (bounds.left - parentBounds.left) * (1 / k),
y: (bounds.top - parentBounds.top) * (1 / k),
...dimensions
};
});
};
const onStart = (
evt: MouseEvent, onClick: (node: Node) => void, id: ElementId, type: string,
data: any, setOffset: (pos: XYPosition) => void, transform: Transform, position: XYPosition
): false | void => {
if (isInputDOMNode(evt) || isHandle(evt)) {
return false;
}
const scaledClient: XYPosition = {
x: evt.clientX * (1 / transform[2]),
y: evt.clientY * (1 / transform[2])
};
const offsetX = scaledClient.x - position.x - transform[0];
const offsetY = scaledClient.y - position.y - transform[1];
const node = { id, type, position, data };
store.dispatch.setSelectedElements({ id, type });
setOffset({ x: offsetX, y: offsetY });
onClick(node);
};
const onDrag = (
evt: MouseEvent, setDragging: (isDragging: boolean) => void, id: ElementId, offset: XYPosition,
transform: Transform
): void => {
const scaledClient = {
x: evt.clientX * (1 / transform[2]),
y: evt.clientY * (1 / transform[2])
};
setDragging(true);
store.dispatch.updateNodePos({ id, pos: {
x: scaledClient.x - transform[0] - offset.x,
y: scaledClient.y - transform[1] - offset.y
}});
};
const onStop = (
onNodeDragStop: (params: Node) => void, isDragging: boolean, setDragging: (isDragging: boolean) => void, id: ElementId,
type: string, position: XYPosition, data: any
): void => {
if (isDragging) {
setDragging(false);
onNodeDragStop({
id, type, position, data
});
}
};
export default (NodeComponent: ComponentType<NodeComponentProps>) => {
const NodeWrapper = memo(({
id, type, data, transform,
xPos, yPos, selected, onClick,
onNodeDragStop, style
}: NodeComponentProps) => {
const nodeElement = useRef<HTMLDivElement>(null);
const [offset, setOffset] = useState({ x: 0, y: 0 });
const [isDragging, setDragging] = useState(false);
const position = { x: xPos, y: yPos };
const nodeClasses = cx('react-flow__node', { selected });
const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };
const updateNode = () => {
if (!nodeElement.current) {
return false;
}
const storeState = store.getState()
const bounds = nodeElement.current.getBoundingClientRect();
const dimensions = getDimensions(nodeElement.current);
const handleBounds = {
source: getHandleBounds('.source', nodeElement.current, bounds, storeState.transform[2]),
target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2])
};
store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });
};
useEffect(() => {
if (nodeElement.current) {
updateNode();
const resizeObserver = new ResizeObserver(entries => {
for (let _ of entries) {
updateNode();
}
});
resizeObserver.observe(nodeElement.current);
return () => {
if (resizeObserver && nodeElement.current) {
resizeObserver.unobserve(nodeElement.current);
}
}
}
}, [nodeElement.current]);
return (
<DraggableCore
onStart={evt => onStart(evt as MouseEvent, onClick, id, type, data, setOffset, transform, position)}
onDrag={evt => onDrag(evt as MouseEvent, setDragging, id, offset, transform)}
onStop={() => onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data)}
scale={transform[2]}
>
<div
className={nodeClasses}
ref={nodeElement}
style={nodeStyle}
>
<Provider value={id}>
<NodeComponent
id={id}
data={data}
type={type}
style={style}
selected={selected}
/>
</Provider>
</div>
</DraggableCore>
);
});
NodeWrapper.displayName = 'NodeWrapper';
return NodeWrapper;
};
src/components/NodesSelection/index.js → src/components/NodesSelection/index.tsx
+20 -17
View File
@@ -1,13 +1,14 @@
import React, { useState, memo } from 'react';
import ReactDraggable from 'react-draggable';
import { useStoreState, useStoreActions } from 'easy-peasy';
import { useStoreState, useStoreActions } from '../../store/hooks';
import { isNode } from '../../utils/graph';
import { Node, Elements, XYPosition } from '../../types';
function getStartPositions(elements) {
function getStartPositions(elements: Elements) {
return elements
.filter(isNode)
.reduce((res, node) => {
.reduce((res, node: Node) => {
const startPosition = {
x: node.__rg.position.x || node.position.x,
y: node.__rg.position.y || node.position.x
@@ -31,31 +32,33 @@ export default memo(() => {
const [x, y, k] = state.transform;
const position = state.selectedNodesBbox;
const onStart = (evt) => {
const scaledClient = {
const onStart = (evt: MouseEvent) => {
const scaledClient: XYPosition = {
x: evt.clientX * (1 / k),
y: evt.clientY * (1 / k)
};
const offsetX = scaledClient.x - position.x - x;
const offsetY = scaledClient.y - position.y - y;
const offsetX: number = scaledClient.x - position.x - x;
const offsetY: number = scaledClient.y - position.y - y;
const startPositions = getStartPositions(state.selectedElements);
setOffset({ x: offsetX, y: offsetY });
setStartPositions(startPositions);
};
const onDrag = (evt) => {
const scaledClient = {
const onDrag = (evt: MouseEvent) => {
const scaledClient: XYPosition = {
x: evt.clientX * (1 / k),
y: evt.clientY * (1 / k)
};
state.selectedElements.filter(isNode).forEach(node => {
updateNodePos({ id: node.id, pos: {
x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - x ,
y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - y
}});
});
state.selectedElements
.filter(isNode)
.forEach((node: Node) => {
updateNodePos({ id: node.id, pos: {
x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - x ,
y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - y
}});
});
};
return (
@@ -67,8 +70,8 @@ export default memo(() => {
>
<ReactDraggable
scale={k}
onStart={onStart}
onDrag={onDrag}
onStart={(evt: MouseEvent) => onStart(evt)}
onDrag={(evt: MouseEvent) => onDrag(evt)}
>
<div
className="react-flow__nodesselection-rect"
src/components/UserSelection/index.js → src/components/UserSelection/index.tsx
+22 -8
View File
@@ -1,7 +1,9 @@
import React, { useEffect, useRef, useState, memo } from 'react';
import { useStoreActions } from 'easy-peasy';
import React, { useEffect, useRef, useState, memo, MouseEvent } from 'react';
const initialRect = {
import { useStoreActions } from '../../store/hooks';
import { SelectionRect } from '../../types';
const initialRect: SelectionRect = {
startX: 0,
startY: 0,
x: 0,
@@ -11,8 +13,13 @@ const initialRect = {
draw: false
};
function getMousePosition(evt) {
const containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
function getMousePosition(evt: MouseEvent) {
const reactFlowNode = document.querySelector('.react-flow');
if (!reactFlowNode) {
return false;
}
const containerBounds = reactFlowNode.getBoundingClientRect();
return {
x: evt.clientX - containerBounds.left,
@@ -28,8 +35,11 @@ export default memo(() => {
const setNodesSelection = useStoreActions(a => a.setNodesSelection);
useEffect(() => {
function onMouseDown(evt) {
function onMouseDown(evt: MouseEvent) {
const mousePos = getMousePosition(evt);
if (!mousePos) {
return false;
}
setRect((currentRect) => ({
...currentRect,
@@ -43,13 +53,17 @@ export default memo(() => {
setSelection(true);
}
function onMouseMove(evt) {
function onMouseMove(evt: MouseEvent) {
setRect((currentRect) => {
if (!currentRect.draw) {
return currentRect;
}
const mousePos = getMousePosition(evt);
if (!mousePos) {
return currentRect;
}
const negativeX = mousePos.x < currentRect.startX;
const negativeY = mousePos.y < currentRect.startY;
const nextRect = {
@@ -94,7 +108,7 @@ export default memo(() => {
className="react-flow__selectionpane"
ref={selectionPane}
>
{(rect.draw || rect.fixed) && (
{rect.draw && (
<div
className="react-flow__selection"
style={{
src/container/BackgroundRenderer/Grid.js
-84
View File
@@ -1,84 +0,0 @@
import React, {memo} from 'react';
import PropTypes from 'prop-types';
import {useStoreState} from 'easy-peasy';
import classnames from 'classnames';
const baseStyles = {
position: 'absolute',
top: 0,
left: 0,
};
const createGridLines = (width, height, xOffset, yOffset, gap) => {
const lineCountX = Math.ceil(width / gap) + 1;
const lineCountY = Math.ceil(height / gap) + 1;
const xValues = Array.from({length: lineCountX}, (_, i) => `M${i * gap + xOffset} 0 V${height}`);
const yValues = Array.from({length: lineCountY}, (_, i) => `M0 ${i * gap + yOffset} H${width}`);
return [...xValues, ...yValues].join(' ');
};
const createGridDots = (width, height, xOffset, yOffset, gap, size) => {
const lineCountX = Math.ceil(width / gap) + 1;
const lineCountY = Math.ceil(height / gap) + 1;
const values = Array.from({length: lineCountX}, (_, col) => {
const x = col * gap + xOffset;
return Array.from({length: lineCountY},(_,row)=>{
const y = row * gap + yOffset;
return `M${x} ${y-size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`
}).join(' ');
});
return values.join(' ');
};
const Grid = memo(({gap, color, size, style, className, backgroundType}) => {
const {
width,
height,
transform: [x, y, scale],
} = useStoreState(s => s);
const gridClasses = classnames('react-flow__grid', className);
const scaledGap = gap * scale;
const xOffset = x % scaledGap;
const yOffset = y % scaledGap;
const isLines = backgroundType === 'lines';
const path = isLines
? createGridLines(width, height, xOffset, yOffset, scaledGap)
: createGridDots(width, height, xOffset, yOffset, scaledGap, size);
const fill = isLines ? 'none' : color;
const stroke = isLines ? color : 'none';
return (
<svg width={width} height={height} style={{...baseStyles, ...style}} className={gridClasses}>
<path fill={fill} stroke={stroke} strokeWidth={size} d={path} />
</svg>
);
});
Grid.displayName = 'Grid';
Grid.propTypes = {
gap: PropTypes.number,
color: PropTypes.string,
size: PropTypes.number,
style: PropTypes.object,
className: PropTypes.string,
backgroundType: PropTypes.oneOf(['lines', 'dots']),
};
Grid.defaultProps = {
gap: 24,
color: '#aaa',
size: .5,
style: {},
className: null,
backgroundType: 'dots',
};
export default Grid;
src/container/BackgroundRenderer/index.js
-34
View File
@@ -1,34 +0,0 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import Grid from './Grid';
const bgComponents = {
lines: Grid,
dots: Grid
};
const BackgroundRenderer = memo(({
backgroundType, ...rest
}) => {
const BackgroundComponent = bgComponents[backgroundType];
return (
<BackgroundComponent
backgroundType={backgroundType}
{...rest}
/>
);
});
BackgroundRenderer.displayName = 'BackgroundRenderer';
BackgroundRenderer.propTypes = {
backgroundType: PropTypes.oneOf(['lines', 'dots'])
};
BackgroundRenderer.defaultProps = {
backgroundType: 'dots'
};
export default BackgroundRenderer;
src/container/EdgeRenderer/index.js → src/container/EdgeRenderer/index.tsx
+58 -29
View File
@@ -1,10 +1,36 @@
import React, { memo } from 'react';
import { useStoreState } from 'easy-peasy';
import React, { memo, SVGAttributes } from 'react';
import ConnectionLine from '../../components/ConnectionLine';
import { useStoreState } from '../../store/hooks';
import ConnectionLine from '../../components/ConnectionLine/index';
import { isEdge } from '../../utils/graph';
import { XYPosition, Position, Edge, Node, ElementId, Transform, HandleElement } from '../../types';
function getHandlePosition(position, node, handle = null) {
interface EdgeRendererProps {
width: number;
height: number;
edgeTypes: any;
connectionLineStyle?: SVGAttributes<{}>;
connectionLineType?: string;
onElementClick?: () => void;
};
interface EdgeRendererState {
nodes: Node[];
edges: Edge[];
transform: Transform;
selectedElements: any;
connectionSourceId: ElementId | null;
position: XYPosition;
};
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 'top': return {
@@ -24,6 +50,8 @@ function getHandlePosition(position, node, handle = null) {
y: node.__rg.height / 2
};
}
return null;
}
switch (position) {
@@ -46,7 +74,7 @@ function getHandlePosition(position, node, handle = null) {
}
}
function getHandle(bounds, handleId) {
function getHandle(bounds: HandleElement[], handleId: ElementId): HandleElement | null {
let handle = null;
if (!bounds) {
@@ -64,7 +92,10 @@ function getHandle(bounds, handleId) {
return handle;
}
function getEdgePositions({ sourceNode, sourceHandle, sourcePosition, targetNode, targetHandle, targetPosition }) {
function getEdgePositions(
sourceNode: Node, sourceHandle: HandleElement, sourcePosition: Position,
targetNode: Node, targetHandle: HandleElement, targetPosition: Position
): EdgePositions {
const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle)
const sourceX = sourceNode.__rg.position.x + sourceHandlePos.x;
const sourceY = sourceNode.__rg.position.y + sourceHandlePos.y;
@@ -78,17 +109,17 @@ function getEdgePositions({ sourceNode, sourceHandle, sourcePosition, targetNode
};
}
function renderEdge(e, props, state) {
const edgeType = e.type || 'default';
function renderEdge(edge: Edge, props: EdgeRendererProps, state: EdgeRendererState) {
const edgeType = edge.type || 'default';
const hasSourceHandleId = e.source.includes('__');
const hasTargetHandleId = e.target.includes('__');
const hasSourceHandleId = edge.source.includes('__');
const hasTargetHandleId = edge.target.includes('__');
const sourceId = hasSourceHandleId ? e.source.split('__')[0] : e.source;
const targetId = hasTargetHandleId ? e.target.split('__')[0] : e.target;
const sourceId = hasSourceHandleId ? edge.source.split('__')[0] : edge.source;
const targetId = hasTargetHandleId ? edge.target.split('__')[0] : edge.target;
const sourceHandleId = hasSourceHandleId ? e.source.split('__')[1] : null;
const targetHandleId = hasTargetHandleId ? e.target.split('__')[1] : null;
const sourceHandleId = hasSourceHandleId ? edge.source.split('__')[1] : null;
const targetHandleId = hasTargetHandleId ? edge.target.split('__')[1] : null;
const sourceNode = state.nodes.find(n => n.id === sourceId);
const targetNode = state.nodes.find(n => n.id === targetId);
@@ -107,23 +138,23 @@ function renderEdge(e, props, state) {
const sourcePosition = sourceHandle ? sourceHandle.position : 'bottom';
const targetPosition = targetHandle ? targetHandle.position : 'top';
const { sourceX, sourceY, targetX, targetY } = getEdgePositions({
const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
sourceNode, sourceHandle, sourcePosition,
targetNode, targetHandle, targetPosition
});
);
const selected = state.selectedElements
.filter(isEdge)
.find(elm => elm.source === sourceId && elm.target === targetId);
.find((elm: Edge) => elm.source === sourceId && elm.target === targetId);
return (
<EdgeComponent
key={e.id}
id={e.id}
type={e.type}
key={edge.id}
id={edge.id}
type={edge.type}
onClick={props.onElementClick}
selected={selected}
animated={e.animated}
style={e.style}
animated={edge.animated}
style={edge.style}
source={sourceId}
target={targetId}
sourceHandleId={sourceHandleId}
@@ -138,8 +169,10 @@ function renderEdge(e, props, state) {
);
}
const EdgeRenderer = memo((props) => {
const state = useStoreState(s => ({
const EdgeRenderer = memo(({
width, height, connectionLineStyle, connectionLineType, ...rest
}: EdgeRendererProps) => {
const state: EdgeRendererState = useStoreState(s => ({
nodes: s.nodes,
edges: s.edges,
transform: s.transform,
@@ -147,10 +180,6 @@ const EdgeRenderer = memo((props) => {
connectionSourceId: s.connectionSourceId,
position: s.connectionPosition
}));
const {
width, height, connectionLineStyle, connectionLineType
} = props;
if (!width) {
return null;
}
@@ -165,7 +194,7 @@ const EdgeRenderer = memo((props) => {
className="react-flow__edges"
>
<g transform={transformStyle}>
{edges.map(e => renderEdge(e, props, state))}
{edges.map((e: Edge) => renderEdge(e, { width, height, connectionLineStyle, connectionLineType, ...rest }, state))}
{connectionSourceId && (
<ConnectionLine
nodes={nodes}
src/container/EdgeRenderer/utils.js
-24
View File
@@ -1,24 +0,0 @@
import StraightEdge from '../../components/Edges/StraightEdge';
import BezierEdge from '../../components/Edges/BezierEdge';
import wrapEdge from '../../components/Edges/wrapEdge';
export function createEdgeTypes(edgeTypes) {
const standardTypes = {
default: wrapEdge(edgeTypes.default || BezierEdge),
straight: wrapEdge(edgeTypes.bezier || StraightEdge)
};
const specialTypes = Object
.keys(edgeTypes)
.filter(k => !['default', 'bezier'].includes(k))
.reduce((res, key) => {
res[key] = wrapEdge(edgeTypes[key] ||BezierEdge);
return res;
}, {});
return {
...standardTypes,
...specialTypes
};
}
src/container/EdgeRenderer/utils.ts
+28
View File
@@ -0,0 +1,28 @@
import { ComponentType } from 'react';
import StraightEdge from '../../components/Edges/StraightEdge';
import BezierEdge from '../../components/Edges/BezierEdge';
import wrapEdge from '../../components/Edges/wrapEdge';
import { EdgeTypesType, EdgeWrapperProps } from '../../types';
export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType{
const standardTypes: EdgeTypesType = {
default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeWrapperProps>),
straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeWrapperProps>)
};
const specialTypes: EdgeTypesType = Object
.keys(edgeTypes)
.filter(k => !['default', 'bezier'].includes(k))
.reduce((res, key) => {
res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<EdgeWrapperProps>);
return res;
}, {});
return {
...standardTypes,
...specialTypes
};
}
src/container/GraphView/index.js → src/container/GraphView/index.tsx
+29 -8
View File
@@ -1,17 +1,38 @@
import React, { useEffect, useRef, memo } from 'react';
import { useStoreState, useStoreActions } from 'easy-peasy';
import React, { useEffect, useRef, memo, SVGAttributes } from 'react';
import { useStoreState, useStoreActions } from '../../store/hooks';
import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer';
import BackgroundRenderer from '../BackgroundRenderer';
import UserSelection from '../../components/UserSelection';
import NodesSelection from '../../components/NodesSelection';
import BackgroundGrid from '../../components/BackgroundGrid';
import useKeyPress from '../../hooks/useKeyPress';
import useD3Zoom from '../../hooks/useD3Zoom';
import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
import useElementUpdater from '../../hooks/useElementUpdater'
import { getDimensions } from '../../utils';
import { fitView, zoomIn, zoomOut } from '../../utils/graph';
import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types'
export interface GraphViewProps {
elements: Elements,
onElementClick: () => void,
onElementsRemove: (elements: Elements) => void,
onNodeDragStop: () => void,
onConnect: () => void,
onLoad: OnLoadFunc,
onMove: () => void,
selectionKeyCode: number,
nodeTypes: NodeTypesType,
edgeTypes: EdgeTypesType,
connectionLineType: string,
connectionLineStyle: SVGAttributes<{}>,
deleteKeyCode: number,
showBackground: boolean,
backgroundGap: number,
backgroundColor: string,
backgroundType: GridType,
};
const GraphView = memo(({
nodeTypes, edgeTypes, onMove, onLoad,
@@ -19,9 +40,9 @@ const GraphView = memo(({
selectionKeyCode, onElementsRemove, deleteKeyCode, elements,
showBackground, backgroundGap, backgroundColor, backgroundType,
onConnect
}) => {
const zoomPane = useRef();
const rendererNode = useRef();
}: GraphViewProps) => {
const zoomPane = useRef<HTMLDivElement>(null);
const rendererNode = useRef<HTMLDivElement>(null);
const state = useStoreState(s => ({
width: s.width,
height: s.height,
@@ -65,12 +86,12 @@ const GraphView = memo(({
}, [state.d3Initialised]);
useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
useElementUpdater({ elements });
useElementUpdater(elements);
return (
<div className="react-flow__renderer" ref={rendererNode}>
{showBackground && (
<BackgroundRenderer
<BackgroundGrid
gap={backgroundGap}
color={backgroundColor}
backgroundType={backgroundType}
src/container/NodeRenderer/index.js
-59
View File
@@ -1,59 +0,0 @@
import React, { memo } from 'react';
import { useStoreState } from 'easy-peasy';
import { isNode } from '../../utils/graph';
function renderNode(d, props, state) {
const nodeType = d.type || 'default';
if (!props.nodeTypes[nodeType]) {
console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
}
const NodeComponent = props.nodeTypes[nodeType] || props.nodeTypes.default;
const selected = state.selectedElements
.filter(isNode)
.map(e => e.id)
.includes(d.id);
return (
<NodeComponent
key={d.id}
id={d.id}
type={d.type}
data={d.data}
xPos={d.__rg.position.x}
yPos={d.__rg.position.y}
onClick={props.onElementClick}
onNodeDragStop={props.onNodeDragStop}
transform={state.transform}
selected={selected}
style={d.style}
/>
);
}
const NodeRenderer = memo((props) => {
const state = useStoreState(s => ({
nodes: s.nodes,
transform: s.transform,
selectedElements: s.selectedElements
}));
const { transform, nodes } = state;
const transformStyle = { transform : `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` };
return (
<div
className="react-flow__nodes"
style={transformStyle}
>
{nodes.map(d => renderNode(d, props, state))}
</div>
);
});
NodeRenderer.displayName = 'NodeRenderer';
NodeRenderer.whyDidYouRender = false;
export default NodeRenderer;
src/container/NodeRenderer/index.tsx
+71
View File
@@ -0,0 +1,71 @@
import React, { memo, ComponentType } from 'react';
import { useStoreState } from '../../store/hooks';
import { isNode } from '../../utils/graph';
import { Node, Transform, NodeTypesType, NodeComponentProps, } from '../../types';
interface NodeRendererProps {
nodeTypes: NodeTypesType;
onElementClick: () => void;
onNodeDragStop: () => void;
};
interface NodeRendererState {
nodes: Node[];
transform: Transform;
selectedElements: any;
};
function renderNode(node: Node, props: NodeRendererProps, state: NodeRendererState) {
const nodeType = node.type || 'default';
if (!props.nodeTypes[nodeType]) {
console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
}
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<NodeComponentProps>;
const selected = state.selectedElements
.filter(isNode)
.map((e: Node) => e.id)
.includes(node.id);
return (
<NodeComponent
key={node.id}
id={node.id}
type={node.type}
data={node.data}
xPos={node.__rg.position.x}
yPos={node.__rg.position.y}
onClick={props.onElementClick}
onNodeDragStop={props.onNodeDragStop}
transform={state.transform}
selected={selected}
style={node.style}
/>
);
}
const NodeRenderer = memo((props: NodeRendererProps) => {
const state: NodeRendererState = useStoreState(s => ({
nodes: s.nodes,
transform: s.transform,
selectedElements: s.selectedElements
}));
const { transform, nodes } = state;
const transformStyle = { transform : `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` };
return (
<div
className="react-flow__nodes"
style={transformStyle}
>
{nodes.map(node => renderNode(node, props, state))}
</div>
);
});
NodeRenderer.displayName = 'NodeRenderer';
export default NodeRenderer;
src/container/NodeRenderer/utils.js
-26
View File
@@ -1,26 +0,0 @@
import DefaultNode from '../../components/Nodes/DefaultNode';
import InputNode from '../../components/Nodes/InputNode';
import OutputNode from '../../components/Nodes/OutputNode';
import wrapNode from '../../components/Nodes/wrapNode';
export function createNodeTypes(nodeTypes) {
const standardTypes = {
input: wrapNode(nodeTypes.input || InputNode),
default: wrapNode(nodeTypes.default || DefaultNode),
output: wrapNode(nodeTypes.output || OutputNode)
};
const specialTypes = Object
.keys(nodeTypes)
.filter(k => !['input', 'default', 'output'].includes(k))
.reduce((res, key) => {
res[key] = wrapNode(nodeTypes[key] || DefaultNode);
return res;
}, {});
return {
...standardTypes,
...specialTypes
};
}
src/container/NodeRenderer/utils.ts
+29
View File
@@ -0,0 +1,29 @@
import { ComponentType } from 'react';
import DefaultNode from '../../components/Nodes/DefaultNode';
import InputNode from '../../components/Nodes/InputNode';
import OutputNode from '../../components/Nodes/OutputNode';
import wrapNode from '../../components/Nodes/wrapNode';
import { NodeTypesType, NodeComponentProps } from '../../types';
export function createNodeTypes(nodeTypes: NodeTypesType): NodeTypesType {
const standardTypes: NodeTypesType = {
input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeComponentProps>),
default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeComponentProps>),
output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeComponentProps>)
};
const specialTypes: NodeTypesType = Object
.keys(nodeTypes)
.filter(k => !['input', 'default', 'output'].includes(k))
.reduce((res, key) => {
res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeComponentProps>);
return res;
}, {});
return {
...standardTypes,
...specialTypes
};
}
src/container/ReactFlow/index.js → src/container/ReactFlow/index.tsx
+30 -24
View File
@@ -1,8 +1,9 @@
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import React, { useMemo, CSSProperties, ReactNode, SVGAttributes } from 'react';
import { StoreProvider } from 'easy-peasy';
if (process.env.NODE_ENV !== 'production') {
const nodeEnv: string = (process.env.NODE_ENV as string);
if (nodeEnv !== 'production') {
const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React);
}
@@ -17,16 +18,40 @@ import StraightEdge from '../../components/Edges/StraightEdge';
import StepEdge from '../../components/Edges/StepEdge';
import { createEdgeTypes } from '../EdgeRenderer/utils';
import store from '../../store';
import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types';
import '../../style.css';
export interface ReactFlowProps {
elements: Elements,
style?: CSSProperties,
className?: string,
children?: ReactNode[],
onElementClick: () => void,
onElementsRemove: (elements: Elements) => void,
onNodeDragStop: () => void,
onConnect: () => void,
onLoad: OnLoadFunc,
onMove: () => void,
nodeTypes: NodeTypesType,
edgeTypes: EdgeTypesType,
connectionLineType: string,
connectionLineStyle: SVGAttributes<{}>,
deleteKeyCode: number,
selectionKeyCode: number,
showBackground: boolean,
backgroundGap: number,
backgroundColor: string,
backgroundType: GridType
};
const ReactFlow = ({
style, onElementClick, elements, children,
nodeTypes, edgeTypes, onLoad, onMove,
onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
connectionLineStyle, deleteKeyCode, selectionKeyCode,
showBackground, backgroundGap, backgroundType, backgroundColor
}) => {
}: ReactFlowProps) => {
const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -60,25 +85,6 @@ const ReactFlow = ({
ReactFlow.displayName = 'ReactFlow';
ReactFlow.propTypes = {
onElementClick: PropTypes.func,
onElementsRemove: PropTypes.func,
onNodeDragStop: PropTypes.func,
onConnect: PropTypes.func,
onLoad: PropTypes.func,
onMove: PropTypes.func,
nodeTypes: PropTypes.object,
edgeTypes: PropTypes.object,
connectionLineType: PropTypes.string,
connectionLineStyle: PropTypes.object,
deleteKeyCode: PropTypes.number,
selectionKeyCode: PropTypes.number,
gridColor: PropTypes.string,
gridGap: PropTypes.number,
showBackground: PropTypes.bool,
backgroundType: PropTypes.oneOf(['lines', 'dots'])
};
ReactFlow.defaultProps = {
onElementClick: () => {},
onElementsRemove: () => {},
@@ -103,7 +109,7 @@ ReactFlow.defaultProps = {
backgroundColor: '#eee',
backgroundGap: 24,
showBackground: true,
backgroundType: 'dots'
backgroundType: GridType.Dots
};
export default ReactFlow;
src/contexts/NodeIdContext.js → src/contexts/NodeIdContext.ts
+5 -3
View File
@@ -1,9 +1,11 @@
import { createContext } from 'react';
export const NodeIdContext = createContext(null);
import { ElementId } from '../types';
type ContextProps = ElementId | null;
export const NodeIdContext = createContext<Partial<ContextProps>>(null);
export const Provider = NodeIdContext.Provider;
export const Consumer = NodeIdContext.Consumer;
Provider.displayName = 'NodeIdProvider';
export default NodeIdContext;
src/custom.d.ts
Vendored
+13
View File
@@ -0,0 +1,13 @@
declare module '*.css' {
const content: { [className: string]: string };
export default content;
}
interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
declare module '*.svg' {
const svgUrl: string;
const svgComponent: SvgrComponent;
export default svgUrl;
export { svgComponent as ReactComponent }
}
src/hooks/useD3Zoom.js → src/hooks/useD3Zoom.ts
+4 -6
View File
@@ -1,21 +1,19 @@
import { useEffect } from 'react';
import { useEffect, MutableRefObject } from 'react';
import * as d3Zoom from 'd3-zoom';
import { select, event } from 'd3-selection';
import { useStoreState, useStoreActions } from 'easy-peasy';
import { useStoreState, useStoreActions } from '../store/hooks';
const d3ZoomInstance = d3Zoom
.zoom()
.scaleExtent([0.5, 2])
.filter(() => !event.button);
export default function useD3Zoom(zoomPane, onMove, shiftPressed) {
export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void, shiftPressed: boolean): void => {
const state = useStoreState(s => ({
transform: s.transform,
d3Selection: s.d3Selection,
d3Zoom: s.d3Zoom,
edges: s.edged,
d3Initialised: s.d3Initialised,
nodesSelectionActive: s.nodesSelectionActive
}));
const initD3 = useStoreActions(actions => actions.initD3);
src/hooks/useElementUpdater.js → src/hooks/useElementUpdater.ts
+9 -8
View File
@@ -1,10 +1,11 @@
import { useEffect } from 'react';
import { useStoreState, useStoreActions } from 'easy-peasy';
import isEqual from 'fast-deep-equal';
import { useStoreState, useStoreActions } from '../store/hooks';
import { parseElement, isNode, isEdge } from '../utils/graph';
import { Elements, Node, Edge } from '../types';
const useElementUpdater = ({ elements }) => {
const useElementUpdater = (elements: Elements): void => {
const state = useStoreState(s => ({
nodes: s.nodes,
edges: s.edges,
@@ -15,10 +16,10 @@ const useElementUpdater = ({ elements }) => {
const setEdges = useStoreActions(a => a.setEdges);
useEffect(() => {
const nodes = elements.filter(isNode);
const edges = elements.filter(isEdge).map(parseElement);
const nodes = elements.filter(isNode) as Node[];
const edges = elements.filter(isEdge).map(e => parseElement(e)) as Edge[];
const nextNodes = nodes.map(propNode => {
const nextNodes = nodes.map((propNode) => {
const existingNode = state.nodes.find(n => n.id === propNode.id);
if (existingNode) {
@@ -32,10 +33,10 @@ const useElementUpdater = ({ elements }) => {
}
return parseElement(propNode, state.transform);
});
}) as Node[];
const nodesChanged = !isEqual(state.nodes, nextNodes);
const edgesChanged = !isEqual(state.edges, edges);
const nodesChanged: boolean = !isEqual(state.nodes, nextNodes);
const edgesChanged: boolean = !isEqual(state.edges, edges);
if (nodesChanged) {
setNodes(nextNodes);
src/hooks/useGlobalKeyHandler.js → src/hooks/useGlobalKeyHandler.ts
+10 -3
View File
@@ -1,10 +1,16 @@
import { useEffect } from 'react';
import { useStoreState, useStoreActions } from 'easy-peasy';
import { useStoreState, useStoreActions } from '../store/hooks';
import useKeyPress from './useKeyPress';
import { isEdge, getConnectedEdges } from '../utils/graph';
import { Elements, Node } from '../types';
export default ({ deleteKeyCode, onElementsRemove }) => {
interface HookParams {
deleteKeyCode: number;
onElementsRemove: (elements: Elements) => void;
};
export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
const state = useStoreState(s => ({ selectedElements: s.selectedElements, edges: s.edges }))
const setNodesSelection = useStoreActions(a => a.setNodesSelection);
const deleteKeyPressed = useKeyPress(deleteKeyCode);
@@ -15,7 +21,8 @@ export default ({ deleteKeyCode, onElementsRemove }) => {
// we also want to remove the edges if only one node is selected
if (state.selectedElements.length === 1 && !isEdge(state.selectedElements[0])) {
const connectedEdges = getConnectedEdges(state.selectedElements, state.edges);
const node = state.selectedElements[0] as unknown as Node;
const connectedEdges = getConnectedEdges([node], state.edges);
elementsToRemove = [...state.selectedElements, ...connectedEdges];
}
src/hooks/useKeyPress.js → src/hooks/useKeyPress.ts
+7 -6
View File
@@ -1,18 +1,18 @@
import { useState, useEffect } from 'react';
import { inInputDOMNode } from '../utils';
import { isInputDOMNode } from '../utils';
export default function useKeyPress(keyCode) {
export default (keyCode: number) => {
const [keyPressed, setKeyPressed] = useState(false);
function downHandler(evt) {
if (evt.keyCode === keyCode && !inInputDOMNode(evt.target)) {
function downHandler(evt: KeyboardEvent) {
if (evt.keyCode === keyCode && !isInputDOMNode(evt)) {
setKeyPressed(true);
}
}
const upHandler = (evt) => {
if (evt.keyCode === keyCode && !inInputDOMNode(evt.target)) {
const upHandler = (evt: KeyboardEvent) => {
if (evt.keyCode === keyCode && !isInputDOMNode(evt)) {
setKeyPressed(false);
}
};
@@ -20,6 +20,7 @@ export default function useKeyPress(keyCode) {
useEffect(() => {
window.addEventListener('keydown', downHandler);
window.addEventListener('keyup', upHandler);
return () => {
window.removeEventListener('keydown', downHandler);
window.removeEventListener('keyup', upHandler);
src/plugins/Controls/index.js → src/plugins/Controls/index.tsx
+11 -6
View File
@@ -1,20 +1,25 @@
import React from 'react';
import React, { CSSProperties } from 'react';
import classnames from 'classnames';
import { fitView, zoomIn, zoomOut } from '../../utils/graph';
import PlusIcon from '../../../assets/icons/plus.svg';
import PlusIcon from '../../../assets/icons/plus.svg';
import MinusIcon from '../../../assets/icons/minus.svg';
import FitviewIcon from '../../../assets/icons/fitview.svg';
const baseStyle = {
const baseStyle: CSSProperties = {
position: 'absolute',
zIndex: 5,
bottom: 10,
left: 10,
};
export default ({ style, className }) => {
const mapClasses = classnames('react-flow__controls', className);
interface ControlProps {
style?: CSSProperties;
className?: string
};
export default ({ style, className }: ControlProps) => {
const mapClasses: string = classnames('react-flow__controls', className);
return (
<div
@@ -38,7 +43,7 @@ export default ({ style, className }) => {
</div>
<div
className="react-flow__controls-button react-flow__controls-fitview"
onClick={fitView}
onClick={() => fitView()}
>
<FitviewIcon />
</div>
src/plugins/MiniMap/index.js → src/plugins/MiniMap/index.tsx
+22 -10
View File
@@ -1,11 +1,20 @@
import React, { useRef, useEffect } from 'react';
import { useStoreState } from 'easy-peasy';
import React, { useRef, useEffect, CSSProperties } from 'react';
import classnames from 'classnames';
import { isFunction } from '../../utils'
import { useStoreState } from '../../store/hooks';
import { getNodesInside } from '../../utils/graph';
import { Node } from '../../types';
const baseStyle = {
type StringFunc = (node: Node) => string;
interface MiniMapProps {
style?: CSSProperties;
className?: string | null;
bgColor?: string;
nodeColor?: string | StringFunc;
};
const baseStyle: CSSProperties = {
position: 'absolute',
zIndex: 5,
bottom: 10,
@@ -13,23 +22,26 @@ const baseStyle = {
width: 200
};
export default ({ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd' }) => {
export default (
{ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd' }: MiniMapProps
) => {
const canvasNode = useRef(null);
const state = useStoreState(s => ({
width: s.width,
height: s.height,
nodes: s.nodes,
transform: s.transform,
})); const mapClasses = classnames('react-flow__minimap', className);
}));
const mapClasses = classnames('react-flow__minimap', className);
const nodePositions = state.nodes.map(n => n.__rg.position);
const width = style.width || baseStyle.width;
const width: number = +(style.width || baseStyle.width || 0);
const height = (state.height / (state.width || 1)) * width;
const bbox = { x: 0, y: 0, width: state.width, height: state.height };
const scaleFactor = width / state.width;
const nodeColorFunc = isFunction(nodeColor) ? nodeColor : () => nodeColor;
const nodeColorFunc = (nodeColor instanceof Function ? nodeColor: () => nodeColor) as StringFunc;
useEffect(() => {
if (canvasNode) {
if (canvasNode && canvasNode.current) {
const ctx = canvasNode.current.getContext('2d');
const nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);
@@ -53,7 +65,7 @@ export default ({ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd'
);
});
}
}, [nodePositions, state.transform, height])
}, [canvasNode.current, nodePositions, state.transform, height])
return (
<canvas
src/plugins/index.js → src/plugins/index.ts
View File
src/store/hooks.ts
+9
View File
@@ -0,0 +1,9 @@
import { createTypedHooks } from 'easy-peasy';
import { StoreModel } from './index';
const typedHooks = createTypedHooks<StoreModel>();
export const useStoreActions = typedHooks.useStoreActions;
export const useStoreDispatch = typedHooks.useStoreDispatch;
export const useStoreState = typedHooks.useStoreState;
src/store/index.js
-30
View File
@@ -1,30 +0,0 @@
import { createStore } from 'easy-peasy';
import actions from './actions';
const store = createStore({
width: 0,
height: 0,
transform: [0, 0, 1],
nodes: [],
edges: [],
selectedElements: [],
selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
d3Zoom: null,
d3Selection: null,
d3Initialised: false,
nodesSelectionActive: false,
selectionActive: false,
selection: {},
connectionSourceId: null,
connectionPosition: { x: 0, y: 0 },
onConnect: () => {},
...actions
});
export default store;
src/store/actions.js → src/store/index.ts
+116 -3
View File
@@ -1,9 +1,118 @@
import { action } from 'easy-peasy';
import { createStore, Action, action } from 'easy-peasy';
import isEqual from 'fast-deep-equal';
import { Selection as D3Selection, ZoomBehavior } from 'd3';
import { getBoundingBox, getNodesInside, getConnectedEdges } from '../utils/graph';
import {
ElementId, Elements, Transform, Node,
Edge, Rect, Dimensions, XYPosition,
OnConnectFunc, SelectionRect, HandleElement
} from '../types';
type TransformXYK = {
x: number,
y: number,
k: number
};
type NodePosUpdate = {
id: ElementId,
pos: XYPosition
};
type NodeUpdate = {
id: ElementId,
width: number,
height: number,
handleBounds: {
source: HandleElement,
target: HandleElement
}
};
type SelectionUpdate = {
isActive: boolean;
selection?: SelectionRect;
};
type D3Init = {
zoom: ZoomBehavior<Element, unknown>;
selection: D3Selection<Element, unknown, null, undefined>;
};
export interface StoreModel {
width: number;
height: number;
transform: Transform;
nodes: Node[];
edges: Edge[];
selectedElements: Elements;
selectedNodesBbox: Rect;
d3Zoom: ZoomBehavior<Element, unknown>;
d3Selection: D3Selection<Element, unknown, null, undefined>;
d3Initialised: boolean;
nodesSelectionActive: boolean;
selectionActive: boolean;
selection: SelectionRect | null;
connectionSourceId: ElementId | null;
connectionPosition: XYPosition;
onConnect: OnConnectFunc;
setOnConnect: Action<StoreModel, OnConnectFunc>;
setNodes: Action<StoreModel, Node[]>;
setEdges: Action<StoreModel, Edge[]>;
updateNodeData: Action<StoreModel, NodeUpdate>;
updateNodePos: Action<StoreModel, NodePosUpdate>;
setSelection: Action<StoreModel, boolean>;
setNodesSelection: Action<StoreModel, SelectionUpdate>;
setSelectedElements: Action<StoreModel, Elements | Node | Edge>
updateSelection: Action<StoreModel, SelectionRect>;
updateTransform: Action<StoreModel, TransformXYK>;
updateSize: Action<StoreModel, Dimensions>;
initD3: Action<StoreModel, D3Init>;
setConnectionPosition: Action<StoreModel, XYPosition>;
setConnectionSourceId: Action<StoreModel, ElementId>;
};
const storeModel: StoreModel = {
width: 0,
height: 0,
transform: [0, 0, 1],
nodes: [],
edges: [],
selectedElements: [],
selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
d3Zoom: null,
d3Selection: null,
d3Initialised: false,
nodesSelectionActive: false,
selectionActive: false,
selection: null,
connectionSourceId: null,
connectionPosition: { x: 0, y: 0 },
onConnect: () => {},
export default {
setOnConnect: action((state, onConnect) => {
state.onConnect = onConnect;
}),
@@ -99,4 +208,8 @@ export default {
setConnectionSourceId: action((state, sourceId) => {
state.connectionSourceId = sourceId;
})
};
};
const store = createStore(storeModel);
export default store;
src/types/index.ts
+137
View File
@@ -0,0 +1,137 @@
import { CSSProperties, SVGAttributes } from 'react';
export type ElementId = string;
export type Elements = Array<Node | Edge>;
export type Transform = [number, number, number];
export type Position = 'left' | 'top' | 'right' | 'bottom';
export type XYPosition = {
x: number,
y: number
};
export enum GridType {
Lines = 'lines',
Dots = 'dots',
};
export type HandleType = 'source' | 'target';
export type NodeTypesType = { [key: string]: React.ReactNode };
export type EdgeTypesType = NodeTypesType;
export interface Dimensions {
width: number,
height: number
}
export interface Rect extends Dimensions {
x: number,
y: number
};
export interface SelectionRect extends Rect {
startX: number;
startY: number;
draw: boolean
};
export interface Node {
id: ElementId,
position?: XYPosition,
type?: string,
__rg?: any,
data?: any,
style?: CSSProperties
};
export interface Edge {
id: ElementId,
type?: string,
source: ElementId,
target: ElementId,
style?: SVGAttributes<{}>
animated?: boolean
};
export interface EdgeProps {
sourceX: number,
sourceY: number,
targetX: number,
targetY: number,
style?: SVGAttributes<{}>
};
export interface EdgeBezierProps extends EdgeProps{
sourcePosition: Position,
targetPosition: Position
};
export interface NodeProps {
id: ElementId,
type: string,
data: any;
selected: boolean;
style?: CSSProperties;
};
export interface NodeComponentProps {
id: ElementId,
type: string;
data: any;
selected?: boolean;
transform?: Transform;
xPos?: number;
yPos?: number;
onClick?: () => any;
onNodeDragStop?: () => any;
style?: CSSProperties;
};
export type FitViewParams = {
padding: number
};
export type FitViewFunc = (fitViewOptions: FitViewParams) => void;
type OnLoadParams = {
zoomIn: () => void;
zoomOut: () => void;
fitView: FitViewFunc
};
export type OnLoadFunc = (params: OnLoadParams) => void;
export type OnConnectParams = {
source: ElementId;
target: ElementId;
};
export type OnConnectFunc = (params: OnConnectParams) => void;
export type Connection = {
source: ElementId;
target: ElementId;
};
export interface HandleElement {
id?: ElementId;
position: Position;
x: number;
y: number;
width: number;
height: number;
};
export interface EdgeWrapperProps {
id: ElementId,
source: ElementId,
target: ElementId,
type: any,
onClick?: (edge: Edge) => void
animated?: boolean,
selected?: boolean,
};
src/utils/graph.js → src/utils/graph.ts
+42 -37
View File
@@ -1,51 +1,54 @@
import { zoomIdentity } from 'd3-zoom';
import store from '../store';
import { isDefined } from './index';
import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams } from '../types';
export const isEdge = element => element.source && element.target;
export const isEdge = (element: Node | Edge): boolean =>
element.hasOwnProperty('source') && element.hasOwnProperty('target');
export const isNode = element => !element.source && !element.target;
export const isNode = (element: Node | Edge): boolean =>
!element.hasOwnProperty('source') && !element.hasOwnProperty('target');
export const getOutgoers = (node, elements) => {
export const getOutgoers = (node: Node, elements: Elements): Elements => {
if (!isNode(node)) {
return [];
}
const outgoerIds = elements.filter(e => e.source === node.id).map(e => e.target);
const outgoerIds = elements.filter((e: Edge) => e.source === node.id).map((e: Edge) => e.target);
return elements.filter(e => outgoerIds.includes(e.id));
};
export const removeElements = (elementsToRemove, elements) => {
export const removeElements = (elementsToRemove: Elements, elements: Elements): Elements => {
const nodeIdsToRemove = elementsToRemove.map(n => n.id);
return elements.filter(e => {
return (
!nodeIdsToRemove.includes(e.id) &&
!nodeIdsToRemove.includes(e.target) &&
!nodeIdsToRemove.includes(e.source)
return elements.filter((element) => {
const edgeElement = element as Edge;
return !(
nodeIdsToRemove.includes(element.id) ||
nodeIdsToRemove.includes(edgeElement.target) ||
nodeIdsToRemove.includes(edgeElement.source)
);
});
};
function getEdgeId(params) {
return `reactflow__edge-${params.source}-${params.target}`;
function getEdgeId(edgeParams: Edge): ElementId {
return `reactflow__edge-${edgeParams.source}-${edgeParams.target}`;
}
export const addEdge = (edgeParams, elements) => {
export const addEdge = (edgeParams: Edge, elements: Elements): Elements => {
if (!edgeParams.source || !edgeParams.target) {
throw new Error('Can not create edge. An edge needs a source and a target');
}
return elements.concat({
...edgeParams,
id: isDefined(edgeParams.id) ? edgeParams.id : getEdgeId(edgeParams)
id: typeof edgeParams.id !== 'undefined' ? edgeParams.id : getEdgeId(edgeParams)
});
}
const pointToRendererPoint = ({ x, y }, transform) => {
const rendererX = (x - transform[0]) * (1 / [transform[2]]);
const rendererY = (y - transform[1]) * (1 / [transform[2]]);
const pointToRendererPoint = ({ x, y }: XYPosition, transform: Transform): XYPosition => {
const rendererX = (x - transform[0]) * (1 / transform[2]);
const rendererY = (y - transform[1]) * (1 / transform[2]);
return {
x: rendererX,
@@ -53,25 +56,27 @@ const pointToRendererPoint = ({ x, y }, transform) => {
};
};
export const parseElement = (e, transform) => {
if (!e.id) {
export const parseElement = (element: Node | Edge, transform?: Transform): Node | Edge => {
if (!element.id) {
throw new Error('All elements (nodes and edges) need to have an id.',)
}
if (isEdge(e)) {
if (isEdge(element)) {
return {
...e,
id: e.id.toString(),
type: e.type || 'default'
...element,
id: element.id.toString(),
type: element.type || 'default'
};
}
const nodeElement = element as Node;
return {
...e,
id: e.id.toString(),
type: e.type || 'default',
...nodeElement,
id: nodeElement.id.toString(),
type: nodeElement.type || 'default',
__rg: {
position: pointToRendererPoint(e.position, transform),
position: pointToRendererPoint(nodeElement.position, transform),
width: null,
height: null,
handleBounds : {}
@@ -79,7 +84,7 @@ export const parseElement = (e, transform) => {
};
};
export const getBoundingBox = (nodes) => {
export const getBoundingBox = (nodes: Node[]): Rect => {
const bbox = nodes.reduce((res, node) => {
const { position } = node.__rg;
const x2 = position.x + node.__rg.width;
@@ -117,16 +122,16 @@ export const getBoundingBox = (nodes) => {
};
};
export const graphPosToZoomedPos = (pos, transform) => {
export const graphPosToZoomedPos = (pos: XYPosition, transform: Transform): XYPosition => {
return {
x: (pos.x * transform[2]) + transform[0],
y: (pos.y * transform[2]) + transform[1]
};
}
export const getNodesInside = (nodes, bbox, transform = [0, 0, 1], partially = false) => {
return nodes.
filter(n => {
export const getNodesInside = (nodes: Node[], bbox: Rect, transform: Transform = [0, 0, 1], partially: boolean = false): Node[] => {
return nodes
.filter(n => {
const bboxPos = {
x: (bbox.x - transform[0]) * (1 / transform[2]),
y: (bbox.y - transform[1]) * (1 / transform[2])
@@ -146,7 +151,7 @@ export const getNodesInside = (nodes, bbox, transform = [0, 0, 1], partially = f
});
};
export const getConnectedEdges = (nodes, edges) => {
export const getConnectedEdges = (nodes: Node[], edges: Edge[]): Edge[] => {
const nodeIds = nodes.map(n => n.id);
return edges.filter(e => {
@@ -160,7 +165,7 @@ export const getConnectedEdges = (nodes, edges) => {
});
};
export const fitView = ({ padding = 0 } = {}) => {
export const fitView = ({ padding }: FitViewParams = { padding: 0 }): void => {
const state = store.getState();
const bounds = getBoundingBox(state.nodes);
const maxBoundsSize = Math.max(bounds.width, bounds.height);
@@ -173,12 +178,12 @@ export const fitView = ({ padding = 0 } = {}) => {
state.d3Selection.call(state.d3Zoom.transform, fittedTransform);
};
export const zoomIn = () => {
export const zoomIn = (): void => {
const state = store.getState();
state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] + 0.2);
};
export const zoomOut = () => {
export const zoomOut = (): void => {
const state = store.getState();
state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] - 0.2);
};
src/utils/index.js
-10
View File
@@ -1,10 +0,0 @@
export const isFunction = obj => !!(obj && obj.constructor && obj.call && obj.apply);
export const isDefined = obj => typeof obj !== 'undefined';
export const inInputDOMNode = e => e && e.target && ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
export const getDimensions = (node = {}) => ({
width: node.offsetWidth,
height: node.offsetHeight
});
src/utils/index.ts
+12
View File
@@ -0,0 +1,12 @@
import { DraggableEvent } from 'react-draggable';
import { MouseEvent as ReactMouseEvent } from 'react';
export const isInputDOMNode = (e: ReactMouseEvent | DraggableEvent | KeyboardEvent) => {
const target = e.target as HTMLElement;
return e && target && ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName);
};
export const getDimensions = (node: HTMLDivElement) => ({
width: node.offsetWidth,
height: node.offsetHeight
});
tsconfig.json
+5 -3
View File
@@ -1,16 +1,18 @@
{
"compilerOptions": {
"outDir": "build",
"outDir": "dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "es2016", "es2017"],
"jsx": "react",
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"strictNullChecks": true,
"strictNullChecks": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"allowSyntheticDefaultImports": true
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"include": ["src"],
"exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]