Rename updateEdge to reconnectEdge (#4373)

* refactor(edges): rename update to reconnect

* refactor(react): rename edge update to reconnect

* chore(examples): repair broken reconnect example

* chore(react): changelog

examples/react/src/App/routes.ts

@@ -34,7 +34,7 @@ import Subflow from '../examples/Subflow';
 import SwitchFlow from '../examples/Switch';
 import TouchDevice from '../examples/TouchDevice';
 import Undirectional from '../examples/Undirectional';
-import UpdatableEdge from '../examples/UpdatableEdge';
+import ReconnectEdge from '../examples/ReconnectEdge';
 import UpdateNode from '../examples/UpdateNode';
 import UseUpdateNodeInternals from '../examples/UseUpdateNodeInternals';
 import UseReactFlow from '../examples/UseReactFlow';
@@ -271,9 +271,9 @@ const routes: IRoute[] = [
     component: Undirectional,
   },
   {
-    name: 'Updatable Edge',
-    path: 'updatable-edge',
-    component: UpdatableEdge,
+    name: 'Reconnect Edge',
+    path: 'reconnect-edge',
+    component: ReconnectEdge,
   },
   {
     name: 'Update Node',

examples/react/src/examples/ReconnectEdge/index.tsx

@@ -2,7 +2,7 @@ import { useState, useCallback, MouseEvent as ReactMouseEvent } from 'react';
 import {
   ReactFlow,
   Controls,
-  updateEdge,
+  reconnectEdge,
   addEdge,
   applyNodeChanges,
   applyEdgeChanges,
@@ -91,21 +91,21 @@ const initialNodes: Node[] = [
 ];
 
 const initialEdges: Edge[] = [
-  { id: 'e1-3', source: '1', target: '3', label: 'This edge can only be updated from source', updatable: 'source' },
-  { id: 'e2-4', source: '2', target: '4', label: 'This edge can only be updated from target', updatable: 'target' },
+  { id: 'e1-3', source: '1', target: '3', label: 'This edge can only be updated from source', reconnectable: 'source' },
+  { id: 'e2-4', source: '2', target: '4', label: 'This edge can only be updated from target', reconnectable: 'target' },
   { id: 'e5-6', source: '5', target: '6', label: 'This edge can be updated from both sides' },
 ];
 
-const onEdgeUpdateStart = (_: ReactMouseEvent, edge: Edge, handleType: HandleType) =>
+const onReconnectStart = (_: ReactMouseEvent, edge: Edge, handleType: HandleType) =>
   console.log(`start update ${handleType} handle`, edge);
-const onEdgeUpdateEnd = (_: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) =>
+const onReconnectEnd = (_: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) =>
   console.log(`end update ${handleType} handle`, edge);
 
-const UpdatableEdge = () => {
+const ReconnectEdge = () => {
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
-  const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
-    setEdges((els) => updateEdge(oldEdge, newConnection, els));
+  const onReconnect = (oldEdge: Edge, newConnection: Connection) =>
+    setEdges((els) => reconnectEdge(oldEdge, newConnection, els));
   const onConnect = (connection: Connection) => setEdges((els) => addEdge(connection, els));
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {
@@ -123,10 +123,10 @@ const UpdatableEdge = () => {
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       snapToGrid={true}
-      onEdgeUpdate={onEdgeUpdate}
+      onReconnect={onReconnect}
       onConnect={onConnect}
-      onEdgeUpdateStart={onEdgeUpdateStart}
-      onEdgeUpdateEnd={onEdgeUpdateEnd}
+      onReconnectStart={onReconnectStart}
+      onReconnectEnd={onReconnectEnd}
       fitView
     >
       <Controls />
@@ -134,4 +134,4 @@ const UpdatableEdge = () => {
   );
 };
 
-export default UpdatableEdge;
+export default ReconnectEdge;

examples/react/src/examples/Undirectional/index.tsx

@@ -10,7 +10,7 @@ import {
   Edge,
   ConnectionLineType,
   ConnectionMode,
-  updateEdge,
+  reconnectEdge,
   useNodesState,
   useEdgesState,
 } from '@xyflow/react';
@@ -22,55 +22,55 @@ const initialNodes: Node[] = [
     id: '00',
     type: 'custom',
     position: { x: 300, y: 250 },
-    data: null,
+    data: {},
   },
   {
     id: '01',
     type: 'custom',
     position: { x: 100, y: 50 },
-    data: null,
+    data: {},
   },
   {
     id: '02',
     type: 'custom',
     position: { x: 500, y: 50 },
-    data: null,
+    data: {},
   },
   {
     id: '03',
     type: 'custom',
     position: { x: 500, y: 500 },
-    data: null,
+    data: {},
   },
   {
     id: '04',
     type: 'custom',
     position: { x: 100, y: 500 },
-    data: null,
+    data: {},
   },
   {
     id: '10',
     type: 'custom',
     position: { x: 300, y: 5 },
-    data: null,
+    data: {},
   },
   {
     id: '20',
     type: 'custom',
     position: { x: 600, y: 250 },
-    data: null,
+    data: {},
   },
   {
     id: '30',
     type: 'custom',
     position: { x: 300, y: 600 },
-    data: null,
+    data: {},
   },
   {
     id: '40',
     type: 'custom',
     position: { x: 5, y: 250 },
-    data: null,
+    data: {},
   },
 ];
 
@@ -186,8 +186,8 @@ const UpdateNodeInternalsFlow = () => {
   const { screenToFlowPosition } = useReactFlow();
 
   const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
-  const onEdgeUpdate = useCallback(
-    (oldEdge: Edge, newConnection: Connection) => setEdges((els) => updateEdge(oldEdge, newConnection, els)),
+  const onReconnect = useCallback(
+    (oldEdge: Edge, newConnection: Connection) => setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),
     []
   );
 
@@ -215,7 +215,7 @@ const UpdateNodeInternalsFlow = () => {
       onPaneClick={onPaneClick}
       connectionLineType={ConnectionLineType.Bezier}
       connectionMode={ConnectionMode.Loose}
-      onEdgeUpdate={onEdgeUpdate}
+      onReconnect={onReconnect}
     />
   );
 };

examples/react/src/examples/Validation/index.tsx

@@ -13,7 +13,7 @@ import {
   OnConnectStart,
   OnConnectEnd,
   OnConnect,
-  updateEdge,
+  reconnectEdge,
   Edge,
   IsValidConnection,
   OnBeforeDelete,
@@ -24,10 +24,10 @@ import ConnectionStatus from './ConnectionStatus';
 import styles from './validation.module.css';
 
 const initialNodes: Node[] = [
-  { id: '0', type: 'custominput', position: { x: 0, y: 150 }, data: null },
-  { id: 'A', type: 'customnode', position: { x: 250, y: 0 }, data: null },
-  { id: 'B', type: 'customnode', position: { x: 250, y: 150 }, data: null },
-  { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, data: null },
+  { id: '0', type: 'custominput', position: { x: 0, y: 150 }, data: {} },
+  { id: 'A', type: 'customnode', position: { x: 250, y: 0 }, data: {} },
+  { id: 'B', type: 'customnode', position: { x: 250, y: 150 }, data: {} },
+  { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, data: {} },
 ];
 
 const isValidConnection: IsValidConnection = (connection) => connection.target === 'B';
@@ -81,8 +81,8 @@ const ValidationFlow = () => {
     [value]
   );
 
-  const onEdgeUpdate = useCallback(
-    (oldEdge: Edge, newConnection: Connection) => setEdges((els) => updateEdge(oldEdge, newConnection, els)),
+  const onReconnect = useCallback(
+    (oldEdge: Edge, newConnection: Connection) => setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),
     [setEdges]
   );
 
@@ -102,7 +102,7 @@ const ValidationFlow = () => {
       nodeTypes={nodeTypes}
       onConnectStart={onConnectStart}
       onConnectEnd={onConnectEnd}
-      onEdgeUpdate={onEdgeUpdate}
+      onReconnect={onReconnect}
       isValidConnection={isValidConnection}
       onBeforeDelete={onBeforeDelete}
       fitView

examples/react/src/generic-tests/edges/general.ts

@@ -149,7 +149,7 @@ export default {
       // 	source: '9',
       // 	target: '11',
       // 	label: 'focusable',
-      // 	updatable: true
+      // 	reconnectable: true
       // },
       // {
       // 	id: 'not-focusable',