Merge branch 'next' into absolute-origin

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/ControlledUncontrolled/index.tsx

@@ -60,12 +60,13 @@ const ControlledUncontrolled = () => {
   const updateNodePositions = () => {
     instance.setNodes((nodes) =>
       nodes.map((node) => {
-        node.position = {
-          x: Math.random() * 400,
-          y: Math.random() * 400,
+        return {
+          ...node,
+          position: {
+            x: Math.random() * 400,
+            y: Math.random() * 400,
+          },
         };
-
-        return node;
       })
     );
   };
@@ -73,11 +74,12 @@ const ControlledUncontrolled = () => {
   const updateEdgeColors = () => {
     instance.setEdges((edges) =>
       edges.map((edge) => {
-        edge.style = {
-          stroke: '#ff5050',
+        return {
+          ...edge,
+          style: {
+            stroke: '#ff5050',
+          },
         };
-
-        return edge;
       })
     );
   };

examples/react/src/examples/DefaultNodes/index.tsx

@@ -25,6 +25,7 @@ const defaultNodes: Node[] = [
   },
   {
     id: '3',
+    type: 'output',
     data: { label: 'Node 3' },
     position: { x: 400, y: 100 },
     className: 'light',

examples/react/src/examples/DragNDrop/index.tsx

@@ -77,6 +77,7 @@ const DnDFlow = () => {
             onInit={onInit}
             onDrop={onDrop}
             onDragOver={onDragOver}
+            nodeOrigin={nodeOrigin}
           >
             <Controls />
           </ReactFlow>

examples/react/src/examples/Hidden/index.tsx

@@ -73,6 +73,8 @@ const HiddenFlow = () => {
     setEdges(setHidden(isHidden));
   }, [isHidden, setEdges, setNodes]);
 
+  console.log(nodes);
+
   return (
     <ReactFlow
       nodes={nodes}

examples/react/src/examples/MultiSetNodes/index.tsx

@@ -28,10 +28,15 @@ for (let i = 0; i < 100; i++) {
   });
 }
 
-const initEdges: Edge[] = [];
+const initEdges: Edge[] = initNodes.reduce<Edge[]>((res, node, index) => {
+  if (index > 0) {
+    res.push({ id: `${index - 1}-${index}`, source: (index - 1).toString(), target: index.toString() });
+  }
+  return res;
+}, []);
 
 const CustomNodeFlow = () => {
-  const { setNodes, updateNodeData } = useReactFlow();
+  const { setNodes, updateNodeData, updateEdge } = useReactFlow();
   const [nodes, , onNodesChange] = useNodesState(initNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
 
@@ -55,6 +60,10 @@ const CustomNodeFlow = () => {
     nodes.forEach((node) => updateNodeData(node.id, { label: 'node update' }));
   };
 
+  const multiUpdateEdges = () => {
+    edges.forEach((edge) => updateEdge(edge.id, { label: 'edge update' }));
+  };
+
   return (
     <ReactFlow
       nodes={nodes}
@@ -70,6 +79,7 @@ const CustomNodeFlow = () => {
       <Panel>
         <button onClick={multiSetNodes}>set nodes</button>
         <button onClick={multiUpdateNodes}>update nodes</button>
+        <button onClick={multiUpdateEdges}>update edges</button>
       </Panel>
     </ReactFlow>
   );

examples/react/src/examples/NodeTypesObjectChange/index.tsx

@@ -28,6 +28,14 @@ const initialNodes: Node[] = [
     data: { label: 'A Node' },
     position: { x: 250, y: 0 },
   },
+  {
+    id: '3',
+    type: 'b',
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+    data: { label: 'B Node' },
+    position: { x: 350, y: 0 },
+  },
 ];
 
 const buttonStyle: CSSProperties = {
@@ -78,6 +86,7 @@ const NodeTypeChangeFlow = () => {
       onEdgesChange={onEdgesChange}
       onConnect={onConnect}
       nodeTypes={nodeTypesObjects[nodeTypesId]}
+      fitView
     >
       <button onClick={changeType} style={buttonStyle}>
         change type

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/UseKeyPress/index.tsx

@@ -1,9 +1,12 @@
 import { useKeyPress } from '@xyflow/react';
+import { useEffect } from 'react';
 
 const UseKeyPressComponent = () => {
   const metaPressed = useKeyPress(['Meta']);
 
-  console.log({ metaPressed });
+  useEffect(() => {
+    console.log({ metaPressed });
+  }, [metaPressed]);
 
   return <div />;
 };

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';
@@ -41,7 +41,7 @@ const CustomInput: FC<NodeProps> = () => (
 
 const CustomNode: FC<NodeProps> = ({ id }) => (
   <>
-    <Handle type="target" position={Position.Left} isConnectableStart={false} />
+    <Handle type="target" position={Position.Top} isConnectableStart={false} />
     <div>{id}</div>
     <Handle type="source" position={Position.Right} />
   </>
@@ -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',

examples/react/tsconfig.json

@@ -10,7 +10,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Node16",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

examples/svelte/package.json

@@ -12,8 +12,8 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.1.1",
-		"@sveltejs/kit": "^2.5.2",
+		"@sveltejs/adapter-auto": "^3.2.1",
+		"@sveltejs/kit": "^2.5.10",
 		"@typescript-eslint/eslint-plugin": "^6.10.0",
 		"@typescript-eslint/parser": "^6.10.0",
 		"eslint": "^8.53.0",
@@ -25,12 +25,12 @@
 		"svelte-check": "^3.6.6",
 		"tslib": "^2.6.2",
 		"typescript": "^5.2.2",
-		"vite": "^4.5.0"
+		"vite": "^5.2.12"
 	},
 	"type": "module",
 	"dependencies": {
 		"@dagrejs/dagre": "^1.0.4",
-		"@sveltejs/vite-plugin-svelte": "^3.0.2",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"@xyflow/svelte": "workspace:^"
 	}
 }

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

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

examples/svelte/src/routes/examples/overview/+page.svelte

@@ -159,6 +159,8 @@
 	on:nodemouseenter={(event) => console.log('on node enter', event)}
 	on:nodemouseleave={(event) => console.log('on node leave', event)}
 	on:edgeclick={(event) => console.log('edge click', event)}
+	on:edgemouseenter={(event) => console.log('edge enter', event)}
+	on:edgemouseleave={(event) => console.log('edge leave', event)}
 	onconnectstart={(event) => console.log('on connect start', event)}
 	onconnect={(event) => console.log('on connect', event)}
 	onconnectend={(event) => console.log('on connect end', event)}

examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte

@@ -21,7 +21,7 @@
 		{ id: 'B', position: { x: 0, y: 100 }, data: { label: 'B' } }
 	]);
 	const edges = writable([{ id: 'ab', source: 'A', target: 'B' }]);
-	const viewport = writable<Viewport>({ x: 0, y: 10, zoom: 1.25 });
+	const viewport = writable<Viewport>({ x: 100, y: 100, zoom: 1.25 });
 
 	const { fitView } = useSvelteFlow();
 
@@ -35,7 +35,7 @@
 	});
 </script>
 
-<SvelteFlow {nodes} {edges} fitView {viewport}>
+<SvelteFlow {nodes} {edges} {viewport}>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 

examples/svelte/src/routes/examples/validation/+page.svelte

@@ -24,8 +24,8 @@
 			data: { label: 'only connectable with B' },
 			...nodeDefaults
 		},
-		{ id: 'A', position: { x: 250, y: 0 }, data: { label: 'A' }, ...nodeDefaults },
-		{ id: 'B', position: { x: 250, y: 150 }, data: { label: 'B' }, ...nodeDefaults },
+		{ id: 'A', position: { x: 250, y: 0 }, data: { label: 'A' } },
+		{ id: 'B', position: { x: 250, y: 150 }, data: { label: 'B' } },
 		{ id: 'C', position: { x: 250, y: 300 }, data: { label: 'C' }, ...nodeDefaults }
 	]);