@yh-ui/flow 1.0.51 → 1.0.52

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

package/dist/renderer/AlignmentLines.vue

@@ -32,6 +32,7 @@
 <script setup>
 import { computed } from "vue";
 import { useFlowContext } from "../core/FlowContext";
+import { getNodeAbsolutePosition } from "../utils/custom-types";
 const props = defineProps({
   snapThreshold: { type: Number, required: false }
 });
@@ -42,6 +43,9 @@ const draggingPosition = flowInstance.draggingPosition;
 const containerWidth = computed(() => flowInstance.$el?.clientWidth || 800);
 const containerHeight = computed(() => flowInstance.$el?.clientHeight || 600);
 const SNAP_THRESHOLD = props.snapThreshold ?? 10;
+const nodeMap = computed(() => {
+  return new Map(nodes.value.map((n) => [n.id, n]));
+});
 const horizontalLines = computed(() => {
   const dNodeId = draggingNodeId.value;
   const dPos = draggingPosition.value;
@@ -49,20 +53,23 @@ const horizontalLines = computed(() => {
   const lines = [];
   const draggingNode = nodes.value.find((n) => n.id === dNodeId);
   if (!draggingNode) return [];
-  const nodeHeight = draggingNode.height || 50;
+  const nodeHeight = draggingNode.measured?.height ?? draggingNode.height ?? 50;
   const otherNodes = nodes.value.filter((n) => n.id !== dNodeId && !n.hidden);
+  const m = nodeMap.value;
+  const draggingNodeAbs = getNodeAbsolutePosition(draggingNode, m);
   const positions = [
-    { y: draggingNode.position.y, key: "top" },
-    { y: draggingNode.position.y + nodeHeight / 2, key: "center" },
-    { y: draggingNode.position.y + nodeHeight, key: "bottom" }
+    { y: draggingNodeAbs.y, key: "top" },
+    { y: draggingNodeAbs.y + nodeHeight / 2, key: "center" },
+    { y: draggingNodeAbs.y + nodeHeight, key: "bottom" }
   ];
   for (const pos of positions) {
     for (const node of otherNodes) {
-      const nHeight = node.height || 50;
+      const nHeight = node.measured?.height ?? node.height ?? 50;
+      const otherAbs = getNodeAbsolutePosition(node, m);
       const nodePositions = [
-        { y: node.position.y, key: "top" },
-        { y: node.position.y + nHeight / 2, key: "center" },
-        { y: node.position.y + nHeight, key: "bottom" }
+        { y: otherAbs.y, key: "top" },
+        { y: otherAbs.y + nHeight / 2, key: "center" },
+        { y: otherAbs.y + nHeight, key: "bottom" }
       ];
       for (const np of nodePositions) {
         if (Math.abs(pos.y - np.y) < SNAP_THRESHOLD) {
@@ -81,20 +88,23 @@ const verticalLines = computed(() => {
   const lines = [];
   const draggingNode = nodes.value.find((n) => n.id === dNodeId);
   if (!draggingNode) return [];
-  const nodeWidth = draggingNode.width || 200;
+  const nodeWidth = draggingNode.measured?.width ?? draggingNode.width ?? 200;
   const otherNodes = nodes.value.filter((n) => n.id !== dNodeId && !n.hidden);
+  const m = nodeMap.value;
+  const draggingNodeAbs = getNodeAbsolutePosition(draggingNode, m);
   const positions = [
-    { x: draggingNode.position.x, key: "left" },
-    { x: draggingNode.position.x + nodeWidth / 2, key: "center" },
-    { x: draggingNode.position.x + nodeWidth, key: "right" }
+    { x: draggingNodeAbs.x, key: "left" },
+    { x: draggingNodeAbs.x + nodeWidth / 2, key: "center" },
+    { x: draggingNodeAbs.x + nodeWidth, key: "right" }
   ];
   for (const pos of positions) {
     for (const node of otherNodes) {
-      const nWidth = node.width || 200;
+      const nWidth = node.measured?.width ?? node.width ?? 200;
+      const otherAbs = getNodeAbsolutePosition(node, m);
       const nodePositions = [
-        { x: node.position.x, key: "left" },
-        { x: node.position.x + nWidth / 2, key: "center" },
-        { x: node.position.x + nWidth, key: "right" }
+        { x: otherAbs.x, key: "left" },
+        { x: otherAbs.x + nWidth / 2, key: "center" },
+        { x: otherAbs.x + nWidth, key: "right" }
       ];
       for (const np of nodePositions) {
         if (Math.abs(pos.x - np.x) < SNAP_THRESHOLD) {

package/dist/renderer/EdgeHandlesRenderer.vue

@@ -40,6 +40,7 @@
 <script setup>
 import { computed } from "vue";
 import { getHandlePosition } from "../utils/edge";
+import { getNodeAbsolutePosition } from "../utils/custom-types";
 const props = defineProps({
   edges: { type: Array, required: true },
   nodes: { type: Array, required: true }
@@ -59,8 +60,16 @@ const selectedUpdatableEdges = computed(() => {
       if (!sourceNode || !targetNode) continue;
       const sPosDesc = edge.sourceHandle || "right";
       const tPosDesc = edge.targetHandle || "left";
-      const sPos = getHandlePosition(sourceNode, sPosDesc, edge.sourceHandle);
-      const tPos = getHandlePosition(targetNode, tPosDesc, edge.targetHandle);
+      const sAbsNode = {
+        ...sourceNode,
+        position: getNodeAbsolutePosition(sourceNode, nodeMap.value)
+      };
+      const tAbsNode = {
+        ...targetNode,
+        position: getNodeAbsolutePosition(targetNode, nodeMap.value)
+      };
+      const sPos = getHandlePosition(sAbsNode, sPosDesc, edge.sourceHandle);
+      const tPos = getHandlePosition(tAbsNode, tPosDesc, edge.targetHandle);
       result.push({
         edge,
         sourceX: sPos.x,

package/dist/renderer/EdgeRenderer.vue

@@ -111,7 +111,7 @@
 <script setup>
 import { computed } from "vue";
 import { getEdgePath, getEdgeCenter, getHandlePosition } from "../utils/edge";
-import { getCustomEdge } from "../utils/custom-types";
+import { getCustomEdge, getNodeAbsolutePosition } from "../utils/custom-types";
 const props = defineProps({
   flowId: { type: String, required: true },
   edges: { type: Array, required: true },
@@ -160,8 +160,10 @@ const edgeData = computed(() => {
     if (!sourceNode || !targetNode) continue;
     const sPosDesc = edge.sourceHandle || "right";
     const tPosDesc = edge.targetHandle || "left";
-    const sPos = getHandlePosition(sourceNode, sPosDesc, edge.sourceHandle);
-    const tPos = getHandlePosition(targetNode, tPosDesc, edge.targetHandle);
+    const sAbsNode = { ...sourceNode, position: getNodeAbsolutePosition(sourceNode, nodeMap.value) };
+    const tAbsNode = { ...targetNode, position: getNodeAbsolutePosition(targetNode, nodeMap.value) };
+    const sPos = getHandlePosition(sAbsNode, sPosDesc, edge.sourceHandle);
+    const tPos = getHandlePosition(tAbsNode, tPosDesc, edge.targetHandle);
     const pathParams = {
       sourceX: sPos.x,
       sourceY: sPos.y,

package/dist/renderer/Minimap.vue

@@ -94,6 +94,7 @@
 <script setup>
 import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
 import { useFlowContext } from "../core/FlowContext";
+import { getNodeAbsolutePosition } from "../utils/custom-types";
 const props = defineProps({
   nodeColor: { type: [String, Function], required: false },
   nodeStrokeColor: { type: [String, Function], required: false },
@@ -120,6 +121,11 @@ const flowInstance = useFlowContext();
 const nodes = flowInstance.nodes;
 const edges = flowInstance.edges;
 const viewport = flowInstance.viewport;
+const nodeMap = computed(() => {
+  const m = /* @__PURE__ */ new Map();
+  nodes.value.forEach((n) => m.set(n.id, n));
+  return m;
+});
 let _mapScale = 1;
 let _minX = 0;
 let _minY = 0;
@@ -129,15 +135,17 @@ const computeGraphBounds = () => {
   const currentNodes = nodes.value;
   if (!currentNodes.length) return { minX: 0, minY: 0, maxX: 1, maxY: 1 };
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  const m = nodeMap.value;
   for (let i = 0; i < currentNodes.length; i++) {
     const n = currentNodes[i];
     if (n.hidden) continue;
-    const nw = n.width || 120;
-    const nh = n.height || 50;
-    if (n.position.x < minX) minX = n.position.x;
-    if (n.position.y < minY) minY = n.position.y;
-    if (n.position.x + nw > maxX) maxX = n.position.x + nw;
-    if (n.position.y + nh > maxY) maxY = n.position.y + nh;
+    const nw = n.measured?.width ?? n.width ?? 120;
+    const nh = n.measured?.height ?? n.height ?? 50;
+    const absPos = getNodeAbsolutePosition(n, m);
+    if (absPos.x < minX) minX = absPos.x;
+    if (absPos.y < minY) minY = absPos.y;
+    if (absPos.x + nw > maxX) maxX = absPos.x + nw;
+    if (absPos.y + nh > maxY) maxY = absPos.y + nh;
   }
   if (minX === Infinity) return { minX: 0, minY: 0, maxX: 1, maxY: 1 };
   return { minX, minY, maxX, maxY };
@@ -163,8 +171,7 @@ const drawCanvas = () => {
     updateVpRect(viewport.value);
     return;
   }
-  const nodeMap = /* @__PURE__ */ new Map();
-  nodes.value.forEach((n) => nodeMap.set(n.id, n));
+  const nodeMapVal = nodeMap.value;
   const rootStyles = getComputedStyle(canvas);
   const themeEdgeColor = rootStyles.getPropertyValue("--flow-edge-stroke").trim() || "#94a3b8";
   const themeMinimapNodeColor = rootStyles.getPropertyValue("--flow-minimap-node-color").trim() || "#cbd5e1";
@@ -175,16 +182,18 @@ const drawCanvas = () => {
   ctx.beginPath();
   edges.value.forEach((e) => {
     if (e.hidden) return;
-    const src = nodeMap.get(e.source);
-    const tgt = nodeMap.get(e.target);
+    const src = nodeMapVal.get(e.source);
+    const tgt = nodeMapVal.get(e.target);
     if (!src || !tgt) return;
+    const srcAbs = getNodeAbsolutePosition(src, nodeMapVal);
+    const tgtAbs = getNodeAbsolutePosition(tgt, nodeMapVal);
     ctx.moveTo(
-      toMX(src.position.x + (src.width || 120) / 2),
-      toMY(src.position.y + (src.height || 50) / 2)
+      toMX(srcAbs.x + (src.measured?.width ?? src.width ?? 120) / 2),
+      toMY(srcAbs.y + (src.measured?.height ?? src.height ?? 50) / 2)
     );
     ctx.lineTo(
-      toMX(tgt.position.x + (tgt.width || 120) / 2),
-      toMY(tgt.position.y + (tgt.height || 50) / 2)
+      toMX(tgtAbs.x + (tgt.measured?.width ?? tgt.width ?? 120) / 2),
+      toMY(tgtAbs.y + (tgt.measured?.height ?? tgt.height ?? 50) / 2)
     );
   });
   ctx.stroke();
@@ -196,10 +205,11 @@ const drawCanvas = () => {
       color = typeof props.nodeColor === "function" ? props.nodeColor(n) : props.nodeColor;
     }
     ctx.fillStyle = color;
-    const nw = Math.max((n.width || 120) * _mapScale, 3);
-    const nh = Math.max((n.height || 50) * _mapScale, 3);
-    const nx = toMX(n.position.x);
-    const ny = toMY(n.position.y);
+    const absPos = getNodeAbsolutePosition(n, nodeMapVal);
+    const nw = Math.max((n.measured?.width ?? n.width ?? 120) * _mapScale, 3);
+    const nh = Math.max((n.measured?.height ?? n.height ?? 50) * _mapScale, 3);
+    const nx = toMX(absPos.x);
+    const ny = toMY(absPos.y);
     ctx.fillRect(nx, ny, nw, nh);
     if (props.nodeStrokeWidth || props.nodeStrokeColor) {
       let strokeColor = "#94a3b8";

package/dist/renderer/NodeRenderer.d.vue.ts

@@ -30,6 +30,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "node-drag-end": (event: MouseEvent, node: Node<import("../types").NodeData>) => any;
     "connect-start": (event: MouseEvent, nodeId: string, handleId: string, handleType: HandleType) => any;
     "node-select-toggle": (nodeId: string) => any;
+    "nodes-measured": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onNode-click"?: ((event: MouseEvent, node: Node<import("../types").NodeData>) => any) | undefined;
     "onNode-dblclick"?: ((event: MouseEvent, node: Node<import("../types").NodeData>) => any) | undefined;
@@ -42,6 +43,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "onNode-drag-end"?: ((event: MouseEvent, node: Node<import("../types").NodeData>) => any) | undefined;
     "onConnect-start"?: ((event: MouseEvent, nodeId: string, handleId: string, handleType: HandleType) => any) | undefined;
     "onNode-select-toggle"?: ((nodeId: string) => any) | undefined;
+    "onNodes-measured"?: (() => any) | undefined;
 }>, {
     draggable: boolean;
     connectable: boolean;

package/dist/renderer/NodeRenderer.vue

@@ -4,6 +4,7 @@
       v-for="node in visibleNodes"
       :key="node.id"
       :id="getNodeDomId(node.id)"
+      :ref="el => setNodeRef(el, node.id)"
       class="yh-flow-node"
       :class="{
   'is-selected': node.selected,
@@ -63,8 +64,12 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
-import { getCustomNodeTemplate, getCustomNode } from "../utils/custom-types";
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import {
+  getCustomNodeTemplate,
+  getCustomNode,
+  getNodeAbsolutePosition
+} from "../utils/custom-types";
 import DiamondNode from "../components/nodes/DiamondNode.vue";
 import DatabaseNode from "../components/nodes/DatabaseNode.vue";
 const props = defineProps({
@@ -76,7 +81,7 @@ const props = defineProps({
   connectable: { type: Boolean, required: false, default: true },
   readonly: { type: Boolean, required: false, default: false }
 });
-const emit = defineEmits(["node-click", "node-dblclick", "node-contextmenu", "node-drag-start", "node-drag", "node-drag-end", "connect-start", "node-select-toggle"]);
+const emit = defineEmits(["node-click", "node-dblclick", "node-contextmenu", "node-drag-start", "node-drag", "node-drag-end", "connect-start", "node-select-toggle", "nodes-measured"]);
 const getComponent = (type) => {
   if (type === "diamond") return DiamondNode;
   if (type === "database") return DatabaseNode;
@@ -89,24 +94,33 @@ const visibleNodes = computed(() => {
   return props.nodes.filter((n) => !n.hidden);
 });
 const getNodeDomId = (nodeId) => `${props.flowId}-node-${nodeId}`;
+const nodeMap = computed(() => {
+  const m = /* @__PURE__ */ new Map();
+  props.nodes.forEach((n) => m.set(n.id, n));
+  return m;
+});
 const getNodeStyle = (node) => {
-  const width = node.width || 150;
-  const height = node.height || 40;
   let zIndex = node.zIndex || 10;
   if (node.type === "group") {
     zIndex = node.selected ? 2 : 1;
   } else {
     zIndex = node.selected ? 100 : Math.max(10, zIndex);
   }
-  return {
-    transform: `translate(${node.position.x}px, ${node.position.y}px)`,
-    width: `${width}px`,
-    height: `${height}px`,
+  const absPos = getNodeAbsolutePosition(node, nodeMap.value);
+  const style = {
+    transform: `translate(${absPos.x}px, ${absPos.y}px)`,
     zIndex,
     "--flow-node-label-color": node.labelColor,
     "--flow-node-description-color": node.descriptionColor,
     ...node.style
   };
+  if (node.width !== void 0 && node.width !== null) {
+    style.width = `${node.width}px`;
+  }
+  if (node.height !== void 0 && node.height !== null) {
+    style.height = `${node.height}px`;
+  }
+  return style;
 };
 const getComponentProps = (node) => {
   const {
@@ -278,16 +292,18 @@ const handleMouseMove = (event) => {
   const dx = (event.clientX - dragStartPos.value.x) / props.transform.zoom;
   const dy = (event.clientY - dragStartPos.value.y) / props.transform.zoom;
   draggingNodes.value.forEach((nodeId) => {
+    const node = props.nodes.find((n) => n.id === nodeId);
+    if (!node) return;
+    if (node.parentId && draggingNodes.value.includes(node.parentId)) {
+      return;
+    }
     const startPos = nodesStartPositions.value.get(nodeId);
     if (startPos) {
       const newPosition = {
         x: startPos.x + dx,
         y: startPos.y + dy
       };
-      const node = props.nodes.find((n) => n.id === nodeId);
-      if (node) {
-        emit("node-drag", event, node, newPosition);
-      }
+      emit("node-drag", event, node, newPosition);
     }
   });
 };
@@ -324,6 +340,51 @@ const handleNodeContextMenu = (event, node) => {
 const handleConnectStart = (event, node, handle) => {
   emit("connect-start", event, node.id, handle.id || handle.position || "", handle.type);
 };
+const nodeElements = /* @__PURE__ */ new Map();
+let resizeObserver = null;
+onMounted(() => {
+  resizeObserver = new ResizeObserver((entries) => {
+    let hasChanges = false;
+    for (const entry of entries) {
+      const target = entry.target;
+      const nodeId = target.getAttribute("data-node-id");
+      if (nodeId) {
+        const rect = target.getBoundingClientRect();
+        const width = Math.round(rect.width);
+        const height = Math.round(rect.height);
+        const node = props.nodes.find((n) => n.id === nodeId);
+        if (node) {
+          if (!node.measured || node.measured.width !== width || node.measured.height !== height) {
+            node.measured = { width, height };
+            hasChanges = true;
+          }
+        }
+      }
+    }
+    if (hasChanges) {
+      emit("nodes-measured");
+    }
+  });
+  nodeElements.forEach((el) => resizeObserver?.observe(el));
+});
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+  nodeElements.clear();
+});
+const setNodeRef = (el, nodeId) => {
+  if (el) {
+    nodeElements.set(nodeId, el);
+    resizeObserver?.observe(el);
+  } else {
+    const existingEl = nodeElements.get(nodeId);
+    if (existingEl) {
+      resizeObserver?.unobserve(existingEl);
+      nodeElements.delete(nodeId);
+    }
+  }
+};
 </script>
 
 <style scoped>

package/dist/renderer/NodeRenderer.vue.d.ts

@@ -30,6 +30,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "node-drag-end": (event: MouseEvent, node: Node<import("../types").NodeData>) => any;
     "connect-start": (event: MouseEvent, nodeId: string, handleId: string, handleType: HandleType) => any;
     "node-select-toggle": (nodeId: string) => any;
+    "nodes-measured": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onNode-click"?: ((event: MouseEvent, node: Node<import("../types").NodeData>) => any) | undefined;
     "onNode-dblclick"?: ((event: MouseEvent, node: Node<import("../types").NodeData>) => any) | undefined;
@@ -42,6 +43,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "onNode-drag-end"?: ((event: MouseEvent, node: Node<import("../types").NodeData>) => any) | undefined;
     "onConnect-start"?: ((event: MouseEvent, nodeId: string, handleId: string, handleType: HandleType) => any) | undefined;
     "onNode-select-toggle"?: ((nodeId: string) => any) | undefined;
+    "onNodes-measured"?: (() => any) | undefined;
 }>, {
     draggable: boolean;
     connectable: boolean;

package/dist/types/index.d.ts

@@ -54,6 +54,10 @@ export interface Node<Data = NodeData> {
     dragging?: boolean;
     width?: number;
     height?: number;
+    measured?: {
+        width: number;
+        height: number;
+    };
     parentId?: string;
     zIndex?: number;
     extent?: 'parent' | string;
@@ -262,6 +266,29 @@ export interface FlowInstance {
     /** Screenshot: pass options or legacy HTMLElement as container. Returns result with dataUrl/blob. */
     exportImage?: (options?: ScreenshotOptions | HTMLElement) => Promise<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?: Ref<boolean>;
+    canRedo?: Ref<boolean>;
+    historyLength?: Ref<number>;
+    clearHistory?: () => void;
+    getHistory?: () => unknown[];
+    jumpToStep?: (index: number) => void;
 }
 /** 截图范围：当前视口 或 整图（自动 fitView 后截取再恢复视口） */
 export type ScreenshotMode = 'viewport' | 'full';