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

refactor(nodes,edges): data structure

Browse Source
This commit is contained in:
moklick
2019-07-25 16:33:19 +02:00
parent 064f7d9c75
commit 7de43f7843
14 changed files with 197 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/ReactGraph.js
Vendored
+56 -40
View File
@@ -1,8 +1,8 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('prop-types')) :
typeof define === 'function' && define.amd ? define(['react', 'prop-types'], factory) :
(global = global || self, global.ReactGraph = factory(global.React, global.PropTypes));
}(this, function (React, PropTypes$1) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types'], factory) :
(global = global || self, factory(global.ReactGraph = {}, global.React, global.PropTypes));
}(this, function (exports, React, PropTypes$1) { 'use strict';
var React__default = 'default' in React ? React['default'] : React;
PropTypes$1 = PropTypes$1 && PropTypes$1.hasOwnProperty('default') ? PropTypes$1['default'] : PropTypes$1;
@@ -201,12 +201,14 @@
}
var isEdge = function isEdge(element) {
return element.data && element.data.source && element.data.target;
return element.source && element.target;
};
var isNode = function isNode(element) {
return element.data && !element.data.source && !element.data.target;
return !element.source && !element.target;
};
var parseElements = function parseElements(e) {
e.type = e.type || 'default';
if (isEdge(e)) {
return e;
}
@@ -285,10 +287,10 @@
};
var getConnectedEdges = function getConnectedEdges(nodes, edges) {
var nodeIds = nodes.map(function (n) {
return n.data.id;
return n.id;
});
return edges.filter(function (e) {
return nodeIds.includes(e.data.source) || nodeIds.includes(e.data.target);
return nodeIds.includes(e.source) || nodeIds.includes(e.target);
});
};
@@ -29861,7 +29863,7 @@
{
return _objectSpread2({}, state, {
nodes: state.nodes.map(function (n) {
if (n.data.id === action.payload.id) {
if (n.id === action.payload.id) {
n.__rg = _objectSpread2({}, n.__rg, {}, action.payload.data);
}
@@ -29874,7 +29876,7 @@
{
return _objectSpread2({}, state, {
nodes: state.nodes.map(function (n) {
if (n.data.id === action.payload.id) {
if (n.id === action.payload.id) {
n.__rg = _objectSpread2({}, n.__rg, {
position: action.payload.pos
});
@@ -29928,10 +29930,10 @@
{
var ids = action.payload.ids;
var nextEdges = state.edges.filter(function (e) {
return !ids.includes(e.data.target) && !ids.includes(e.data.source);
return !ids.includes(e.target) && !ids.includes(e.source);
});
var nextNodes = state.nodes.filter(function (n) {
return !ids.includes(n.data.id);
return !ids.includes(n.id);
});
return _objectSpread2({}, state, {
nodes: nextNodes,
@@ -30070,7 +30072,7 @@
React.useEffect(function () {
var nextNodes = props.nodes.map(function (propNode) {
var existingNode = state.nodes.find(function (n) {
return n.data.id === propNode.data.id;
return n.id === propNode.id;
});
if (existingNode) {
@@ -30125,7 +30127,7 @@
_createClass(NodeRenderer, [{
key: "renderNode",
value: function renderNode(d, onElementClick) {
var nodeType = d.data.type || 'default';
var nodeType = d.type || 'default';
if (!this.props.nodeTypes[nodeType]) {
console.warn("No node type found for type \"".concat(nodeType, "\". Using fallback type \"default\"."));
@@ -30133,7 +30135,7 @@
var NodeComponent = this.props.nodeTypes[nodeType] || this.props.nodeTypes["default"];
return React__default.createElement(NodeComponent, _extends({
key: d.data.id,
key: d.id,
onClick: onElementClick
}, d));
}
@@ -30174,25 +30176,25 @@
_createClass(EdgeRenderer, [{
key: "renderEdge",
value: function renderEdge(e, nodes, onElementClick) {
var edgeType = e.data.type || 'default';
var edgeType = e.type || 'default';
var sourceNode = nodes.find(function (n) {
return n.data.id === e.data.source;
return n.id === e.source;
});
var targetNode = nodes.find(function (n) {
return n.data.id === e.data.target;
return n.id === e.target;
});
if (!sourceNode) {
throw new Error("couldn't create edge for source id: ".concat(e.data.source));
throw new Error("couldn't create edge for source id: ".concat(e.source));
}
if (!targetNode) {
throw new Error("couldn't create edge for source id: ".concat(e.data.target));
throw new Error("couldn't create edge for source id: ".concat(e.target));
}
var EdgeComponent = this.props.edgeTypes[edgeType] || this.props.edgeTypes["default"];
return React__default.createElement(EdgeComponent, _extends({
key: "".concat(e.data.source, "-").concat(e.data.target),
key: "".concat(e.source, "-").concat(e.target),
sourceNode: sourceNode,
targetNode: targetNode,
onClick: onElementClick
@@ -32549,7 +32551,7 @@
x: node.__rg.position.x || node.position.x,
y: node.__rg.position.y || node.position.x
};
res[node.data.id] = startPosition;
res[node.id] = startPosition;
return res;
}, {});
}
@@ -32601,9 +32603,9 @@
y: evt.clientY * (1 / k)
};
state.selectedElements.filter(isNode).forEach(function (node) {
dispatch(updateNodePos(node.data.id, {
x: startPositions[node.data.id].x + scaledClient.x - position.x - offset.x - x,
y: startPositions[node.data.id].y + scaledClient.y - position.y - offset.y - y
dispatch(updateNodePos(node.id, {
x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - x,
y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - y
}));
});
};
@@ -32903,19 +32905,18 @@
var data = props.data,
onClick = props.onClick,
type = props.type,
id = props.id,
__rg = props.__rg;
var position = __rg.position;
var id = data.id;
var _state$transform = _slicedToArray(state.transform, 3),
x = _state$transform[0],
y = _state$transform[1],
k = _state$transform[2];
var selected = state.selectedElements.filter(function (e) {
return !isEdge(e);
}).map(function (e) {
return e.data.id;
var selected = state.selectedElements.filter(isNode).map(function (e) {
return e.id;
}).includes(id);
var nodeClasses = classnames('react-graph__node', {
selected: selected
@@ -32964,9 +32965,12 @@
}
dispatch(setSelectedElements({
data: data
data: data,
id: id
}));
onClick({
id: id,
type: type,
data: data,
position: position
});
@@ -33007,7 +33011,7 @@
var BezierEdge = (function (props) {
var targetNode = props.targetNode,
sourceNode = props.sourceNode;
var style = props.data ? props.data.style : {};
var style = props.style || {};
var sourceX = sourceNode.__rg.position.x + sourceNode.__rg.width / 2;
var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
var targetX = targetNode.__rg.position.x + targetNode.__rg.width / 2;
@@ -33023,7 +33027,7 @@
var StraightEdge = (function (props) {
var targetNode = props.targetNode,
sourceNode = props.sourceNode;
var style = props.data ? props.data.style : {};
var style = props.style || {};
var sourceX = sourceNode.__rg.position.x + sourceNode.__rg.width / 2;
var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
var targetX = targetNode.__rg.position.x + targetNode.__rg.width / 2;
@@ -33043,17 +33047,19 @@
state = _useContext.state,
dispatch = _useContext.dispatch;
var _props$data = props.data,
data = _props$data === void 0 ? {} : _props$data,
var source = props.source,
target = props.target,
animated = props.animated,
type = props.type,
_onClick = props.onClick;
var selected = state.selectedElements.filter(function (e) {
return isEdge(e);
}).find(function (e) {
return e.data.source === data.source && e.data.target === data.target;
return e.source === source && e.target === target;
});
var edgeClasses = classnames('react-graph__edge', {
selected: selected,
animated: data.animated
animated: animated
});
return React__default.createElement("g", {
className: edgeClasses,
@@ -33063,11 +33069,14 @@
}
dispatch(setSelectedElements({
data: data
source: source,
target: target
}));
_onClick({
data: data
source: source,
target: target,
type: type
});
}
}, React__default.createElement(EdgeComponent, props));
@@ -33190,6 +33199,13 @@
}
};
return ReactGraph;
var isNode$1 = isNode;
var isEdge$1 = isEdge;
exports.default = ReactGraph;
exports.isEdge = isEdge$1;
exports.isNode = isNode$1;
Object.defineProperty(exports, '__esModule', { value: true });
}));
example/SimpleGraph.js
+26 -21
View File
@@ -1,14 +1,14 @@
import React, { PureComponent } from 'react';
import Graph from '../src';
import Graph, { isEdge } from '../src';
// import Graph from '../dist/ReactGraph';
const SpecialNode = ({ data, styles }) => (
const SpecialNode = ({ data, onChange, styles }) => (
<div
style={{ background: '#FFCC00', padding: 10, borderRadius: 30, ...styles }}
>
<div>I am <strong>special</strong>!<br />{data.label}</div>
<select onChange={(e) => data.onChange(e.target.value, data)}>
<select onChange={(e) => onChange(e.target.value, data)}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
@@ -22,30 +22,35 @@ class App extends PureComponent {
const onChange = (id, d) => {
this.setState(prevState => (
{ elements: prevState.elements.map(e => ({
...e,
data: {
...e.data,
label: '6' === e.data.id ? `option ${id} selected` : e.data.label
{elements: prevState.elements.map(e => {
if (isEdge(e)) {
return e;
}
}))
}
return {
...e,
data: {
...e.data,
label: '6' === e.id ? `option ${id} selected` : e.data.label
}
};
})}
));
}
this.state = {
elements: [
{ data: { id: '1', label: 'Tests', type: 'input' }, position: { x: 50, y: 50 } },
{ data: { id: '2', label: 'This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
{ data: { id: '3', label: 'This is a node' }, position: { x: 100, y: 200 }, style: { background: '#222', color: '#fff' } },
{ data: { id: '4', label: 'nody nodes', type: 'output' }, position: { x: 50, y: 300 } },
{ data: { id: '5', label: 'Another node', type: 'default' }, position: { x: 400, y: 300 } },
{ data: { id: '6', label: 'no option selected', type: 'special', onChange }, position: { x: 400, y: 400 } },
{ data: { source: '1', target: '2', type: 'bezier', animated: true, style: { stroke: 'orange' } } },
{ data: { source: '2', target: '3' } },
{ data: { source: '3', target: '4' } },
{ data: { source: '3', target: '5' } },
{ data: { source: '5', target: '6' } }
{ id: '1', type: 'input', data: { label: 'Tests' }, position: { x: 50, y: 50 } },
{ id: '2', data: { label: 'This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'This is a node' }, position: { x: 100, y: 200 }, style: { background: '#222', color: '#fff' } },
{ id: '4', type: 'output', data: { label: 'nody nodes' }, position: { x: 50, y: 300 } },
{ id: '5', type: 'default', data: { label: 'Another node'}, position: { x: 400, y: 300 } },
{ id: '6', type: 'special', onChange, data: { label: 'no option selected' }, position: { x: 400, y: 400 } },
{ source: '1', target: '2', type: 'bezier', animated: true, style: { stroke: 'orange' } },
{ source: '2', target: '3' },
{ source: '3', target: '4' },
{ source: '3', target: '5' },
{ source: '5', target: '6' }
]
};
}
src/EdgeRenderer/EdgeTypes/BezierEdge.js
+1 -1
View File
@@ -2,7 +2,7 @@ import React from 'react';
export default (props) => {
const { targetNode, sourceNode } = props;
const style = props.data ? props.data.style : {};
const style = props.style || {};
const sourceX = sourceNode.__rg.position.x + (sourceNode.__rg.width / 2);
const sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
src/EdgeRenderer/EdgeTypes/StraightEdge.js
+1 -1
View File
@@ -2,7 +2,7 @@ import React from 'react';
export default (props) => {
const { targetNode, sourceNode } = props;
const style = props.data ? props.data.style : {};
const style = props.style || {};
const sourceX = sourceNode.__rg.position.x + (sourceNode.__rg.width / 2);
const sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
src/EdgeRenderer/EdgeTypes/wrapEdge.js
+5 -5
View File
@@ -9,11 +9,11 @@ const isInputTarget = (e) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.n
export default EdgeComponent => memo((props) => {
const { state, dispatch } = useContext(GraphContext);
const { data = {}, onClick } = props;
const { source, target, animated, type, onClick } = props;
const selected = state.selectedElements
.filter(e => isEdge(e))
.find(e => e.data.source === data.source && e.data.target === data.target);
const edgeClasses = cx('react-graph__edge', { selected, animated: data.animated });
.find(e => e.source === source && e.target === target);
const edgeClasses = cx('react-graph__edge', { selected, animated: animated });
return (
<g
@@ -23,8 +23,8 @@ export default EdgeComponent => memo((props) => {
return false;
}
dispatch(setSelectedElements({ data }));
onClick({ data });
dispatch(setSelectedElements({ source, target }));
onClick({ source, target, type });
}}
>
<EdgeComponent {...props} />
src/EdgeRenderer/index.js
+6 -6
View File
@@ -4,23 +4,23 @@ import { Consumer } from '../GraphContext';
class EdgeRenderer extends PureComponent {
renderEdge(e, nodes, onElementClick) {
const edgeType = e.data.type || 'default';
const sourceNode = nodes.find(n => n.data.id === e.data.source);
const targetNode = nodes.find(n => n.data.id === e.data.target);
const edgeType = e.type || 'default';
const sourceNode = nodes.find(n => n.id === e.source);
const targetNode = nodes.find(n => n.id === e.target);
if (!sourceNode) {
throw new Error(`couldn't create edge for source id: ${e.data.source}`);
throw new Error(`couldn't create edge for source id: ${e.source}`);
}
if (!targetNode) {
throw new Error(`couldn't create edge for source id: ${e.data.target}`);
throw new Error(`couldn't create edge for source id: ${e.target}`);
}
const EdgeComponent = this.props.edgeTypes[edgeType] || this.props.edgeTypes.default;
return (
<EdgeComponent
key={`${e.data.source}-${e.data.target}`}
key={`${e.source}-${e.target}`}
sourceNode={sourceNode}
targetNode={targetNode}
onClick={onElementClick}
src/GraphContext/index.js
+1 -1
View File
@@ -27,7 +27,7 @@ export const Provider = (props) => {
useEffect(() => {
const nextNodes = props.nodes.map(propNode => {
const existingNode = state.nodes.find(n => n.data.id === propNode.data.id);
const existingNode = state.nodes.find(n => n.id === propNode.id);
if (existingNode) {
return {
src/NodeRenderer/NodeTypes/wrapNode.js
+5 -7
View File
@@ -4,7 +4,7 @@ import cx from 'classnames';
import { GraphContext } from '../../GraphContext';
import { updateNodeData, updateNodePos, setSelectedElements } from '../../state/actions';
import { isEdge } from '../../graph-utils';
import { isNode } from '../../graph-utils';
const isInputTarget = (e) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
@@ -12,12 +12,10 @@ export default NodeComponent => memo((props) => {
const nodeElement = useRef(null);
const { state, dispatch } = useContext(GraphContext);
const [offset, setOffset] = useState({ x: 0, y: 0 });
const { data, onClick, __rg } = props;
const { data, onClick, type, id, __rg } = props;
const { position } = __rg;
const { id } = data;
const [ x, y, k ] = state.transform;
const selected = state.selectedElements.filter(e => !isEdge(e)).map(e => e.data.id).includes(id);
const selected = state.selectedElements.filter(isNode).map(e => e.id).includes(id);
const nodeClasses = cx('react-graph__node', { selected });
useEffect(() => {
@@ -60,8 +58,8 @@ export default NodeComponent => memo((props) => {
return false;
}
dispatch(setSelectedElements({ data }));
onClick({ data, position });
dispatch(setSelectedElements({ data, id }));
onClick({ id, type, data, position });
};
return (
src/NodeRenderer/index.js
+2 -2
View File
@@ -5,7 +5,7 @@ import { Consumer } from '../GraphContext';
class NodeRenderer extends PureComponent {
renderNode(d, onElementClick) {
const nodeType = d.data.type || 'default';
const nodeType = d.type || 'default';
if (!this.props.nodeTypes[nodeType]) {
console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
}
@@ -14,7 +14,7 @@ class NodeRenderer extends PureComponent {
return (
<NodeComponent
key={d.data.id}
key={d.id}
onClick={onElementClick}
{...d}
/>
src/NodesSelection/index.js
+5 -5
View File
@@ -1,4 +1,4 @@
import React, { useContext, useState, useCallback, memo } from 'react';
import React, { useContext, useState, memo } from 'react';
import ReactDraggable from 'react-draggable';
import { GraphContext } from '../GraphContext';
@@ -14,7 +14,7 @@ function getStartPositions(elements) {
y: node.__rg.position.y || node.position.x
};
res[node.data.id] = startPosition;
res[node.id] = startPosition;
return res;
}, {});
@@ -48,9 +48,9 @@ export default memo(() => {
};
state.selectedElements.filter(isNode).forEach(node => {
dispatch(updateNodePos(node.data.id, {
x: startPositions[node.data.id].x + scaledClient.x - position.x - offset.x - x ,
y: startPositions[node.data.id].y + scaledClient.y - position.y - offset.y - y
dispatch(updateNodePos(node.id, {
x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - x ,
y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - y
}));
});
};
src/ReactGraph/index.js
+74
View File
@@ -0,0 +1,74 @@
import React, { PureComponent } from 'react';
import { parseElements, separateElements } from '../graph-utils';
import GraphView from '../GraphView';
import GlobalKeyHandler from '../GlobalKeyHandler';
import { Provider } from '../GraphContext';
import DefaultNode from '../NodeRenderer/NodeTypes/DefaultNode';
import InputNode from '../NodeRenderer/NodeTypes/InputNode';
import OutputNode from '../NodeRenderer/NodeTypes/OutputNode';
import { createNodeTypes } from '../NodeRenderer/utils';
import BezierEdge from '../EdgeRenderer/EdgeTypes/BezierEdge';
import StraightEdge from '../EdgeRenderer/EdgeTypes/StraightEdge';
import { createEdgeTypes } from '../EdgeRenderer/utils';
import '../style.css';
class ReactGraph extends PureComponent {
constructor(props) {
super(props);
this.nodeTypes = createNodeTypes(props.nodeTypes);
this.edgeTypes = createEdgeTypes(props.edgeTypes);
}
render() {
const {
style, onElementClick, children, onLoad,
onMove, onChange, elements, onElementsRemove
} = this.props;
const { nodes, edges } = elements
.map(parseElements)
.reduce(separateElements, {});
return (
<div style={style} className="react-graph">
<Provider nodes={nodes} edges={edges} onElementClick={onElementClick}>
<GraphView
onLoad={onLoad}
onMove={onMove}
onChange={onChange}
nodeTypes={this.nodeTypes}
edgeTypes={this.edgeTypes}
/>
<GlobalKeyHandler
onElementsRemove={onElementsRemove}
/>
{children}
</Provider>
</div>
);
}
}
ReactGraph.defaultProps = {
onElementClick: () => {},
onElementsRemove: () => {},
onLoad: () => {},
onMove: () => {},
onChange: () => {},
nodeTypes: {
input: InputNode,
default: DefaultNode,
output: OutputNode
},
edgeTypes: {
default: BezierEdge,
straight: StraightEdge
}
};
export default ReactGraph;
src/graph-utils.js
+6 -4
View File
@@ -1,7 +1,9 @@
export const isEdge = element => element.data && element.data.source && element.data.target;
export const isNode = element => element.data && !element.data.source && !element.data.target;
export const isEdge = element => element.source && element.target;
export const isNode = element => !element.source && !element.target;
export const parseElements = e => {
e.type = e.type || 'default';
if (isEdge(e)) {
return e;
}
@@ -93,8 +95,8 @@ export const getNodesInside = (nodes, bbox, transform = [0, 0, 1]) => {
};
export const getConnectedEdges = (nodes, edges) => {
const nodeIds = nodes.map(n => n.data.id);
return edges.filter(e => nodeIds.includes(e.data.source) || nodeIds.includes(e.data.target))
const nodeIds = nodes.map(n => n.id);
return edges.filter(e => nodeIds.includes(e.source) || nodeIds.includes(e.target))
}
export default {
src/index.js
+5 -72
View File
@@ -1,74 +1,7 @@
import React, { PureComponent } from 'react';
import ReactGraph from './ReactGraph';
import { isNode as isNodeRG , isEdge as isEdgeRG } from './graph-utils';
import { parseElements, separateElements } from './graph-utils';
import GraphView from './GraphView';
import GlobalKeyHandler from './GlobalKeyHandler';
import { Provider } from './GraphContext';
export const isNode = isNodeRG;
export const isEdge = isEdgeRG;
import DefaultNode from './NodeRenderer/NodeTypes/DefaultNode';
import InputNode from './NodeRenderer/NodeTypes/InputNode';
import OutputNode from './NodeRenderer/NodeTypes/OutputNode';
import { createNodeTypes } from './NodeRenderer/utils';
import BezierEdge from './EdgeRenderer/EdgeTypes/BezierEdge';
import StraightEdge from './EdgeRenderer/EdgeTypes/StraightEdge';
import { createEdgeTypes } from './EdgeRenderer/utils';
import './style.css';
class ReactGraph extends PureComponent {
constructor(props) {
super(props);
this.nodeTypes = createNodeTypes(props.nodeTypes);
this.edgeTypes = createEdgeTypes(props.edgeTypes);
}
render() {
const {
style, onElementClick, children, onLoad,
onMove, onChange, elements, onElementsRemove
} = this.props;
const { nodes, edges } = elements
.map(parseElements)
.reduce(separateElements, {});
return (
<div style={style} className="react-graph">
<Provider nodes={nodes} edges={edges} onElementClick={onElementClick}>
<GraphView
onLoad={onLoad}
onMove={onMove}
onChange={onChange}
nodeTypes={this.nodeTypes}
edgeTypes={this.edgeTypes}
/>
<GlobalKeyHandler
onElementsRemove={onElementsRemove}
/>
{children}
</Provider>
</div>
);
}
}
ReactGraph.defaultProps = {
onElementClick: () => {},
onElementsRemove: () => {},
onLoad: () => {},
onMove: () => {},
onChange: () => {},
nodeTypes: {
input: InputNode,
default: DefaultNode,
output: OutputNode
},
edgeTypes: {
default: BezierEdge,
straight: StraightEdge
}
};
export default ReactGraph;
export default ReactGraph;
src/state/index.js
+4 -4
View File
@@ -40,7 +40,7 @@ export const reducer = (state, action) => {
return {
...state,
nodes: state.nodes.map((n) => {
if (n.data.id === action.payload.id) {
if (n.id === action.payload.id) {
n.__rg = {
...n.__rg,
...action.payload.data
@@ -54,7 +54,7 @@ export const reducer = (state, action) => {
return {
...state,
nodes: state.nodes.map((n) => {
if (n.data.id === action.payload.id) {
if (n.id === action.payload.id) {
n.__rg = {
...n.__rg,
position: action.payload.pos
@@ -99,8 +99,8 @@ export const reducer = (state, action) => {
// unused
case REMOVE_NODES: {
const { ids } = action.payload;
const nextEdges = state.edges.filter(e => !ids.includes(e.data.target) && !ids.includes(e.data.source));
const nextNodes = state.nodes.filter(n => !ids.includes(n.data.id));
const nextEdges = state.edges.filter(e => !ids.includes(e.target) && !ids.includes(e.source));
const nextNodes = state.nodes.filter(n => !ids.includes(n.id));
return { ...state, nodes: nextNodes, edges: nextEdges };
}