@yh-ui/flow 1.0.51 → 1.0.52

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" />
@@ -152,7 +153,8 @@ import {
   getNodeChildren,
   getNodeParent,
   exportFlowData,
-  importFlowData
+  importFlowData,
+  getNodeAbsolutePosition
 } from "./utils/custom-types";
 import { provideFlowContext } from "./core/FlowContext";
 import { createEventBus } from "./utils/event-bus";
@@ -267,6 +269,11 @@ 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 +284,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(() => ({
@@ -466,9 +474,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 +485,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 +579,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 +602,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 +668,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 +717,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);

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

package/dist/core/useAlignment.mjs

@@ -1,4 +1,5 @@
 import { ref } from "vue";
+import { getNodeAbsolutePosition } from "../utils/custom-types.mjs";
 export function useAlignment(options) {
   const { nodes, snapThreshold = 10 } = options;
   const horizontalSnapLines = ref([]);
@@ -8,25 +9,44 @@ export function useAlignment(options) {
     if (!node) {
       return { x: position.x, y: position.y, snappedX: false, 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 = 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 otherHeight = otherNode.measured?.height ?? otherNode.height ?? 50;
+      const otherAbsPos = getNodeAbsolutePosition(otherNode, nodeMap);
       const otherYPositions = [
-        otherNode.position.y,
-        otherNode.position.y + otherHeight / 2,
-        otherNode.position.y + otherHeight
+        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;
           }
@@ -35,20 +55,25 @@ export 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 otherWidth = otherNode.measured?.width ?? otherNode.width ?? 200;
+      const otherAbsPos = getNodeAbsolutePosition(otherNode, nodeMap);
       const otherXPositions = [
-        otherNode.position.x,
-        otherNode.position.x + otherWidth / 2,
-        otherNode.position.x + otherWidth
+        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;
           }
@@ -56,7 +81,12 @@ export function useAlignment(options) {
         if (snappedX) break;
       }
     }
-    return { x: position.x, y: position.y, snappedX, snappedY };
+    return {
+      x: proposedAbsPos.x - absPosOffset.x,
+      y: proposedAbsPos.y - absPosOffset.y,
+      snappedX,
+      snappedY
+    };
   };
   const snapToAlignment = (nodeId, position) => {
     const snapResult = getAlignmentSnap(nodeId, position);

package/dist/core/useNodeDistribution.cjs

@@ -15,8 +15,8 @@ function useNodeDistribution(options) {
     targetNodes.sort((a, b) => a.position.x - b.position.x);
     const firstNode = targetNodes[0];
     const lastNode = targetNodes[targetNodes.length - 1];
-    const lastWidth = lastNode.width || 200;
-    const totalWidth = targetNodes.reduce((sum, n) => sum + (n.width || 200), 0);
+    const lastWidth = lastNode.measured?.width ?? lastNode.width ?? 200;
+    const totalWidth = targetNodes.reduce((sum, n) => sum + (n.measured?.width ?? n.width ?? 200), 0);
     const totalGap = gap * (targetNodes.length - 1);
     const availableSpace = lastNode.position.x + lastWidth - firstNode.position.x - totalWidth - totalGap;
     if (availableSpace <= 0) {
@@ -32,7 +32,7 @@ function useNodeDistribution(options) {
             }
           };
         }
-        currentX += (node.width || 200) + gap;
+        currentX += (node.measured?.width ?? node.width ?? 200) + gap;
       });
     } else {
       let currentX = firstNode.position.x;
@@ -47,7 +47,7 @@ function useNodeDistribution(options) {
             }
           };
         }
-        currentX += (node.width || 200) + gap;
+        currentX += (node.measured?.width ?? node.width ?? 200) + gap;
       });
     }
   };
@@ -58,8 +58,8 @@ function useNodeDistribution(options) {
     targetNodes.sort((a, b) => a.position.y - b.position.y);
     const firstNode = targetNodes[0];
     const lastNode = targetNodes[targetNodes.length - 1];
-    const lastHeight = lastNode.height || 50;
-    const totalHeight = targetNodes.reduce((sum, n) => sum + (n.height || 50), 0);
+    const lastHeight = lastNode.measured?.height ?? lastNode.height ?? 50;
+    const totalHeight = targetNodes.reduce((sum, n) => sum + (n.measured?.height ?? n.height ?? 50), 0);
     const totalGap = gap * (targetNodes.length - 1);
     const availableSpace = lastNode.position.y + lastHeight - firstNode.position.y - totalHeight - totalGap;
     if (availableSpace <= 0) {
@@ -75,7 +75,7 @@ function useNodeDistribution(options) {
             }
           };
         }
-        currentY += (node.height || 50) + gap;
+        currentY += (node.measured?.height ?? node.height ?? 50) + gap;
       });
     } else {
       let currentY = firstNode.position.y;
@@ -90,7 +90,7 @@ function useNodeDistribution(options) {
             }
           };
         }
-        currentY += (node.height || 50) + gap;
+        currentY += (node.measured?.height ?? node.height ?? 50) + gap;
       });
     }
   };
@@ -102,9 +102,9 @@ function useNodeDistribution(options) {
     if (alignment === "left") {
       referenceX = Math.min(...targetNodes.map(n => n.position.x));
     } else if (alignment === "right") {
-      referenceX = Math.max(...targetNodes.map(n => n.position.x + (n.width || 200)));
+      referenceX = Math.max(...targetNodes.map(n => n.position.x + (n.measured?.width ?? n.width ?? 200)));
     } else {
-      const centers = targetNodes.map(n => n.position.x + (n.width || 200) / 2);
+      const centers = targetNodes.map(n => n.position.x + (n.measured?.width ?? n.width ?? 200) / 2);
       referenceX = centers.reduce((a, b) => a + b, 0) / centers.length;
     }
     targetNodes.forEach(node => {
@@ -114,9 +114,9 @@ function useNodeDistribution(options) {
         if (alignment === "left") {
           newX = referenceX;
         } else if (alignment === "right") {
-          newX = referenceX - (node.width || 200);
+          newX = referenceX - (node.measured?.width ?? node.width ?? 200);
         } else {
-          newX = referenceX - (node.width || 200) / 2;
+          newX = referenceX - (node.measured?.width ?? node.width ?? 200) / 2;
         }
         nodes.value[nodeIndex] = {
           ...nodes.value[nodeIndex],
@@ -136,9 +136,9 @@ function useNodeDistribution(options) {
     if (alignment === "top") {
       referenceY = Math.min(...targetNodes.map(n => n.position.y));
     } else if (alignment === "bottom") {
-      referenceY = Math.max(...targetNodes.map(n => n.position.y + (n.height || 50)));
+      referenceY = Math.max(...targetNodes.map(n => n.position.y + (n.measured?.height ?? n.height ?? 50)));
     } else {
-      const middles = targetNodes.map(n => n.position.y + (n.height || 50) / 2);
+      const middles = targetNodes.map(n => n.position.y + (n.measured?.height ?? n.height ?? 50) / 2);
       referenceY = middles.reduce((a, b) => a + b, 0) / middles.length;
     }
     targetNodes.forEach(node => {
@@ -148,9 +148,9 @@ function useNodeDistribution(options) {
         if (alignment === "top") {
           newY = referenceY;
         } else if (alignment === "bottom") {
-          newY = referenceY - (node.height || 50);
+          newY = referenceY - (node.measured?.height ?? node.height ?? 50);
         } else {
-          newY = referenceY - (node.height || 50) / 2;
+          newY = referenceY - (node.measured?.height ?? node.height ?? 50) / 2;
         }
         nodes.value[nodeIndex] = {
           ...nodes.value[nodeIndex],

package/dist/core/useNodeDistribution.mjs

@@ -7,8 +7,11 @@ export function useNodeDistribution(options) {
     targetNodes.sort((a, b) => a.position.x - b.position.x);
     const firstNode = targetNodes[0];
     const lastNode = targetNodes[targetNodes.length - 1];
-    const lastWidth = lastNode.width || 200;
-    const totalWidth = targetNodes.reduce((sum, n) => sum + (n.width || 200), 0);
+    const lastWidth = lastNode.measured?.width ?? lastNode.width ?? 200;
+    const totalWidth = targetNodes.reduce(
+      (sum, n) => sum + (n.measured?.width ?? n.width ?? 200),
+      0
+    );
     const totalGap = gap * (targetNodes.length - 1);
     const availableSpace = lastNode.position.x + lastWidth - firstNode.position.x - totalWidth - totalGap;
     if (availableSpace <= 0) {
@@ -21,7 +24,7 @@ export function useNodeDistribution(options) {
             position: { ...nodes.value[nodeIndex].position, x: currentX }
           };
         }
-        currentX += (node.width || 200) + gap;
+        currentX += (node.measured?.width ?? node.width ?? 200) + gap;
       });
     } else {
       let currentX = firstNode.position.x;
@@ -33,7 +36,7 @@ export function useNodeDistribution(options) {
             position: { ...nodes.value[nodeIndex].position, x: currentX }
           };
         }
-        currentX += (node.width || 200) + gap;
+        currentX += (node.measured?.width ?? node.width ?? 200) + gap;
       });
     }
   };
@@ -44,8 +47,11 @@ export function useNodeDistribution(options) {
     targetNodes.sort((a, b) => a.position.y - b.position.y);
     const firstNode = targetNodes[0];
     const lastNode = targetNodes[targetNodes.length - 1];
-    const lastHeight = lastNode.height || 50;
-    const totalHeight = targetNodes.reduce((sum, n) => sum + (n.height || 50), 0);
+    const lastHeight = lastNode.measured?.height ?? lastNode.height ?? 50;
+    const totalHeight = targetNodes.reduce(
+      (sum, n) => sum + (n.measured?.height ?? n.height ?? 50),
+      0
+    );
     const totalGap = gap * (targetNodes.length - 1);
     const availableSpace = lastNode.position.y + lastHeight - firstNode.position.y - totalHeight - totalGap;
     if (availableSpace <= 0) {
@@ -58,7 +64,7 @@ export function useNodeDistribution(options) {
             position: { ...nodes.value[nodeIndex].position, y: currentY }
           };
         }
-        currentY += (node.height || 50) + gap;
+        currentY += (node.measured?.height ?? node.height ?? 50) + gap;
       });
     } else {
       let currentY = firstNode.position.y;
@@ -70,7 +76,7 @@ export function useNodeDistribution(options) {
             position: { ...nodes.value[nodeIndex].position, y: currentY }
           };
         }
-        currentY += (node.height || 50) + gap;
+        currentY += (node.measured?.height ?? node.height ?? 50) + gap;
       });
     }
   };
@@ -82,9 +88,13 @@ export function useNodeDistribution(options) {
     if (alignment === "left") {
       referenceX = Math.min(...targetNodes.map((n) => n.position.x));
     } else if (alignment === "right") {
-      referenceX = Math.max(...targetNodes.map((n) => n.position.x + (n.width || 200)));
+      referenceX = Math.max(
+        ...targetNodes.map((n) => n.position.x + (n.measured?.width ?? n.width ?? 200))
+      );
     } else {
-      const centers = targetNodes.map((n) => n.position.x + (n.width || 200) / 2);
+      const centers = targetNodes.map(
+        (n) => n.position.x + (n.measured?.width ?? n.width ?? 200) / 2
+      );
       referenceX = centers.reduce((a, b) => a + b, 0) / centers.length;
     }
     targetNodes.forEach((node) => {
@@ -94,9 +104,9 @@ export function useNodeDistribution(options) {
         if (alignment === "left") {
           newX = referenceX;
         } else if (alignment === "right") {
-          newX = referenceX - (node.width || 200);
+          newX = referenceX - (node.measured?.width ?? node.width ?? 200);
         } else {
-          newX = referenceX - (node.width || 200) / 2;
+          newX = referenceX - (node.measured?.width ?? node.width ?? 200) / 2;
         }
         nodes.value[nodeIndex] = {
           ...nodes.value[nodeIndex],
@@ -113,9 +123,13 @@ export function useNodeDistribution(options) {
     if (alignment === "top") {
       referenceY = Math.min(...targetNodes.map((n) => n.position.y));
     } else if (alignment === "bottom") {
-      referenceY = Math.max(...targetNodes.map((n) => n.position.y + (n.height || 50)));
+      referenceY = Math.max(
+        ...targetNodes.map((n) => n.position.y + (n.measured?.height ?? n.height ?? 50))
+      );
     } else {
-      const middles = targetNodes.map((n) => n.position.y + (n.height || 50) / 2);
+      const middles = targetNodes.map(
+        (n) => n.position.y + (n.measured?.height ?? n.height ?? 50) / 2
+      );
       referenceY = middles.reduce((a, b) => a + b, 0) / middles.length;
     }
     targetNodes.forEach((node) => {
@@ -125,9 +139,9 @@ export function useNodeDistribution(options) {
         if (alignment === "top") {
           newY = referenceY;
         } else if (alignment === "bottom") {
-          newY = referenceY - (node.height || 50);
+          newY = referenceY - (node.measured?.height ?? node.height ?? 50);
         } else {
-          newY = referenceY - (node.height || 50) / 2;
+          newY = referenceY - (node.measured?.height ?? node.height ?? 50) / 2;
         }
         nodes.value[nodeIndex] = {
           ...nodes.value[nodeIndex],

package/dist/core/useSelection.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useSelection = useSelection;
 var _vue = require("vue");
+var _customTypes = require("../utils/custom-types.cjs");
 function useSelection(options) {
   const {
     nodes,
@@ -44,10 +45,12 @@ function useSelection(options) {
       width: maxX - minX,
       height: maxY - minY
     };
+    const nodeMap = new Map(nodes.value.map(n => [n.id, n]));
     nodes.value = nodes.value.map(node => {
-      const nodeWidth = node.width || 200;
-      const nodeHeight = node.height || 50;
-      const isInside = node.position.x >= minX && node.position.y >= minY && node.position.x + nodeWidth <= maxX && node.position.y + nodeHeight <= maxY;
+      const nodeWidth = node.measured?.width ?? node.width ?? 200;
+      const nodeHeight = node.measured?.height ?? node.height ?? 50;
+      const absPos = (0, _customTypes.getNodeAbsolutePosition)(node, nodeMap);
+      const isInside = absPos.x >= minX && absPos.y >= minY && absPos.x + nodeWidth <= maxX && absPos.y + nodeHeight <= maxY;
       return {
         ...node,
         selected: isInside