@yh-ui/flow 1.0.51 → 1.0.53

package/dist/Flow.d.vue.ts

@@ -60,11 +60,11 @@ type __VLS_Props = {
     /** Export file name prefix */
     exportFileName?: string;
 };
-declare var __VLS_15: any, __VLS_38: any;
+declare var __VLS_15: any, __VLS_39: any;
 type __VLS_Slots = {} & {
     edge?: (props: typeof __VLS_15) => any;
 } & {
-    node?: (props: typeof __VLS_38) => any;
+    node?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     nodes: import("vue").Ref<Node[]>;
@@ -135,6 +135,29 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     exportJson?: () => string;
     exportImage?: (options?: import("./types").ScreenshotOptions | HTMLElement) => Promise<import("./types").ScreenshotResult>;
     applyLayout?: (options?: unknown) => void | Promise<void>;
+    groupSelectedNodes?: (label?: string) => string | null;
+    ungroupNodes?: (groupId: string) => void;
+    toggleGroupCollapse?: (groupId: string) => void;
+    isGroupCollapsed?: (groupId: string) => boolean;
+    getGroupChildren?: (groupId: string) => Node[];
+    getGroupRegistry?: () => Map<string, {
+        groupId: string;
+        childIds: string[];
+        collapsed: boolean;
+        originalPositions: Record<string, {
+            x: number;
+            y: number;
+        }>;
+    }>;
+    undo?: () => void;
+    redo?: () => void;
+    saveSnapshot?: (description?: string) => void;
+    canUndo?: import("vue").Ref<boolean>;
+    canRedo?: import("vue").Ref<boolean>;
+    historyLength?: import("vue").Ref<number>;
+    clearHistory?: () => void;
+    getHistory?: () => unknown[];
+    jumpToStep?: (index: number) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: ViewportTransform) => any;
     "update:nodes": (nodes: Node<import("./types").NodeData>[]) => any;

package/dist/Flow.vue

@@ -59,6 +59,7 @@
         @node-drag-end="handleNodeDragEnd"
         @connect-start="handleConnectStart"
         @node-select-toggle="handleNodeSelectToggle"
+        @nodes-measured="handleNodesMeasured"
       >
         <template #node="nodeProps">
           <slot name="node" v-bind="nodeProps" />
@@ -134,7 +135,8 @@ import {
   createControlsPlugin,
   createSnapPlugin,
   createExportPlugin,
-  createLayoutPlugin
+  createLayoutPlugin,
+  createHistoryPlugin
 } from "./plugins/plugins";
 import { useViewport } from "./core/useViewport";
 import { useNodes } from "./core/useNodes";
@@ -152,7 +154,8 @@ import {
   getNodeChildren,
   getNodeParent,
   exportFlowData,
-  importFlowData
+  importFlowData,
+  getNodeAbsolutePosition
 } from "./utils/custom-types";
 import { provideFlowContext } from "./core/FlowContext";
 import { createEventBus } from "./utils/event-bus";
@@ -241,8 +244,10 @@ const usePlugin = (plugin) => {
   registeredPlugins.value = pluginManager.getPlugins();
 };
 const removePlugin = (pluginId) => {
-  pluginManager.unregister(pluginId);
-  registeredPlugins.value = pluginManager.getPlugins();
+  if (pluginManager.hasPlugin(pluginId)) {
+    pluginManager.unregister(pluginId);
+    registeredPlugins.value = pluginManager.getPlugins();
+  }
 };
 const nodesManager = useNodes(viewportRef, {
   nodes: nodesRef,
@@ -257,16 +262,60 @@ const selectionManager = useSelection({
   nodes: nodesRef,
   edges: edgesRef
 });
-const historyManager = useHistory(nodesRef, edgesRef, {
+const localHistoryManager = useHistory(nodesRef, edgesRef, {
   maxHistory: props.maxHistory || 50,
   onHistoryChange: (canUndo, canRedo) => {
     emit("historyChange", { canUndo, canRedo });
   }
 });
+const getHistoryPlugin = () => {
+  return pluginManager.getPlugin("history");
+};
+const historyManager = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  push: (state) => {
+    const plugin = getHistoryPlugin();
+    if (plugin) {
+      plugin.saveSnapshot();
+    } else {
+      localHistoryManager.push(state);
+    }
+  },
+  undo: () => {
+    const plugin = getHistoryPlugin();
+    if (plugin) {
+      plugin.undo();
+    } else {
+      localHistoryManager.undo();
+    }
+  },
+  redo: () => {
+    const plugin = getHistoryPlugin();
+    if (plugin) {
+      plugin.redo();
+    } else {
+      localHistoryManager.redo();
+    }
+  },
+  clear: () => {
+    const plugin = getHistoryPlugin();
+    if (plugin) {
+      plugin.clearHistory();
+    } else {
+      localHistoryManager.clear();
+    }
+  }
+};
+historyManager.push({ nodes: nodesRef.value, edges: edgesRef.value });
 const alignmentManager = useAlignment({
   nodes: nodesRef,
   snapThreshold: snapThreshold.value
 });
+const nodeMap = computed(() => {
+  const m = /* @__PURE__ */ new Map();
+  nodesRef.value.forEach((n) => m.set(n.id, n));
+  return m;
+});
 const visibleNodes = computed(() => {
   if (!containerRef.value) return nodesRef.value;
   const padding = 100;
@@ -277,9 +326,10 @@ const visibleNodes = computed(() => {
     height: containerHeight.value / viewportRef.value.zoom + padding * 2
   };
   return nodesRef.value.filter((node) => {
-    const width = node.width || 200;
-    const height = node.height || 50;
-    return !(node.position.x + width < visibleBounds.x || node.position.x > visibleBounds.x + visibleBounds.width || node.position.y + height < visibleBounds.y || node.position.y > visibleBounds.y + visibleBounds.height);
+    const width = node.measured?.width ?? node.width ?? 200;
+    const height = node.measured?.height ?? node.height ?? 50;
+    const absPos = getNodeAbsolutePosition(node, nodeMap.value);
+    return !(absPos.x + width < visibleBounds.x || absPos.x > visibleBounds.x + visibleBounds.width || absPos.y + height < visibleBounds.y || absPos.y > visibleBounds.y + visibleBounds.height);
   });
 });
 const contentStyle = computed(() => ({
@@ -384,6 +434,63 @@ const handleMouseMove = (event) => {
     }
   }
 };
+const getNodeHandles = (node, type) => {
+  if (node.handleBounds) {
+    const handles = [];
+    if (node.handleBounds.top) handles.push(...node.handleBounds.top);
+    if (node.handleBounds.right) handles.push(...node.handleBounds.right);
+    if (node.handleBounds.bottom) handles.push(...node.handleBounds.bottom);
+    if (node.handleBounds.left) handles.push(...node.handleBounds.left);
+    return handles.filter((h) => h.type === type);
+  }
+  if (node.type === "group") return [];
+  if (node.type === "input") {
+    return type === "source" ? [{ id: void 0, type: "source", position: "right" }] : [];
+  }
+  if (node.type === "output") {
+    return type === "target" ? [{ id: void 0, type: "target", position: "left" }] : [];
+  }
+  if (node.type === "bpmn-start") {
+    return type === "source" ? [{ id: void 0, type: "source", position: "right" }] : [];
+  }
+  if (node.type === "bpmn-end") {
+    return type === "target" ? [{ id: void 0, type: "target", position: "left" }] : [];
+  }
+  if (node.type === "bpmn-task" || node.type === "bpmn-service-task" || node.type === "bpmn-user-task") {
+    if (type === "source") return [{ id: void 0, type: "source", position: "right" }];
+    return [{ id: void 0, type: "target", position: "left" }];
+  }
+  if (node.type === "bpmn-exclusive-gateway" || node.type === "bpmn-parallel-gateway" || node.type === "bpmn-inclusive-gateway") {
+    if (type === "source") {
+      return [
+        { id: void 0, type: "source", position: "right" },
+        { id: void 0, type: "source", position: "bottom" }
+      ];
+    }
+    return [{ id: void 0, type: "target", position: "left" }];
+  }
+  if (node.type === "ai-start") {
+    return type === "source" ? [{ id: void 0, type: "source", position: "right" }] : [];
+  }
+  if (node.type === "ai-end") {
+    return type === "target" ? [{ id: void 0, type: "target", position: "left" }] : [];
+  }
+  if (node.type === "ai-llm" || node.type === "ai-prompt" || node.type === "ai-agent" || node.type === "ai-tool" || node.type === "ai-memory") {
+    if (type === "source") return [{ id: void 0, type: "source", position: "right" }];
+    return [{ id: void 0, type: "target", position: "left" }];
+  }
+  if (node.type === "ai-condition") {
+    if (type === "source") {
+      return [
+        { id: void 0, type: "source", position: "right" },
+        { id: void 0, type: "source", position: "bottom" }
+      ];
+    }
+    return [{ id: void 0, type: "target", position: "left" }];
+  }
+  if (type === "source") return [{ id: void 0, type: "source", position: "right" }];
+  return [{ id: void 0, type: "target", position: "left" }];
+};
 const handleMouseUp = (event) => {
   isPanning.value = false;
   if (isSelecting.value) {
@@ -403,17 +510,37 @@ const handleMouseUp = (event) => {
       if (targetNode) {
         const sourceNodeId = updatingEdge.value ? updatingEdge.value.handleType === "source" ? targetNode.id : updatingEdge.value.edge.source : connectionStart.value.nodeId;
         const targetNodeId = updatingEdge.value ? updatingEdge.value.handleType === "target" ? targetNode.id : updatingEdge.value.edge.target : targetNode.id;
-        const sourceNode = nodesRef.value.find((n) => n.id === sourceNodeId);
-        const validationResult = validateConnection(
-          sourceNode,
-          nodesRef.value.find((n) => n.id === targetNodeId),
-          {
-            source: sourceNodeId,
-            target: targetNodeId,
-            sourceHandle: updatingEdge.value && updatingEdge.value.handleType === "source" ? void 0 : updatingEdge.value?.edge.sourceHandle || connectionStart.value?.handleId,
-            targetHandle: updatingEdge.value && updatingEdge.value.handleType === "target" ? void 0 : updatingEdge.value?.edge.targetHandle
+        let dropHandleId = void 0;
+        let dropHandleType = void 0;
+        const element = document.elementFromPoint(event.clientX, event.clientY);
+        const handleEl = element?.closest(".yh-flow-handle");
+        if (handleEl) {
+          dropHandleId = handleEl.getAttribute("data-handle-id") || void 0;
+          dropHandleType = handleEl.getAttribute("data-handle-type") || void 0;
+        }
+        let finalSourceHandle = void 0;
+        let finalTargetHandle = void 0;
+        if (updatingEdge.value) {
+          const { edge, handleType } = updatingEdge.value;
+          if (handleType === "source") {
+            finalSourceHandle = dropHandleType === "source" ? dropHandleId : getNodeHandles(targetNode, "source")[0]?.id || void 0;
+            finalTargetHandle = edge.targetHandle || void 0;
+          } else {
+            finalSourceHandle = edge.sourceHandle || void 0;
+            finalTargetHandle = dropHandleType === "target" ? dropHandleId : getNodeHandles(targetNode, "target")[0]?.id || void 0;
           }
-        );
+        } else {
+          finalSourceHandle = connectionStart.value?.handleId || void 0;
+          finalTargetHandle = dropHandleType === "target" ? dropHandleId : getNodeHandles(targetNode, "target")[0]?.id || void 0;
+        }
+        const sourceNode = nodesRef.value.find((n) => n.id === sourceNodeId);
+        const targetNodeObj = nodesRef.value.find((n) => n.id === targetNodeId);
+        const validationResult = validateConnection(sourceNode, targetNodeObj, {
+          source: sourceNodeId,
+          target: targetNodeId,
+          sourceHandle: finalSourceHandle,
+          targetHandle: finalTargetHandle
+        });
         if (!validationResult.isValid) {
           console.warn("Invalid connection:", validationResult.message);
           isConnecting.value = false;
@@ -422,12 +549,12 @@ const handleMouseUp = (event) => {
           return;
         }
         if (updatingEdge.value) {
-          const { edge, handleType } = updatingEdge.value;
+          const { edge } = updatingEdge.value;
           const connection = {
-            source: handleType === "source" ? targetNode.id : edge.source,
-            target: handleType === "target" ? targetNode.id : edge.target,
-            sourceHandle: handleType === "source" ? void 0 : edge.sourceHandle,
-            targetHandle: handleType === "target" ? void 0 : edge.targetHandle
+            source: sourceNodeId,
+            target: targetNodeId,
+            sourceHandle: finalSourceHandle,
+            targetHandle: finalTargetHandle
           };
           edgesManager.updateEdge(edge.id, connection);
           emit("edgeUpdate", { edge, connection });
@@ -435,10 +562,10 @@ const handleMouseUp = (event) => {
         } else {
           const newEdge = {
             id: `edge-${Date.now()}`,
-            source: connectionStart.value.nodeId,
-            target: targetNode.id,
-            sourceHandle: connectionStart.value.handleId || void 0,
-            targetHandle: void 0,
+            source: sourceNodeId,
+            target: targetNodeId,
+            sourceHandle: finalSourceHandle,
+            targetHandle: finalTargetHandle,
             type: "bezier"
           };
           edgesManager.addEdge(newEdge);
@@ -466,9 +593,10 @@ const handleMouseUp = (event) => {
 };
 const findTargetNode = (canvasPos) => {
   for (const node of nodesRef.value) {
-    const width = node.width || 200;
-    const height = node.height || 50;
-    if (canvasPos.x >= node.position.x && canvasPos.x <= node.position.x + width && canvasPos.y >= node.position.y && canvasPos.y <= node.position.y + height) {
+    const width = node.measured?.width ?? node.width ?? 200;
+    const height = node.measured?.height ?? node.height ?? 50;
+    const absPos = getNodeAbsolutePosition(node, nodeMap.value);
+    if (canvasPos.x >= absPos.x && canvasPos.x <= absPos.x + width && canvasPos.y >= absPos.y && canvasPos.y <= absPos.y + height) {
       if (connectionStart.value && node.id !== connectionStart.value.nodeId) {
         return node;
       }
@@ -476,6 +604,9 @@ const findTargetNode = (canvasPos) => {
   }
   return null;
 };
+const handleNodesMeasured = () => {
+  emit("update:nodes", nodesRef.value);
+};
 const handleNodeClick = (event, node) => {
   const multi = event.shiftKey || event.metaKey || event.ctrlKey;
   if (!multi) edgesManager.clearSelection();
@@ -567,7 +698,8 @@ const handleEdgeUpdateStart = (event, edge, handleType) => {
   const node = nodesRef.value.find((n) => n.id === anchorNodeId);
   if (!node) return;
   const position = handleType === "source" ? anchorHandleId ?? "left" : anchorHandleId ?? "right";
-  const startPos = getHandlePosition(node, position, anchorHandleId);
+  const absNode = { ...node, position: getNodeAbsolutePosition(node, nodeMap.value) };
+  const startPos = getHandlePosition(absNode, position, anchorHandleId);
   isConnecting.value = true;
   connectionStart.value = {
     nodeId: anchorNodeId,
@@ -589,7 +721,8 @@ const handleConnectStart = (event, nodeId, handleId, handleType) => {
   const rect = containerRef.value?.getBoundingClientRect();
   if (!rect) return;
   const position = handleId || (handleType === "source" ? "right" : "left");
-  const startPos = getHandlePosition(node, position, handleId);
+  const absNode = { ...node, position: getNodeAbsolutePosition(node, nodeMap.value) };
+  const startPos = getHandlePosition(absNode, position, handleId);
   isConnecting.value = true;
   connectionStart.value = {
     nodeId,
@@ -654,12 +787,16 @@ const flowInstance = {
   setViewport: (transform) => viewport.setViewport(transform.x, transform.y, transform.zoom),
   fitView: (options) => viewport.fitView(
     { width: containerWidth.value, height: containerHeight.value },
-    nodesRef.value,
+    nodesRef.value.map((n) => ({ ...n, position: getNodeAbsolutePosition(n, nodeMap.value) })),
     options
   ),
   zoomIn: viewport.zoomIn,
   zoomOut: viewport.zoomOut,
-  centerView: viewport.center,
+  centerView: (options) => viewport.center(
+    { width: containerWidth.value, height: containerHeight.value },
+    nodesRef.value.map((n) => ({ ...n, position: getNodeAbsolutePosition(n, nodeMap.value) })),
+    options
+  ),
   selectNode: nodesManager.selectNode,
   selectEdge: edgesManager.selectEdge,
   clearSelection: selectionManager.clearSelection,
@@ -699,7 +836,24 @@ const flowInstance = {
   // Placeholders for plugin methods to be exposed via defineExpose
   exportJson: void 0,
   exportImage: void 0,
-  applyLayout: void 0
+  applyLayout: void 0,
+  // Node grouping placeholders
+  groupSelectedNodes: void 0,
+  ungroupNodes: void 0,
+  toggleGroupCollapse: void 0,
+  isGroupCollapsed: void 0,
+  getGroupChildren: void 0,
+  getGroupRegistry: void 0,
+  // History placeholders
+  undo: void 0,
+  redo: void 0,
+  saveSnapshot: void 0,
+  canUndo: void 0,
+  canRedo: void 0,
+  historyLength: void 0,
+  clearHistory: void 0,
+  getHistory: void 0,
+  jumpToStep: void 0
 };
 provideFlowContext(flowInstance);
 pluginManager.init(flowInstance);
@@ -771,13 +925,14 @@ watch(
   { deep: true }
 );
 let handleKeyDown;
+let resizeObserver = null;
 onMounted(() => {
   document.addEventListener("mousemove", handleMouseMove);
   document.addEventListener("mouseup", handleMouseUp);
   if (containerRef.value) {
     containerWidth.value = containerRef.value.clientWidth;
     containerHeight.value = containerRef.value.clientHeight;
-    const resizeObserver = new ResizeObserver((entries) => {
+    resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         containerWidth.value = entry.contentRect.width;
         containerHeight.value = entry.contentRect.height;
@@ -920,16 +1075,38 @@ onMounted(() => {
       }
     }
   );
+  watch(
+    () => [props.history, props.maxHistory],
+    ([history, maxHistory]) => {
+      removePlugin("history");
+      if (history) {
+        usePlugin(
+          createHistoryPlugin({
+            enabled: true,
+            maxHistory: maxHistory || 50,
+            enableKeyboard: false,
+            onHistoryChange: (canUndo, canRedo) => {
+              emit("historyChange", { canUndo, canRedo });
+            }
+          })
+        );
+      }
+    },
+    { immediate: true }
+  );
   if (props.keyboardShortcuts) {
     const keyboard = useKeyboard({
       enabled: true,
       onDelete: () => {
         const selectedNodes = nodesRef.value.filter((n) => n.selected);
         const selectedEdges = edgesRef.value.filter((e) => e.selected);
-        selectedNodes.forEach((node) => nodesManager.removeNode(node.id));
-        selectedEdges.forEach((edge) => edgesManager.removeEdge(edge.id));
-        emit("update:nodes", nodesRef.value);
-        emit("update:edges", edgesRef.value);
+        if (selectedNodes.length > 0 || selectedEdges.length > 0) {
+          historyManager.push({ nodes: nodesRef.value, edges: edgesRef.value });
+          selectedNodes.forEach((node) => nodesManager.removeNode(node.id));
+          selectedEdges.forEach((edge) => edgesManager.removeEdge(edge.id));
+          emit("update:nodes", nodesRef.value);
+          emit("update:edges", edgesRef.value);
+        }
       },
       onUndo: () => historyManager.undo(),
       onRedo: () => historyManager.redo(),
@@ -948,6 +1125,10 @@ onMounted(() => {
   }
 });
 onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
   if (props.keyboardShortcuts && handleKeyDown) {
     document.removeEventListener("keydown", handleKeyDown);
   }

package/dist/Flow.vue.d.ts

@@ -60,11 +60,11 @@ type __VLS_Props = {
     /** Export file name prefix */
     exportFileName?: string;
 };
-declare var __VLS_15: any, __VLS_38: any;
+declare var __VLS_15: any, __VLS_39: any;
 type __VLS_Slots = {} & {
     edge?: (props: typeof __VLS_15) => any;
 } & {
-    node?: (props: typeof __VLS_38) => any;
+    node?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     nodes: import("vue").Ref<Node[]>;
@@ -135,6 +135,29 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     exportJson?: () => string;
     exportImage?: (options?: import("./types").ScreenshotOptions | HTMLElement) => Promise<import("./types").ScreenshotResult>;
     applyLayout?: (options?: unknown) => void | Promise<void>;
+    groupSelectedNodes?: (label?: string) => string | null;
+    ungroupNodes?: (groupId: string) => void;
+    toggleGroupCollapse?: (groupId: string) => void;
+    isGroupCollapsed?: (groupId: string) => boolean;
+    getGroupChildren?: (groupId: string) => Node[];
+    getGroupRegistry?: () => Map<string, {
+        groupId: string;
+        childIds: string[];
+        collapsed: boolean;
+        originalPositions: Record<string, {
+            x: number;
+            y: number;
+        }>;
+    }>;
+    undo?: () => void;
+    redo?: () => void;
+    saveSnapshot?: (description?: string) => void;
+    canUndo?: import("vue").Ref<boolean>;
+    canRedo?: import("vue").Ref<boolean>;
+    historyLength?: import("vue").Ref<number>;
+    clearHistory?: () => void;
+    getHistory?: () => unknown[];
+    jumpToStep?: (index: number) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: ViewportTransform) => any;
     "update:nodes": (nodes: Node<import("./types").NodeData>[]) => any;

package/dist/core/useAlignment.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useAlignment = useAlignment;
 var _vue = require("vue");
+var _customTypes = require("../utils/custom-types.cjs");
 function useAlignment(options) {
   const {
     nodes,
@@ -22,19 +23,37 @@ function useAlignment(options) {
         snappedY: false
       };
     }
-    const nodeWidth = node.width || 200;
-    const nodeHeight = node.height || 50;
+    const nodeWidth = node.measured?.width ?? node.width ?? 200;
+    const nodeHeight = node.measured?.height ?? node.height ?? 50;
     const otherNodes = nodes.value.filter(n => n.id !== nodeId);
     let snappedX = false;
     let snappedY = false;
-    const dragYPositions = [position.y, position.y + nodeHeight / 2, position.y + nodeHeight];
+    const nodeMap = new Map(nodes.value.map(n => [n.id, n]));
+    const absPosOffset = {
+      x: 0,
+      y: 0
+    };
+    if (node.parentId) {
+      const parent = nodeMap.get(node.parentId);
+      if (parent) {
+        const parentAbsPos = (0, _customTypes.getNodeAbsolutePosition)(parent, nodeMap);
+        absPosOffset.x = parentAbsPos.x;
+        absPosOffset.y = parentAbsPos.y;
+      }
+    }
+    const proposedAbsPos = {
+      x: position.x + absPosOffset.x,
+      y: position.y + absPosOffset.y
+    };
+    const dragYPositions = [proposedAbsPos.y, proposedAbsPos.y + nodeHeight / 2, proposedAbsPos.y + nodeHeight];
     for (const otherNode of otherNodes) {
-      const otherHeight = otherNode.height || 50;
-      const otherYPositions = [otherNode.position.y, otherNode.position.y + otherHeight / 2, otherNode.position.y + otherHeight];
+      const otherHeight = otherNode.measured?.height ?? otherNode.height ?? 50;
+      const otherAbsPos = (0, _customTypes.getNodeAbsolutePosition)(otherNode, nodeMap);
+      const otherYPositions = [otherAbsPos.y, otherAbsPos.y + otherHeight / 2, otherAbsPos.y + otherHeight];
       for (let i = 0; i < dragYPositions.length; i++) {
         for (const otherY of otherYPositions) {
           if (Math.abs(dragYPositions[i] - otherY) < snapThreshold) {
-            if (i === 0) position.y = otherY;else if (i === 1) position.y = otherY - nodeHeight / 2;else position.y = otherY - nodeHeight;
+            if (i === 0) proposedAbsPos.y = otherY;else if (i === 1) proposedAbsPos.y = otherY - nodeHeight / 2;else proposedAbsPos.y = otherY - nodeHeight;
             snappedY = true;
             break;
           }
@@ -43,14 +62,15 @@ function useAlignment(options) {
       }
       if (snappedY) break;
     }
-    const dragXPositions = [position.x, position.x + nodeWidth / 2, position.x + nodeWidth];
+    const dragXPositions = [proposedAbsPos.x, proposedAbsPos.x + nodeWidth / 2, proposedAbsPos.x + nodeWidth];
     for (const otherNode of otherNodes) {
-      const otherWidth = otherNode.width || 200;
-      const otherXPositions = [otherNode.position.x, otherNode.position.x + otherWidth / 2, otherNode.position.x + otherWidth];
+      const otherWidth = otherNode.measured?.width ?? otherNode.width ?? 200;
+      const otherAbsPos = (0, _customTypes.getNodeAbsolutePosition)(otherNode, nodeMap);
+      const otherXPositions = [otherAbsPos.x, otherAbsPos.x + otherWidth / 2, otherAbsPos.x + otherWidth];
       for (let i = 0; i < dragXPositions.length; i++) {
         for (const otherX of otherXPositions) {
           if (Math.abs(dragXPositions[i] - otherX) < snapThreshold) {
-            if (i === 0) position.x = otherX;else if (i === 1) position.x = otherX - nodeWidth / 2;else position.x = otherX - otherWidth;
+            if (i === 0) proposedAbsPos.x = otherX;else if (i === 1) proposedAbsPos.x = otherX - nodeWidth / 2;else proposedAbsPos.x = otherX - nodeWidth;
             snappedX = true;
             break;
           }
@@ -59,8 +79,8 @@ function useAlignment(options) {
       }
     }
     return {
-      x: position.x,
-      y: position.y,
+      x: proposedAbsPos.x - absPosOffset.x,
+      y: proposedAbsPos.y - absPosOffset.y,
       snappedX,
       snappedY
     };