diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js index 57e2f3aa..6cb2e8f8 100644 --- a/dist/ReactGraph.js +++ b/dist/ReactGraph.js @@ -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 }); })); diff --git a/example/SimpleGraph.js b/example/SimpleGraph.js index 08e7ff52..e73c35a6 100644 --- a/example/SimpleGraph.js +++ b/example/SimpleGraph.js @@ -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 }) => (
I am special!
{data.label}
- onChange(e.target.value, data)}> @@ -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' } ] }; } diff --git a/src/EdgeRenderer/EdgeTypes/BezierEdge.js b/src/EdgeRenderer/EdgeTypes/BezierEdge.js index abb25ca9..5aececb5 100644 --- a/src/EdgeRenderer/EdgeTypes/BezierEdge.js +++ b/src/EdgeRenderer/EdgeTypes/BezierEdge.js @@ -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; diff --git a/src/EdgeRenderer/EdgeTypes/StraightEdge.js b/src/EdgeRenderer/EdgeTypes/StraightEdge.js index a6c055e0..d4b16b89 100644 --- a/src/EdgeRenderer/EdgeTypes/StraightEdge.js +++ b/src/EdgeRenderer/EdgeTypes/StraightEdge.js @@ -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; diff --git a/src/EdgeRenderer/EdgeTypes/wrapEdge.js b/src/EdgeRenderer/EdgeTypes/wrapEdge.js index fc227c2c..7a32982a 100644 --- a/src/EdgeRenderer/EdgeTypes/wrapEdge.js +++ b/src/EdgeRenderer/EdgeTypes/wrapEdge.js @@ -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 ( memo((props) => { return false; } - dispatch(setSelectedElements({ data })); - onClick({ data }); + dispatch(setSelectedElements({ source, target })); + onClick({ source, target, type }); }} > diff --git a/src/EdgeRenderer/index.js b/src/EdgeRenderer/index.js index f8a12510..2573562e 100644 --- a/src/EdgeRenderer/index.js +++ b/src/EdgeRenderer/index.js @@ -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 ( { 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 { diff --git a/src/NodeRenderer/NodeTypes/wrapNode.js b/src/NodeRenderer/NodeTypes/wrapNode.js index 71e38324..061d8d6d 100644 --- a/src/NodeRenderer/NodeTypes/wrapNode.js +++ b/src/NodeRenderer/NodeTypes/wrapNode.js @@ -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 ( diff --git a/src/NodeRenderer/index.js b/src/NodeRenderer/index.js index 12abfbae..cd939102 100644 --- a/src/NodeRenderer/index.js +++ b/src/NodeRenderer/index.js @@ -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 ( diff --git a/src/NodesSelection/index.js b/src/NodesSelection/index.js index a4056ae4..66440b17 100644 --- a/src/NodesSelection/index.js +++ b/src/NodesSelection/index.js @@ -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 })); }); }; diff --git a/src/ReactGraph/index.js b/src/ReactGraph/index.js new file mode 100644 index 00000000..da398e78 --- /dev/null +++ b/src/ReactGraph/index.js @@ -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 ( +
+ + + + {children} + +
+ ); + } +} + +ReactGraph.defaultProps = { + onElementClick: () => {}, + onElementsRemove: () => {}, + onLoad: () => {}, + onMove: () => {}, + onChange: () => {}, + nodeTypes: { + input: InputNode, + default: DefaultNode, + output: OutputNode + }, + edgeTypes: { + default: BezierEdge, + straight: StraightEdge + } +}; + +export default ReactGraph; diff --git a/src/graph-utils.js b/src/graph-utils.js index fb49957a..4790d322 100644 --- a/src/graph-utils.js +++ b/src/graph-utils.js @@ -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 { diff --git a/src/index.js b/src/index.js index acc867af..55c616ef 100644 --- a/src/index.js +++ b/src/index.js @@ -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 ( -
- - - - {children} - -
- ); - } -} - -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; \ No newline at end of file diff --git a/src/state/index.js b/src/state/index.js index fd3df402..0783b8e6 100644 --- a/src/state/index.js +++ b/src/state/index.js @@ -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 }; }