@yh-ui/flow 1.0.51 → 1.0.53

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/useKeyboard.cjs

@@ -19,7 +19,9 @@ function useKeyboard(options = {}) {
     if (!enabled) return;
     const key = event.key;
     const ctrl = event.ctrlKey || event.metaKey;
-    if ((key === "Delete" || key === "Backspace") && !event.target?.toString().includes("Input")) {
+    const target = event.target;
+    const isEditable = target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable === true);
+    if ((key === "Delete" || key === "Backspace") && !isEditable) {
       event.preventDefault();
       onDelete?.();
     }

package/dist/core/useKeyboard.mjs

@@ -13,7 +13,9 @@ export function useKeyboard(options = {}) {
     if (!enabled) return;
     const key = event.key;
     const ctrl = event.ctrlKey || event.metaKey;
-    if ((key === "Delete" || key === "Backspace") && !event.target?.toString().includes("Input")) {
+    const target = event.target;
+    const isEditable = target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable === true);
+    if ((key === "Delete" || key === "Backspace") && !isEditable) {
       event.preventDefault();
       onDelete?.();
     }

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

package/dist/core/useSelection.mjs

@@ -1,4 +1,5 @@
 import { ref, computed } from "vue";
+import { getNodeAbsolutePosition } from "../utils/custom-types.mjs";
 export function useSelection(options) {
   const { nodes, edges, onSelectionChange } = options;
   const selectionRect = ref(null);
@@ -23,10 +24,12 @@ export 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 = getNodeAbsolutePosition(node, nodeMap);
+      const isInside = absPos.x >= minX && absPos.y >= minY && absPos.x + nodeWidth <= maxX && absPos.y + nodeHeight <= maxY;
       return { ...node, selected: isInside };
     });
   };

package/dist/core/useViewport.cjs

@@ -86,8 +86,8 @@ function useViewport(initialTransform, options = {}) {
     let maxX = -Infinity;
     let maxY = -Infinity;
     for (const node of nodes) {
-      const w = node.width || 200;
-      const h = node.height || 50;
+      const w = node.measured?.width ?? node.width ?? 200;
+      const h = node.measured?.height ?? node.height ?? 50;
       minX = Math.min(minX, node.position.x);
       minY = Math.min(minY, node.position.y);
       maxX = Math.max(maxX, node.position.x + w);
@@ -112,8 +112,8 @@ function useViewport(initialTransform, options = {}) {
     let centerX = 0;
     let centerY = 0;
     for (const node of nodes) {
-      const w = node.width || 200;
-      const h = node.height || 50;
+      const w = node.measured?.width ?? node.width ?? 200;
+      const h = node.measured?.height ?? node.height ?? 50;
       centerX += node.position.x + w / 2;
       centerY += node.position.y + h / 2;
     }

package/dist/core/useViewport.d.ts

@@ -28,6 +28,10 @@ export interface UseViewportReturn {
         };
         width?: number;
         height?: number;
+        measured?: {
+            width: number;
+            height: number;
+        };
     }[], options?: {
         padding?: number;
     }) => void;
@@ -41,6 +45,10 @@ export interface UseViewportReturn {
         };
         width?: number;
         height?: number;
+        measured?: {
+            width: number;
+            height: number;
+        };
     }[], options?: {
         padding?: number;
     }) => void;

package/dist/core/useViewport.mjs

@@ -58,8 +58,8 @@ export function useViewport(initialTransform, options = {}) {
     let maxX = -Infinity;
     let maxY = -Infinity;
     for (const node of nodes) {
-      const w = node.width || 200;
-      const h = node.height || 50;
+      const w = node.measured?.width ?? node.width ?? 200;
+      const h = node.measured?.height ?? node.height ?? 50;
       minX = Math.min(minX, node.position.x);
       minY = Math.min(minY, node.position.y);
       maxX = Math.max(maxX, node.position.x + w);
@@ -80,8 +80,8 @@ export function useViewport(initialTransform, options = {}) {
     let centerX = 0;
     let centerY = 0;
     for (const node of nodes) {
-      const w = node.width || 200;
-      const h = node.height || 50;
+      const w = node.measured?.width ?? node.width ?? 200;
+      const h = node.measured?.height ?? node.height ?? 50;
       centerX += node.position.x + w / 2;
       centerY += node.position.y + h / 2;
     }

package/dist/plugins/plugins/layout.cjs

@@ -34,8 +34,8 @@ async function applyDagreLayout(nodes, edges, options) {
   g.setDefaultEdgeLabel(() => ({}));
   nodes.forEach(node => {
     g.setNode(node.id, {
-      width: node.width || 150,
-      height: node.height || 50
+      width: node.measured?.width ?? node.width ?? 150,
+      height: node.measured?.height ?? node.height ?? 50
     });
   });
   edges.forEach(edge => {
@@ -48,8 +48,8 @@ async function applyDagreLayout(nodes, edges, options) {
     return {
       ...node,
       position: {
-        x: layoutNode.x - (node.width || 150) / 2,
-        y: layoutNode.y - (node.height || 50) / 2
+        x: layoutNode.x - (node.measured?.width ?? node.width ?? 150) / 2,
+        y: layoutNode.y - (node.measured?.height ?? node.height ?? 50) / 2
       }
     };
   });
@@ -88,8 +88,8 @@ async function applyElkLayout(nodes, edges, options) {
     },
     children: nodes.map(node => ({
       id: node.id,
-      width: node.width || 150,
-      height: node.height || 50
+      width: node.measured?.width ?? node.width ?? 150,
+      height: node.measured?.height ?? node.height ?? 50
     })),
     edges: edges.map((edge, index) => ({
       id: edge.id || `edge-${index}`,

package/dist/plugins/plugins/layout.mjs

@@ -26,8 +26,8 @@ async function applyDagreLayout(nodes, edges, options) {
   g.setDefaultEdgeLabel(() => ({}));
   nodes.forEach((node) => {
     g.setNode(node.id, {
-      width: node.width || 150,
-      height: node.height || 50
+      width: node.measured?.width ?? node.width ?? 150,
+      height: node.measured?.height ?? node.height ?? 50
     });
   });
   edges.forEach((edge) => {
@@ -40,8 +40,8 @@ async function applyDagreLayout(nodes, edges, options) {
     return {
       ...node,
       position: {
-        x: layoutNode.x - (node.width || 150) / 2,
-        y: layoutNode.y - (node.height || 50) / 2
+        x: layoutNode.x - (node.measured?.width ?? node.width ?? 150) / 2,
+        y: layoutNode.y - (node.measured?.height ?? node.height ?? 50) / 2
       }
     };
   });
@@ -81,8 +81,8 @@ async function applyElkLayout(nodes, edges, options) {
     },
     children: nodes.map((node) => ({
       id: node.id,
-      width: node.width || 150,
-      height: node.height || 50
+      width: node.measured?.width ?? node.width ?? 150,
+      height: node.measured?.height ?? node.height ?? 50
     })),
     edges: edges.map((edge, index) => ({
       id: edge.id || `edge-${index}`,

package/dist/plugins/plugins/node-group.cjs

@@ -24,8 +24,8 @@ function computeBoundingBox(nodes, paddingX, paddingY) {
     maxX = -Infinity,
     maxY = -Infinity;
   nodes.forEach(node => {
-    const w = node.width || 150;
-    const h = node.height || 50;
+    const w = node.measured?.width ?? node.width ?? 150;
+    const h = node.measured?.height ?? node.height ?? 50;
     minX = Math.min(minX, node.position.x);
     minY = Math.min(minY, node.position.y);
     maxX = Math.max(maxX, node.position.x + w);
@@ -165,7 +165,15 @@ function createNodeGroupPlugin(options = {}) {
           }
         });
         if (hidden) {
+          const groupNode = flow.getNode(groupId);
+          const currentW = groupNode?.width ?? groupNode?.style?.width ?? 200;
+          const currentH = groupNode?.height ?? groupNode?.style?.height ?? 150;
           flow.updateNode(groupId, {
+            data: {
+              ...(groupNode?.data || {}),
+              _origWidth: currentW,
+              _origHeight: currentH
+            },
             style: {
               width: 160,
               height: 50,

package/dist/plugins/plugins/node-group.mjs

@@ -10,8 +10,8 @@ function computeBoundingBox(nodes, paddingX, paddingY) {
   if (nodes.length === 0) return { x: 0, y: 0, width: 200, height: 150 };
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   nodes.forEach((node) => {
-    const w = node.width || 150;
-    const h = node.height || 50;
+    const w = node.measured?.width ?? node.width ?? 150;
+    const h = node.measured?.height ?? node.height ?? 50;
     minX = Math.min(minX, node.position.x);
     minY = Math.min(minY, node.position.y);
     maxX = Math.max(maxX, node.position.x + w);
@@ -139,7 +139,15 @@ export function createNodeGroupPlugin(options = {}) {
           }
         });
         if (hidden) {
+          const groupNode = flow.getNode(groupId);
+          const currentW = groupNode?.width ?? groupNode?.style?.width ?? 200;
+          const currentH = groupNode?.height ?? groupNode?.style?.height ?? 150;
           flow.updateNode(groupId, {
+            data: {
+              ...groupNode?.data || {},
+              _origWidth: currentW,
+              _origHeight: currentH
+            },
             style: { width: 160, height: 50, minWidth: 160, minHeight: 50 },
             width: 160,
             height: 50