Merge branch 'next' into feat/changesets

2024-07-01 11:54:05 +02:00
parent a1656832bf 00063ab925
commit 7e42e20f67
106 changed files with 9370 additions and 7462 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -4,47 +4,57 @@ body:
  - type: markdown
    attributes:
      value: |
-        Thank you for reporting an issue :pray:.
+        Hello! :sparkles: You found the place to submit a bug or issue that you discovered in the xyflow library, thank you for helping us out!

-        **Please only file issues for v11. Will will no longer fix issues for v10.** 
+        Having trouble making something work in xyflow, but it’s not a bug with the library itself? You’ll get the fastest response by asking in [github discussions](https://github.com/xyflow/xyflow/discussions) or our [discord server](https://discord.gg/RVmnytFmGW).

-        This issue tracker is for reporting bugs found in react-flow (https://github.com/wbkd/react-flow)
-        If you have a question about how to achieve something and are struggling, please post a question
-        inside of react-flow's Discussion's tab: https://github.com/wbkd/react-flow/discussions
-        If it's an issue about the docs please go to the react-flow-docs (https://github.com/wbkd/react-flow-docs)
+        **Search our [discussions](https://github.com/xyflow/xyflow/discussions?discussions_q=) and [issues](https://github.com/xyflow/xyflow/issues?q=)** to see if your problem has already been reported and you can add more context, or see if someone else has already solved your issue. And of course, check our [docs](https://reactflow.dev/learn) if you haven’t already.

-        Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already:
-         - react-flow's Open Issue's tab: https://github.com/wbkd/react-flow/issues?q=is%3Aissue+sort%3Aupdated-desc+position
-         - react-flow's Closed Issues tab: https://github.com/wbkd/react-flow/issues?q=is%3Aissue+sort%3Aupdated-desc+position+is%3Aclosed
-         - react-flow's Discussion's tab: https://github.com/wbkd/react-flow/discussions
+        **Issue with the xyflow Docs?** Submit an issue in our [web repo](https://github.com/xyflow/web/issues) instead.

-        The more information you fill in, the better the community can help you.
+        With that out of the way, let’s get started :bug:
  - type: textarea
-    id: description
+    id: platform
    attributes:
-      label: Describe the Bug
-      description: Provide a clear and concise description of the challenge you are running into.
+      label: What platform were you using when you found the bug?
+      description: We only address issues for the most recent xyflow major release or upcoming releases.
+      value: |
+        - React Flow / Svelte Flow version: 
+        - Browser and version: 
+        - OS and version:
    validations:
      required: true
  - type: input
    id: link
    attributes:
-      label: Your Example Website or App
+      label: Live code example
      description: |
-        Which website or app were you using when the bug happened?
-        Note:
-        - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the `react-flow-renderer` npm package.
-        - To create a shareable code example you can use Codesandbox (https://codesandbox.io/s/react-flow-starter-ou8or) or Stackblitz (https://stackblitz.com/). 
-        - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.
-      placeholder: |
-        e.g. https://stackblitz.com/edit/...... OR Github Repo
+        This is the most important part of the bug report! 
+
+        React Flow codesandbox starters
+        - js: https://new.reactflow.dev/js
+        - ts: https://new.reactflow.dev/ts
+
+        Svelte Flow stackblitz starters
+        - js: https://new.svelteflow.dev/js
+        - ts: https://new.svelteflow.dev/ts 
+
+        Avoid dependencies in your example for easier debugging.
+      placeholder: https://stackblitz.com/edit/...  or Github Repo
    validations:
      required: false
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the Bug
+      description: What exactly is happening when you encounter the bug?
+    validations:
+      required: true
  - type: textarea
    id: steps
    attributes:
-      label: Steps to Reproduce the Bug or Issue
-      description: Describe the steps we have to take to reproduce the behavior.
+      label: Steps to reproduce the bug or issue
+      description: How can we see the reported behavior in the code example you provided? The more detail, the better!
      placeholder: |
        1. Go to '...'
        2. Click on '....'
@@ -56,9 +66,8 @@ body:
    id: expected
    attributes:
      label: Expected behavior
-      description: Provide a clear and concise description of what you expected to happen.
-      placeholder: |
-        As a user, I expected ___ behavior but i am seeing ___
+      description: What would you expect to happen if there was no bug or issue?
+      placeholder: As a user, I expected ___ behavior, but instead I am seeing ___
    validations:
      required: true
  - type: textarea
@@ -67,22 +76,9 @@ body:
      label: Screenshots or Videos
      description: |
        If applicable, add screenshots or a video to help explain your problem.
-        For more information on the supported file image/file types and the file size limits, please refer
-        to the following link: https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files
-      placeholder: |
-        You can drag your video or image files inside of this editor ↓
-  - type: textarea
-    id: platform
-    attributes:
-      label: Platform
-      value: |
-        - OS: [e.g. macOS, Windows, Linux]
-        - Browser: [e.g. Chrome, Safari, Firefox]
-        - Version: [e.g. 91.1]
-    validations:
-      required: true
+        Supported image/file types and file size limits- https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files
+      placeholder: Drag your video or image files inside of this editor
  - type: textarea
    id: additional
    attributes:
      label: Additional context
-      description: Add any other context about the problem here.
--- a/examples/react/src/App/routes.ts
+++ b/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',
--- a/examples/react/src/examples/DefaultNodes/index.tsx
+++ b/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',
--- a/examples/react/src/examples/DragNDrop/index.tsx
+++ b/examples/react/src/examples/DragNDrop/index.tsx
@@ -77,6 +77,7 @@ const DnDFlow = () => {
            onInit={onInit}
            onDrop={onDrop}
            onDragOver={onDragOver}
+            nodeOrigin={nodeOrigin}
          >
            <Controls />
          </ReactFlow>
--- a/examples/react/src/examples/MultiSetNodes/index.tsx
+++ b/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>
  );
--- a/examples/react/src/examples/NodeResizer/index.tsx
+++ b/examples/react/src/examples/NodeResizer/index.tsx
@@ -37,6 +37,7 @@ const initialNodes: Node[] = [
    type: 'defaultResizer',
    data: { label: 'default resizer' },
    position: { x: 0, y: 0 },
+    origin: [1, 1],
    style: { ...nodeStyle },
  },
  {
@@ -127,7 +128,7 @@ const initialNodes: Node[] = [
    data: { label: 'Parent', keepAspectRatio: true },
    position: { x: 700, y: 0 },
    width: 300,
-    height: 400,
+    height: 300,
    style: { ...nodeStyle },
  },
  {
@@ -147,7 +148,9 @@ const initialNodes: Node[] = [
    id: '5b',
    type: 'defaultResizer',
    data: { label: 'Child with expandParent' },
-    position: { x: 150, y: 100 },
+    position: { x: 100, y: 100 },
+    width: 100,
+    height: 100,
    parentId: '5',
    expandParent: true,
    style: { ...nodeStyle },
@@ -155,8 +158,10 @@ const initialNodes: Node[] = [
  {
    id: '5c',
    type: 'defaultResizer',
-    data: { label: 'Child with expandParent & keepAspectRatio', keepAspectRatio: true },
-    position: { x: 25, y: 200 },
+    data: { label: 'Child with expandParent & keepAspectRatio' },
+    position: { x: 250, y: 200 },
+    height: 100,
+    width: 100,
    parentId: '5',
    expandParent: true,
    style: { ...nodeStyle },
--- a/examples/react/src/examples/NodeTypesObjectChange/index.tsx
+++ b/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
--- a/examples/react/src/examples/ReconnectEdge/index.tsx
+++ b/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;
--- a/examples/react/src/examples/Subflow/DebugNode.tsx
+++ b/examples/react/src/examples/Subflow/DebugNode.tsx
@@ -1,6 +1,6 @@
 import React, { memo, FC, CSSProperties } from 'react';

-import { Handle, NodeProps, Position } from '@xyflow/react';
+import { Handle, NodeProps, Position, useInternalNode } from '@xyflow/react';

 const infoStyle: CSSProperties = { fontSize: 11 };
 const idStyle: CSSProperties = {
@@ -12,6 +12,8 @@ const idStyle: CSSProperties = {
 };

 const DebugNode: FC<NodeProps> = ({ zIndex, positionAbsoluteX, positionAbsoluteY, id }) => {
+  const node = useInternalNode(id)!;
+
  return (
    <>
      <Handle type="target" position={Position.Top} />
@@ -19,6 +21,9 @@ const DebugNode: FC<NodeProps> = ({ zIndex, positionAbsoluteX, positionAbsoluteY
      <div style={infoStyle}>
        x:{Math.round(positionAbsoluteX)} y:{Math.round(positionAbsoluteY)} z:{zIndex}
      </div>
+      <div style={infoStyle}>
+        x:{Math.round(node.position.x)} y:{Math.round(node.position.y)}
+      </div>
      <Handle type="source" position={Position.Bottom} />
    </>
  );
--- a/examples/react/src/examples/Subflow/index.tsx
+++ b/examples/react/src/examples/Subflow/index.tsx
@@ -14,6 +14,8 @@ import {
  Background,
  Panel,
  NodeOrigin,
+  useUpdateNodeInternals,
+  ReactFlowProvider,
 } from '@xyflow/react';

 import DebugNode from './DebugNode';
@@ -104,7 +106,7 @@ const initialNodes: Node[] = [
  {
    id: '5b',
    data: { label: 'Node 5b' },
-    position: { x: 225, y: 50 },
+    position: { x: 200, y: 200 },
    className: 'light',
    parentId: '5',
    expandParent: true,
@@ -151,6 +153,7 @@ const nodeTypes = {

 const Subflow = () => {
  const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
+  const updateNodeInternals = useUpdateNodeInternals();
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

@@ -216,6 +219,7 @@ const Subflow = () => {
      onlyRenderVisibleElements={false}
      nodeTypes={nodeTypes}
      fitView
+      nodeOrigin={[0, 0]}
    >
      <MiniMap />
      <Controls />
@@ -228,9 +232,14 @@ const Subflow = () => {
        <button onClick={toggleChildNodes}>toggleChildNodes</button>
        <button onClick={logToObject}>toObject</button>
        <button onClick={() => setNodes(initialNodes)}>setNodes</button>
+        <button onClick={() => updateNodeInternals(nodes.map((node) => node.id))}>updateNodeInternals</button>
      </Panel>
    </ReactFlow>
  );
 };

-export default Subflow;
+export default () => (
+  <ReactFlowProvider>
+    <Subflow />
+  </ReactFlowProvider>
+);
--- a/examples/react/src/examples/Undirectional/index.tsx
+++ b/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}
    />
  );
 };
--- a/examples/react/src/examples/UseKeyPress/index.tsx
+++ b/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 />;
 };
--- a/examples/react/src/examples/Validation/index.tsx
+++ b/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
--- a/examples/react/src/generic-tests/edges/general.ts
+++ b/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',
--- a/examples/svelte/src/generic-tests/edges/general.ts
+++ b/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',
--- a/examples/svelte/src/routes/examples/custom-connection-line/ConnectionLine.svelte
+++ b/examples/svelte/src/routes/examples/custom-connection-line/ConnectionLine.svelte
@@ -1,9 +1,24 @@
 <script lang="ts">
-	import { useConnection } from '@xyflow/svelte';
+	import { getBezierPath, useConnection } from '@xyflow/svelte';

 	const connection = useConnection();
+
+	let path: string | null = null;
+
+	$: if ($connection.inProgress) {
+		const { from, to, fromPosition, toPosition } = $connection;
+		const pathParams = {
+			sourceX: from.x,
+			sourceY: from.y,
+			sourcePosition: fromPosition,
+			targetX: to.x,
+			targetY: to.y,
+			targetPosition: toPosition
+		};
+		[path] = getBezierPath(pathParams);
+	}
 </script>

-{#if $connection.path}
-	<path d={$connection.path} fill="none" stroke={$connection.startHandle?.handleId} />
+{#if $connection.inProgress}
+	<path d={path} fill="none" stroke={$connection.fromHandle.id} />
 {/if}
--- a/examples/svelte/src/routes/examples/validation/+page.svelte
+++ b/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 }
 	]);

--- a/package.json
+++ b/package.json
@@ -14,10 +14,10 @@
    "test:svelte:ui": "pnpm --filter=playwright run test:svelte:ui",
    "test:react": "pnpm --filter=playwright run test:react",
    "test:react:ui": "pnpm --filter=playwright run test:react:ui",
-    "build": "turbo run build",
-    "test": "turbo run test",
-    "lint": "turbo run lint",
-    "typecheck": "turbo run typecheck",
+    "build:all": "turbo run build",
+    "build": "turbo run build --filter=./packages/**",
+    "lint": "turbo run lint --filter=./packages/**",
+    "typecheck": "turbo run typecheck --filter=./packages/**",
    "release": "changeset publish",
    "clean": "pnpm -r --parallel exec rimraf dist .turbo node_modules"
  },
@@ -35,8 +35,9 @@
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rimraf": "^3.0.2",
-    "rollup": "^3.23.0",
-    "turbo": "^1.10.0",
+    "rollup": "^4.18.0",
+    "turbo": "^2.0.3",
    "typescript": "5.1.3"
-  }
+  },
+  "packageManager": "pnpm@9.2.0"
 }
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,39 @@
 # @xyflow/react

+## 12.0.0-next.25
+
+- `useConnection` returns `ConnectionState` with `toNode` and `toHandle`
+- add `toNode` and `toHandle` to custom connection line props
+- node origin is part of position absolute
+- refactor connection handling
+
+## 12.0.0-next.24
+
+- fix `window` bug for SSR for real
+
+## 12.0.0-next.23
+
+- fix `window` bug for SSR
+
+## 12.0.0-next.22
+
+- ⚠️ rename `updateEdge` to `reconnectEdge` and realted APIs [#4373](https://github.com/xyflow/xyflow/pull/4373)
+- revise selection usability (capture while dragging out of the flow)
+- use correct end handle position when drawing a connection lines
+- determine correct end positions for connection lines
+
+## 12.0.0-next.21
+
+- fix node origin bug
+
+## 12.0.0-next.20
+
+- add `updateEdge` and `updateEdgeData` helpers to `useReactFlow`
+- enable dynamic edge label updates
+- prevent zooming on mobile if zoomOnPinch is false
+- add straight edge to path built-in-types
+- abort drag when multiple touches are detected
+
 ## 12.0.0-next.19

 - update internals on node resizer updates
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@xyflow/react",
-  "version": "12.0.0-next.19",
+  "version": "12.0.0-next.24",
  "description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
  "keywords": [
    "react",
--- a/packages/react/src/additional-components/MiniMap/MiniMap.tsx
+++ b/packages/react/src/additional-components/MiniMap/MiniMap.tsx
@@ -25,12 +25,8 @@ const selector = (s: ReactFlowState) => {

  return {
    viewBB,
-    boundingRect:
-      s.nodeLookup.size > 0
-        ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup, { nodeOrigin: s.nodeOrigin }), viewBB)
-        : viewBB,
+    boundingRect: s.nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup), viewBB) : viewBB,
    rfId: s.rfId,
-    nodeOrigin: s.nodeOrigin,
    panZoom: s.panZoom,
    translateExtent: s.translateExtent,
    flowWidth: s.width,
--- a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
+++ b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ComponentType, memo } from 'react';
-import { NodeOrigin, getNodeDimensions, getNodePositionWithOrigin, nodeHasDimensions } from '@xyflow/system';
+import { getNodeDimensions, nodeHasDimensions } from '@xyflow/system';
 import { shallow } from 'zustand/shallow';

 import { useStore } from '../../hooks/useStore';
@@ -11,7 +11,6 @@ import type { MiniMapNodes as MiniMapNodesProps, GetMiniMapNodeAttribute, MiniMa

 declare const window: any;

-const selector = (s: ReactFlowState) => s.nodeOrigin;
 const selectorNodeIds = (s: ReactFlowState) => s.nodes.map((node) => node.id);
 const getAttrFunction = <NodeType extends Node>(func: any): GetMiniMapNodeAttribute<NodeType> =>
  func instanceof Function ? func : () => func;
@@ -28,7 +27,6 @@ function MiniMapNodes<NodeType extends Node>({
  onClick,
 }: MiniMapNodesProps<NodeType>) {
  const nodeIds = useStore(selectorNodeIds, shallow);
-  const nodeOrigin = useStore(selector);
  const nodeColorFunc = getAttrFunction<NodeType>(nodeColor);
  const nodeStrokeColorFunc = getAttrFunction<NodeType>(nodeStrokeColor);
  const nodeClassNameFunc = getAttrFunction<NodeType>(nodeClassName);
@@ -46,7 +44,6 @@ function MiniMapNodes<NodeType extends Node>({
        <NodeComponentWrapper<NodeType>
          key={nodeId}
          id={nodeId}
-          nodeOrigin={nodeOrigin}
          nodeColorFunc={nodeColorFunc}
          nodeStrokeColorFunc={nodeStrokeColorFunc}
          nodeClassNameFunc={nodeClassNameFunc}
@@ -63,7 +60,6 @@ function MiniMapNodes<NodeType extends Node>({

 function NodeComponentWrapperInner<NodeType extends Node>({
  id,
-  nodeOrigin,
  nodeColorFunc,
  nodeStrokeColorFunc,
  nodeClassNameFunc,
@@ -74,7 +70,6 @@ function NodeComponentWrapperInner<NodeType extends Node>({
  onClick,
 }: {
  id: string;
-  nodeOrigin: NodeOrigin;
  nodeColorFunc: GetMiniMapNodeAttribute<NodeType>;
  nodeStrokeColorFunc: GetMiniMapNodeAttribute<NodeType>;
  nodeClassNameFunc: GetMiniMapNodeAttribute<NodeType>;
@@ -86,7 +81,7 @@ function NodeComponentWrapperInner<NodeType extends Node>({
 }) {
  const { node, x, y } = useStore((s) => {
    const node = s.nodeLookup.get(id) as InternalNode<NodeType>;
-    const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
+    const { x, y } = node.internals.positionAbsolute;

    return {
      node,
--- a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
+++ b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
@@ -67,26 +67,30 @@ function ResizeControl({
        },
        onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
          const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState();
-
          const changes: NodeChange[] = [];
          const nextPosition = { x: change.x, y: change.y };
-
          const node = nodeLookup.get(id);
+
          if (node && node.expandParent && node.parentId) {
+            const origin = node.origin ?? nodeOrigin;
+            const width = change.width ?? node.measured.width!;
+            const height = change.height ?? node.measured.height!;
+
            const child: ParentExpandChild = {
              id: node.id,
              parentId: node.parentId,
              rect: {
-                width: change.width ?? node.measured.width!,
-                height: change.height ?? node.measured.height!,
+                width,
+                height,
                ...evaluateAbsolutePosition(
                  {
                    x: change.x ?? node.position.x,
                    y: change.y ?? node.position.y,
                  },
+                  { width, height },
                  node.parentId,
                  nodeLookup,
-                  node.origin ?? nodeOrigin
+                  origin
                ),
              },
            };
@@ -94,9 +98,10 @@ function ResizeControl({
            const parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
            changes.push(...parentExpandChanges);

-            // when the parent was expanded by the child node, its position will be clamped at 0,0
-            nextPosition.x = change.x ? Math.max(0, change.x) : undefined;
-            nextPosition.y = change.y ? Math.max(0, change.y) : undefined;
+            // when the parent was expanded by the child node, its position will be clamped at
+            // 0,0 when node origin is 0,0 and to width, height if it's 1,1
+            nextPosition.x = change.x ? Math.max(origin[0] * width, change.x) : undefined;
+            nextPosition.y = change.y ? Math.max(origin[1] * height, change.y) : undefined;
          }

          if (nextPosition.x !== undefined && nextPosition.y !== undefined) {
--- a/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
+++ b/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
@@ -1,7 +1,7 @@
 import { useCallback, CSSProperties } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
-import { Rect, Position, getNodeToolbarTransform, getNodesBounds } from '@xyflow/system';
+import { Position, getNodeToolbarTransform, getInternalNodesBounds, NodeLookup } from '@xyflow/system';

 import { InternalNode, ReactFlowState } from '../../types';
 import { useStore } from '../../hooks/useStore';
@@ -17,21 +17,24 @@ const nodeEqualityFn = (a?: InternalNode, b?: InternalNode) =>
  a?.selected !== b?.selected ||
  a?.internals.z !== b?.internals.z;

-const nodesEqualityFn = (a: InternalNode[], b: InternalNode[]) => {
-  if (a.length !== b.length) {
+const nodesEqualityFn = (a: NodeLookup, b: NodeLookup) => {
+  if (a.size !== b.size) {
    return false;
  }

-  return !a.some((node, i) => nodeEqualityFn(node, b[i]));
+  for (const [key, node] of a) {
+    if (nodeEqualityFn(node, b.get(key))) {
+      return false;
+    }
+  }
+
+  return true;
 };

 const storeSelector = (state: ReactFlowState) => ({
-  viewport: {
-    x: state.transform[0],
-    y: state.transform[1],
-    zoom: state.transform[2],
-  },
-  nodeOrigin: state.nodeOrigin,
+  x: state.transform[0],
+  y: state.transform[1],
+  zoom: state.transform[2],
  selectedNodesCount: state.nodes.filter((node) => node.selected).length,
 });

@@ -49,36 +52,41 @@ export function NodeToolbar({
  const contextNodeId = useNodeId();

  const nodesSelector = useCallback(
-    (state: ReactFlowState): InternalNode[] => {
+    (state: ReactFlowState): NodeLookup => {
      const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ''];
-
-      return nodeIds.reduce<InternalNode[]>((acc, id) => {
+      const internalNodes = nodeIds.reduce<NodeLookup>((res, id) => {
        const node = state.nodeLookup.get(id);
        if (node) {
-          acc.push(node);
+          res.set(node.id, node);
        }
-        return acc;
-      }, []);
+
+        return res;
+      }, new Map());
+
+      return internalNodes;
    },
    [nodeId, contextNodeId]
  );
  const nodes = useStore(nodesSelector, nodesEqualityFn);
-  const { viewport, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
+  const { x, y, zoom, selectedNodesCount } = useStore(storeSelector, shallow);

  // if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
  const isActive =
-    typeof isVisible === 'boolean' ? isVisible : nodes.length === 1 && nodes[0].selected && selectedNodesCount === 1;
+    typeof isVisible === 'boolean'
+      ? isVisible
+      : nodes.size === 1 && nodes.values().next().value.selected && selectedNodesCount === 1;

-  if (!isActive || !nodes.length) {
+  if (!isActive || !nodes.size) {
    return null;
  }

-  const nodeRect: Rect = getNodesBounds(nodes, { nodeOrigin });
-  const zIndex: number = Math.max(...nodes.map((node) => node.internals.z + 1));
+  const nodeRect = getInternalNodesBounds(nodes);
+  const nodesArray = Array.from(nodes.values());
+  const zIndex = Math.max(...nodesArray.map((node) => node.internals.z + 1));

  const wrapperStyle: CSSProperties = {
    position: 'absolute',
-    transform: getNodeToolbarTransform(nodeRect, viewport, position, offset, align),
+    transform: getNodeToolbarTransform(nodeRect, { x, y, zoom }, position, offset, align),
    zIndex,
    ...style,
  };
@@ -89,7 +97,8 @@ export function NodeToolbar({
        style={wrapperStyle}
        className={cc(['react-flow__node-toolbar', className])}
        {...rest}
-        data-id={nodes.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
+        // @todo: check if we could only do this for non-prod envs
+        data-id={nodesArray.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
      >
        {children}
      </div>
--- a/packages/react/src/components/ConnectionLine/index.tsx
+++ b/packages/react/src/components/ConnectionLine/index.tsx
@@ -1,129 +1,18 @@
-import { CSSProperties, useCallback } from 'react';
+import { CSSProperties } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
 import {
-  Position,
  ConnectionLineType,
-  ConnectionMode,
  getBezierPath,
  getSmoothStepPath,
-  type ConnectionStatus,
-  type HandleType,
+  getConnectionStatus,
+  getStraightPath,
 } from '@xyflow/system';

 import { useStore } from '../../hooks/useStore';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
-import type { ConnectionLineComponent, ReactFlowState, ReactFlowStore } from '../../types';
-
-type ConnectionLineProps = {
-  nodeId: string;
-  handleType: HandleType;
-  type: ConnectionLineType;
-  style?: CSSProperties;
-  CustomComponent?: ConnectionLineComponent;
-  connectionStatus: ConnectionStatus | null;
-};
-
-const oppositePosition = {
-  [Position.Left]: Position.Right,
-  [Position.Right]: Position.Left,
-  [Position.Top]: Position.Bottom,
-  [Position.Bottom]: Position.Top,
-};
-
-const ConnectionLine = ({
-  nodeId,
-  handleType,
-  style,
-  type = ConnectionLineType.Bezier,
-  CustomComponent,
-  connectionStatus,
-}: ConnectionLineProps) => {
-  const { fromNode, handleId, toX, toY, connectionMode } = useStore(
-    useCallback(
-      (s: ReactFlowStore) => ({
-        fromNode: s.nodeLookup.get(nodeId),
-        handleId: s.connectionStartHandle?.handleId,
-        toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
-        toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
-        connectionMode: s.connectionMode,
-      }),
-      [nodeId]
-    ),
-    shallow
-  );
-  const fromHandleBounds = fromNode?.internals.handleBounds;
-  let handleBounds = fromHandleBounds?.[handleType];
-
-  if (connectionMode === ConnectionMode.Loose) {
-    handleBounds = handleBounds ? handleBounds : fromHandleBounds?.[handleType === 'source' ? 'target' : 'source'];
-  }
-
-  if (!fromNode || !handleBounds) {
-    return null;
-  }
-
-  const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
-  const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.measured.width ?? 0) / 2;
-  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.measured.height ?? 0;
-  const fromX = fromNode.internals.positionAbsolute.x + fromHandleX;
-  const fromY = fromNode.internals.positionAbsolute.y + fromHandleY;
-  const fromPosition = fromHandle?.position;
-  const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
-
-  if (!fromPosition || !toPosition) {
-    return null;
-  }
-
-  if (CustomComponent) {
-    return (
-      <CustomComponent
-        connectionLineType={type}
-        connectionLineStyle={style}
-        fromNode={fromNode}
-        fromHandle={fromHandle}
-        fromX={fromX}
-        fromY={fromY}
-        toX={toX}
-        toY={toY}
-        fromPosition={fromPosition}
-        toPosition={toPosition}
-        connectionStatus={connectionStatus}
-      />
-    );
-  }
-
-  let dAttr = '';
-
-  const pathParams = {
-    sourceX: fromX,
-    sourceY: fromY,
-    sourcePosition: fromPosition,
-    targetX: toX,
-    targetY: toY,
-    targetPosition: toPosition,
-  };
-
-  if (type === ConnectionLineType.Bezier) {
-    // we assume the destination position is opposite to the source position
-    [dAttr] = getBezierPath(pathParams);
-  } else if (type === ConnectionLineType.Step) {
-    [dAttr] = getSmoothStepPath({
-      ...pathParams,
-      borderRadius: 0,
-    });
-  } else if (type === ConnectionLineType.SmoothStep) {
-    [dAttr] = getSmoothStepPath(pathParams);
-  } else if (type === ConnectionLineType.SimpleBezier) {
-    [dAttr] = getSimpleBezierPath(pathParams);
-  } else {
-    dAttr = `M${fromX},${fromY} ${toX},${toY}`;
-  }
-
-  return <path d={dAttr} fill="none" className="react-flow__connection-path" style={style} />;
-};
-
-ConnectionLine.displayName = 'ConnectionLine';
+import type { ConnectionLineComponent, ReactFlowState } from '../../types';
+import { useConnection } from '../../hooks/useConnection';

 type ConnectionLineWrapperProps = {
  type: ConnectionLineType;
@@ -133,19 +22,18 @@ type ConnectionLineWrapperProps = {
 };

 const selector = (s: ReactFlowState) => ({
-  nodeId: s.connectionStartHandle?.nodeId,
-  handleType: s.connectionStartHandle?.type,
  nodesConnectable: s.nodesConnectable,
-  connectionStatus: s.connectionStatus,
+  isValid: s.connection.isValid,
+  inProgress: s.connection.inProgress,
  width: s.width,
  height: s.height,
 });

 export function ConnectionLineWrapper({ containerStyle, style, type, component }: ConnectionLineWrapperProps) {
-  const { nodeId, handleType, nodesConnectable, width, height, connectionStatus } = useStore(selector, shallow);
-  const isValid = !!(nodeId && handleType && width && nodesConnectable);
+  const { nodesConnectable, width, height, isValid, inProgress } = useStore(selector, shallow);
+  const renderConnection = !!(width && nodesConnectable && inProgress);

-  if (!isValid) {
+  if (!renderConnection) {
    return null;
  }

@@ -156,16 +44,79 @@ export function ConnectionLineWrapper({ containerStyle, style, type, component }
      height={height}
      className="react-flow__connectionline react-flow__container"
    >
-      <g className={cc(['react-flow__connection', connectionStatus])}>
-        <ConnectionLine
-          nodeId={nodeId}
-          handleType={handleType}
-          style={style}
-          type={type}
-          CustomComponent={component}
-          connectionStatus={connectionStatus}
-        />
+      <g className={cc(['react-flow__connection', getConnectionStatus(isValid)])}>
+        <ConnectionLine style={style} type={type} CustomComponent={component} isValid={isValid} />
      </g>
    </svg>
  );
 }
+
+type ConnectionLineProps = {
+  type: ConnectionLineType;
+  style?: CSSProperties;
+  CustomComponent?: ConnectionLineComponent;
+  isValid: boolean | null;
+};
+
+const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid }: ConnectionLineProps) => {
+  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection();
+
+  if (!inProgress) {
+    return;
+  }
+
+  if (CustomComponent) {
+    return (
+      <CustomComponent
+        connectionLineType={type}
+        connectionLineStyle={style}
+        fromNode={fromNode}
+        fromHandle={fromHandle}
+        fromX={from.x}
+        fromY={from.y}
+        toX={to.x}
+        toY={to.y}
+        fromPosition={fromPosition}
+        toPosition={toPosition}
+        connectionStatus={getConnectionStatus(isValid)}
+        toNode={toNode}
+        toHandle={toHandle}
+      />
+    );
+  }
+
+  let path = '';
+
+  const pathParams = {
+    sourceX: from.x,
+    sourceY: from.y,
+    sourcePosition: fromPosition,
+    targetX: to.x,
+    targetY: to.y,
+    targetPosition: toPosition,
+  };
+
+  switch (type) {
+    case ConnectionLineType.Bezier:
+      [path] = getBezierPath(pathParams);
+      break;
+    case ConnectionLineType.SimpleBezier:
+      [path] = getSimpleBezierPath(pathParams);
+      break;
+    case ConnectionLineType.Step:
+      [path] = getSmoothStepPath({
+        ...pathParams,
+        borderRadius: 0,
+      });
+      break;
+    case ConnectionLineType.SmoothStep:
+      [path] = getSmoothStepPath(pathParams);
+      break;
+    default:
+      [path] = getStraightPath(pathParams);
+  }
+
+  return <path d={path} fill="none" className="react-flow__connection-path" style={style} />;
+};
+
+ConnectionLine.displayName = 'ConnectionLine';
--- a/packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx
+++ b/packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx
@@ -1,4 +1,4 @@
-// Updatable edges have a anchors around their handles to update the edge.
+// Reconnectable edges have a anchors around their handles to reconnect the edge.
 import { XYHandle, type Connection, EdgePosition } from '@xyflow/system';

 import { EdgeAnchor } from '../Edges/EdgeAnchor';
@@ -7,20 +7,20 @@ import { useStoreApi } from '../../hooks/useStore';

 type EdgeUpdateAnchorsProps<EdgeType extends Edge = Edge> = {
  edge: EdgeType;
-  isUpdatable: boolean | 'source' | 'target';
-  edgeUpdaterRadius: EdgeWrapperProps['edgeUpdaterRadius'];
+  isReconnectable: boolean | 'source' | 'target';
+  reconnectRadius: EdgeWrapperProps['reconnectRadius'];
  sourceHandleId: Edge['sourceHandle'];
  targetHandleId: Edge['targetHandle'];
-  onEdgeUpdate: EdgeWrapperProps<EdgeType>['onEdgeUpdate'];
-  onEdgeUpdateStart: EdgeWrapperProps<EdgeType>['onEdgeUpdateStart'];
-  onEdgeUpdateEnd: EdgeWrapperProps<EdgeType>['onEdgeUpdateEnd'];
+  onReconnect: EdgeWrapperProps<EdgeType>['onReconnect'];
+  onReconnectStart: EdgeWrapperProps<EdgeType>['onReconnectStart'];
+  onReconnectEnd: EdgeWrapperProps<EdgeType>['onReconnectEnd'];
  setUpdateHover: (hover: boolean) => void;
-  setUpdating: (updating: boolean) => void;
+  setReconnecting: (updating: boolean) => void;
 } & EdgePosition;

 export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
-  isUpdatable,
-  edgeUpdaterRadius,
+  isReconnectable,
+  reconnectRadius,
  edge,
  targetHandleId,
  sourceHandleId,
@@ -30,10 +30,10 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
  targetY,
  sourcePosition,
  targetPosition,
-  onEdgeUpdate,
-  onEdgeUpdateStart,
-  onEdgeUpdateEnd,
-  setUpdating,
+  onReconnect,
+  onReconnectStart,
+  onReconnectEnd,
+  setReconnecting,
  setUpdateHover,
 }: EdgeUpdateAnchorsProps<EdgeType>) {
  const store = useStoreApi();
@@ -65,15 +65,15 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({

    const isTarget = isSourceHandle;

-    setUpdating(true);
-    onEdgeUpdateStart?.(event, edge, handleType);
+    setReconnecting(true);
+    onReconnectStart?.(event, edge, handleType);

-    const _onEdgeUpdateEnd = (evt: MouseEvent | TouchEvent) => {
-      setUpdating(false);
-      onEdgeUpdateEnd?.(evt, edge, handleType);
+    const _onReconnectEnd = (evt: MouseEvent | TouchEvent) => {
+      setReconnecting(false);
+      onReconnectEnd?.(evt, edge, handleType);
    };

-    const onConnectEdge = (connection: Connection) => onEdgeUpdate?.(edge, connection);
+    const onConnectEdge = (connection: Connection) => onReconnect?.(edge, connection);

    XYHandle.onPointerDown(event.nativeEvent, {
      autoPanOnConnect,
@@ -93,43 +93,43 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
      onConnect: onConnectEdge,
      onConnectStart,
      onConnectEnd,
-      onEdgeUpdateEnd: _onEdgeUpdateEnd,
+      onReconnectEnd: _onReconnectEnd,
      updateConnection,
      getTransform: () => store.getState().transform,
-      getConnectionStartHandle: () => store.getState().connectionStartHandle,
+      getFromHandle: () => store.getState().connection.fromHandle,
    });
  };

-  const onEdgeUpdaterSourceMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
+  const onReconnectSourceMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
    handleEdgeUpdater(event, true);
-  const onEdgeUpdaterTargetMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
+  const onReconnectTargetMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
    handleEdgeUpdater(event, false);
-  const onEdgeUpdaterMouseEnter = () => setUpdateHover(true);
-  const onEdgeUpdaterMouseOut = () => setUpdateHover(false);
+  const onReconnectMouseEnter = () => setUpdateHover(true);
+  const onReconnectMouseOut = () => setUpdateHover(false);

  return (
    <>
-      {(isUpdatable === 'source' || isUpdatable === true) && (
+      {(isReconnectable === 'source' || isReconnectable === true) && (
        <EdgeAnchor
          position={sourcePosition}
          centerX={sourceX}
          centerY={sourceY}
-          radius={edgeUpdaterRadius}
-          onMouseDown={onEdgeUpdaterSourceMouseDown}
-          onMouseEnter={onEdgeUpdaterMouseEnter}
-          onMouseOut={onEdgeUpdaterMouseOut}
+          radius={reconnectRadius}
+          onMouseDown={onReconnectSourceMouseDown}
+          onMouseEnter={onReconnectMouseEnter}
+          onMouseOut={onReconnectMouseOut}
          type="source"
        />
      )}
-      {(isUpdatable === 'target' || isUpdatable === true) && (
+      {(isReconnectable === 'target' || isReconnectable === true) && (
        <EdgeAnchor
          position={targetPosition}
          centerX={targetX}
          centerY={targetY}
-          radius={edgeUpdaterRadius}
-          onMouseDown={onEdgeUpdaterTargetMouseDown}
-          onMouseEnter={onEdgeUpdaterMouseEnter}
-          onMouseOut={onEdgeUpdaterMouseOut}
+          radius={reconnectRadius}
+          onMouseDown={onReconnectTargetMouseDown}
+          onMouseEnter={onReconnectMouseEnter}
+          onMouseOut={onReconnectMouseOut}
          type="target"
        />
      )}
--- a/packages/react/src/components/EdgeWrapper/index.tsx
+++ b/packages/react/src/components/EdgeWrapper/index.tsx
@@ -18,7 +18,7 @@ import type { Edge, EdgeWrapperProps } from '../../types';
 export function EdgeWrapper<EdgeType extends Edge = Edge>({
  id,
  edgesFocusable,
-  edgesUpdatable,
+  edgesReconnectable,
  elementsSelectable,
  onClick,
  onDoubleClick,
@@ -26,10 +26,10 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
  onMouseEnter,
  onMouseMove,
  onMouseLeave,
-  edgeUpdaterRadius,
-  onEdgeUpdate,
-  onEdgeUpdateStart,
-  onEdgeUpdateEnd,
+  reconnectRadius,
+  onReconnect,
+  onReconnectStart,
+  onReconnectEnd,
  rfId,
  edgeTypes,
  noPanClassName,
@@ -50,14 +50,14 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
  }

  const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
-  const isUpdatable =
-    typeof onEdgeUpdate !== 'undefined' &&
-    (edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'));
+  const isReconnectable =
+    typeof onReconnect !== 'undefined' &&
+    (edge.reconnectable || (edgesReconnectable && typeof edge.reconnectable === 'undefined'));
  const isSelectable = !!(edge.selectable || (elementsSelectable && typeof edge.selectable === 'undefined'));

  const edgeRef = useRef<SVGGElement>(null);
  const [updateHover, setUpdateHover] = useState<boolean>(false);
-  const [updating, setUpdating] = useState<boolean>(false);
+  const [reconnecting, setReconnecting] = useState<boolean>(false);
  const store = useStoreApi();

  const { zIndex, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = useStore(
@@ -207,7 +207,7 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
        aria-describedby={isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined}
        ref={edgeRef}
      >
-        {!updating && (
+        {!reconnecting && (
          <EdgeComponent
            id={id}
            source={edge.source}
@@ -239,14 +239,14 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
            interactionWidth={edge.interactionWidth}
          />
        )}
-        {isUpdatable && (
+        {isReconnectable && (
          <EdgeUpdateAnchors<EdgeType>
            edge={edge}
-            isUpdatable={isUpdatable}
-            edgeUpdaterRadius={edgeUpdaterRadius}
-            onEdgeUpdate={onEdgeUpdate}
-            onEdgeUpdateStart={onEdgeUpdateStart}
-            onEdgeUpdateEnd={onEdgeUpdateEnd}
+            isReconnectable={isReconnectable}
+            reconnectRadius={reconnectRadius}
+            onReconnect={onReconnect}
+            onReconnectStart={onReconnectStart}
+            onReconnectEnd={onReconnectEnd}
            sourceX={sourceX}
            sourceY={sourceY}
            targetX={targetX}
@@ -254,7 +254,7 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
            sourcePosition={sourcePosition}
            targetPosition={targetPosition}
            setUpdateHover={setUpdateHover}
-            setUpdating={setUpdating}
+            setReconnecting={setReconnecting}
            sourceHandleId={edge.sourceHandle}
            targetHandleId={edge.targetHandle}
          />
--- a/packages/react/src/components/Edges/EdgeText.tsx
+++ b/packages/react/src/components/Edges/EdgeText.tsx
@@ -1,4 +1,4 @@
-import { memo, useState, useCallback } from 'react';
+import { memo, useState, useEffect, useRef } from 'react';
 import cc from 'classcat';
 import type { Rect } from '@xyflow/system';

@@ -19,19 +19,20 @@ function EdgeTextComponent({
 }: EdgeTextProps) {
  const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 1, y: 0, width: 0, height: 0 });
  const edgeTextClasses = cc(['react-flow__edge-textwrapper', className]);
+  const edgeTextRef = useRef<SVGTextElement | null>(null);

-  const onEdgeTextRefChange = useCallback((edgeRef: SVGTextElement) => {
-    if (edgeRef === null) return;
+  useEffect(() => {
+    if (edgeTextRef.current) {
+      const textBbox = edgeTextRef.current.getBBox();

-    const textBbox = edgeRef.getBBox();
-
-    setEdgeTextBbox({
-      x: textBbox.x,
-      y: textBbox.y,
-      width: textBbox.width,
-      height: textBbox.height,
-    });
-  }, []);
+      setEdgeTextBbox({
+        x: textBbox.x,
+        y: textBbox.y,
+        width: textBbox.width,
+        height: textBbox.height,
+      });
+    }
+  }, [label]);

  if (typeof label === 'undefined' || !label) {
    return null;
@@ -60,7 +61,7 @@ function EdgeTextComponent({
        className="react-flow__edge-text"
        y={edgeTextBbox.height / 2}
        dy="0.3em"
-        ref={onEdgeTextRefChange}
+        ref={edgeTextRef}
        style={labelStyle}
      >
        {label}
--- a/packages/react/src/components/Handle/index.tsx
+++ b/packages/react/src/components/Handle/index.tsx
@@ -39,28 +39,22 @@ const selector = (s: ReactFlowState) => ({

 const connectingSelector =
  (nodeId: string | null, handleId: string | null, type: HandleType) => (state: ReactFlowState) => {
-    const {
-      connectionStartHandle: startHandle,
-      connectionEndHandle: endHandle,
-      connectionClickStartHandle: clickHandle,
-      connectionMode,
-      connectionStatus,
-    } = state;
+    const { connectionClickStartHandle: clickHandle, connectionMode, connection } = state;

-    const connectingTo = endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type;
+    const { fromHandle, toHandle, isValid } = connection;
+
+    const connectingTo = toHandle?.nodeId === nodeId && toHandle?.id === handleId && toHandle?.type === type;

    return {
-      connectingFrom:
-        startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type,
+      connectingFrom: fromHandle?.nodeId === nodeId && fromHandle?.id === handleId && fromHandle?.type === type,
      connectingTo,
-      clickConnecting:
-        clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type,
+      clickConnecting: clickHandle?.nodeId === nodeId && clickHandle?.id === handleId && clickHandle?.type === type,
      isPossibleEndHandle:
        connectionMode === ConnectionMode.Strict
-          ? startHandle?.type !== type
-          : nodeId !== startHandle?.nodeId || handleId !== startHandle?.handleId,
-      connectionInProcess: !!startHandle,
-      valid: connectingTo && connectionStatus === 'valid',
+          ? fromHandle?.type !== type
+          : nodeId !== fromHandle?.nodeId || handleId !== fromHandle?.id,
+      connectionInProcess: !!fromHandle,
+      valid: connectingTo && isValid,
    };
  };

@@ -144,7 +138,7 @@ function HandleComponent(
        onConnect: onConnectExtended,
        isValidConnection: isValidConnection || currentStore.isValidConnection,
        getTransform: () => store.getState().transform,
-        getConnectionStartHandle: () => store.getState().connectionStartHandle,
+        getFromHandle: () => store.getState().connection.fromHandle,
      });
    }

@@ -172,7 +166,7 @@ function HandleComponent(

    if (!connectionClickStartHandle) {
      onClickConnectStart?.(event.nativeEvent, { nodeId, handleId, handleType: type });
-      store.setState({ connectionClickStartHandle: { nodeId, type, handleId } });
+      store.setState({ connectionClickStartHandle: { nodeId, type, id: handleId } });
      return;
    }

@@ -186,7 +180,7 @@ function HandleComponent(
      },
      connectionMode,
      fromNodeId: connectionClickStartHandle.nodeId,
-      fromHandleId: connectionClickStartHandle.handleId || null,
+      fromHandleId: connectionClickStartHandle.id || null,
      fromType: connectionClickStartHandle.type,
      isValidConnection: isValidConnectionHandler,
      flowId,
--- a/packages/react/src/components/NodeWrapper/index.tsx
+++ b/packages/react/src/components/NodeWrapper/index.tsx
@@ -6,7 +6,6 @@ import {
  elementSelectionKeys,
  errorMessages,
  getNodeDimensions,
-  getPositionWithOrigin,
  isInputDOMNode,
  nodeHasDimensions,
 } from '@xyflow/system';
@@ -40,7 +39,6 @@ export function NodeWrapper<NodeType extends Node>({
  rfId,
  nodeTypes,
  nodeExtent,
-  nodeOrigin,
  onError,
 }: NodeWrapperProps<NodeType>) {
  const { node, internals, isParent } = useStore((s) => {
@@ -87,15 +85,11 @@ export function NodeWrapper<NodeType extends Node>({

  const nodeDimensions = getNodeDimensions(node);
  const inlineDimensions = getNodeInlineStyleDimensions(node);
+  // TODO: clamping should happen earlier
  const clampedPosition = nodeExtent
    ? clampPosition(internals.positionAbsolute, nodeExtent)
    : internals.positionAbsolute;

-  const positionWithOrigin = getPositionWithOrigin({
-    ...clampedPosition,
-    ...nodeDimensions,
-    origin: node.origin || nodeOrigin,
-  });
  const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;

  const onMouseEnterHandler = onMouseEnter
@@ -181,7 +175,7 @@ export function NodeWrapper<NodeType extends Node>({
      ref={nodeRef}
      style={{
        zIndex: internals.z,
-        transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
+        transform: `translate(${clampedPosition.x}px,${clampedPosition.y}px)`,
        pointerEvents: hasPointerEvents ? 'all' : 'none',
        visibility: hasDimensions ? 'visible' : 'hidden',
        ...node.style,
--- a/packages/react/src/components/NodesSelection/index.tsx
+++ b/packages/react/src/components/NodesSelection/index.tsx
@@ -21,7 +21,6 @@ export type NodesSelectionProps<NodeType> = {

 const selector = (s: ReactFlowState) => {
  const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
-    nodeOrigin: s.nodeOrigin,
    filter: (node) => !!node.selected,
  });

--- a/packages/react/src/components/ReactFlowProvider/index.tsx
+++ b/packages/react/src/components/ReactFlowProvider/index.tsx
@@ -4,6 +4,7 @@ import { Provider } from '../../contexts/StoreContext';
 import { createStore } from '../../store';
 import { BatchProvider } from '../BatchProvider';
 import type { Node, Edge } from '../../types';
+import { NodeOrigin } from '@xyflow/system';

 export type ReactFlowProviderProps = {
  initialNodes?: Node[];
@@ -13,6 +14,7 @@ export type ReactFlowProviderProps = {
  initialWidth?: number;
  initialHeight?: number;
  fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
  children: ReactNode;
 };

@@ -24,6 +26,7 @@ export function ReactFlowProvider({
  initialWidth: width,
  initialHeight: height,
  fitView,
+  nodeOrigin,
  children,
 }: ReactFlowProviderProps) {
  const [store] = useState(() =>
@@ -35,6 +38,7 @@ export function ReactFlowProvider({
      width,
      height,
      fitView,
+      nodeOrigin,
    })
  );

--- a/packages/react/src/components/StoreUpdater/index.tsx
+++ b/packages/react/src/components/StoreUpdater/index.tsx
@@ -26,7 +26,7 @@ const reactFlowFieldsToTrack = [
  'nodesConnectable',
  'nodesFocusable',
  'edgesFocusable',
-  'edgesUpdatable',
+  'edgesReconnectable',
  'elevateNodesOnSelect',
  'elevateEdgesOnSelect',
  'minZoom',
--- a/packages/react/src/container/EdgeRenderer/index.tsx
+++ b/packages/react/src/container/EdgeRenderer/index.tsx
@@ -14,14 +14,14 @@ type EdgeRendererProps<EdgeType extends Edge = Edge> = Pick<
  | 'onEdgeDoubleClick'
  | 'defaultMarkerColor'
  | 'onlyRenderVisibleElements'
-  | 'onEdgeUpdate'
+  | 'onReconnect'
  | 'onEdgeContextMenu'
  | 'onEdgeMouseEnter'
  | 'onEdgeMouseMove'
  | 'onEdgeMouseLeave'
-  | 'onEdgeUpdateStart'
-  | 'onEdgeUpdateEnd'
-  | 'edgeUpdaterRadius'
+  | 'onReconnectStart'
+  | 'onReconnectEnd'
+  | 'reconnectRadius'
  | 'noPanClassName'
  | 'rfId'
  | 'disableKeyboardA11y'
@@ -34,7 +34,7 @@ const selector = (s: ReactFlowState) => ({
  width: s.width,
  height: s.height,
  edgesFocusable: s.edgesFocusable,
-  edgesUpdatable: s.edgesUpdatable,
+  edgesReconnectable: s.edgesReconnectable,
  elementsSelectable: s.elementsSelectable,
  connectionMode: s.connectionMode,
  onError: s.onError,
@@ -46,19 +46,19 @@ function EdgeRendererComponent<EdgeType extends Edge = Edge>({
  rfId,
  edgeTypes,
  noPanClassName,
-  onEdgeUpdate,
+  onReconnect,
  onEdgeContextMenu,
  onEdgeMouseEnter,
  onEdgeMouseMove,
  onEdgeMouseLeave,
  onEdgeClick,
-  edgeUpdaterRadius,
+  reconnectRadius,
  onEdgeDoubleClick,
-  onEdgeUpdateStart,
-  onEdgeUpdateEnd,
+  onReconnectStart,
+  onReconnectEnd,
  disableKeyboardA11y,
 }: EdgeRendererProps<EdgeType>) {
-  const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
+  const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector, shallow);
  const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);

  return (
@@ -71,19 +71,19 @@ function EdgeRendererComponent<EdgeType extends Edge = Edge>({
            key={id}
            id={id}
            edgesFocusable={edgesFocusable}
-            edgesUpdatable={edgesUpdatable}
+            edgesReconnectable={edgesReconnectable}
            elementsSelectable={elementsSelectable}
            noPanClassName={noPanClassName}
-            onEdgeUpdate={onEdgeUpdate}
+            onReconnect={onReconnect}
            onContextMenu={onEdgeContextMenu}
            onMouseEnter={onEdgeMouseEnter}
            onMouseMove={onEdgeMouseMove}
            onMouseLeave={onEdgeMouseLeave}
            onClick={onEdgeClick}
-            edgeUpdaterRadius={edgeUpdaterRadius}
+            reconnectRadius={reconnectRadius}
            onDoubleClick={onEdgeDoubleClick}
-            onEdgeUpdateStart={onEdgeUpdateStart}
-            onEdgeUpdateEnd={onEdgeUpdateEnd}
+            onReconnectStart={onReconnectStart}
+            onReconnectEnd={onReconnectEnd}
            rfId={rfId}
            onError={onError}
            edgeTypes={edgeTypes}
--- a/packages/react/src/container/FlowRenderer/index.tsx
+++ b/packages/react/src/container/FlowRenderer/index.tsx
@@ -22,12 +22,13 @@ export type FlowRendererProps<NodeType extends Node = Node> = Omit<
  | 'selectNodesOnDrag'
  | 'defaultMarkerColor'
  | 'rfId'
-  | 'nodeOrigin'
 > & {
  isControlledViewport: boolean;
  children: ReactNode;
 };

+const win = typeof window !== 'undefined' ? window : undefined;
+
 const selector = (s: ReactFlowState) => {
  return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
 };
@@ -70,8 +71,8 @@ function FlowRendererComponent<NodeType extends Node = Node>({
  isControlledViewport,
 }: FlowRendererProps<NodeType>) {
  const { nodesSelectionActive, userSelectionActive } = useStore(selector);
-  const selectionKeyPressed = useKeyPress(selectionKeyCode);
-  const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
+  const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win });
+  const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win });

  const panOnDrag = panActivationKeyPressed || _panOnDrag;
  const panOnScroll = panActivationKeyPressed || _panOnScroll;
@@ -113,6 +114,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
        panOnDrag={panOnDrag}
        isSelecting={!!isSelecting}
        selectionMode={selectionMode}
+        selectionKeyPressed={selectionKeyPressed}
      >
        {children}
        {nodesSelectionActive && (
--- a/packages/react/src/container/GraphView/index.tsx
+++ b/packages/react/src/container/GraphView/index.tsx
@@ -32,7 +32,6 @@ export type GraphViewProps<NodeType extends Node = Node, EdgeType extends Edge =
      | 'noPanClassName'
      | 'defaultViewport'
      | 'disableKeyboardA11y'
-      | 'nodeOrigin'
    >
  > & {
    rfId: string;
@@ -85,19 +84,18 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
  onPaneMouseLeave,
  onPaneScroll,
  onPaneContextMenu,
-  onEdgeUpdate,
  onEdgeContextMenu,
  onEdgeMouseEnter,
  onEdgeMouseMove,
  onEdgeMouseLeave,
-  edgeUpdaterRadius,
-  onEdgeUpdateStart,
-  onEdgeUpdateEnd,
+  reconnectRadius,
+  onReconnect,
+  onReconnectStart,
+  onReconnectEnd,
  noDragClassName,
  noWheelClassName,
  noPanClassName,
  disableKeyboardA11y,
-  nodeOrigin,
  nodeExtent,
  rfId,
  viewport,
@@ -153,15 +151,15 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
          edgeTypes={edgeTypes}
          onEdgeClick={onEdgeClick}
          onEdgeDoubleClick={onEdgeDoubleClick}
-          onEdgeUpdate={onEdgeUpdate}
+          onReconnect={onReconnect}
+          onReconnectStart={onReconnectStart}
+          onReconnectEnd={onReconnectEnd}
          onlyRenderVisibleElements={onlyRenderVisibleElements}
          onEdgeContextMenu={onEdgeContextMenu}
          onEdgeMouseEnter={onEdgeMouseEnter}
          onEdgeMouseMove={onEdgeMouseMove}
          onEdgeMouseLeave={onEdgeMouseLeave}
-          onEdgeUpdateStart={onEdgeUpdateStart}
-          onEdgeUpdateEnd={onEdgeUpdateEnd}
-          edgeUpdaterRadius={edgeUpdaterRadius}
+          reconnectRadius={reconnectRadius}
          defaultMarkerColor={defaultMarkerColor}
          noPanClassName={noPanClassName}
          disableKeyboardA11y={disableKeyboardA11y}
@@ -186,7 +184,6 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
          noPanClassName={noPanClassName}
          noDragClassName={noDragClassName}
          disableKeyboardA11y={disableKeyboardA11y}
-          nodeOrigin={nodeOrigin}
          nodeExtent={nodeExtent}
          rfId={rfId}
        />
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/packages/react/src/container/NodeRenderer/index.tsx
@@ -22,7 +22,6 @@ export type NodeRendererProps<NodeType extends Node> = Pick<
  | 'noDragClassName'
  | 'rfId'
  | 'disableKeyboardA11y'
-  | 'nodeOrigin'
  | 'nodeExtent'
  | 'nodeTypes'
 >;
@@ -72,7 +71,6 @@ function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<N
            id={nodeId}
            nodeTypes={props.nodeTypes}
            nodeExtent={props.nodeExtent}
-            nodeOrigin={props.nodeOrigin}
            onClick={props.onNodeClick}
            onMouseEnter={props.onNodeMouseEnter}
            onMouseMove={props.onNodeMouseMove}
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -2,7 +2,12 @@
 * The user selection rectangle gets displayed when a user drags the mouse while pressing shift
 */

-import { useRef, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
+import {
+  useRef,
+  type MouseEvent as ReactMouseEvent,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
 import { getNodesInside, getEventPosition, SelectionMode, type NodeChange, type EdgeChange } from '@xyflow/system';
@@ -15,6 +20,7 @@ import type { ReactFlowProps, ReactFlowState } from '../../types';

 type PaneProps = {
  isSelecting: boolean;
+  selectionKeyPressed: boolean;
  children: ReactNode;
 } & Partial<
  Pick<
@@ -52,6 +58,7 @@ const selector = (s: ReactFlowState) => ({

 export function Pane({
  isSelecting,
+  selectionKeyPressed,
  selectionMode = SelectionMode.Full,
  panOnDrag,
  onSelectionStart,
@@ -72,6 +79,10 @@ export function Pane({
  const edgeIdLookup = useRef<Map<string, Set<string>>>(new Map());

  const { userSelectionActive, elementsSelectable, dragging } = useStore(selector, shallow);
+  const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
+
+  // Used to prevent click events when the user lets go of the selectionKey during a selection
+  const selectionInProgress = useRef<boolean>(false);

  const resetUserSelection = () => {
    store.setState({ userSelectionActive: false, userSelectionRect: null });
@@ -81,6 +92,12 @@ export function Pane({
  };

  const onClick = (event: ReactMouseEvent) => {
+    // We prevent click events when the user let go of the selectionKey during a selection
+    if (selectionInProgress.current) {
+      selectionInProgress.current = false;
+      return;
+    }
+
    onPaneClick?.(event);
    store.getState().resetSelectedElements();
    store.setState({ nodesSelectionActive: false });
@@ -97,9 +114,10 @@ export function Pane({

  const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined;

-  const onMouseDown = (event: ReactMouseEvent): void => {
+  const onPointerDown = (event: ReactPointerEvent): void => {
    const { resetSelectedElements, domNode, edgeLookup } = store.getState();
    containerBounds.current = domNode?.getBoundingClientRect();
+    container.current?.setPointerCapture(event.pointerId);

    if (
      !elementsSelectable ||
@@ -136,14 +154,16 @@ export function Pane({
    onSelectionStart?.(event);
  };

-  const onMouseMove = (event: ReactMouseEvent): void => {
-    const { userSelectionRect, edgeLookup, transform, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } =
+  const onPointerMove = (event: ReactPointerEvent): void => {
+    const { userSelectionRect, edgeLookup, transform, nodeLookup, triggerNodeChanges, triggerEdgeChanges } =
      store.getState();

-    if (!isSelecting || !containerBounds.current || !userSelectionRect) {
+    if (!containerBounds.current || !userSelectionRect) {
      return;
    }

+    selectionInProgress.current = true;
+
    const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
    const { startX, startY } = userSelectionRect;

@@ -161,8 +181,7 @@ export function Pane({
      nextUserSelectRect,
      transform,
      selectionMode === SelectionMode.Partial,
-      true,
-      nodeOrigin
+      true
    );

    const selectedEdgeIds = new Set<string>();
@@ -199,10 +218,11 @@ export function Pane({
    });
  };

-  const onMouseUp = (event: ReactMouseEvent) => {
+  const onPointerUp = (event: ReactPointerEvent) => {
    if (event.button !== 0) {
      return;
    }
+    container.current?.releasePointerCapture(event.pointerId);
    const { userSelectionRect } = store.getState();
    // We only want to trigger click functions when in selection mode if
    // the user did not move the mouse.
@@ -214,30 +234,25 @@ export function Pane({

    resetUserSelection();
    onSelectionEnd?.(event);
-  };

-  const onMouseLeave = (event: ReactMouseEvent) => {
-    if (userSelectionActive) {
-      store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
-      onSelectionEnd?.(event);
+    // If the user kept holding the selectionKey during the selection,
+    // we need to reset the selectionInProgress, so the next click event is not prevented
+    if (selectionKeyPressed) {
+      selectionInProgress.current = false;
    }
-
-    resetUserSelection();
  };

-  const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
-
  return (
    <div
      className={cc(['react-flow__pane', { draggable: panOnDrag, dragging, selection: isSelecting }])}
      onClick={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
      onContextMenu={wrapHandler(onContextMenu, container)}
      onWheel={wrapHandler(onWheel, container)}
-      onMouseEnter={hasActiveSelection ? undefined : onPaneMouseEnter}
-      onMouseDown={hasActiveSelection ? onMouseDown : undefined}
-      onMouseMove={hasActiveSelection ? onMouseMove : onPaneMouseMove}
-      onMouseUp={hasActiveSelection ? onMouseUp : undefined}
-      onMouseLeave={hasActiveSelection ? onMouseLeave : onPaneMouseLeave}
+      onPointerEnter={hasActiveSelection ? undefined : onPaneMouseEnter}
+      onPointerDown={hasActiveSelection ? onPointerDown : onPaneMouseMove}
+      onPointerMove={hasActiveSelection ? onPointerMove : onPaneMouseMove}
+      onPointerUp={hasActiveSelection ? onPointerUp : undefined}
+      onPointerLeave={onPaneMouseLeave}
      ref={container}
      style={containerStyle}
    >
--- a/packages/react/src/container/ReactFlow/Wrapper.tsx
+++ b/packages/react/src/container/ReactFlow/Wrapper.tsx
@@ -3,6 +3,7 @@ import { useContext, type ReactNode } from 'react';
 import StoreContext from '../../contexts/StoreContext';
 import { ReactFlowProvider } from '../../components/ReactFlowProvider';
 import type { Node, Edge } from '../../types';
+import { NodeOrigin } from '@xyflow/system';

 export function Wrapper({
  children,
@@ -13,6 +14,7 @@ export function Wrapper({
  width,
  height,
  fitView,
+  nodeOrigin,
 }: {
  children: ReactNode;
  nodes?: Node[];
@@ -22,6 +24,7 @@ export function Wrapper({
  width?: number;
  height?: number;
  fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
 }) {
  const isWrapped = useContext(StoreContext);

@@ -40,6 +43,7 @@ export function Wrapper({
      initialWidth={width}
      initialHeight={height}
      fitView={fitView}
+      nodeOrigin={nodeOrigin}
    >
      {children}
    </ReactFlowProvider>
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -81,7 +81,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
    nodesFocusable,
    nodeOrigin = defaultNodeOrigin,
    edgesFocusable,
-    edgesUpdatable,
+    edgesReconnectable,
    elementsSelectable = true,
    defaultViewport = initViewport,
    minZoom = 0.5,
@@ -104,15 +104,15 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
    onPaneScroll,
    onPaneContextMenu,
    children,
-    onEdgeUpdate,
+    onReconnect,
+    onReconnectStart,
+    onReconnectEnd,
    onEdgeContextMenu,
    onEdgeDoubleClick,
    onEdgeMouseEnter,
    onEdgeMouseMove,
    onEdgeMouseLeave,
-    onEdgeUpdateStart,
-    onEdgeUpdateEnd,
-    edgeUpdaterRadius = 10,
+    reconnectRadius = 10,
    onNodesChange,
    onEdgesChange,
    noDragClassName = 'nodrag',
@@ -157,7 +157,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
      data-testid="rf__wrapper"
      id={id}
    >
-      <Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView}>
+      <Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView} nodeOrigin={nodeOrigin}>
        <GraphView<NodeType, EdgeType>
          onInit={onInit}
          onNodeClick={onNodeClick}
@@ -202,22 +202,21 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
          onSelectionContextMenu={onSelectionContextMenu}
          onSelectionStart={onSelectionStart}
          onSelectionEnd={onSelectionEnd}
-          onEdgeUpdate={onEdgeUpdate}
+          onReconnect={onReconnect}
+          onReconnectStart={onReconnectStart}
+          onReconnectEnd={onReconnectEnd}
          onEdgeContextMenu={onEdgeContextMenu}
          onEdgeDoubleClick={onEdgeDoubleClick}
          onEdgeMouseEnter={onEdgeMouseEnter}
          onEdgeMouseMove={onEdgeMouseMove}
          onEdgeMouseLeave={onEdgeMouseLeave}
-          onEdgeUpdateStart={onEdgeUpdateStart}
-          onEdgeUpdateEnd={onEdgeUpdateEnd}
-          edgeUpdaterRadius={edgeUpdaterRadius}
+          reconnectRadius={reconnectRadius}
          defaultMarkerColor={defaultMarkerColor}
          noDragClassName={noDragClassName}
          noWheelClassName={noWheelClassName}
          noPanClassName={noPanClassName}
          rfId={rfId}
          disableKeyboardA11y={disableKeyboardA11y}
-          nodeOrigin={nodeOrigin}
          nodeExtent={nodeExtent}
          viewport={viewport}
          onViewportChange={onViewportChange}
@@ -236,7 +235,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
          nodesConnectable={nodesConnectable}
          nodesFocusable={nodesFocusable}
          edgesFocusable={edgesFocusable}
-          edgesUpdatable={edgesUpdatable}
+          edgesReconnectable={edgesReconnectable}
          elementsSelectable={elementsSelectable}
          elevateNodesOnSelect={elevateNodesOnSelect}
          elevateEdgesOnSelect={elevateEdgesOnSelect}
--- a/packages/react/src/hooks/useConnection.ts
+++ b/packages/react/src/hooks/useConnection.ts
@@ -2,33 +2,19 @@ import { shallow } from 'zustand/shallow';

 import { useStore } from './useStore';
 import type { ReactFlowStore } from '../types/store';
+import { ConnectionState, pointToRendererPoint } from '@xyflow/system';

-const selector = (s: ReactFlowStore) => ({
-  startHandle: s.connectionStartHandle,
-  endHandle: s.connectionEndHandle,
-  status: s.connectionStatus,
-  position: s.connectionStartHandle ? s.connectionPosition : null,
-});
-
-type UseConnectionResult = {
-  /** The start handle where the user interaction started or null */
-  startHandle: ReactFlowStore['connectionStartHandle'];
-  /** The target handle that's inside the connection radius or null  */
-  endHandle: ReactFlowStore['connectionEndHandle'];
-  /** The current connection status 'valid', 'invalid' or null*/
-  status: ReactFlowStore['connectionStatus'];
-  /** The current connection position or null */
-  position: ReactFlowStore['connectionPosition'] | null;
+const selector = (s: ReactFlowStore): ConnectionState => {
+  return s.connection.inProgress
+    ? { ...s.connection, to: pointToRendererPoint(s.connection.to, s.transform) }
+    : { ...s.connection };
 };
-
 /**
- * Hook for accessing the ongoing connection.
+ * Hook for accessing the connection state.
 *
 * @public
- * @returns ongoing connection
+ * @returns ConnectionState
 */
-export function useConnection(): UseConnectionResult {
-  const ongoingConnection = useStore(selector, shallow);
-
-  return ongoingConnection;
+export function useConnection(): ConnectionState {
+  return useStore(selector, shallow);
 }
--- a/packages/react/src/hooks/useGlobalKeyHandler.ts
+++ b/packages/react/src/hooks/useGlobalKeyHandler.ts
@@ -9,6 +9,7 @@ import { Edge, Node } from '../types';
 const selected = (item: Node | Edge) => item.selected;

 const deleteKeyOptions: UseKeyPressOptions = { actInsideInputWithModifier: false };
+const win = typeof window !== 'undefined' ? window : undefined;

 /**
 * Hook for handling global key events.
@@ -26,7 +27,7 @@ export function useGlobalKeyHandler({
  const { deleteElements } = useReactFlow();

  const deleteKeyPressed = useKeyPress(deleteKeyCode, deleteKeyOptions);
-  const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
+  const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode, { target: win });

  useEffect(() => {
    if (deleteKeyPressed) {
--- a/packages/react/src/hooks/useReactFlow.ts
+++ b/packages/react/src/hooks/useReactFlow.ts
@@ -13,7 +13,7 @@ import {
 import useViewportHelper from './useViewportHelper';
 import { useStore, useStoreApi } from './useStore';
 import { useBatchContext } from '../components/BatchProvider';
-import { elementToRemoveChange, isNode } from '../utils';
+import { elementToRemoveChange, isEdge, isNode } from '../utils';
 import type { ReactFlowInstance, Node, Edge, InternalNode, ReactFlowState, GeneralHelpers } from '../types';

 const selector = (s: ReactFlowState) => !!s.panZoom;
@@ -41,12 +41,16 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
      batchContext.nodeQueue.push(payload as NodeType[]);
    };

+    const setEdges: GeneralHelpers<NodeType, EdgeType>['setEdges'] = (payload) => {
+      batchContext.edgeQueue.push(payload as EdgeType[]);
+    };
+
    const getNodeRect = (node: NodeType | { id: string }): Rect | null => {
      const { nodeLookup, nodeOrigin } = store.getState();

      const nodeToUse = isNode<NodeType>(node) ? node : nodeLookup.get(node.id)!;
      const position = nodeToUse.parentId
-        ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.parentId, nodeLookup, nodeOrigin)
+        ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, nodeOrigin)
        : nodeToUse.position;

      const nodeWithPosition = {
@@ -77,6 +81,23 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
      );
    };

+    const updateEdge: GeneralHelpers<NodeType, EdgeType>['updateEdge'] = (
+      id,
+      edgeUpdate,
+      options = { replace: false }
+    ) => {
+      setEdges((prevEdges) =>
+        prevEdges.map((edge) => {
+          if (edge.id === id) {
+            const nextEdge = typeof edgeUpdate === 'function' ? edgeUpdate(edge as EdgeType) : edgeUpdate;
+            return options.replace && isEdge(nextEdge) ? (nextEdge as EdgeType) : { ...edge, ...nextEdge };
+          }
+
+          return edge;
+        })
+      );
+    };
+
    return {
      getNodes: () => store.getState().nodes.map((n) => ({ ...n })) as NodeType[],
      getNode: (id) => getInternalNode(id)?.internals.userNode as NodeType,
@@ -87,9 +108,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
      },
      getEdge: (id) => store.getState().edgeLookup.get(id) as EdgeType,
      setNodes,
-      setEdges: (payload) => {
-        batchContext.edgeQueue.push(payload as EdgeType[]);
-      },
+      setEdges,
      addNodes: (payload) => {
        const newNodes = Array.isArray(payload) ? payload : [payload];
        batchContext.nodeQueue.push((nodes) => [...nodes, ...newNodes]);
@@ -200,6 +219,17 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
          options
        );
      },
+      updateEdge,
+      updateEdgeData: (id, dataUpdate, options = { replace: false }) => {
+        updateEdge(
+          id,
+          (edge) => {
+            const nextData = typeof dataUpdate === 'function' ? dataUpdate(edge) : dataUpdate;
+            return options.replace ? { ...edge, data: nextData } : { ...edge, data: { ...edge.data, ...nextData } };
+          },
+          options
+        );
+      },
    };
  }, []);

--- a/packages/react/src/hooks/useViewportHelper.ts
+++ b/packages/react/src/hooks/useViewportHelper.ts
@@ -45,22 +45,23 @@ const useViewportHelper = (): ViewportHelperFunctions => {
        return { x, y, zoom };
      },
      fitView: (options) => {
-        const { nodeLookup, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
+        const { nodeLookup, width, height, minZoom, maxZoom, panZoom } = store.getState();

-        return panZoom
-          ? fitView(
-              {
-                nodeLookup,
-                width,
-                height,
-                nodeOrigin,
-                minZoom,
-                maxZoom,
-                panZoom,
-              },
-              options
-            )
-          : false;
+        if (!panZoom) {
+          return false;
+        }
+
+        return fitView(
+          {
+            nodeLookup,
+            width,
+            height,
+            minZoom,
+            maxZoom,
+            panZoom,
+          },
+          options
+        );
      },
      setCenter: (x, y, options) => {
        const { width, height, maxZoom, panZoom } = store.getState();
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -49,7 +49,6 @@ export {
  type OnMoveStart,
  type OnMoveEnd,
  type Connection,
-  type ConnectionStatus,
  ConnectionMode,
  type OnConnectStartParams,
  type OnConnectStart,
@@ -116,6 +115,6 @@ export {
  getIncomers,
  getOutgoers,
  addEdge,
-  updateEdge,
+  reconnectEdge,
  getConnectedEdges,
 } from '@xyflow/system';
--- a/packages/react/src/store/index.ts
+++ b/packages/react/src/store/index.ts
@@ -12,6 +12,8 @@ import {
  EdgeSelectionChange,
  NodeSelectionChange,
  ParentExpandChild,
+  initialConnection,
+  NodeOrigin,
 } from '@xyflow/system';

 import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
@@ -26,6 +28,7 @@ const createStore = ({
  width,
  height,
  fitView,
+  nodeOrigin,
 }: {
  nodes?: Node[];
  edges?: Edge[];
@@ -34,10 +37,11 @@ const createStore = ({
  width?: number;
  height?: number;
  fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
 }) =>
  createWithEqualityFn<ReactFlowState>(
    (set, get) => ({
-      ...getInitialState({ nodes, edges, width, height, fitView, defaultNodes, defaultEdges }),
+      ...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, defaultNodes, defaultEdges }),
      setNodes: (nodes: Node[]) => {
        const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
        // setNodes() is called exclusively in response to user actions:
@@ -98,7 +102,7 @@ const createStore = ({
          return;
        }

-        updateAbsolutePositions(nodeLookup, { nodeOrigin });
+        updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin });

        // we call fitView once initially after all dimensions are set
        let nextFitViewDone = fitViewDone;
@@ -155,8 +159,8 @@ const createStore = ({
        }

        if (parentExpandChildren.length > 0) {
-          const { nodeLookup, parentLookup } = get();
-          const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
+          const { nodeLookup, parentLookup, nodeOrigin } = get();
+          const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
          changes.push(...parentExpandChanges);
        }

@@ -288,7 +292,7 @@ const createStore = ({
        return panBySystem({ delta, panZoom, transform, translateExtent, width, height });
      },
      fitView: (options?: FitViewOptions): boolean => {
-        const { panZoom, width, height, minZoom, maxZoom, nodeOrigin, nodeLookup } = get();
+        const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();

        if (!panZoom) {
          return false;
@@ -302,26 +306,17 @@ const createStore = ({
            panZoom,
            minZoom,
            maxZoom,
-            nodeOrigin,
          },
          options
        );
      },
-      cancelConnection: () =>
+      cancelConnection: () => {
        set({
-          connectionStatus: null,
-          connectionStartHandle: null,
-          connectionEndHandle: null,
-        }),
-      updateConnection: (params) => {
-        const { connectionPosition } = get();
-
-        const currentConnection = {
-          ...params,
-          connectionPosition: params.connectionPosition ?? connectionPosition,
-        };
-
-        set(currentConnection);
+          connection: { ...initialConnection },
+        });
+      },
+      updateConnection: (connection) => {
+        set({ connection });
      },

      reset: () => set({ ...getInitialState() }),
--- a/packages/react/src/store/initialState.ts
+++ b/packages/react/src/store/initialState.ts
@@ -7,6 +7,8 @@ import {
  updateConnectionLookup,
  devWarn,
  getInternalNodesBounds,
+  NodeOrigin,
+  initialConnection,
 } from '@xyflow/system';

 import type { Edge, InternalNode, Node, ReactFlowStore } from '../types';
@@ -19,6 +21,7 @@ const getInitialState = ({
  width,
  height,
  fitView,
+  nodeOrigin,
 }: {
  nodes?: Node[];
  edges?: Edge[];
@@ -27,6 +30,7 @@ const getInitialState = ({
  width?: number;
  height?: number;
  fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
 } = {}): ReactFlowStore => {
  const nodeLookup = new Map<string, InternalNode>();
  const parentLookup = new Map();
@@ -34,21 +38,21 @@ const getInitialState = ({
  const edgeLookup = new Map();
  const storeEdges = defaultEdges ?? edges ?? [];
  const storeNodes = defaultNodes ?? nodes ?? [];
+  const storeNodeOrigin = nodeOrigin ?? [0, 0];

  updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
  adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
-    nodeOrigin: [0, 0],
+    nodeOrigin: storeNodeOrigin,
    elevateNodesOnSelect: false,
  });

  let transform: Transform = [0, 0, 1];

  if (fitView && width && height) {
-    // @todo users nodeOrigin should be used here
    const bounds = getInternalNodesBounds(nodeLookup, {
-      nodeOrigin: [0, 0],
      filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
    });
+
    const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
    transform = [x, y, zoom];
  }
@@ -76,13 +80,11 @@ const getInitialState = ({
    nodesSelectionActive: false,
    userSelectionActive: false,
    userSelectionRect: null,
-    connectionPosition: { x: 0, y: 0 },
-    connectionStatus: null,
    connectionMode: ConnectionMode.Strict,
    domNode: null,
    paneDragging: false,
    noPanClassName: 'nopan',
-    nodeOrigin: [0, 0],
+    nodeOrigin: storeNodeOrigin,
    nodeDragThreshold: 1,

    snapGrid: [15, 15],
@@ -92,7 +94,7 @@ const getInitialState = ({
    nodesConnectable: true,
    nodesFocusable: true,
    edgesFocusable: true,
-    edgesUpdatable: true,
+    edgesReconnectable: true,
    elementsSelectable: true,
    elevateNodesOnSelect: true,
    elevateEdgesOnSelect: false,
@@ -103,8 +105,7 @@ const getInitialState = ({

    multiSelectionActive: false,

-    connectionStartHandle: null,
-    connectionEndHandle: null,
+    connection: { ...initialConnection },
    connectionClickStartHandle: null,
    connectOnClick: true,

--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -29,7 +29,7 @@ import type {
  Node,
  Edge,
  ConnectionLineComponent,
-  OnEdgeUpdateFunc,
+  OnReconnect,
  OnInit,
  DefaultEdgeOptions,
  FitViewOptions,
@@ -129,9 +129,9 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
  onEdgeMouseLeave?: EdgeMouseHandler<EdgeType>;
  /** This event handler is called when a user double clicks on an edge */
  onEdgeDoubleClick?: EdgeMouseHandler<EdgeType>;
-  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
-  onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
-  onEdgeUpdate?: OnEdgeUpdateFunc<EdgeType>;
+  onReconnect?: OnReconnect<EdgeType>;
+  onReconnectStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
+  onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
  /** This event handler is called when a Node is updated
   * @example // Use NodesState hook to create edges and get onNodesChange handler
   * import ReactFlow, { useNodesState } from '@xyflow/react';
@@ -330,7 +330,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
  /** Controls if all edges should be updateable
   * @default true
   */
-  edgesUpdatable?: boolean;
+  edgesReconnectable?: boolean;
  /** Controls if all elements should (nodes & edges) be selectable
   * @default true
   */
@@ -413,7 +413,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
  panOnScrollMode?: PanOnScrollMode;
  /** Controls if the viewport should zoom by double clicking somewhere on the flow */
  zoomOnDoubleClick?: boolean;
-  edgeUpdaterRadius?: number;
+  reconnectRadius?: number;
  noDragClassName?: string;
  noWheelClassName?: string;
  noPanClassName?: string;
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -10,8 +10,7 @@ import type {
  HandleType,
  Connection,
  ConnectionLineType,
-  HandleElement,
-  ConnectionStatus,
+  Handle,
  EdgePosition,
  StepPathOptions,
  OnError,
@@ -28,8 +27,6 @@ export type EdgeLabelOptions = {
  labelBgBorderRadius?: number;
 };

-export type EdgeUpdatable = boolean | HandleType;
-
 /**
 * The Edge type is mainly used for the `edges` that get passed to the ReactFlow component
 * @public
@@ -41,7 +38,7 @@ export type Edge<
  EdgeLabelOptions & {
    style?: CSSProperties;
    className?: string;
-    updatable?: EdgeUpdatable;
+    reconnectable?: boolean | HandleType;
    focusable?: boolean;
  };

@@ -60,26 +57,28 @@ type StepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>
  pathOptions?: StepPathOptions;
 };

-export type BuiltInEdge = SmoothStepEdge | BezierEdge | StepEdge;
+type StraightEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<EdgeData, 'straight'>;
+
+export type BuiltInEdge = SmoothStepEdge | BezierEdge | StepEdge | StraightEdge;

 export type EdgeMouseHandler<EdgeType extends Edge = Edge> = (event: ReactMouseEvent, edge: EdgeType) => void;

 export type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
  id: string;
  edgesFocusable: boolean;
-  edgesUpdatable: boolean;
+  edgesReconnectable: boolean;
  elementsSelectable: boolean;
  noPanClassName: string;
  onClick?: EdgeMouseHandler<EdgeType>;
  onDoubleClick?: EdgeMouseHandler<EdgeType>;
-  onEdgeUpdate?: OnEdgeUpdateFunc<EdgeType>;
+  onReconnect?: OnReconnect<EdgeType>;
  onContextMenu?: EdgeMouseHandler<EdgeType>;
  onMouseEnter?: EdgeMouseHandler<EdgeType>;
  onMouseMove?: EdgeMouseHandler<EdgeType>;
  onMouseLeave?: EdgeMouseHandler<EdgeType>;
-  edgeUpdaterRadius?: number;
-  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
-  onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
+  reconnectRadius?: number;
+  onReconnectStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
+  onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
  rfId?: string;
  edgeTypes?: EdgeTypes;
  onError?: OnError;
@@ -189,20 +188,22 @@ export type StraightEdgeProps = Omit<EdgeComponentProps, 'sourcePosition' | 'tar
 */
 export type SimpleBezierEdgeProps = EdgeComponentProps;

-export type OnEdgeUpdateFunc<EdgeType extends Edge = Edge> = (oldEdge: EdgeType, newConnection: Connection) => void;
+export type OnReconnect<EdgeType extends Edge = Edge> = (oldEdge: EdgeType, newConnection: Connection) => void;

 export type ConnectionLineComponentProps = {
  connectionLineStyle?: CSSProperties;
  connectionLineType: ConnectionLineType;
-  fromNode?: Node;
-  fromHandle?: HandleElement;
+  fromNode: Node;
+  fromHandle: Handle;
  fromX: number;
  fromY: number;
  toX: number;
  toY: number;
  fromPosition: Position;
  toPosition: Position;
-  connectionStatus: ConnectionStatus | null;
+  connectionStatus: 'valid' | 'invalid' | null;
+  toNode: Node | null;
+  toHandle: Handle | null;
 };

 export type ConnectionLineComponent = ComponentType<ConnectionLineComponentProps>;
--- a/packages/react/src/types/instance.ts
+++ b/packages/react/src/types/instance.ts
@@ -143,6 +143,36 @@ export type GeneralHelpers<NodeType extends Node = Node, EdgeType extends Edge =
    dataUpdate: Partial<NodeType['data']> | ((node: NodeType) => Partial<NodeType['data']>),
    options?: { replace: boolean }
  ) => void;
+  /**
+   * Updates an edge.
+   *
+   * @param id - id of the edge to update
+   * @param edgeUpdate - the edge update as an object or a function that receives the current edge and returns the edge update
+   * @param options.replace - if true, the edge is replaced with the edge update, otherwise the changes get merged
+   *
+   * @example
+   * updateEdge('edge-1', (edge) => ({ label: 'A new label' }));
+   */
+  updateEdge: (
+    id: string,
+    edgeUpdate: Partial<EdgeType> | ((edge: EdgeType) => Partial<EdgeType>),
+    options?: { replace: boolean }
+  ) => void;
+  /**
+   * Updates the data attribute of a edge.
+   *
+   * @param id - id of the edge to update
+   * @param dataUpdate - the data update as an object or a function that receives the current data and returns the data update
+   * @param options.replace - if true, the data is replaced with the data update, otherwise the changes get merged
+   *
+   * @example
+   * updateEdgeData('edge-1', { label: 'A new label' });
+   */
+  updateEdgeData: (
+    id: string,
+    dataUpdate: Partial<EdgeType['data']> | ((edge: EdgeType) => Partial<EdgeType['data']>),
+    options?: { replace: boolean }
+  ) => void;
 };

 export type ReactFlowInstance<NodeType extends Node = Node, EdgeType extends Edge = Edge> = GeneralHelpers<
--- a/packages/react/src/types/nodes.ts
+++ b/packages/react/src/types/nodes.ts
@@ -1,12 +1,5 @@
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import type {
-  CoordinateExtent,
-  NodeBase,
-  NodeOrigin,
-  OnError,
-  NodeProps as NodePropsBase,
-  InternalNodeBase,
-} from '@xyflow/system';
+import type { CoordinateExtent, NodeBase, OnError, NodeProps as NodePropsBase, InternalNodeBase } from '@xyflow/system';

 import { NodeTypes } from './general';

@@ -59,7 +52,6 @@ export type NodeWrapperProps<NodeType extends Node> = {
  disableKeyboardA11y: boolean;
  nodeTypes?: NodeTypes;
  nodeExtent?: CoordinateExtent;
-  nodeOrigin: NodeOrigin;
  onError?: OnError;
 };

--- a/packages/react/src/types/store.ts
+++ b/packages/react/src/types/store.ts
@@ -1,6 +1,6 @@
 import {
  ConnectionMode,
-  type ConnectionStatus,
+  type ConnectionState,
  type CoordinateExtent,
  type InternalNodeUpdate,
  type UpdateNodePositions,
@@ -10,9 +10,8 @@ import {
  type OnViewportChange,
  type SelectionRect,
  type SnapGrid,
-  type ConnectingHandle,
+  type Handle,
  type Transform,
-  type XYPosition,
  type PanZoomInstance,
  type PanBy,
  type OnConnectStart,
@@ -25,8 +24,9 @@ import {
  type EdgeLookup,
  type ConnectionLookup,
  type NodeLookup,
-  NodeChange,
-  EdgeChange,
+  type NodeChange,
+  type EdgeChange,
+  type ParentLookup,
 } from '@xyflow/system';

 import type {
@@ -54,7 +54,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
  transform: Transform;
  nodes: NodeType[];
  nodeLookup: NodeLookup<InternalNode<NodeType>>;
-  parentLookup: Map<string, InternalNode<NodeType>[]>;
+  parentLookup: ParentLookup<InternalNode<NodeType>>;
  edges: Edge[];
  edgeLookup: EdgeLookup<EdgeType>;
  connectionLookup: ConnectionLookup;
@@ -78,9 +78,9 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
  userSelectionActive: boolean;
  userSelectionRect: SelectionRect | null;

-  connectionPosition: XYPosition;
-  connectionStatus: ConnectionStatus | null;
+  connection: ConnectionState;
  connectionMode: ConnectionMode;
+  connectionClickStartHandle: (Pick<Handle, 'nodeId' | 'id'> & Required<Pick<Handle, 'type'>>) | null;

  snapToGrid: boolean;
  snapGrid: SnapGrid;
@@ -89,7 +89,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
  nodesConnectable: boolean;
  nodesFocusable: boolean;
  edgesFocusable: boolean;
-  edgesUpdatable: boolean;
+  edgesReconnectable: boolean;
  elementsSelectable: boolean;
  elevateNodesOnSelect: boolean;
  elevateEdgesOnSelect: boolean;
@@ -97,10 +97,6 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =

  multiSelectionActive: boolean;

-  connectionStartHandle: ConnectingHandle | null;
-  connectionEndHandle: ConnectingHandle | null;
-  connectionClickStartHandle: ConnectingHandle | null;
-
  onNodeDragStart?: OnNodeDrag<NodeType>;
  onNodeDrag?: OnNodeDrag<NodeType>;
  onNodeDragStop?: OnNodeDrag<NodeType>;
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -2,5 +2,8 @@
  "extends": "@xyflow/tsconfig/react.json",
  "display": "@xyflow/react",
  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "outDir": "dist"
+  }
 }
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,29 @@
 # @xyflow/svelte

+## 0.1.8
+
+- `useConnection` returns `ConnectionState` with `toNode` and `toHandle`
+- node origin is part of position absolute
+- refactor connection handling
+
+## 0.1.7
+
+- revise selection usability (capture while dragging out of the flow)
+- only prevent shift scrolling when selection is actually in progress
+- use correct end handle position when drawing a connection lines 
+- determine correct end positions for connection lines
+
+## 0.1.6
+
+- fix node origin bug
+
+## 0.1.5
+
+- prevent zooming on mobile if zoomOnPinch is false
+- add straight edge to path built-in-types
+- abort drag when multiple touches are detected
+- fix merge_styles error
+
 ## 0.1.4

 - add `selectable`, `deletable` and `draggable` to node and edge props
@@ -7,7 +31,7 @@
 - add `on:edgemouseenter` and `on:edgemouseleave` event handler
 - fix deselection of edges
 - remove pointer events from panel when user selection is active
- fix viewport initialization with user viewport 
+- fix viewport initialization with user viewport
 - fix parent node lookup in `evaluateAbsolutePosition`- thanks @lcsfort

 ## 0.1.3
@@ -31,16 +55,16 @@ This is a bigger update for Svelte Flow to keep up with the latest changes we ma
 - rename `node.computed` to `node.measured` - this attribute only includes `width` and `height` and no `positionAbsolute` anymore. For this we added the helpers `getInternalNode` and `useInternalNode`
 - rename `node.parentNode` to `node.parentId`

-### More updates: 
+### More updates:

 - add `isValidConnection` for `<Handle />` component
 - add `fitViewOptions` for `<Controls />` component
 - add `getInternalNode` to `useSvelteFlow`
 - add `useInternalNode` hook
- don't reset nodes and edges when svelte flow unmounts - thanks @darabos 
+- don't reset nodes and edges when svelte flow unmounts - thanks @darabos
 - fix node event types - thanks @RedPhoenixQ
 - make handleId and isTarget reactive - thanks @darabos
- fix MiniMap interaction for touch devices 
+- fix MiniMap interaction for touch devices
 - fix pane: pinch zoom on windows
 - fix nodes: return user node in node event handlers

--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@xyflow/svelte",
-  "version": "0.1.4",
+  "version": "0.1.7",
  "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
  "keywords": [
    "svelte",
@@ -18,8 +18,8 @@
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config --dir dist",
    "css-watch": "pnpm css --watch",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write .",
+    "lint": "prettier --check . && eslint ./src",
+    "format": "prettier --write .",
    "typecheck": "pnpm check"
  },
  "type": "module",
--- a/packages/svelte/src/lib/actions/drag/index.ts
+++ b/packages/svelte/src/lib/actions/drag/index.ts
@@ -34,7 +34,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
        nodeExtent: get(store.nodeExtent),
        snapGrid: snapGrid ? snapGrid : [0, 0],
        snapToGrid: !!snapGrid,
-        nodeOrigin: [0, 0],
+        nodeOrigin: get(store.nodeOrigin),
        multiSelectionActive: get(store.multiselectionKeyPressed),
        domNode: get(store.domNode),
        transform: [vp.x, vp.y, vp.zoom],
--- a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
+++ b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
@@ -2,21 +2,59 @@
  import cc from 'classcat';

  import { useStore } from '$lib/store';
+  import {
+    ConnectionLineType,
+    getBezierPath,
+    getConnectionStatus,
+    getSmoothStepPath,
+    getStraightPath
+  } from '@xyflow/system';

  export let containerStyle: string = '';
  export let style: string = '';
  export let isCustomComponent: boolean = false;

-  const { width, height, connection } = useStore();
+  const { width, height, connection, connectionLineType } = useStore();
+
+  let path: string | null = null;
+
+  $: if ($connection.inProgress && !isCustomComponent) {
+    const { from, to, fromPosition, toPosition } = $connection;
+    const pathParams = {
+      sourceX: from.x,
+      sourceY: from.y,
+      sourcePosition: fromPosition,
+      targetX: to.x,
+      targetY: to.y,
+      targetPosition: toPosition
+    };
+
+    switch ($connectionLineType) {
+      case ConnectionLineType.Bezier:
+        [path] = getBezierPath(pathParams);
+        break;
+      case ConnectionLineType.Step:
+        [path] = getSmoothStepPath({
+          ...pathParams,
+          borderRadius: 0
+        });
+        break;
+      case ConnectionLineType.SmoothStep:
+        [path] = getSmoothStepPath(pathParams);
+        break;
+      default:
+        [path] = getStraightPath(pathParams);
+    }
+  }
 </script>

-{#if $connection.path}
+{#if $connection.inProgress}
  <svg width={$width} height={$height} class="svelte-flow__connectionline" style={containerStyle}>
-    <g class={cc(['svelte-flow__connection', $connection.status])}>
+    <g class={cc(['svelte-flow__connection', getConnectionStatus($connection.isValid)])}>
      <slot name="connectionLine" />
      <!-- slot fallbacks do not work if slots are forwarded in parent -->
      {#if !isCustomComponent}
-        <path d={$connection.path} {style} fill="none" class="svelte-flow__connection-path" />
+        <path d={path} {style} fill="none" class="svelte-flow__connection-path" />
      {/if}
    </g>
  </svg>
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -103,7 +103,7 @@
          $onConnectEndAction?.(event);
        },
        getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom],
-        getConnectionStartHandle: () => $connection.startHandle
+        getFromHandle: () => $connection.fromHandle
      });
    }
  }
@@ -128,21 +128,20 @@
    prevConnections = connections ?? new Map();
  }

-  $: connectionInProcess = !!$connection.startHandle;
+  $: connectionInProcess = !!$connection.fromHandle;
  $: connectingFrom =
-    $connection.startHandle?.nodeId === nodeId &&
-    $connection.startHandle?.type === type &&
-    $connection.startHandle?.handleId === handleId;
+    $connection.fromHandle?.nodeId === nodeId &&
+    $connection.fromHandle?.type === type &&
+    $connection.fromHandle?.id === handleId;
  $: connectingTo =
-    $connection.endHandle?.nodeId === nodeId &&
-    $connection.endHandle?.type === type &&
-    $connection.endHandle?.handleId === handleId;
+    $connection.toHandle?.nodeId === nodeId &&
+    $connection.toHandle?.type === type &&
+    $connection.toHandle?.id === handleId;
  $: isPossibleEndHandle =
    $connectionMode === ConnectionMode.Strict
-      ? $connection.startHandle?.type !== type
-      : nodeId !== $connection.startHandle?.nodeId ||
-        handleId !== $connection.startHandle?.handleId;
-  $: valid = connectingTo && $connection.status === 'valid';
+      ? $connection.fromHandle?.type !== type
+      : nodeId !== $connection.fromHandle?.nodeId || handleId !== $connection.fromHandle?.id;
+  $: valid = connectingTo && $connection.isValid;
 </script>

 <!--
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -31,8 +31,6 @@
  export let isParent: $$Props['isParent'] = false;
  export let positionX: $$Props['positionX'];
  export let positionY: $$Props['positionY'];
-  export let positionOriginX: $$Props['positionOriginX'];
-  export let positionOriginY: $$Props['positionOriginY'];
  export let sourcePosition: $$Props['sourcePosition'] = undefined;
  export let targetPosition: $$Props['targetPosition'] = undefined;
  export let zIndex: $$Props['zIndex'];
@@ -181,7 +179,7 @@
    class:nopan={draggable}
    class:parent={isParent}
    style:z-index={zIndex}
-    style:transform="translate({positionOriginX}px, {positionOriginY}px)"
+    style:transform="translate({positionX}px, {positionY}px)"
    style:visibility={initialized ? 'visible' : 'hidden'}
    style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
    on:click={onSelectNodeHandler}
--- a/packages/svelte/src/lib/components/NodeWrapper/types.ts
+++ b/packages/svelte/src/lib/components/NodeWrapper/types.ts
@@ -28,8 +28,6 @@ export type NodeWrapperProps = Pick<
  type: string;
  positionX: number;
  positionY: number;
-  positionOriginX: number;
-  positionOriginY: number;
  'on:nodeclick'?: (event: MouseEvent) => void;
  resizeObserver?: ResizeObserver | null;
  isParent?: boolean;
--- a/packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte
+++ b/packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte
@@ -11,12 +11,14 @@
  export let initialWidth: $$Props['initialWidth'] = undefined;
  export let initialHeight: $$Props['initialHeight'] = undefined;
  export let fitView: $$Props['fitView'] = undefined;
+  export let nodeOrigin: $$Props['nodeOrigin'] = undefined;

  const store = createStore({
    nodes: initialNodes,
    edges: initialEdges,
    width: initialWidth,
    height: initialHeight,
+    nodeOrigin,
    fitView
  });

--- a/packages/svelte/src/lib/components/SvelteFlowProvider/types.ts
+++ b/packages/svelte/src/lib/components/SvelteFlowProvider/types.ts
@@ -1,4 +1,5 @@
 import type { Edge, Node } from '$lib/types';
+import type { NodeOrigin } from '@xyflow/system';

 export type SvelteFlowProviderProps = {
  initialNodes?: Node[];
@@ -6,4 +7,5 @@ export type SvelteFlowProviderProps = {
  initialWidth?: number;
  initialHeight?: number;
  fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
 };
--- a/packages/svelte/src/lib/components/nodes/GroupNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/GroupNode.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
  import type { NodeProps } from '$lib/types';

+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface $$Props extends NodeProps {}

  // this is a workaround for suppressing the warning about unused props
--- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { onDestroy } from 'svelte';
-  import { getPositionWithOrigin, getNodeDimensions, nodeHasDimensions } from '@xyflow/system';
+  import { nodeHasDimensions } from '@xyflow/system';

  import { NodeWrapper } from '$lib/components/NodeWrapper';
  import { useStore } from '$lib/store';
@@ -40,13 +40,6 @@

 <div class="svelte-flow__nodes">
  {#each $visibleNodes as node (node.id)}
-    {@const nodeDimesions = getNodeDimensions(node)}
-    {@const posOrigin = getPositionWithOrigin({
-      x: node.internals.positionAbsolute.x,
-      y: node.internals.positionAbsolute.y,
-      ...nodeDimesions,
-      origin: node.origin
-    })}
    <NodeWrapper
      {node}
      id={node.id}
@@ -65,8 +58,6 @@
      deletable={node.deletable ?? true}
      positionX={node.internals.positionAbsolute.x}
      positionY={node.internals.positionAbsolute.y}
-      positionOriginX={posOrigin.x ?? 0}
-      positionOriginY={posOrigin.y ?? 0}
      isParent={$parentLookup.has(node.id)}
      style={node.style}
      class={node.class}
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -75,15 +75,24 @@
    $selectionKeyPressed || $selectionRect || (selectionOnDrag && _panOnDrag !== true);
  $: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user');

-  function onClick(event: MouseEvent | TouchEvent) {
-    dispatch('paneclick', { event });
+  // Used to prevent click events when the user lets go of the selectionKey during a selection
+  let selectionInProgress = false;

+  function onClick(event: MouseEvent | TouchEvent) {
+    // We prevent click events when the user let go of the selectionKey during a selection
+    if (selectionInProgress) {
+      selectionInProgress = false;
+      return;
+    }
+
+    dispatch('paneclick', { event });
    unselectNodesAndEdges();
    selectionRectMode.set(null);
  }

-  function onMouseDown(event: MouseEvent) {
+  function onPointerDown(event: PointerEvent) {
    containerBounds = container.getBoundingClientRect();
+    container.setPointerCapture(event.pointerId);

    if (
      !elementsSelectable ||
@@ -111,10 +120,13 @@
    // onSelectionStart?.(event);
  }

-  function onMouseMove(event: MouseEvent) {
+  function onPointerMove(event: PointerEvent) {
    if (!isSelecting || !containerBounds || !$selectionRect) {
      return;
    }
+
+    selectionInProgress = true;
+
    const mousePos = getEventPosition(event, containerBounds);
    const startX = $selectionRect.startX ?? 0;
    const startY = $selectionRect.startY ?? 0;
@@ -157,11 +169,13 @@
    selectionRect.set(nextUserSelectRect);
  }

-  function onMouseUp(event: MouseEvent) {
+  function onPointerUp(event: PointerEvent) {
    if (event.button !== 0) {
      return;
    }

+    container.releasePointerCapture(event.pointerId);
+
    // We only want to trigger click functions when in selection mode if
    // the user did not move the mouse.
    if (!isSelecting && $selectionRectMode === 'user' && event.target === container) {
@@ -173,17 +187,14 @@
      $selectionRectMode = 'nodes';
    }

-    // onSelectionEnd?.(event);
-  }
-
-  const onMouseLeave = () => {
-    if ($selectionRectMode === 'user') {
-      selectionRectMode.set(selectedNodes.length > 0 ? 'nodes' : null);
-      //  onSelectionEnd?.(event);
+    // If the user kept holding the selectionKey during the selection,
+    // we need to reset the selectionInProgress, so the next click event is not prevented
+    if ($selectionKeyPressed) {
+      selectionInProgress = false;
    }

-    selectionRect.set(null);
-  };
+    // onSelectionEnd?.(event);
+  }

  const onContextMenu = (event: MouseEvent) => {
    if (Array.isArray(_panOnDrag) && _panOnDrag?.includes(2)) {
@@ -204,10 +215,9 @@
  class:dragging={$dragging}
  class:selection={isSelecting}
  on:click={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
-  on:mousedown={hasActiveSelection ? onMouseDown : undefined}
-  on:mousemove={hasActiveSelection ? onMouseMove : undefined}
-  on:mouseup={hasActiveSelection ? onMouseUp : undefined}
-  on:mouseleave={hasActiveSelection ? onMouseLeave : undefined}
+  on:pointerdown={hasActiveSelection ? onPointerDown : undefined}
+  on:pointermove={hasActiveSelection ? onPointerMove : undefined}
+  on:pointerup={hasActiveSelection ? onPointerUp : undefined}
  on:contextmenu={wrapHandler(onContextMenu, container)}
 >
  <slot />
--- a/packages/svelte/src/lib/container/Panel/Panel.svelte
+++ b/packages/svelte/src/lib/container/Panel/Panel.svelte
@@ -19,7 +19,7 @@
 <div
  class={cc(['svelte-flow__panel', className, ...positionClasses])}
  {style}
-  style:pointer-events={$selectionRectMode ? 'none' : undefined}
+  style:pointer-events={$selectionRectMode ? 'none' : ''}
  {...$$restProps}
 >
  <slot />
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -78,6 +78,7 @@
  export let onconnectend: $$Props['onconnectend'] = undefined;
  export let onbeforedelete: $$Props['onbeforedelete'] = undefined;
  export let oninit: $$Props['oninit'] = undefined;
+  export let nodeOrigin: $$Props['nodeOrigin'] = undefined;

  export let defaultMarkerColor = '#b1b1b7';

@@ -93,7 +94,14 @@

  const store = hasContext(key)
    ? useStore()
-    : createStoreContext({ nodes: get(nodes), edges: get(edges), width, height, fitView });
+    : createStoreContext({
+        nodes: get(nodes),
+        edges: get(edges),
+        width,
+        height,
+        fitView,
+        nodeOrigin
+      });

  onMount(() => {
    store.width.set(clientWidth);
@@ -168,7 +176,8 @@
      onconnect,
      onconnectstart,
      onconnectend,
-      onbeforedelete
+      onbeforedelete,
+      nodeOrigin
    };

    updateStoreByKeys(store, updatableProps);
--- a/packages/svelte/src/lib/container/SvelteFlow/utils.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
@@ -70,6 +70,7 @@ export type UpdatableStoreProps = {
  onconnectstart?: UnwrapWritable<SvelteFlowStore['onconnectstart']>;
  onconnectend?: UnwrapWritable<SvelteFlowStore['onconnectend']>;
  onbeforedelete?: UnwrapWritable<SvelteFlowStore['onbeforedelete']>;
+  nodeOrigin?: UnwrapWritable<SvelteFlowStore['nodeOrigin']>;
 };

 export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) {
--- a/packages/svelte/src/lib/container/Zoom/Zoom.svelte
+++ b/packages/svelte/src/lib/container/Zoom/Zoom.svelte
@@ -23,7 +23,7 @@
  const {
    viewport,
    panZoom,
-    selectionKeyPressed,
+    selectionRect,
    minZoom,
    maxZoom,
    dragging,
@@ -66,7 +66,7 @@
    preventScrolling: typeof preventScrolling === 'boolean' ? preventScrolling : true,
    noPanClassName: 'nopan',
    noWheelClassName: 'nowheel',
-    userSelectionActive: $selectionKeyPressed,
+    userSelectionActive: !!$selectionRect,
    translateExtent: $translateExtent,
    lib: $lib
  }}
--- a/packages/svelte/src/lib/hooks/useConnection.ts
+++ b/packages/svelte/src/lib/hooks/useConnection.ts
@@ -1,7 +1,7 @@
 import type { Readable } from 'svelte/store';
-
 import { useStore } from '$lib/store';
-import type { ConnectionProps } from '$lib/store/derived-connection-props';
+
+import type { ConnectionState } from '@xyflow/system';

 /**
 * Hook for receiving the current connection.
@@ -9,7 +9,7 @@ import type { ConnectionProps } from '$lib/store/derived-connection-props';
 * @public
 * @returns current connection as a readable store
 */
-export function useConnection(): Readable<ConnectionProps> {
+export function useConnection(): Readable<ConnectionState> {
  const { connection } = useStore();

  return connection;
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -70,7 +70,6 @@ export {
  type OnMoveStart,
  type OnMoveEnd,
  type Connection,
-  type ConnectionStatus,
  ConnectionMode,
  type OnConnectStartParams,
  type OnConnectStart,
@@ -124,6 +123,5 @@ export {
  getIncomers,
  getOutgoers,
  getConnectedEdges,
-  addEdge,
-  updateEdge
+  addEdge
 } from '@xyflow/system';
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -11,7 +11,6 @@
    getBoundsOfRects,
    getInternalNodesBounds,
    getNodeDimensions,
-    getNodePositionWithOrigin,
    nodeHasDimensions,
    type Rect
  } from '@xyflow/system';
@@ -134,11 +133,10 @@
      {#each $nodes as userNode (userNode.id)}
        {@const node = $nodeLookup.get(userNode.id)}
        {#if node && nodeHasDimensions(node)}
-          {@const pos = getNodePositionWithOrigin(node).positionAbsolute}
          {@const nodeDimesions = getNodeDimensions(node)}
          <MinimapNode
-            x={pos.x}
-            y={pos.y}
+            x={node.internals.positionAbsolute.x}
+            y={node.internals.positionAbsolute.y}
            {...nodeDimesions}
            selected={node.selected}
            color={nodeColorFunc?.(node)}
--- a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
+++ b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { getContext } from 'svelte';
-  import { getNodesBounds, Position, type Rect, getNodeToolbarTransform } from '@xyflow/system';
+  import { getNodesBounds, Position, getNodeToolbarTransform } from '@xyflow/system';
  import portal from '$lib/actions/portal';
  import type { InternalNode } from '$lib/types';
  import { useStore } from '$lib/store';
--- a/packages/svelte/src/lib/store/derived-connection-props.ts
+++ b/packages/svelte/src/lib/store/derived-connection-props.ts
@@ -1,128 +0,0 @@
-import { derived, type Writable } from 'svelte/store';
-import {
-  getBezierPath,
-  getSmoothStepPath,
-  getStraightPath,
-  ConnectionLineType,
-  ConnectionMode,
-  Position,
-  type HandleElement
-} from '@xyflow/system';
-
-import type { SvelteFlowStoreState } from './types';
-import type { ConnectionData } from '$lib/types';
-
-export type ConnectionProps = {
-  path: string | null;
-  sourceX: number | null;
-  sourceY: number | null;
-  sourcePosition: Position | undefined | null;
-  targetX: number | null;
-  targetY: number | null;
-  targetPosition: Position | undefined | null;
-  pointerPosition: ConnectionData['connectionPosition'] | null;
-  startHandle: ConnectionData['connectionStartHandle'] | null;
-  endHandle: ConnectionData['connectionEndHandle'] | null;
-  status: ConnectionData['connectionStatus'] | null;
-};
-
-export const initConnectionProps = {
-  path: null,
-  sourceX: null,
-  sourceY: null,
-  sourcePosition: null,
-  targetX: null,
-  targetY: null,
-  targetPosition: null,
-  pointerPosition: null,
-  startHandle: null,
-  endHandle: null,
-  status: null
-};
-
-const oppositePosition = {
-  [Position.Left]: Position.Right,
-  [Position.Right]: Position.Left,
-  [Position.Top]: Position.Bottom,
-  [Position.Bottom]: Position.Top
-};
-
-export function getDerivedConnectionProps(
-  store: SvelteFlowStoreState,
-  currentConnection: Writable<ConnectionData>
-) {
-  return derived(
-    [
-      currentConnection,
-      store.connectionLineType,
-      store.connectionMode,
-      store.nodeLookup,
-      store.viewport
-    ],
-    ([connection, connectionLineType, connectionMode, nodeLookup, viewport]) => {
-      if (!connection.connectionStartHandle?.nodeId) {
-        return initConnectionProps;
-      }
-
-      // TODO: it should bail out if the node is not found
-      const fromNode = nodeLookup.get(connection.connectionStartHandle?.nodeId);
-      const fromHandleBounds = fromNode?.internals.handleBounds;
-      const handleBoundsStrict =
-        fromHandleBounds?.[connection.connectionStartHandle.type || 'source'] || [];
-      const handleBoundsLoose: HandleElement[] | undefined | null = handleBoundsStrict
-        ? handleBoundsStrict
-        : fromHandleBounds?.[
-            connection?.connectionStartHandle?.type === 'source' ? 'target' : 'source'
-          ];
-      const handleBounds =
-        connectionMode === ConnectionMode.Strict ? handleBoundsStrict : handleBoundsLoose;
-      const fromHandle = connection.connectionStartHandle?.handleId
-        ? handleBounds?.find((d) => d.id === connection.connectionStartHandle?.handleId)
-        : handleBounds?.[0];
-      const fromHandleX = fromHandle
-        ? fromHandle.x + fromHandle.width / 2
-        : (fromNode?.measured.width ?? 0) / 2;
-      const fromHandleY = fromHandle
-        ? fromHandle.y + fromHandle.height / 2
-        : fromNode?.measured.height ?? 0;
-      const fromX = (fromNode?.internals.positionAbsolute.x ?? 0) + fromHandleX;
-      const fromY = (fromNode?.internals.positionAbsolute.y ?? 0) + fromHandleY;
-      const fromPosition = fromHandle?.position;
-      const toPosition = fromPosition ? oppositePosition[fromPosition] : undefined;
-
-      const pathParams = {
-        sourceX: fromX,
-        sourceY: fromY,
-        sourcePosition: fromPosition,
-        targetX: ((connection.connectionPosition?.x ?? 0) - viewport.x) / viewport.zoom,
-        targetY: ((connection.connectionPosition?.y ?? 0) - viewport.y) / viewport.zoom,
-        targetPosition: toPosition
-      };
-
-      let path = '';
-
-      if (connectionLineType === ConnectionLineType.Bezier) {
-        // we assume the destination position is opposite to the source position
-        [path] = getBezierPath(pathParams);
-      } else if (connectionLineType === ConnectionLineType.Step) {
-        [path] = getSmoothStepPath({
-          ...pathParams,
-          borderRadius: 0
-        });
-      } else if (connectionLineType === ConnectionLineType.SmoothStep) {
-        [path] = getSmoothStepPath(pathParams);
-      } else {
-        [path] = getStraightPath(pathParams);
-      }
-
-      return {
-        path,
-        ...pathParams,
-        pointerPosition: connection.connectionPosition,
-        startHandle: connection.connectionStartHandle,
-        endHandle: connection.connectionEndHandle,
-        status: connection.connectionStatus
-      };
-    }
-  );
-}
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -7,6 +7,9 @@ import {
  panBy as panBySystem,
  updateNodeInternals as updateNodeInternalsSystem,
  addEdge as addEdgeUtil,
+  initialConnection,
+  errorMessages,
+  pointToRendererPoint,
  type UpdateNodePositions,
  type InternalNodeUpdate,
  type ViewportHelperFunctionOptions,
@@ -14,16 +17,16 @@ import {
  type XYPosition,
  type CoordinateExtent,
  type UpdateConnection,
-  errorMessages
+  type ConnectionState,
+  type NodeOrigin
 } from '@xyflow/system';

-import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions, ConnectionData } from '$lib/types';
+import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types';
 import { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store';
 import type { SvelteFlowStore } from './types';
 import { syncNodeStores, syncEdgeStores, syncViewportStores } from './utils';
 import { getVisibleEdges } from './visible-edges';
 import { getVisibleNodes } from './visible-nodes';
-import { getDerivedConnectionProps } from './derived-connection-props';

 export const key = Symbol();

@@ -32,15 +35,24 @@ export function createStore({
  edges,
  width,
  height,
-  fitView: fitViewOnCreate
+  fitView: fitViewOnCreate,
+  nodeOrigin
 }: {
  nodes?: Node[];
  edges?: Edge[];
  width?: number;
  height?: number;
  fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
 }): SvelteFlowStore {
-  const store = getInitialStore({ nodes, edges, width, height, fitView: fitViewOnCreate });
+  const store = getInitialStore({
+    nodes,
+    edges,
+    width,
+    height,
+    fitView: fitViewOnCreate,
+    nodeOrigin
+  });

  function setNodeTypes(nodeTypes: NodeTypes) {
    store.nodeTypes.set({
@@ -122,6 +134,7 @@ export function createStore({
        }
        case 'position':
          node.position = change.position ?? node.position;
+
          break;
      }
    }
@@ -147,8 +160,7 @@ export function createStore({
        height: get(store.height),
        minZoom: get(store.minZoom),
        maxZoom: get(store.maxZoom),
-        panZoom,
-        nodeOrigin: get(store.nodeOrigin)
+        panZoom
      },
      options
    );
@@ -330,22 +342,13 @@ export function createStore({
    });
  }

-  const initConnectionUpdateData = {
-    connectionStartHandle: null,
-    connectionEndHandle: null,
-    connectionPosition: null,
-    connectionStatus: null
-  };
-
-  // by creating an internal, unexposed store and using a derived store
-  // we prevent using slow get() calls
-  const currentConnection = writable<ConnectionData>(initConnectionUpdateData);
-  const updateConnection: UpdateConnection = (newConnection: ConnectionData) => {
-    currentConnection.set(newConnection);
+  const _connection = writable<ConnectionState>(initialConnection);
+  const updateConnection: UpdateConnection = (newConnection: ConnectionState) => {
+    _connection.set({ ...newConnection });
  };

  function cancelConnection() {
-    updateConnection(initConnectionUpdateData);
+    _connection.set(initialConnection);
  }

  function reset() {
@@ -364,9 +367,16 @@ export function createStore({
    ...store,

    // derived state
-    connection: getDerivedConnectionProps(store, currentConnection),
    visibleEdges: getVisibleEdges(store),
    visibleNodes: getVisibleNodes(store),
+    connection: derived([_connection, store.viewport], ([connection, viewport]) => {
+      return connection.inProgress
+        ? {
+            ...connection,
+            to: pointToRendererPoint(connection.to, [viewport.x, viewport.y, viewport.zoom])
+          }
+        : { ...connection };
+    }),
    markers: derived(
      [store.edges, store.defaultMarkerColor, store.flowId],
      ([edges, defaultColor, id]) => createMarkerIds(edges, { defaultColor, id })
@@ -438,15 +448,17 @@ export function createStoreContext({
  edges,
  width,
  height,
-  fitView
+  fitView,
+  nodeOrigin
 }: {
  nodes?: Node[];
  edges?: Edge[];
  width?: number;
  height?: number;
  fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
 }) {
-  const store = createStore({ nodes, edges, width, height, fitView });
+  const store = createStore({ nodes, edges, width, height, fitView, nodeOrigin });

  setContext(key, {
    getStore: () => store
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -6,9 +6,9 @@ import {
  ConnectionLineType,
  devWarn,
  adoptUserNodes,
-  getNodesBounds,
  getViewportForBounds,
  updateConnectionLookup,
+  initialConnection,
  type SelectionRect,
  type SnapGrid,
  type MarkerProps,
@@ -22,7 +22,10 @@ import {
  type OnConnectStart,
  type OnConnectEnd,
  type NodeLookup,
-  type EdgeLookup
+  type EdgeLookup,
+  type ConnectionState,
+  type ParentLookup,
+  getInternalNodesBounds
 } from '@xyflow/system';

 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -51,7 +54,6 @@ import type {
  InternalNode
 } from '$lib/types';
 import { createNodesStore, createEdgesStore } from './utils';
-import { initConnectionProps, type ConnectionProps } from './derived-connection-props';

 export const initialNodeTypes = {
  input: InputNode,
@@ -72,18 +74,21 @@ export const getInitialStore = ({
  edges = [],
  width,
  height,
-  fitView
+  fitView,
+  nodeOrigin
 }: {
  nodes?: Node[];
  edges?: Edge[];
  width?: number;
  height?: number;
  fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
 }) => {
  const nodeLookup: NodeLookup = new Map();
  const parentLookup = new Map();
+  const storeNodeOrigin = nodeOrigin ?? [0, 0];
  adoptUserNodes(nodes, nodeLookup, parentLookup, {
-    nodeOrigin: [0, 0],
+    nodeOrigin: storeNodeOrigin,
    elevateNodesOnSelect: false,
    checkEquality: false
  });
@@ -94,20 +99,17 @@ export const getInitialStore = ({
  let viewport: Viewport = { x: 0, y: 0, zoom: 1 };

  if (fitView && width && height) {
-    const nodesWithDimensions = nodes.filter(
-      (node) => (node.width && node.height) || (node.initialWidth && node.initialHeight)
-    );
-
-    // @todo users nodeOrigin should be used here
-    const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
+    const bounds = getInternalNodesBounds(nodeLookup, {
+      filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight))
+    });
    viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
  }

  return {
    flowId: writable<string | null>(null),
-    nodes: createNodesStore(nodes, nodeLookup, parentLookup),
+    nodes: createNodesStore(nodes, nodeLookup, parentLookup, storeNodeOrigin),
    nodeLookup: readable<NodeLookup<InternalNode>>(nodeLookup),
-    parentLookup: readable<Map<string, InternalNode[]>>(parentLookup),
+    parentLookup: readable<ParentLookup<InternalNode>>(parentLookup),
    edgeLookup: readable<EdgeLookup<Edge>>(edgeLookup),
    visibleNodes: readable<InternalNode[]>([]),
    edges: createEdgesStore(edges, connectionLookup, edgeLookup),
@@ -117,7 +119,7 @@ export const getInitialStore = ({
    width: writable<number>(500),
    minZoom: writable<number>(0.5),
    maxZoom: writable<number>(2),
-    nodeOrigin: writable<NodeOrigin>([0, 0]),
+    nodeOrigin: writable<NodeOrigin>(storeNodeOrigin),
    nodeDragThreshold: writable<number>(1),
    nodeExtent: writable<CoordinateExtent>(infiniteExtent),
    translateExtent: writable<CoordinateExtent>(infiniteExtent),
@@ -142,7 +144,7 @@ export const getInitialStore = ({
    viewport: writable<Viewport>(viewport),
    connectionMode: writable<ConnectionMode>(ConnectionMode.Strict),
    domNode: writable<HTMLDivElement | null>(null),
-    connection: readable<ConnectionProps>(initConnectionProps),
+    connection: readable<ConnectionState>(initialConnection),
    connectionLineType: writable<ConnectionLineType>(ConnectionLineType.Bezier),
    connectionRadius: writable<number>(20),
    isValidConnection: writable<IsValidConnection>(() => true),
--- a/packages/svelte/src/lib/store/utils.ts
+++ b/packages/svelte/src/lib/store/utils.ts
@@ -13,7 +13,9 @@ import {
  type PanZoomInstance,
  type ConnectionLookup,
  type EdgeLookup,
-  type NodeLookup
+  type NodeLookup,
+  type ParentLookup,
+  type NodeOrigin
 } from '@xyflow/system';

 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, InternalNode, Node } from '$lib/types';
@@ -128,7 +130,8 @@ export type NodeStoreOptions = {
 export const createNodesStore = (
  nodes: Node[],
  nodeLookup: NodeLookup<InternalNode>,
-  parentLookup: Map<string, InternalNode[]>
+  parentLookup: ParentLookup<InternalNode>,
+  nodeOrigin: NodeOrigin = [0, 0]
 ): {
  subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
  update: (this: void, updater: Updater<Node[]>) => void;
@@ -144,6 +147,7 @@ export const createNodesStore = (
  const _set = (nds: Node[]): Node[] => {
    adoptUserNodes(nds, nodeLookup, parentLookup, {
      elevateNodesOnSelect,
+      nodeOrigin,
      defaults,
      checkEquality: false
    });
--- a/packages/svelte/src/lib/types/edges.ts
+++ b/packages/svelte/src/lib/types/edges.ts
@@ -44,7 +44,12 @@ type StepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>
  pathOptions?: StepPathOptions;
 };

-export type BuiltInEdge = SmoothStepEdge | BezierEdge | StepEdge;
+type StraightEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<
+  EdgeData,
+  'straight'
+>;
+
+export type BuiltInEdge = SmoothStepEdge | BezierEdge | StepEdge | StraightEdge;

 /**
 * Custom edge component props.
--- a/packages/svelte/src/lib/types/general.ts
+++ b/packages/svelte/src/lib/types/general.ts
@@ -2,7 +2,7 @@ import type { ShortcutModifierDefinition } from '@svelte-put/shortcut';
 import type {
  FitViewOptionsBase,
  XYPosition,
-  ConnectingHandle,
+  Handle,
  Connection,
  OnBeforeDeleteBase,
  HandleProps as HandlePropsSystem
@@ -17,8 +17,8 @@ export type KeyDefinition = string | KeyDefinitionObject;

 export type ConnectionData = {
  connectionPosition: XYPosition | null;
-  connectionStartHandle: ConnectingHandle | null;
-  connectionEndHandle: ConnectingHandle | null;
+  connectionStartHandle: Handle | null;
+  connectionEndHandle: Handle | null;
  connectionStatus: string | null;
 };

--- a/packages/system/package.json
+++ b/packages/system/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@xyflow/system",
-  "version": "0.0.27",
+  "version": "0.0.30",
  "description": "xyflow core system that powers React Flow and Svelte Flow.",
  "keywords": [
    "node-based UI",
--- a/packages/system/src/types/general.ts
+++ b/packages/system/src/types/general.ts
@@ -6,9 +6,9 @@ import type { ZoomBehavior } from 'd3-zoom';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { Transition } from 'd3-transition';

-import type { XYPosition, Rect } from './utils';
-import type { InternalNodeBase, NodeBase, NodeDragItem, NodeOrigin } from './nodes';
-import type { ConnectingHandle, HandleType } from './handles';
+import type { XYPosition, Rect, Position } from './utils';
+import type { InternalNodeBase, NodeBase, NodeDragItem } from './nodes';
+import type { Handle, HandleType } from './handles';
 import { PanZoomInstance } from './panzoom';
 import { EdgeBase } from '..';

@@ -37,8 +37,6 @@ export type HandleConnection = Connection & {
  edgeId: string;
 };

-export type ConnectionStatus = 'valid' | 'invalid';
-
 export enum ConnectionMode {
  Strict = 'strict',
  Loose = 'loose',
@@ -63,7 +61,6 @@ export type FitViewParamsBase<NodeType extends NodeBase> = {
  panZoom: PanZoomInstance;
  minZoom: number;
  maxZoom: number;
-  nodeOrigin?: NodeOrigin;
 };

 export type FitViewOptionsBase<NodeType extends NodeBase = NodeBase> = {
@@ -135,12 +132,52 @@ export type OnError = (id: string, message: string) => void;
 export type UpdateNodePositions = (dragItems: Map<string, NodeDragItem | InternalNodeBase>, dragging?: boolean) => void;
 export type PanBy = (delta: XYPosition) => boolean;

-export type UpdateConnection = (params: {
-  connectionPosition: XYPosition | null;
-  connectionStatus: ConnectionStatus | null;
-  connectionStartHandle: ConnectingHandle | null;
-  connectionEndHandle: ConnectingHandle | null;
-}) => void;
+export const initialConnection: NoConnection = {
+  inProgress: false,
+  isValid: null,
+  from: null,
+  fromHandle: null,
+  fromPosition: null,
+  fromNode: null,
+  to: null,
+  toHandle: null,
+  toPosition: null,
+  toNode: null,
+};
+
+export type NoConnection = {
+  inProgress: false;
+  isValid: null;
+
+  from: null;
+  fromHandle: null;
+  fromPosition: null;
+  fromNode: null;
+
+  to: null;
+  toHandle: null;
+  toPosition: null;
+  toNode: null;
+};
+
+export type ConnectionInProgress = {
+  inProgress: true;
+  isValid: boolean | null;
+
+  from: XYPosition;
+  fromHandle: Handle;
+  fromPosition: Position;
+  fromNode: NodeBase;
+
+  to: XYPosition;
+  toHandle: Handle | null;
+  toPosition: Position;
+  toNode: NodeBase | null;
+};
+
+export type ConnectionState = ConnectionInProgress | NoConnection;
+
+export type UpdateConnection = (params: ConnectionState) => void;

 export type ColorModeClass = 'light' | 'dark';
 export type ColorMode = ColorModeClass | 'system';
--- a/packages/system/src/types/handles.ts
+++ b/packages/system/src/types/handles.ts
@@ -2,28 +2,15 @@ import type { Position, IsValidConnection } from '.';

 export type HandleType = 'source' | 'target';

-export type HandleElement = {
+export type Handle = {
  id?: string | null;
+  nodeId: string;
  x: number;
  y: number;
+  position: Position;
+  type: HandleType;
  width: number;
  height: number;
-  position: Position;
-  type?: HandleType;
-};
-
-export type ConnectingHandle = {
-  nodeId: string;
-  type: HandleType;
-  handleId?: string | null;
-};
-
-export type ConnectionHandle = {
-  id: string | null;
-  type: HandleType;
-  nodeId: string;
-  x: number;
-  y: number;
 };

 export type HandleProps = {
--- a/packages/system/src/types/nodes.ts
+++ b/packages/system/src/types/nodes.ts
@@ -1,4 +1,4 @@
-import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.';
+import type { XYPosition, Position, CoordinateExtent, Handle } from '.';
 import { Optional } from '../utils/types';

 /**
@@ -77,6 +77,7 @@ export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = NodeType &
     * Used as an optimization to avoid certain operations. */
    userNode: NodeType;
    handleBounds?: NodeHandleBounds;
+    bounds?: NodeBounds;
  };
 };

@@ -110,8 +111,8 @@ export type NodeProps<NodeType extends NodeBase> = Pick<
  };

 export type NodeHandleBounds = {
-  source: HandleElement[] | null;
-  target: HandleElement[] | null;
+  source: Handle[] | null;
+  target: Handle[] | null;
 };

 export type InternalNodeUpdate = {
@@ -148,9 +149,9 @@ export type NodeOrigin = [number, number];

 export type OnSelectionDrag = (event: MouseEvent, nodes: NodeBase[]) => void;

-export type NodeHandle = Optional<HandleElement, 'width' | 'height'>;
+export type NodeHandle = Omit<Optional<Handle, 'width' | 'height'>, 'nodeId'>;

 export type Align = 'center' | 'start' | 'end';

 export type NodeLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, NodeType>;
-export type ParentLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, NodeType[]>;
+export type ParentLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, Map<string, NodeType>>;
--- a/packages/system/src/types/utils.ts
+++ b/packages/system/src/types/utils.ts
@@ -5,6 +5,13 @@ export enum Position {
  Bottom = 'bottom',
 }

+export const oppositePosition = {
+  [Position.Left]: Position.Right,
+  [Position.Right]: Position.Left,
+  [Position.Top]: Position.Bottom,
+  [Position.Bottom]: Position.Top,
+};
+
 export type XYPosition = {
  x: number;
  y: number;
--- a/packages/system/src/utils/connections.ts
+++ b/packages/system/src/utils/connections.ts
@@ -51,3 +51,7 @@ export function handleConnectionChange(
    cb(diff);
  }
 }
+
+export function getConnectionStatus(isValid: boolean | null) {
+  return isValid === null ? null : isValid ? 'valid' : 'invalid';
+}
--- a/packages/system/src/utils/dom.ts
+++ b/packages/system/src/utils/dom.ts
@@ -1,4 +1,4 @@
-import type { Transform, XYPosition, SnapGrid, Dimensions, NodeOrigin, HandleElement, Position } from '../types';
+import type { Transform, XYPosition, SnapGrid, Dimensions, Position, Handle } from '../types';
 import { snapPosition, pointToRendererPoint } from './general';

 export type GetPointerPositionParams = {
@@ -59,35 +59,29 @@ export const getEventPosition = (event: MouseEvent | TouchEvent, bounds?: DOMRec
 // We store them in the internals object of the node in order to avoid
 // unnecessary recalculations.
 export const getHandleBounds = (
-  selector: string,
+  type: 'source' | 'target',
  nodeElement: HTMLDivElement,
+  nodeBounds: DOMRect,
  zoom: number,
-  nodeOrigin: NodeOrigin = [0, 0]
-): HandleElement[] | null => {
-  const handles = nodeElement.querySelectorAll(selector);
+  nodeId: string
+): Handle[] | null => {
+  const handles = nodeElement.querySelectorAll(`.${type}`);

  if (!handles || !handles.length) {
    return null;
  }

-  const handlesArray = Array.from(handles) as HTMLDivElement[];
-
-  // @todo can't we use the node dimensions here?
-  const nodeBounds = nodeElement.getBoundingClientRect();
-  const nodeOffset = {
-    x: nodeBounds.width * nodeOrigin[0],
-    y: nodeBounds.height * nodeOrigin[1],
-  };
-
-  return handlesArray.map((handle): HandleElement => {
+  return Array.from(handles).map((handle): Handle => {
    const handleBounds = handle.getBoundingClientRect();

    return {
      id: handle.getAttribute('data-handleid'),
+      type,
+      nodeId,
      position: handle.getAttribute('data-handlepos') as unknown as Position,
-      x: (handleBounds.left - nodeBounds.left - nodeOffset.x) / zoom,
-      y: (handleBounds.top - nodeBounds.top - nodeOffset.y) / zoom,
-      ...getDimensions(handle),
+      x: (handleBounds.left - nodeBounds.left) / zoom,
+      y: (handleBounds.top - nodeBounds.top) / zoom,
+      ...getDimensions(handle as HTMLDivElement),
    };
  });
 };
--- a/packages/system/src/utils/edges/general.ts
+++ b/packages/system/src/utils/edges/general.ts
@@ -132,23 +132,23 @@ export const addEdge = <EdgeType extends EdgeBase>(
  return edges.concat(edge);
 };

-export type UpdateEdgeOptions = {
+export type ReconnectEdgeOptions = {
  shouldReplaceId?: boolean;
 };

 /**
- * A handy utility to update an existing Edge with new properties
+ * A handy utility to reconnect an existing edge with new properties
 * @param oldEdge - The edge you want to update
 * @param newConnection - The new connection you want to update the edge with
 * @param edges - The array of all current edges
 * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
 * @returns the updated edges array
 */
-export const updateEdge = <EdgeType extends EdgeBase>(
+export const reconnectEdge = <EdgeType extends EdgeBase>(
  oldEdge: EdgeType,
  newConnection: Connection,
  edges: EdgeType[],
-  options: UpdateEdgeOptions = { shouldReplaceId: true }
+  options: ReconnectEdgeOptions = { shouldReplaceId: true }
 ): EdgeType[] => {
  const { id: oldEdgeId, ...rest } = oldEdge;

--- a/packages/system/src/utils/edges/positions.ts
+++ b/packages/system/src/utils/edges/positions.ts
@@ -1,9 +1,9 @@
 import { EdgePosition } from '../../types/edges';
 import { ConnectionMode, OnError } from '../../types/general';
 import { InternalNodeBase, NodeHandle } from '../../types/nodes';
-import { Position } from '../../types/utils';
+import { Position, XYPosition } from '../../types/utils';
 import { errorMessages } from '../../constants';
-import { HandleElement } from '../../types';
+import { Handle } from '../../types';
 import { getNodeDimensions } from '../general';

 export type GetEdgePositionParams = {
@@ -42,8 +42,6 @@ export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | n
      : (targetHandleBounds?.target ?? []).concat(targetHandleBounds?.source ?? []),
    params.targetHandle
  );
-  const sourcePosition = sourceHandle?.position || Position.Bottom;
-  const targetPosition = targetHandle?.position || Position.Top;

  if (!sourceHandle || !targetHandle) {
    params.onError?.(
@@ -58,14 +56,16 @@ export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | n
    return null;
  }

-  const [sourceX, sourceY] = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
-  const [targetX, targetY] = getHandlePosition(targetPosition, targetNode, targetHandle);
+  const sourcePosition = sourceHandle?.position || Position.Bottom;
+  const targetPosition = targetHandle?.position || Position.Top;
+  const source = getHandlePosition(sourceNode, sourceHandle, sourcePosition);
+  const target = getHandlePosition(targetNode, targetHandle, targetPosition);

  return {
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
+    sourceX: source.x,
+    sourceY: source.y,
+    targetX: target.x,
+    targetY: target.y,
    sourcePosition,
    targetPosition,
  };
@@ -84,9 +84,9 @@ function toHandleBounds(handles?: NodeHandle[]) {
    handle.height = handle.height ?? 1;

    if (handle.type === 'source') {
-      source.push(handle as HandleElement);
+      source.push(handle as Handle);
    } else if (handle.type === 'target') {
-      target.push(handle as HandleElement);
+      target.push(handle as Handle);
    }
  }

@@ -96,24 +96,35 @@ function toHandleBounds(handles?: NodeHandle[]) {
  };
 }

-function getHandlePosition(position: Position, node: InternalNodeBase, handle: HandleElement | null = null): number[] {
+export function getHandlePosition(
+  node: InternalNodeBase,
+  handle: Handle | null,
+  fallbackPosition: Position = Position.Left,
+  center = false
+): XYPosition {
  const x = (handle?.x ?? 0) + node.internals.positionAbsolute.x;
  const y = (handle?.y ?? 0) + node.internals.positionAbsolute.y;
  const { width, height } = handle ?? getNodeDimensions(node);

+  if (center) {
+    return { x: x + width / 2, y: y + height / 2 };
+  }
+
+  const position = handle?.position ?? fallbackPosition;
+
  switch (position) {
    case Position.Top:
-      return [x + width / 2, y];
+      return { x: x + width / 2, y };
    case Position.Right:
-      return [x + width, y + height / 2];
+      return { x: x + width, y: y + height / 2 };
    case Position.Bottom:
-      return [x + width / 2, y + height];
+      return { x: x + width / 2, y: y + height };
    case Position.Left:
-      return [x, y + height / 2];
+      return { x, y: y + height / 2 };
  }
 }

-function getHandle(bounds: HandleElement[], handleId?: string | null): HandleElement | null {
+function getHandle(bounds: Handle[], handleId?: string | null): Handle | null {
  if (!bounds) {
    return null;
  }
--- a/packages/system/src/utils/general.ts
+++ b/packages/system/src/utils/general.ts
@@ -12,7 +12,7 @@ import type {
  NodeLookup,
 } from '../types';
 import { type Viewport } from '../types';
-import { getNodePositionWithOrigin } from './graph';
+import { getNodePositionWithOrigin, isInternalNodeBase } from './graph';

 export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max);

@@ -68,24 +68,28 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
 });

 export const nodeToRect = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Rect => {
-  const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
+  const { x, y } = isInternalNodeBase(node)
+    ? node.internals.positionAbsolute
+    : getNodePositionWithOrigin(node, nodeOrigin);

  return {
    x,
    y,
-    width: node.measured?.width ?? node.width ?? 0,
-    height: node.measured?.height ?? node.height ?? 0,
+    width: node.measured?.width ?? node.width ?? node.initialWidth ?? 0,
+    height: node.measured?.height ?? node.height ?? node.initialHeight ?? 0,
  };
 };

 export const nodeToBox = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Box => {
-  const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
+  const { x, y } = isInternalNodeBase(node)
+    ? node.internals.positionAbsolute
+    : getNodePositionWithOrigin(node, nodeOrigin);

  return {
    x,
    y,
-    x2: x + (node.measured?.width ?? node.width ?? 0),
-    y2: y + (node.measured?.height ?? node.height ?? 0),
+    x2: x + (node.measured?.width ?? node.width ?? node.initialWidth ?? 0),
+    y2: y + (node.measured?.height ?? node.height ?? node.initialHeight ?? 0),
  };
 };

@@ -114,29 +118,6 @@ export const devWarn = (id: string, message: string) => {
  }
 };

-export const getPositionWithOrigin = ({
-  x,
-  y,
-  width,
-  height,
-  origin = [0, 0],
-}: {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  origin?: NodeOrigin;
-}): XYPosition => {
-  if (!width || !height || origin[0] < 0 || origin[1] < 0 || origin[0] > 1 || origin[1] > 1) {
-    return { x, y };
-  }
-
-  return {
-    x: x - width * origin[0],
-    y: y - height * origin[1],
-  };
-};
-
 export const snapPosition = (position: XYPosition, snapGrid: SnapGrid = [1, 1]): XYPosition => {
  return {
    x: snapGrid[0] * Math.round(position.x / snapGrid[0]),
@@ -239,9 +220,10 @@ export function nodeHasDimensions<NodeType extends NodeBase = NodeBase>(node: No
 */
 export function evaluateAbsolutePosition(
  position: XYPosition,
+  dimensions: { width?: number; height?: number } = { width: 0, height: 0 },
  parentId: string,
  nodeLookup: NodeLookup,
-  nodeOrigin: NodeOrigin = [0, 0]
+  nodeOrigin: NodeOrigin
 ): XYPosition {
  let nextParentId: string | undefined = parentId;
  const positionAbsolute = { ...position };
@@ -252,10 +234,8 @@ export function evaluateAbsolutePosition(

    if (parent) {
      const origin = parent.origin || nodeOrigin;
-      const xOffset = (parent.measured.width ?? 0) * origin[0];
-      const yOffset = (parent.measured.height ?? 0) * origin[1];
-      positionAbsolute.x += parent.position.x - xOffset;
-      positionAbsolute.y += parent.position.y - yOffset;
+      positionAbsolute.x += parent.internals.positionAbsolute.x - (dimensions.width ?? 0) * origin[0];
+      positionAbsolute.y += parent.internals.positionAbsolute.y - (dimensions.height ?? 0) * origin[1];
    }
  }

--- a/packages/system/src/utils/graph.ts
+++ b/packages/system/src/utils/graph.ts
@@ -106,25 +106,15 @@ export const getIncomers = <NodeType extends NodeBase = NodeBase, EdgeType exten
  return nodes.filter((n) => incomersIds.has(n.id));
 };

-export const getNodePositionWithOrigin = (
-  node: InternalNodeBase | NodeBase,
-  nodeOrigin: NodeOrigin = [0, 0]
-): { position: XYPosition; positionAbsolute: XYPosition } => {
+export const getNodePositionWithOrigin = (node: NodeBase, nodeOrigin: NodeOrigin = [0, 0]): XYPosition => {
  const { width, height } = getNodeDimensions(node);
-  const positionAbsolute = 'internals' in node ? node.internals.positionAbsolute : node.position;
-  const origin = node.origin || nodeOrigin;
+  const origin = node.origin ?? nodeOrigin;
  const offsetX = width * origin[0];
  const offsetY = height * origin[1];

  return {
-    position: {
-      x: node.position.x - offsetX,
-      y: node.position.y - offsetY,
-    },
-    positionAbsolute: {
-      x: positionAbsolute.x - offsetX,
-      y: positionAbsolute.y - offsetY,
-    },
+    x: node.position.x - offsetX,
+    y: node.position.y - offsetY,
  };
 };

@@ -157,7 +147,6 @@ export const getNodesBounds = (nodes: NodeBase[], params: GetNodesBoundsParams =
 };

 export type GetInternalNodesBoundsParams<NodeType> = {
-  nodeOrigin?: NodeOrigin;
  useRelativePosition?: boolean;
  filter?: (node: NodeType) => boolean;
 };
@@ -168,9 +157,7 @@ export type GetInternalNodesBoundsParams<NodeType> = {
 */
 export const getInternalNodesBounds = <NodeType extends InternalNodeBase | NodeDragItem>(
  nodeLookup: Map<string, NodeType>,
-  params: GetInternalNodesBoundsParams<NodeType> = {
-    nodeOrigin: [0, 0],
-  }
+  params: GetInternalNodesBoundsParams<NodeType> = {}
 ): Rect => {
  if (nodeLookup.size === 0) {
    return { x: 0, y: 0, width: 0, height: 0 };
@@ -179,8 +166,8 @@ export const getInternalNodesBounds = <NodeType extends InternalNodeBase | NodeD
  let box = { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity };

  nodeLookup.forEach((node) => {
-    if (params.filter == undefined || params.filter(node)) {
-      const nodeBox = nodeToBox(node as InternalNodeBase, params.nodeOrigin);
+    if (params.filter === undefined || params.filter(node)) {
+      const nodeBox = nodeToBox(node as InternalNodeBase);
      box = getBoundsOfBoxes(box, nodeBox);
    }
  });
@@ -194,8 +181,7 @@ export const getNodesInside = <NodeType extends NodeBase = NodeBase>(
  [tx, ty, tScale]: Transform = [0, 0, 1],
  partially = false,
  // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
-  excludeNonSelectableNodes = false,
-  nodeOrigin: NodeOrigin = [0, 0]
+  excludeNonSelectableNodes = false
 ): InternalNodeBase<NodeType>[] => {
  const paneRect = {
    ...pointToRendererPoint(rect, [tx, ty, tScale]),
@@ -214,7 +200,7 @@ export const getNodesInside = <NodeType extends NodeBase = NodeBase>(
      continue;
    }

-    const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node, nodeOrigin));
+    const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node));
    const notInitialized = width === null || height === null;

    const partiallyVisible = partially && overlappingArea > 0;
@@ -248,22 +234,22 @@ export const getConnectedEdges = <NodeType extends NodeBase = NodeBase, EdgeType
 };

 export function fitView<Params extends FitViewParamsBase<NodeBase>, Options extends FitViewOptionsBase<NodeBase>>(
-  { nodeLookup, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }: Params,
+  { nodeLookup, width, height, panZoom, minZoom, maxZoom }: Params,
  options?: Options
 ) {
-  const filteredNodes: InternalNodeBase[] = [];
+  const filteredNodes: Map<string, InternalNodeBase> = new Map();
  const optionNodeIds = options?.nodes ? new Set(options.nodes.map((node) => node.id)) : null;

  nodeLookup.forEach((n) => {
    const isVisible = n.measured.width && n.measured.height && (options?.includeHiddenNodes || !n.hidden);

    if (isVisible && (!optionNodeIds || optionNodeIds.has(n.id))) {
-      filteredNodes.push(n);
+      filteredNodes.set(n.id, n);
    }
  });

-  if (filteredNodes.length > 0) {
-    const bounds = getNodesBounds(filteredNodes, { nodeOrigin });
+  if (filteredNodes.size > 0) {
+    const bounds = getInternalNodesBounds(filteredNodes);

    const viewport = getViewportForBounds(
      bounds,
@@ -323,9 +309,8 @@ export function calculateNodePosition<NodeType extends NodeBase>({
 }): { position: XYPosition; positionAbsolute: XYPosition } {
  const node = nodeLookup.get(nodeId)!;
  const parentNode = node.parentId ? nodeLookup.get(node.parentId) : undefined;
-  const { x: parentX, y: parentY } = parentNode
-    ? getNodePositionWithOrigin(parentNode, parentNode.origin || nodeOrigin).positionAbsolute
-    : { x: 0, y: 0 };
+  const { x: parentX, y: parentY } = parentNode ? parentNode.internals.positionAbsolute : { x: 0, y: 0 };
+  const origin = node.origin ?? nodeOrigin;

  let currentExtent = clampNodeExtent(node, node.extent || nodeExtent);

@@ -339,13 +324,9 @@ export function calculateNodePosition<NodeType extends NodeBase>({
      const parentHeight = parentNode.measured.height;

      if (nodeWidth && nodeHeight && parentWidth && parentHeight) {
-        const currNodeOrigin = node.origin || nodeOrigin;
-        const extentX = parentX + nodeWidth * currNodeOrigin[0];
-        const extentY = parentY + nodeHeight * currNodeOrigin[1];
-
        currentExtent = [
-          [extentX, extentY],
-          [extentX + parentWidth - nodeWidth, extentY + parentHeight - nodeHeight],
+          [parentX, parentY],
+          [parentX + parentWidth - nodeWidth, parentY + parentHeight - nodeHeight],
        ];
      }
    }
@@ -362,8 +343,9 @@ export function calculateNodePosition<NodeType extends NodeBase>({

  return {
    position: {
-      x: positionAbsolute.x - parentX,
-      y: positionAbsolute.y - parentY,
+      // TODO: is there a better way to do this?
+      x: positionAbsolute.x - parentX + node.measured.width! * origin[0],
+      y: positionAbsolute.y - parentY + node.measured.height! * origin[1],
    },
    positionAbsolute,
  };
--- a/packages/system/src/utils/store.ts
+++ b/packages/system/src/utils/store.ts
@@ -6,7 +6,6 @@ import {
  PanZoomInstance,
  Transform,
  XYPosition,
-  XYZPosition,
  ConnectionLookup,
  EdgeBase,
  EdgeLookup,
@@ -22,48 +21,28 @@ import { getBoundsOfRects, getNodeDimensions, isNumeric, nodeToRect } from './ge
 import { getNodePositionWithOrigin } from './graph';
 import { ParentExpandChild } from './types';

+const defaultOptions = {
+  nodeOrigin: [0, 0] as NodeOrigin,
+  elevateNodesOnSelect: true,
+  defaults: {},
+};
+const adoptUserNodesDefaultOptions = {
+  ...defaultOptions,
+  checkEquality: true,
+};
+
 export function updateAbsolutePositions<NodeType extends NodeBase>(
-  nodeLookup: Map<string, InternalNodeBase<NodeType>>,
-  options: UpdateNodesOptions<NodeType> = {
-    nodeOrigin: [0, 0] as NodeOrigin,
-    elevateNodesOnSelect: true,
-    defaults: {},
-  }
+  nodeLookup: NodeLookup<InternalNodeBase<NodeType>>,
+  parentLookup: ParentLookup<InternalNodeBase<NodeType>>,
+  options?: UpdateNodesOptions<NodeType>
 ) {
-  const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
-
-  for (const [, node] of nodeLookup) {
-    const parentId = node.parentId;
-
-    if (!parentId) {
+  const _options = { ...defaultOptions, ...options };
+  for (const node of nodeLookup.values()) {
+    if (!node.parentId) {
      continue;
    }

-    if (!nodeLookup.has(parentId)) {
-      throw new Error(`Parent node ${parentId} not found`);
-    }
-
-    const parentNode = nodeLookup.get(parentId);
-    const { x, y, z } = calculateXYZPosition(
-      node,
-      nodeLookup,
-      {
-        ...node.position,
-        z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
-      },
-      parentNode?.origin ?? options.nodeOrigin
-    );
-
-    const currPosition = node.internals.positionAbsolute;
-    const positionChanged = x !== currPosition.x || y !== currPosition.y;
-
-    if (positionChanged || z !== node.internals.z) {
-      node.internals = {
-        ...node.internals,
-        positionAbsolute: positionChanged ? { x, y } : currPosition,
-        z,
-      };
-    }
+    updateChildPosition(node, nodeLookup, parentLookup, _options);
  }
 }

@@ -76,38 +55,33 @@ type UpdateNodesOptions<NodeType extends NodeBase> = {

 export function adoptUserNodes<NodeType extends NodeBase>(
  nodes: NodeType[],
-  nodeLookup: Map<string, InternalNodeBase<NodeType>>,
-  parentLookup: Map<string, InternalNodeBase<NodeType>[]>,
-  options: UpdateNodesOptions<NodeType> = {
-    nodeOrigin: [0, 0] as NodeOrigin,
-    elevateNodesOnSelect: true,
-    defaults: {},
-    checkEquality: true,
-  }
+  nodeLookup: NodeLookup<InternalNodeBase<NodeType>>,
+  parentLookup: ParentLookup<InternalNodeBase<NodeType>>,
+  options?: UpdateNodesOptions<NodeType>
 ) {
+  const _options = { ...adoptUserNodesDefaultOptions, ...options };
  const tmpLookup = new Map(nodeLookup);
  nodeLookup.clear();
  parentLookup.clear();

  const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;

-  nodes.forEach((userNode) => {
+  for (const userNode of nodes) {
    let internalNode = tmpLookup.get(userNode.id);
-
-    if (options.checkEquality && userNode === internalNode?.internals.userNode) {
+    if (_options.checkEquality && userNode === internalNode?.internals.userNode) {
      nodeLookup.set(userNode.id, internalNode);
    } else {
      internalNode = {
-        ...options.defaults,
+        ..._options.defaults,
        ...userNode,
        measured: {
          width: userNode.measured?.width,
          height: userNode.measured?.height,
        },
        internals: {
-          positionAbsolute: userNode.position,
+          positionAbsolute: getNodePositionWithOrigin(userNode, _options.nodeOrigin),
          handleBounds: internalNode?.internals.handleBounds,
-          z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0),
+          z: calculateZ(userNode, selectedNodeZ),
          userNode,
        },
      };
@@ -115,50 +89,75 @@ export function adoptUserNodes<NodeType extends NodeBase>(
    }

    if (userNode.parentId) {
-      const childNodes = parentLookup.get(userNode.parentId);
-      if (childNodes) {
-        childNodes.push(internalNode);
-      } else {
-        parentLookup.set(userNode.parentId, [internalNode]);
-      }
+      updateChildPosition(internalNode, nodeLookup, parentLookup, options);
    }
-  });
-
-  if (parentLookup.size > 0) {
-    updateAbsolutePositions(nodeLookup, options);
  }
 }

-function calculateXYZPosition<NodeType extends NodeBase>(
-  node: NodeType,
-  nodeLookup: Map<string, InternalNodeBase<NodeType>>,
-  result: XYZPosition,
-  nodeOrigin: NodeOrigin = [0, 0]
-): XYZPosition {
-  if (!node.parentId) {
-    return result;
+function updateChildPosition<NodeType extends NodeBase>(
+  node: InternalNodeBase<NodeType>,
+  nodeLookup: NodeLookup<InternalNodeBase<NodeType>>,
+  parentLookup: ParentLookup<InternalNodeBase<NodeType>>,
+  options?: UpdateNodesOptions<NodeType>
+) {
+  const _options = { ...defaultOptions, ...options };
+
+  const parentId = node.parentId!;
+  const parentNode = nodeLookup.get(parentId);
+  if (!parentNode) {
+    throw new Error(`Parent node ${parentId} not found`);
  }

-  const parent = nodeLookup.get(node.parentId)!;
-  const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin).position;
+  // update the parentLookup
+  const childNodes = parentLookup.get(parentId);
+  if (childNodes) {
+    childNodes.set(node.id, node);
+  } else {
+    parentLookup.set(parentId, new Map([[node.id, node]]));
+  }

-  return calculateXYZPosition(
-    parent,
-    nodeLookup,
-    {
-      x: (result.x ?? 0) + parentPosition.x,
-      y: (result.y ?? 0) + parentPosition.y,
-      z: (parent.internals.z ?? 0) > (result.z ?? 0) ? parent.internals.z ?? 0 : result.z ?? 0,
-    },
-    parent.origin || nodeOrigin
-  );
+  const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
+
+  const { x, y, z } = calculateChildXYZ(node, parentNode, _options.nodeOrigin!, selectedNodeZ);
+
+  const currPosition = node.internals.positionAbsolute;
+  const positionChanged = x !== currPosition.x || y !== currPosition.y;
+
+  if (positionChanged || z !== node.internals.z) {
+    node.internals = {
+      ...node.internals,
+      positionAbsolute: positionChanged ? { x, y } : currPosition,
+      z,
+    };
+  }
+}
+
+function calculateZ(node: NodeBase, selectedNodeZ: number) {
+  return (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
+}
+
+function calculateChildXYZ<NodeType extends NodeBase>(
+  childNode: InternalNodeBase<NodeType>,
+  parentNode: InternalNodeBase<NodeType>,
+  nodeOrigin: NodeOrigin,
+  selectedNodeZ: number
+) {
+  const position = getNodePositionWithOrigin(childNode, nodeOrigin);
+  const childZ = calculateZ(childNode, selectedNodeZ);
+  const parentZ = parentNode.internals.z ?? 0;
+
+  return {
+    x: parentNode.internals.positionAbsolute.x + position.x,
+    y: parentNode.internals.positionAbsolute.y + position.y,
+    z: parentZ > childZ ? parentZ : childZ,
+  };
 }

 export function handleExpandParent(
  children: ParentExpandChild[],
  nodeLookup: NodeLookup,
  parentLookup: ParentLookup,
-  nodeOrigin?: NodeOrigin
+  nodeOrigin: NodeOrigin = [0, 0]
 ): (NodeDimensionChange | NodePositionChange)[] {
  const changes: (NodeDimensionChange | NodePositionChange)[] = [];
  const parentExpansions = new Map<string, { expandedRect: Rect; parent: InternalNodeBase }>();
@@ -170,36 +169,45 @@ export function handleExpandParent(
      continue;
    }

-    const parentRect =
-      parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent, parent.origin ?? nodeOrigin);
+    const parentRect = parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent);
    const expandedRect = getBoundsOfRects(parentRect, child.rect);
+
    parentExpansions.set(child.parentId, { expandedRect, parent });
  }

  if (parentExpansions.size > 0) {
    parentExpansions.forEach(({ expandedRect, parent }, parentId) => {
      // determine the position & dimensions of the parent
-      const { position } = getNodePositionWithOrigin(parent, parent.origin);
+      const positionAbsolute = parent.internals.positionAbsolute;
      const dimensions = getNodeDimensions(parent);
+      const origin = parent.origin ?? nodeOrigin;

-      // determine how much the parent expands by moving the position
-      const xChange = expandedRect.x < position.x ? Math.round(Math.abs(position.x - expandedRect.x)) : 0;
-      const yChange = expandedRect.y < position.y ? Math.round(Math.abs(position.y - expandedRect.y)) : 0;
+      // determine how much the parent expands in width and position
+      const xChange =
+        expandedRect.x < positionAbsolute.x ? Math.round(Math.abs(positionAbsolute.x - expandedRect.x)) : 0;
+      const yChange =
+        expandedRect.y < positionAbsolute.y ? Math.round(Math.abs(positionAbsolute.y - expandedRect.y)) : 0;

-      if (xChange > 0 || yChange > 0) {
+      const newWidth = Math.max(dimensions.width, Math.round(expandedRect.width));
+      const newHeight = Math.max(dimensions.height, Math.round(expandedRect.height));
+
+      const widthChange = (newWidth - dimensions.width) * origin[0];
+      const heightChange = (newHeight - dimensions.height) * origin[1];
+
+      // We need to correct the position of the parent node if the origin is not [0,0]
+      if (xChange > 0 || yChange > 0 || widthChange || heightChange) {
        changes.push({
          id: parentId,
          type: 'position',
          position: {
-            x: position.x - xChange,
-            y: position.y - yChange,
+            x: parent.position.x - xChange + widthChange,
+            y: parent.position.y - yChange + heightChange,
          },
        });

        // We move all child nodes in the oppsite direction
        // so the x,y changes of the parent do not move the children
-        const childNodes = parentLookup.get(parentId);
-        childNodes?.forEach((childNode) => {
+        parentLookup.get(parentId)?.forEach((childNode) => {
          if (!children.some((child) => child.id === childNode.id)) {
            changes.push({
              id: childNode.id,
@@ -213,14 +221,15 @@ export function handleExpandParent(
        });
      }

-      if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height) {
+      // We need to correct the dimensions of the parent node if the origin is not [0,0]
+      if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height || xChange || yChange) {
        changes.push({
          id: parentId,
          type: 'dimensions',
          setAttributes: true,
          dimensions: {
-            width: Math.max(dimensions.width, Math.round(expandedRect.width)),
-            height: Math.max(dimensions.height, Math.round(expandedRect.height)),
+            width: newWidth + (xChange ? origin[0] * xChange - widthChange : 0),
+            height: newHeight + (yChange ? origin[1] * yChange - heightChange : 0),
          },
        });
      }
@@ -250,16 +259,19 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
  // in this array we collect nodes, that might trigger changes (like expanding parent)
  const parentExpandChildren: ParentExpandChild[] = [];

-  updates.forEach((update) => {
+  for (const update of updates.values()) {
    const node = nodeLookup.get(update.id);
+    if (!node) {
+      continue;
+    }

-    if (node?.hidden) {
+    if (node.hidden) {
      node.internals = {
        ...node.internals,
        handleBounds: undefined,
      };
      updatedInternals = true;
-    } else if (node) {
+    } else {
      const dimensions = getDimensions(update.nodeElement);
      const dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;
      const doUpdate = !!(
@@ -269,14 +281,20 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
      );

      if (doUpdate) {
+        const nodeBounds = update.nodeElement.getBoundingClientRect();
+
        node.measured = dimensions;
        node.internals = {
          ...node.internals,
+          positionAbsolute: getNodePositionWithOrigin(node, nodeOrigin),
          handleBounds: {
-            source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin),
-            target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin),
+            source: getHandleBounds('source', update.nodeElement, nodeBounds, zoom, node.id),
+            target: getHandleBounds('target', update.nodeElement, nodeBounds, zoom, node.id),
          },
        };
+        if (node.parentId) {
+          updateChildPosition(node, nodeLookup, parentLookup, { nodeOrigin });
+        }

        updatedInternals = true;

@@ -297,7 +315,7 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
        }
      }
    }
-  });
+  }

  if (parentExpandChildren.length > 0) {
    const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
--- a/packages/system/src/xydrag/XYDrag.ts
+++ b/packages/system/src/xydrag/XYDrag.ts
@@ -100,6 +100,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
  let containerBounds: DOMRect | null = null;
  let dragStarted = false;
  let d3Selection: Selection<Element, unknown, null, undefined> | null = null;
+  let abortDrag = false; // prevents unintentional dragging on multitouch

  // public functions
  function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }: DragUpdateParams) {
@@ -123,13 +124,12 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
      let nodesBox: Box = { x: 0, y: 0, x2: 0, y2: 0 };

      if (dragItems.size > 1 && nodeExtent) {
-        const rect = getInternalNodesBounds(dragItems, { nodeOrigin });
+        const rect = getInternalNodesBounds(dragItems);
        nodesBox = rectToBox(rect);
      }

      for (const [id, dragItem] of dragItems) {
        let nextPosition = { x: x - dragItem.distance.x, y: y - dragItem.distance.y };
-
        if (snapToGrid) {
          nextPosition = snapPosition(nextPosition, snapGrid);
        }
@@ -264,6 +264,8 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
      .on('start', (event: UseDragEvent) => {
        const { domNode, nodeDragThreshold, transform, snapGrid, snapToGrid } = getStoreItems();

+        abortDrag = false;
+
        if (nodeDragThreshold === 0) {
          startDrag(event);
        }
@@ -277,6 +279,14 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
        const { autoPanOnNodeDrag, transform, snapGrid, snapToGrid, nodeDragThreshold } = getStoreItems();
        const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });

+        if (event.sourceEvent.type === 'touchmove' && event.sourceEvent.touches.length > 1) {
+          abortDrag = true;
+        }
+
+        if (abortDrag) {
+          return;
+        }
+
        if (!autoPanStarted && autoPanOnNodeDrag && dragStarted) {
          autoPanStarted = true;
          autoPan();
@@ -301,7 +311,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
        }
      })
      .on('end', (event: UseDragEvent) => {
-        if (!dragStarted) {
+        if (!dragStarted || abortDrag) {
          return;
        }

--- a/packages/system/src/xyhandle/XYHandle.ts
+++ b/packages/system/src/xyhandle/XYHandle.ts
@@ -1,74 +1,25 @@
-import { pointToRendererPoint, rendererPointToPoint, getHostForElement, calcAutoPan, getEventPosition } from '../utils';
+import {
+  pointToRendererPoint,
+  getHostForElement,
+  calcAutoPan,
+  getEventPosition,
+  getHandlePosition,
+  rendererPointToPoint,
+} from '../utils';
 import {
  ConnectionMode,
-  type OnConnect,
-  type OnConnectStart,
-  type HandleType,
+  Position,
+  oppositePosition,
+  ConnectionInProgress,
+  type Handle,
  type Connection,
-  type PanBy,
-  type Transform,
-  type ConnectingHandle,
-  type OnConnectEnd,
-  type UpdateConnection,
-  type IsValidConnection,
-  type ConnectionHandle,
-  NodeLookup,
 } from '../types';

-import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType } from './utils';
-
-export type OnPointerDownParams = {
-  autoPanOnConnect: boolean;
-  connectionMode: ConnectionMode;
-  connectionRadius: number;
-  domNode: HTMLDivElement | null;
-  handleId: string | null;
-  nodeId: string;
-  isTarget: boolean;
-  nodeLookup: NodeLookup;
-  lib: string;
-  flowId: string | null;
-  edgeUpdaterType?: HandleType;
-  updateConnection: UpdateConnection;
-  panBy: PanBy;
-  cancelConnection: () => void;
-  onConnectStart?: OnConnectStart;
-  onConnect?: OnConnect;
-  onConnectEnd?: OnConnectEnd;
-  isValidConnection?: IsValidConnection;
-  onEdgeUpdateEnd?: (evt: MouseEvent | TouchEvent) => void;
-  getTransform: () => Transform;
-  getConnectionStartHandle: () => ConnectingHandle | null;
-};
-
-export type IsValidParams = {
-  handle: Pick<ConnectionHandle, 'nodeId' | 'id' | 'type'> | null;
-  connectionMode: ConnectionMode;
-  fromNodeId: string;
-  fromHandleId: string | null;
-  fromType: HandleType;
-  isValidConnection?: IsValidConnection;
-  doc: Document | ShadowRoot;
-  lib: string;
-  flowId: string | null;
-};
-
-export type XYHandleInstance = {
-  onPointerDown: (event: MouseEvent | TouchEvent, params: OnPointerDownParams) => void;
-  isValid: (event: MouseEvent | TouchEvent, params: IsValidParams) => Result;
-};
-
-type Result = {
-  handleDomNode: Element | null;
-  isValid: boolean;
-  connection: Connection | null;
-  endHandle: ConnectingHandle | null;
-};
+import { getClosestHandle, isConnectionValid, getHandleLookup, getHandleType } from './utils';
+import { IsValidParams, OnPointerDownParams, Result, XYHandleInstance } from './types';

 const alwaysValid = () => true;

-let connectionStartHandle: ConnectingHandle | null = null;
-
 function onPointerDown(
  event: MouseEvent | TouchEvent,
  {
@@ -89,16 +40,16 @@ function onPointerDown(
    onConnect,
    onConnectEnd,
    isValidConnection = alwaysValid,
-    onEdgeUpdateEnd,
+    onReconnectEnd,
    updateConnection,
    getTransform,
-    getConnectionStartHandle,
+    getFromHandle,
  }: OnPointerDownParams
 ) {
  // when xyflow is used inside a shadow root we can't use document
  const doc = getHostForElement(event.target as HTMLElement);
  let autoPanId = 0;
-  let closestHandle: ConnectionHandle | null;
+  let closestHandle: Handle | null;

  const { x, y } = getEventPosition(event);
  const clickedHandle = doc?.elementFromPoint(x, y);
@@ -109,13 +60,13 @@ function onPointerDown(
    return;
  }

-  let connectionPosition = getEventPosition(event, containerBounds);
+  let position = getEventPosition(event, containerBounds);
  let autoPanStarted = false;
  let connection: Connection | null = null;
-  let isValid = false;
+  let isValid: boolean | null = false;
  let handleDomNode: Element | null = null;

-  const handleLookup = getHandleLookup({
+  const [handleLookup, fromHandleInternal] = getHandleLookup({
    nodeLookup,
    nodeId,
    handleId,
@@ -127,38 +78,54 @@ function onPointerDown(
    if (!autoPanOnConnect || !containerBounds) {
      return;
    }
-    const [x, y] = calcAutoPan(connectionPosition, containerBounds);
+    const [x, y] = calcAutoPan(position, containerBounds);

    panBy({ x, y });
    autoPanId = requestAnimationFrame(autoPan);
  }

  // Stays the same for all consecutive pointermove events
-  connectionStartHandle = {
+  const fromHandle: Handle = {
+    ...fromHandleInternal,
    nodeId,
-    handleId,
    type: handleType,
+    position: fromHandleInternal.position,
  };

-  updateConnection({
-    connectionPosition,
-    connectionStatus: null,
-    // connectionNodeId etc will be removed in the next major in favor of connectionStartHandle
-    connectionStartHandle,
-    connectionEndHandle: null,
-  });
+  const fromNodeInternal = nodeLookup.get(nodeId)!;
+
+  const from = getHandlePosition(fromNodeInternal, fromHandle, Position.Left, true);
+
+  const newConnection: ConnectionInProgress = {
+    inProgress: true,
+    isValid: null,
+
+    from,
+    fromHandle,
+    fromPosition: fromHandle.position,
+    fromNode: fromNodeInternal.internals.userNode,
+
+    to: position,
+    toHandle: null,
+    toPosition: oppositePosition[fromHandle.position],
+    toNode: null,
+  };
+
+  updateConnection(newConnection);
+  let previousConnection: ConnectionInProgress = newConnection;

  onConnectStart?.(event, { nodeId, handleId, handleType });

  function onPointerMove(event: MouseEvent | TouchEvent) {
-    if (!getConnectionStartHandle()) {
+    if (!getFromHandle() || !fromHandle) {
      onPointerUp(event);
+      return;
    }

    const transform = getTransform();
-    connectionPosition = getEventPosition(event, containerBounds);
+    position = getEventPosition(event, containerBounds);
    closestHandle = getClosestHandle(
-      pointToRendererPoint(connectionPosition, transform, false, [1, 1]),
+      pointToRendererPoint(position, transform, false, [1, 1]),
      connectionRadius,
      handleLookup
    );
@@ -178,27 +145,41 @@ function onPointerDown(
      doc,
      lib,
      flowId,
+      handleLookup,
    });

    handleDomNode = result.handleDomNode;
    connection = result.connection;
-    isValid = result.isValid;
+    isValid = isConnectionValid(!!closestHandle, result.isValid);

-    updateConnection({
-      connectionStartHandle,
-      connectionPosition:
+    const newConnection: ConnectionInProgress = {
+      // from stays the same
+      ...previousConnection,
+      isValid,
+      to:
        closestHandle && isValid
-          ? rendererPointToPoint(
-              {
-                x: closestHandle.x,
-                y: closestHandle.y,
-              },
-              transform
-            )
-          : connectionPosition,
-      connectionStatus: getConnectionStatus(!!closestHandle, isValid),
-      connectionEndHandle: result.endHandle,
-    });
+          ? rendererPointToPoint({ x: closestHandle.x, y: closestHandle.y }, transform)
+          : position,
+      toHandle: result.toHandle,
+      toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
+      toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId)!.internals.userNode : null,
+    };
+
+    // we don't want to trigger an update when the connection
+    // is snapped to the same handle as before
+    if (
+      isValid &&
+      closestHandle &&
+      previousConnection.toHandle &&
+      newConnection.toHandle &&
+      previousConnection.toHandle.nodeId === newConnection.toHandle.nodeId &&
+      previousConnection.toHandle.id === newConnection.toHandle.id
+    ) {
+      return;
+    }
+
+    updateConnection(newConnection);
+    previousConnection = newConnection;
  }

  function onPointerUp(event: MouseEvent | TouchEvent) {
@@ -211,7 +192,7 @@ function onPointerDown(
    onConnectEnd?.(event);

    if (edgeUpdaterType) {
-      onEdgeUpdateEnd?.(event);
+      onReconnectEnd?.(event);
    }

    cancelConnection();
@@ -220,7 +201,6 @@ function onPointerDown(
    isValid = false;
    connection = null;
    handleDomNode = null;
-    connectionStartHandle = null;

    doc.removeEventListener('mousemove', onPointerMove as EventListener);
    doc.removeEventListener('mouseup', onPointerUp as EventListener);
@@ -249,6 +229,7 @@ function isValidHandle(
    lib,
    flowId,
    isValidConnection = alwaysValid,
+    handleLookup,
  }: IsValidParams
 ) {
  const isTarget = fromType === 'target';
@@ -266,7 +247,7 @@ function isValidHandle(
    handleDomNode: handleToCheck,
    isValid: false,
    connection: null,
-    endHandle: null,
+    toHandle: null,
  };

  if (handleToCheck) {
@@ -297,14 +278,18 @@ function isValidHandle(
        ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
        : handleNodeId !== fromNodeId || handleId !== fromHandleId);

-    if (isValid) {
-      result.endHandle = {
-        nodeId: handleNodeId as string,
-        handleId,
-        type: handleType as HandleType,
-      };
+    result.isValid = isValid && isValidConnection(connection);

-      result.isValid = isValidConnection(connection);
+    if (handleLookup) {
+      const toHandle = handleLookup.find(
+        (h) => h.id === handleId && h.nodeId === handleNodeId && h.type === handleType
+      );
+
+      if (toHandle) {
+        result.toHandle = {
+          ...toHandle,
+        };
+      }
    }
  }

--- a/packages/system/src/xyhandle/types.ts
+++ b/packages/system/src/xyhandle/types.ts
@@ -0,0 +1,63 @@
+import {
+  ConnectionMode,
+  type Connection,
+  type OnConnect,
+  type OnConnectStart,
+  type HandleType,
+  type PanBy,
+  type Transform,
+  type Handle,
+  type OnConnectEnd,
+  type UpdateConnection,
+  type IsValidConnection,
+  NodeLookup,
+} from '../types';
+
+export type OnPointerDownParams = {
+  autoPanOnConnect: boolean;
+  connectionMode: ConnectionMode;
+  connectionRadius: number;
+  domNode: HTMLDivElement | null;
+  handleId: string | null;
+  nodeId: string;
+  isTarget: boolean;
+  nodeLookup: NodeLookup;
+  lib: string;
+  flowId: string | null;
+  edgeUpdaterType?: HandleType;
+  updateConnection: UpdateConnection;
+  panBy: PanBy;
+  cancelConnection: () => void;
+  onConnectStart?: OnConnectStart;
+  onConnect?: OnConnect;
+  onConnectEnd?: OnConnectEnd;
+  isValidConnection?: IsValidConnection;
+  onReconnectEnd?: (evt: MouseEvent | TouchEvent) => void;
+  getTransform: () => Transform;
+  getFromHandle: () => Handle | null;
+};
+
+export type IsValidParams = {
+  handle: Pick<Handle, 'nodeId' | 'id' | 'type'> | null;
+  connectionMode: ConnectionMode;
+  fromNodeId: string;
+  fromHandleId: string | null;
+  fromType: HandleType;
+  isValidConnection?: IsValidConnection;
+  doc: Document | ShadowRoot;
+  lib: string;
+  flowId: string | null;
+  handleLookup?: Handle[];
+};
+
+export type XYHandleInstance = {
+  onPointerDown: (event: MouseEvent | TouchEvent, params: OnPointerDownParams) => void;
+  isValid: (event: MouseEvent | TouchEvent, params: IsValidParams) => Result;
+};
+
+export type Result = {
+  handleDomNode: Element | null;
+  isValid: boolean;
+  connection: Connection | null;
+  toHandle: Handle | null;
+};
--- a/packages/system/src/xyhandle/utils.ts
+++ b/packages/system/src/xyhandle/utils.ts
@@ -1,41 +1,36 @@
+import { getHandlePosition } from '../utils';
 import {
-  ConnectionStatus,
  type HandleType,
  type NodeHandleBounds,
  type XYPosition,
-  type ConnectionHandle,
+  type Handle,
  InternalNodeBase,
  NodeLookup,
 } from '../types';

 // this functions collects all handles and adds an absolute position
 // so that we can later find the closest handle to the mouse position
-export function getHandles(
+function getHandles(
  node: InternalNodeBase,
  handleBounds: NodeHandleBounds,
  type: HandleType,
-  currentHandle: string
-): ConnectionHandle[] {
-  return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, h) => {
-    if (`${node.id}-${h.id}-${type}` !== currentHandle) {
-      res.push({
-        id: h.id || null,
-        type,
-        nodeId: node.id,
-        x: node.internals.positionAbsolute.x + h.x + h.width / 2,
-        y: node.internals.positionAbsolute.y + h.y + h.height / 2,
-      });
+  currentHandle: { nodeId: string; handleId: string | null; handleType: HandleType }
+): [Handle[], Handle | null] {
+  let excludedHandle = null;
+  const handles = (handleBounds[type] || []).reduce<Handle[]>((res, handle) => {
+    if (node.id === currentHandle.nodeId && type === currentHandle.handleType && handle.id === currentHandle.handleId) {
+      excludedHandle = handle;
+    } else {
+      const handleXY = getHandlePosition(node, handle, handle.position, true);
+      res.push({ ...handle, ...handleXY });
    }
    return res;
  }, []);
+  return [handles, excludedHandle];
 }

-export function getClosestHandle(
-  pos: XYPosition,
-  connectionRadius: number,
-  handles: ConnectionHandle[]
-): ConnectionHandle | null {
-  let closestHandles: ConnectionHandle[] = [];
+export function getClosestHandle(pos: XYPosition, connectionRadius: number, handles: Handle[]): Handle | null {
+  let closestHandles: Handle[] = [];
  let minDistance = Infinity;

  for (const handle of handles) {
@@ -65,7 +60,7 @@ type GetHandleLookupParams = {
  nodeLookup: NodeLookup;
  nodeId: string;
  handleId: string | null;
-  handleType: string;
+  handleType: HandleType;
 };

 export function getHandleLookup({
@@ -73,19 +68,21 @@ export function getHandleLookup({
  nodeId,
  handleId,
  handleType,
-}: GetHandleLookupParams): ConnectionHandle[] {
-  const connectionHandles: ConnectionHandle[] = [];
+}: GetHandleLookupParams): [Handle[], Handle] {
+  const connectionHandles: Handle[] = [];
+  const currentHandle = { nodeId, handleId, handleType };
+  let excludedHandle: Handle | null = null;

-  for (const [, node] of nodeLookup) {
+  for (const node of nodeLookup.values()) {
    if (node.internals.handleBounds) {
-      const id = `${nodeId}-${handleId}-${handleType}`;
-      const sourceHandles = getHandles(node, node.internals.handleBounds, 'source', id);
-      const targetHandles = getHandles(node, node.internals.handleBounds, 'target', id);
+      const [sourceHandles, excludedSource] = getHandles(node, node.internals.handleBounds, 'source', currentHandle);
+      const [targetHandles, excludedTarget] = getHandles(node, node.internals.handleBounds, 'target', currentHandle);
+      excludedHandle = excludedHandle ? excludedHandle : excludedSource ?? excludedTarget;
      connectionHandles.push(...sourceHandles, ...targetHandles);
    }
  }

-  return connectionHandles;
+  return [connectionHandles, excludedHandle!];
 }

 export function getHandleType(
@@ -103,14 +100,14 @@ export function getHandleType(
  return null;
 }

-export function getConnectionStatus(isInsideConnectionRadius: boolean, isHandleValid: boolean) {
-  let connectionStatus = null;
+export function isConnectionValid(isInsideConnectionRadius: boolean, isHandleValid: boolean) {
+  let isValid: boolean | null = null;

  if (isHandleValid) {
-    connectionStatus = 'valid';
+    isValid = true;
  } else if (isInsideConnectionRadius && !isHandleValid) {
-    connectionStatus = 'invalid';
+    isValid = false;
  }

-  return connectionStatus as ConnectionStatus;
+  return isValid;
 }
--- a/packages/system/src/xyminimap/index.ts
+++ b/packages/system/src/xyminimap/index.ts
@@ -38,6 +38,7 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi
    zoomable = true,
    inversePan = false,
  }: XYMinimapUpdate) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const zoomHandler = (event: D3ZoomEvent<SVGSVGElement, any>) => {
      const transform = getTransform();

@@ -55,6 +56,7 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi
    };

    let panStart = [0, 0];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const panStartHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
      if (event.sourceEvent.type === 'mousedown' || event.sourceEvent.type === 'touchstart') {
        panStart = [
@@ -64,6 +66,7 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi
      }
    };

+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const panHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
      const transform = getTransform();

@@ -101,8 +104,10 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi

    const zoomAndPanHandler = zoom()
      .on('start', panStartHandler)
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      .on('zoom', pannable ? panHandler : null)
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      .on('zoom.wheel', zoomable ? zoomHandler : null);

--- a/packages/system/src/xypanzoom/filter.ts
+++ b/packages/system/src/xypanzoom/filter.ts
@@ -65,6 +65,11 @@ export function createFilter({
      return false;
    }

+    if (!zoomOnPinch && event.type === 'touchstart' && event.touches?.length > 1) {
+      event.preventDefault(); // if you manage to start with 2 touches, we prevent native zoom
+      return false;
+    }
+
    // when there is no scroll handling enabled, we prevent all wheel events
    if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') {
      return false;
--- a/packages/system/src/xyresizer/XYResizer.ts
+++ b/packages/system/src/xyresizer/XYResizer.ts
@@ -3,7 +3,15 @@ import { select } from 'd3-selection';

 import { getControlDirection, getDimensionsAfterResize, getResizeDirection } from './utils';
 import { getPointerPosition } from '../utils';
-import type { CoordinateExtent, NodeBase, NodeLookup, NodeOrigin, Transform, XYPosition } from '../types';
+import type {
+  CoordinateExtent,
+  InternalNodeBase,
+  NodeBase,
+  NodeLookup,
+  NodeOrigin,
+  Transform,
+  XYPosition,
+} from '../types';
 import type { OnResize, OnResizeEnd, OnResizeStart, ResizeDragEvent, ShouldResize, ControlPosition } from './types';

 const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
@@ -100,9 +108,9 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X

    const controlDirection = getControlDirection(controlPosition);

-    let node: NodeBase | undefined = undefined;
+    let node: InternalNodeBase | undefined = undefined;
    let childNodes: XYResizerChildChange[] = [];
-    let parentNode: NodeBase | undefined = undefined; // Needed to fix expandParent
+    let parentNode: InternalNodeBase | undefined = undefined; // Needed to fix expandParent
    let parentExtent: CoordinateExtent | undefined = undefined;
    let childExtent: CoordinateExtent | undefined = undefined;

@@ -118,8 +126,8 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
        const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });

        prevValues = {
-          width: node.measured?.width ?? 0,
-          height: node.measured?.height ?? 0,
+          width: node.measured.width ?? 0,
+          height: node.measured.height ?? 0,
          x: node.position.x ?? 0,
          y: node.position.y ?? 0,
        };
@@ -132,11 +140,10 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
        };

        parentNode = undefined;
-        if (node.extent === 'parent' || node.expandParent) {
-          parentNode = nodeLookup.get(node.parentId!);
-          if (parentNode && node.extent === 'parent') {
-            parentExtent = nodeToParentExtent(parentNode);
-          }
+
+        if (node.parentId && (node.extent === 'parent' || node.expandParent)) {
+          parentNode = nodeLookup.get(node.parentId);
+          parentExtent = parentNode && node.extent === 'parent' ? nodeToParentExtent(parentNode) : undefined;
        }

        // Collect all child nodes to correct their relative positions when top/left changes
@@ -153,7 +160,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
            });

            if (child.extent === 'parent' || child.expandParent) {
-              const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin);
+              const extent = nodeToChildExtent(child, node, child.origin ?? nodeOrigin);

              if (childExtent) {
                childExtent = [
@@ -202,26 +209,15 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
          return;
        }

-        if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
+        if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] === 1) {
          change.x = isXPosChange ? x : prevValues.x;
          change.y = isYPosChange ? y : prevValues.y;

          prevValues.x = change.x;
          prevValues.y = change.y;

-          // Fix expandParent when resizing from top/left
-          if (parentNode && node.expandParent) {
-            if (change.x && change.x < 0) {
-              prevValues.x = 0;
-              startValues.x = startValues.x - change.x;
-            }
-
-            if (change.y && change.y < 0) {
-              prevValues.y = 0;
-              startValues.y = startValues.y - change.y;
-            }
-          }
-
+          // when top/left changes, correct the relative positions of child nodes
+          // so that they stay in the same position
          if (childNodes.length > 0) {
            const xChange = x - prevX;
            const yChange = y - prevY;
@@ -243,6 +239,21 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
          prevValues.height = change.height;
        }

+        // Fix expandParent when resizing from top/left
+        if (parentNode && node.expandParent) {
+          const xLimit = nodeOrigin[0] * (change.width ?? 0);
+          if (change.x && change.x < xLimit) {
+            prevValues.x = xLimit;
+            startValues.x = startValues.x - (change.x - xLimit);
+          }
+
+          const yLimit = nodeOrigin[1] * (change.height ?? 0);
+          if (change.y && change.y < yLimit) {
+            prevValues.y = yLimit;
+            startValues.y = startValues.y - (change.y - yLimit);
+          }
+        }
+
        const direction = getResizeDirection({
          width: prevValues.width,
          prevWidth,
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/tests/playwright/e2e/node-toolbar.spec.ts
+++ b/tests/playwright/e2e/node-toolbar.spec.ts
@@ -32,14 +32,14 @@ test.describe('Node Toolbar', async () => {
  });

  test('all toolbars are positioned correctly', async ({ page }) => {
-    permutations.forEach(async (permutation) => {
+    const tests = permutations.map((permutation) => async () => {
      const toolbar = page
        .locator(`[data-id="${permutation.id}"]`)
        .and(page.locator(`.${FRAMEWORK}-flow__node-toolbar`));
      const node = page.locator(`[data-id="${permutation.id}"]`).and(page.locator(`.${FRAMEWORK}-flow__node`));

-      await expect(toolbar).toBeAttached();
-      await expect(node).toBeAttached();
+      await expect(toolbar).toBeAttached({ timeout: 5000 });
+      await expect(node).toBeAttached({ timeout: 5000 });

      const toolbarBox = await toolbar.boundingBox();
      const nodeBox = await node.boundingBox();
@@ -78,6 +78,7 @@ test.describe('Node Toolbar', async () => {
          break;
      }
    });
+    await Promise.all(tests.map((t) => t()));
  });

  test('toolbar default behaviour', async ({ page }) => {
--- a/Show More
+++ b/Show More