Merge pull request #4400 from xyflow/next

React Flow 12.0.0-next.25 & Svelte Flow 0.1.8

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 },

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} />
     </>
   );

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>
+);

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}

packages/react/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @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

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/react",
-  "version": "12.0.0-next.24",
+  "version": "12.0.0-next.25",
   "description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
   "keywords": [
     "react",

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,

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,

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) {

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>

packages/react/src/components/ConnectionLine/index.tsx

@@ -1,132 +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, endPosition, isValid } = 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,
-        endPosition: s.connectionEndHandle?.position,
-        isValid: s.connectionStatus === 'valid',
-      }),
-      [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 = isValid && endPosition ? endPosition : 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;
@@ -136,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;
   }
 
@@ -159,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';

packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx

@@ -96,7 +96,7 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
       onReconnectEnd: _onReconnectEnd,
       updateConnection,
       getTransform: () => store.getState().transform,
-      getConnectionStartHandle: () => store.getState().connectionStartHandle,
+      getFromHandle: () => store.getState().connection.fromHandle,
     });
   };
 

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,

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,

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,
   });
 

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,
     })
   );
 

packages/react/src/container/FlowRenderer/index.tsx

@@ -22,7 +22,6 @@ export type FlowRendererProps<NodeType extends Node = Node> = Omit<
   | 'selectNodesOnDrag'
   | 'defaultMarkerColor'
   | 'rfId'
-  | 'nodeOrigin'
 > & {
   isControlledViewport: boolean;
   children: ReactNode;

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;
@@ -97,7 +96,6 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
   noWheelClassName,
   noPanClassName,
   disableKeyboardA11y,
-  nodeOrigin,
   nodeExtent,
   rfId,
   viewport,
@@ -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}
         />

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}

packages/react/src/container/Pane/index.tsx

@@ -155,7 +155,7 @@ export function Pane({
   };
 
   const onPointerMove = (event: ReactPointerEvent): void => {
-    const { userSelectionRect, edgeLookup, transform, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } =
+    const { userSelectionRect, edgeLookup, transform, nodeLookup, triggerNodeChanges, triggerEdgeChanges } =
       store.getState();
 
     if (!containerBounds.current || !userSelectionRect) {
@@ -181,8 +181,7 @@ export function Pane({
       nextUserSelectRect,
       transform,
       selectionMode === SelectionMode.Partial,
-      true,
-      nodeOrigin
+      true
     );
 
     const selectedEdgeIds = new Set<string>();

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>

packages/react/src/container/ReactFlow/index.tsx

@@ -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}
@@ -217,7 +217,6 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           noPanClassName={noPanClassName}
           rfId={rfId}
           disableKeyboardA11y={disableKeyboardA11y}
-          nodeOrigin={nodeOrigin}
           nodeExtent={nodeExtent}
           viewport={viewport}
           onViewportChange={onViewportChange}

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);
 }

packages/react/src/hooks/useReactFlow.ts

@@ -50,7 +50,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
 
       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 = {

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();

packages/react/src/index.ts

@@ -49,7 +49,6 @@ export {
   type OnMoveStart,
   type OnMoveEnd,
   type Connection,
-  type ConnectionStatus,
   ConnectionMode,
   type OnConnectStartParams,
   type OnConnectStart,

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() }),

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],
@@ -103,8 +105,7 @@ const getInitialState = ({
 
     multiSelectionActive: false,
 
-    connectionStartHandle: null,
-    connectionEndHandle: null,
+    connection: { ...initialConnection },
     connectionClickStartHandle: null,
     connectOnClick: true,
 

packages/react/src/types/edges.ts

@@ -10,8 +10,7 @@ import type {
   HandleType,
   Connection,
   ConnectionLineType,
-  HandleElement,
-  ConnectionStatus,
+  Handle,
   EdgePosition,
   StepPathOptions,
   OnError,
@@ -194,15 +193,17 @@ export type OnReconnect<EdgeType extends Edge = Edge> = (oldEdge: EdgeType, newC
 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>;

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;
 };
 

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;
@@ -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>;

packages/svelte/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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)

packages/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/svelte",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
   "keywords": [
     "svelte",

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],

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>

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>
 
 <!--

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}

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;

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
   });
 

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;
 };

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}

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);

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) {

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;

packages/svelte/src/lib/index.ts

@@ -70,7 +70,6 @@ export {
   type OnMoveStart,
   type OnMoveEnd,
   type Connection,
-  type ConnectionStatus,
   ConnectionMode,
   type OnConnectStartParams,
   type OnConnectStart,

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)}

packages/svelte/src/lib/store/derived-connection-props.ts

@@ -1,130 +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 =
-        connection.connectionEndHandle?.position ??
-        (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
-      };
-    }
-  );
-}

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

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),

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
     });

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;
 };
 

packages/system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/system",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "description": "xyflow core system that powers React Flow and Svelte Flow.",
   "keywords": [
     "node-based UI",

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';

packages/system/src/types/handles.ts

@@ -2,29 +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;
-  position?: Position | null;
-};
-
-export type ConnectionHandle = {
-  id: string | null;
-  type: HandleType;
-  nodeId: string;
-  x: number;
-  y: number;
 };
 
 export type HandleProps = {

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>>;

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;

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';
+}

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,34 +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[];
-
-  const nodeOffset = {
-    x: nodeBounds.left + nodeBounds.width * nodeOrigin[0],
-    y: nodeBounds.top + 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 - nodeOffset.x) / zoom,
-      y: (handleBounds.top - nodeOffset.y) / zoom,
-      ...getDimensions(handle),
+      x: (handleBounds.left - nodeBounds.left) / zoom,
+      y: (handleBounds.top - nodeBounds.top) / zoom,
+      ...getDimensions(handle as HTMLDivElement),
     };
   });
 };

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 = {
@@ -58,14 +58,14 @@ export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | n
 
   const sourcePosition = sourceHandle?.position || Position.Bottom;
   const targetPosition = targetHandle?.position || Position.Top;
-  const [sourceX, sourceY] = getHandlePosition(sourceNode, sourceHandle, sourcePosition);
-  const [targetX, targetY] = getHandlePosition(targetNode, targetHandle, targetPosition);
+  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);
     }
   }
 
@@ -98,27 +98,33 @@ function toHandleBounds(handles?: NodeHandle[]) {
 
 export function getHandlePosition(
   node: InternalNodeBase,
-  handle: HandleElement | null,
-  fallbackPosition: Position = Position.Left
-): number[] {
+  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;
   }

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];
     }
   }
 

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,
   };

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 = !!(
@@ -270,14 +282,19 @@ 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, nodeBounds, zoom, node.origin || nodeOrigin),
-            target: getHandleBounds('.target', update.nodeElement, nodeBounds, 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;
 
@@ -298,7 +315,7 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
         }
       }
     }
-  });
+  }
 
   if (parentExpandChildren.length > 0) {
     const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);

packages/system/src/xydrag/XYDrag.ts

@@ -124,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);
         }

packages/system/src/xyhandle/XYHandle.ts

@@ -1,75 +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,
-  type Connection,
-  type PanBy,
-  type Transform,
-  type ConnectingHandle,
-  type OnConnectEnd,
-  type UpdateConnection,
-  type IsValidConnection,
-  type ConnectionHandle,
-  NodeLookup,
   Position,
+  oppositePosition,
+  ConnectionInProgress,
+  type Handle,
+  type Connection,
 } 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;
-  onReconnectEnd?: (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,
   {
@@ -93,13 +43,13 @@ function onPointerDown(
     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);
@@ -110,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,
@@ -128,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: (clickedHandle?.getAttribute('data-handlepos') as Position) || Position.Top,
+    position: fromHandleInternal.position,
   };
 
-  updateConnection({
-    connectionPosition,
-    connectionStatus: null,
-    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
     );
@@ -179,27 +145,42 @@ 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.type === newConnection.toHandle.type &&
+      previousConnection.toHandle.nodeId === newConnection.toHandle.nodeId &&
+      previousConnection.toHandle.id === newConnection.toHandle.id
+    ) {
+      return;
+    }
+
+    updateConnection(newConnection);
+    previousConnection = newConnection;
   }
 
   function onPointerUp(event: MouseEvent | TouchEvent) {
@@ -221,7 +202,6 @@ function onPointerDown(
     isValid = false;
     connection = null;
     handleDomNode = null;
-    connectionStartHandle = null;
 
     doc.removeEventListener('mousemove', onPointerMove as EventListener);
     doc.removeEventListener('mouseup', onPointerUp as EventListener);
@@ -250,6 +230,7 @@ function isValidHandle(
     lib,
     flowId,
     isValidConnection = alwaysValid,
+    handleLookup,
   }: IsValidParams
 ) {
   const isTarget = fromType === 'target';
@@ -267,7 +248,7 @@ function isValidHandle(
     handleDomNode: handleToCheck,
     isValid: false,
     connection: null,
-    endHandle: null,
+    toHandle: null,
   };
 
   if (handleToCheck) {
@@ -300,12 +281,17 @@ function isValidHandle(
 
     result.isValid = isValid && isValidConnection(connection);
 
-    result.endHandle = {
-      nodeId: handleNodeId as string,
-      handleId,
-      type: handleType as HandleType,
-      position: handleToCheck.getAttribute('data-handlepos') as Position,
-    };
+    if (handleLookup) {
+      const toHandle = handleLookup.find(
+        (h) => h.id === handleId && h.nodeId === handleNodeId && h.type === handleType
+      );
+
+      if (toHandle) {
+        result.toHandle = {
+          ...toHandle,
+        };
+      }
+    }
   }
 
   return result;

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;
+};

packages/system/src/xyhandle/utils.ts

@@ -1,43 +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, handle) => {
-    if (`${node.id}-${handle.id}-${type}` !== currentHandle) {
-      const [x, y] = getHandlePosition(node, handle);
-      res.push({
-        id: handle.id || null,
-        type,
-        nodeId: node.id,
-        x,
-        y,
-      });
+  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) {
@@ -67,7 +60,7 @@ type GetHandleLookupParams = {
   nodeLookup: NodeLookup;
   nodeId: string;
   handleId: string | null;
-  handleType: string;
+  handleType: HandleType;
 };
 
 export function getHandleLookup({
@@ -75,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(
@@ -105,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;
 }

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,

tooling/tsconfig/base.json

@@ -10,7 +10,7 @@
     "forceConsistentCasingInFileNames": true,
     "inlineSources": false,
     "isolatedModules": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "noFallthroughCasesInSwitch": true,
     "noImplicitAny": true,
     "noImplicitReturns": false,