fix(edges): updatable edge

example/src/Basic/index.tsx

@@ -153,7 +153,6 @@ const BasicFlow = () => {
   };
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {
-    console.log('node change', changes);
     setNodes((ns) => applyNodeChanges(changes, ns));
   }, []);
 

example/src/UpdatableEdge/index.tsx

@@ -1,16 +1,19 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import ReactFlow, {
   Controls,
   updateEdge,
   addEdge,
-  Elements,
+  applyNodeChanges,
+  applyEdgeChanges,
   OnLoadParams,
   Connection,
   Edge,
-  removeElements,
+  Node,
+  NodeChange,
+  EdgeChange,
 } from 'react-flow-renderer';
 
-const initialElements: Elements = [
+const initialNodes: Node[] = [
   {
     id: '1',
     type: 'input',
@@ -46,29 +49,40 @@ const initialElements: Elements = [
     position: { x: 400, y: 100 },
     style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
   },
-  { id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' },
 ];
 
+const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' }];
+
 const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
 const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge) => console.log('start update', edge);
 const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge) => console.log('end update', edge);
 
 const UpdatableEdge = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
+  const [nodes, setNodes] = useState<Node[]>(initialNodes);
+  const [edges, setEdges] = useState<Edge[]>(initialEdges);
   const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
-    setElements((els) => updateEdge(oldEdge, newConnection, els));
+    setEdges((els) => updateEdge(oldEdge, newConnection, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els));
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
+
+  const onNodesChange = useCallback((changes: NodeChange[]) => {
+    setNodes((ns) => applyNodeChanges(changes, ns));
+  }, []);
+
+  const onEdgesChange = useCallback((changes: EdgeChange[]) => {
+    setEdges((es) => applyEdgeChanges(changes, es));
+  }, []);
 
   return (
     <ReactFlow
-      elements={elements}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
       onLoad={onLoad}
       snapToGrid={true}
       onEdgeUpdate={onEdgeUpdate}
       onConnect={onConnect}
       onEdgeUpdateStart={onEdgeUpdateStart}
-      onElementsRemove={onElementsRemove}
       onEdgeUpdateEnd={onEdgeUpdateEnd}
     >
       <Controls />

example/src/index.tsx

@@ -10,6 +10,7 @@ import FloatingEdges from './FloatingEdges';
 import Layouting from './Layouting';
 import NestedNodes from './NestedNodes';
 import Hidden from './Hidden';
+import UpdatableEdge from './UpdatableEdge';
 
 import './index.css';
 
@@ -46,6 +47,10 @@ const routes = [
     path: '/hidden',
     component: Hidden,
   },
+  {
+    path: '/updatable-edge',
+    component: UpdatableEdge,
+  },
 ];
 
 const Header = withRouter(({ history, location }) => {

src/container/EdgeRenderer/utils.ts

@@ -169,9 +169,9 @@ export function getNodeData(nodeInternals: NodeInternals, nodeId: string): [Rect
   const handleBounds = node?.handleBounds;
   const isInvalid =
     !node ||
-    !node?.handleBounds ||
+    !node.handleBounds ||
-    !node?.width ||
+    !node.width ||
-    !node?.height ||
+    !node.height ||
     typeof node.positionAbsolute?.x === 'undefined' ||
     typeof node.positionAbsolute?.y === 'undefined';
 

src/utils/graph.ts

@@ -1,6 +1,6 @@
 import { boxToRect, clamp, getBoundsOfBoxes, rectToBox } from '../utils';
 
-import { Node, Edge, Elements, Connection, EdgeMarkerType, Transform, XYPosition, Rect } from '../types';
+import { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect } from '../types';
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>
   'id' in element && 'source' in element && 'target' in element;
@@ -77,17 +77,17 @@ export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] =>
   return edges.concat(edge);
 };
 
-export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: Elements): Elements => {
+export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge[]): Edge[] => {
   if (!newConnection.source || !newConnection.target) {
     console.warn("Can't create new edge. An edge needs a source and a target.");
-    return elements;
+    return edges;
   }
 
-  const foundEdge = elements.find((e) => isEdge(e) && e.id === oldEdge.id) as Edge;
+  const foundEdge = edges.find((e) => e.id === oldEdge.id) as Edge;
 
   if (!foundEdge) {
     console.warn(`The old edge with id=${oldEdge.id} does not exist.`);
-    return elements;
+    return edges;
   }
 
   // Remove old edge and create the new edge with parameters of old edge.
@@ -100,7 +100,7 @@ export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: E
     targetHandle: newConnection.targetHandle,
   } as Edge;
 
-  return elements.filter((e) => e.id !== oldEdge.id).concat(edge);
+  return edges.filter((e) => e.id !== oldEdge.id).concat(edge);
 };
 
 export const pointToRendererPoint = (