@vanduo-oss/vd3-flowchart 1.4.0 → 1.5.0

package/dist/index.js

@@ -362,11 +362,12 @@ function createToolbarButton({ action, label, icon, disabled = false }) {
   return button;
 }
 var DEFAULT_GRID_SIZE = 24;
-var MIN_SCALE = 0.35;
-var MAX_SCALE = 3;
-var MIN_NODE_SIZE = 56;
-var MAX_NODE_SIZE = 420;
-var WORLD_EXTENT = 12e3;
+var DEFAULT_MIN_SCALE = 0.35;
+var DEFAULT_MAX_SCALE = 3;
+var DEFAULT_MIN_NODE_SIZE = 56;
+var DEFAULT_MAX_NODE_SIZE = 420;
+var DEFAULT_WORLD_EXTENT = 12e3;
+var WIDE_WORLD_EXTENT = 24e4;
 var MAX_NODES = 1e4;
 var MAX_EDGES = 1e4;
 var RESIZE_HANDLES = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
@@ -398,7 +399,7 @@ var EDGE_STROKE_PRESETS = [
   { id: "medium", label: "Medium", width: DEFAULT_EDGE_STROKE_WIDTH },
   { id: "bold", label: "Bold", width: 3.5 }
 ];
-var VD_FLOWCHART_VERSION = "1.4.0";
+var VD_FLOWCHART_VERSION = "1.5.0";
 var FLOWCHART_DOCUMENT_VERSION = "1.3.0";
 var FLOWCHART_NODE_TYPES = [
   "rounded-rect",
@@ -539,6 +540,17 @@ function deepClone(value) {
 function formatNumber(value) {
   return Number(value.toFixed(2));
 }
+function formatScale(value) {
+  return Number(toFiniteNumber(value, 1).toFixed(4));
+}
+function normalizeBoundPair(min, max, fallbackMin, fallbackMax) {
+  const low = Number(min);
+  const high = Number(max);
+  if (!Number.isFinite(low) || !Number.isFinite(high) || low <= 0 || high <= 0 || low >= high) {
+    return { min: fallbackMin, max: fallbackMax };
+  }
+  return { min: low, max: high };
+}
 function sanitizeId(value) {
   if (value == null) return "";
   return String(value).trim();
@@ -596,21 +608,36 @@ function normalizeNodeType(type) {
 function getNodeSpec(type) {
   return DEFAULT_NODE_SPECS[normalizeNodeType(type)];
 }
-function getNodeSizeBounds(type) {
+function nodeVisualScale(node) {
+  if (!node || node.type === "junction") return 1;
+  const spec = getNodeSpec(node.type);
+  const width = spec.width > 0 ? toFiniteNumber(node.width, spec.width) / spec.width : 1;
+  const height = spec.height > 0 ? toFiniteNumber(node.height, spec.height) / spec.height : 1;
+  return clamp(Math.min(1, width, height), 0.01, 1);
+}
+function edgeVisualScale(fromNode, toNode) {
+  if (fromNode && toNode) return Math.min(nodeVisualScale(fromNode), nodeVisualScale(toNode));
+  if (fromNode) return nodeVisualScale(fromNode);
+  if (toNode) return nodeVisualScale(toNode);
+  return 1;
+}
+function getNodeSizeBounds(type, sizeBounds) {
   const spec = getNodeSpec(type);
+  const min = sizeBounds?.min ?? DEFAULT_MIN_NODE_SIZE;
+  const max = sizeBounds?.max ?? DEFAULT_MAX_NODE_SIZE;
   return {
-    minWidth: spec.minWidth ?? MIN_NODE_SIZE,
-    minHeight: spec.minHeight ?? MIN_NODE_SIZE,
-    maxWidth: spec.maxWidth ?? MAX_NODE_SIZE,
-    maxHeight: spec.maxHeight ?? MAX_NODE_SIZE
+    minWidth: spec.minWidth ?? min,
+    minHeight: spec.minHeight ?? min,
+    maxWidth: spec.maxWidth ?? max,
+    maxHeight: spec.maxHeight ?? max
   };
 }
-function clampNodeWidth(type, width, fallback) {
-  const bounds = getNodeSizeBounds(type);
+function clampNodeWidth(type, width, fallback, sizeBounds) {
+  const bounds = getNodeSizeBounds(type, sizeBounds);
   return clamp(toFiniteNumber(width, fallback), bounds.minWidth, bounds.maxWidth);
 }
-function clampNodeHeight(type, height, fallback) {
-  const bounds = getNodeSizeBounds(type);
+function clampNodeHeight(type, height, fallback, sizeBounds) {
+  const bounds = getNodeSizeBounds(type, sizeBounds);
   return clamp(toFiniteNumber(height, fallback), bounds.minHeight, bounds.maxHeight);
 }
 function isNodeResizable(nodeOrType) {
@@ -634,14 +661,16 @@ function getStrokePresetWidth(presetId) {
   const preset = EDGE_STROKE_PRESETS.find((item) => item.id === presetId);
   return preset?.width ?? DEFAULT_EDGE_STROKE_WIDTH;
 }
-function normalizeViewport(viewport) {
+function normalizeViewport(viewport, scaleBounds) {
+  const min = scaleBounds?.min ?? DEFAULT_MIN_SCALE;
+  const max = scaleBounds?.max ?? DEFAULT_MAX_SCALE;
   return {
     x: toFiniteNumber(viewport?.x, 0),
     y: toFiniteNumber(viewport?.y, 0),
-    scale: clamp(toFiniteNumber(viewport?.scale, 1), MIN_SCALE, MAX_SCALE)
+    scale: clamp(formatScale(toFiniteNumber(viewport?.scale, 1)), min, max)
   };
 }
-function normalizeNode(rawNode, index, usedIds) {
+function normalizeNode(rawNode, index, usedIds, sizeBounds) {
   const type = normalizeNodeType(rawNode?.type);
   const spec = getNodeSpec(type);
   const node = {
@@ -649,8 +678,8 @@ function normalizeNode(rawNode, index, usedIds) {
     type,
     x: toFiniteNumber(rawNode?.x, index * 28),
     y: toFiniteNumber(rawNode?.y, index * 18),
-    width: clampNodeWidth(type, rawNode?.width, spec.width),
-    height: clampNodeHeight(type, rawNode?.height, spec.height),
+    width: clampNodeWidth(type, rawNode?.width, spec.width, sizeBounds),
+    height: clampNodeHeight(type, rawNode?.height, spec.height, sizeBounds),
     text: rawNode?.text == null ? spec.text : String(rawNode.text),
     data: isPlainObject(rawNode?.data) ? deepClone(rawNode.data) : {}
   };
@@ -743,7 +772,7 @@ function isSupportedDocumentVersion(value) {
   if (parsed.minor === max.minor && parsed.patch > max.patch) return false;
   return true;
 }
-function normalizeDocument(input) {
+function normalizeDocument(input, limits = {}) {
   let source = input;
   if (typeof source === "string") {
     try {
@@ -766,13 +795,13 @@ function normalizeDocument(input) {
     }
   }
   const usedNodeIds = /* @__PURE__ */ new Set();
-  const nodes = (Array.isArray(source.nodes) ? source.nodes : []).slice(0, MAX_NODES).map((node, index) => normalizeNode(node, index, usedNodeIds));
+  const nodes = (Array.isArray(source.nodes) ? source.nodes : []).slice(0, MAX_NODES).map((node, index) => normalizeNode(node, index, usedNodeIds, limits.sizeBounds));
   const nodeIds = new Set(nodes.map((node) => node.id));
   const usedEdgeIds = /* @__PURE__ */ new Set();
   const edges = (Array.isArray(source.edges) ? source.edges : []).slice(0, MAX_EDGES).map((edge, index) => normalizeEdge(edge, index, nodeIds, usedEdgeIds)).filter(Boolean);
   return {
     version: FLOWCHART_DOCUMENT_VERSION,
-    viewport: normalizeViewport(source.viewport),
+    viewport: normalizeViewport(source.viewport, limits.scaleBounds),
     nodes,
     edges
   };
@@ -989,19 +1018,30 @@ function getPolylineLabelPoint(points) {
   const last = points[points.length - 1] || { x: 0, y: 0 };
   return { x: formatNumber(last.x), y: formatNumber(last.y) };
 }
-function curveControlPoint(point, port, target, curvature) {
+function routeMetrics(edgeScale = 1) {
+  const scale = clamp(toFiniteNumber(edgeScale, 1), 0.01, 1);
+  return {
+    scale,
+    minCurveArm: MIN_CURVE_ARM * scale,
+    maxCurveArm: MAX_CURVE_ARM * scale,
+    stub: ORTHOGONAL_STUB_LENGTH * scale,
+    corner: ORTHOGONAL_CORNER_RADIUS * scale,
+    clearance: ORTHOGONAL_CLEARANCE * scale
+  };
+}
+function curveControlPoint(point, port, target, curvature, metrics = routeMetrics(1)) {
   const normal = getPortNormal(port);
   const dx = target.x - point.x;
   const dy = target.y - point.y;
   const distance = Math.hypot(dx, dy) || 1;
   const align = (normal.x * dx + normal.y * dy) / distance;
   const ease = 0.55 + 0.45 * align;
-  const arm = clamp(distance * curvature * ease, MIN_CURVE_ARM, MAX_CURVE_ARM);
+  const arm = clamp(distance * curvature * ease, metrics.minCurveArm, metrics.maxCurveArm);
   return { x: point.x + normal.x * arm, y: point.y + normal.y * arm };
 }
-function buildCurvePath(fromPoint, toPoint, fromPort = "right", toPort = "left") {
-  const controlA = curveControlPoint(fromPoint, fromPort, toPoint, EDGE_CURVATURE);
-  const controlB = curveControlPoint(toPoint, toPort, fromPoint, EDGE_CURVATURE);
+function buildCurvePath(fromPoint, toPoint, fromPort = "right", toPort = "left", metrics = routeMetrics(1)) {
+  const controlA = curveControlPoint(fromPoint, fromPort, toPoint, EDGE_CURVATURE, metrics);
+  const controlB = curveControlPoint(toPoint, toPort, fromPoint, EDGE_CURVATURE, metrics);
   const labelX = 0.125 * fromPoint.x + 0.375 * controlA.x + 0.375 * controlB.x + 0.125 * toPoint.x;
   const labelY = 0.125 * fromPoint.y + 0.375 * controlA.y + 0.375 * controlB.y + 0.125 * toPoint.y;
   return {
@@ -1063,11 +1103,11 @@ function getOrthogonalMidpoints(fromStub, toStub, fromPort, toPort) {
   }
   return [{ x: fromStub.x, y: toStub.y }];
 }
-function getOrthogonalPoints(fromPoint, toPoint, fromPort, toPort, fromRect, toRect) {
+function getOrthogonalPoints(fromPoint, toPoint, fromPort, toPort, fromRect, toRect, metrics = routeMetrics(1)) {
   const fromNormal = getPortNormal(fromPort);
   const toNormal = getPortNormal(toPort);
-  const fromStub = offsetPoint(fromPoint, fromNormal, ORTHOGONAL_STUB_LENGTH);
-  const toStub = offsetPoint(toPoint, toNormal, ORTHOGONAL_STUB_LENGTH);
+  const fromStub = offsetPoint(fromPoint, fromNormal, metrics.stub);
+  const toStub = offsetPoint(toPoint, toNormal, metrics.stub);
   const sourceHorizontal = isHorizontalPort(fromPort);
   const targetHorizontal = isHorizontalPort(toPort);
   const mids = [];
@@ -1107,13 +1147,13 @@ function getOrthogonalPoints(fromPoint, toPoint, fromPort, toPort, fromRect, toR
   );
   return points;
 }
-function buildOrthogonalPath(fromPoint, toPoint, fromPort = "right", toPort = "left", fromRect = null, toRect = null) {
+function buildOrthogonalPath(fromPoint, toPoint, fromPort = "right", toPort = "left", fromRect = null, toRect = null, metrics = routeMetrics(1)) {
   let points;
   if (fromRect && toRect) {
-    points = getOrthogonalPoints(fromPoint, toPoint, fromPort, toPort, fromRect, toRect);
+    points = getOrthogonalPoints(fromPoint, toPoint, fromPort, toPort, fromRect, toRect, metrics);
   } else {
-    const fromStub = offsetPoint(fromPoint, getPortNormal(fromPort), ORTHOGONAL_STUB_LENGTH);
-    const toStub = offsetPoint(toPoint, getPortNormal(toPort), ORTHOGONAL_STUB_LENGTH);
+    const fromStub = offsetPoint(fromPoint, getPortNormal(fromPort), metrics.stub);
+    const toStub = offsetPoint(toPoint, getPortNormal(toPort), metrics.stub);
     points = [];
     [
       fromPoint,
@@ -1125,7 +1165,7 @@ function buildOrthogonalPath(fromPoint, toPoint, fromPort = "right", toPort = "l
   }
   const label = getPolylineLabelPoint(points);
   return {
-    d: buildRoundedPath(points, ORTHOGONAL_CORNER_RADIUS),
+    d: buildRoundedPath(points, metrics.corner),
     labelX: label.x,
     labelY: label.y
   };
@@ -1136,6 +1176,7 @@ function buildEdgePath(edge, fromNode = null, toNode = null) {
   const fromPoint = edge?.fromPoint || (fromNode ? getPortPosition(fromNode, fromPort) : null);
   const toPoint = edge?.toPoint || (toNode ? getPortPosition(toNode, toPort) : null);
   const route = normalizeEdgeRoute(edge?.route);
+  const metrics = routeMetrics(edgeVisualScale(fromNode, toNode));
   if (!fromPoint || !toPoint) {
     return { d: "", labelX: 0, labelY: 0 };
   }
@@ -1143,15 +1184,17 @@ function buildEdgePath(edge, fromNode = null, toNode = null) {
     return buildStraightPath(fromPoint, toPoint);
   }
   if (route === "orthogonal") {
-    const fromRect = !edge?.fromPoint && fromNode ? getNodeRectBounds(fromNode, ORTHOGONAL_CLEARANCE) : null;
-    const toRect = !edge?.toPoint && toNode ? getNodeRectBounds(toNode, ORTHOGONAL_CLEARANCE) : null;
-    return buildOrthogonalPath(fromPoint, toPoint, fromPort, toPort, fromRect, toRect);
+    const fromRect = !edge?.fromPoint && fromNode ? getNodeRectBounds(fromNode, metrics.clearance) : null;
+    const toRect = !edge?.toPoint && toNode ? getNodeRectBounds(toNode, metrics.clearance) : null;
+    return buildOrthogonalPath(fromPoint, toPoint, fromPort, toPort, fromRect, toRect, metrics);
   }
-  return buildCurvePath(fromPoint, toPoint, fromPort, toPort);
+  return buildCurvePath(fromPoint, toPoint, fromPort, toPort, metrics);
 }
-function createArrowMarker(id, strokeWidth, reversed = false) {
-  const size = formatNumber(Math.max(9, strokeWidth * 4.4));
-  const refInset = formatNumber(Math.max(1.5, strokeWidth * 0.85));
+function createArrowMarker(id, strokeWidth, reversed = false, edgeScale = 1) {
+  const scale = clamp(toFiniteNumber(edgeScale, 1), 0.01, 1);
+  const effective = Math.max(0.02, strokeWidth * scale);
+  const size = formatNumber(Math.max(9 * scale, effective * 4.4));
+  const refInset = formatNumber(Math.max(1.5 * scale, effective * 0.85));
   const marker = svgEl("marker", {
     id,
     markerWidth: size,
@@ -1169,9 +1212,11 @@ function createArrowMarker(id, strokeWidth, reversed = false) {
   );
   return marker;
 }
-function createDotMarker(id, strokeWidth) {
-  const size = formatNumber(Math.max(8, strokeWidth * 3.3));
-  const radius = formatNumber(Math.max(2.75, strokeWidth * 1.45));
+function createDotMarker(id, strokeWidth, edgeScale = 1) {
+  const scale = clamp(toFiniteNumber(edgeScale, 1), 0.01, 1);
+  const effective = Math.max(0.02, strokeWidth * scale);
+  const size = formatNumber(Math.max(8 * scale, effective * 3.3));
+  const radius = formatNumber(Math.max(2.75 * scale, effective * 1.45));
   const marker = svgEl("marker", {
     id,
     markerWidth: size,
@@ -1428,7 +1473,23 @@ var VdFlowchart = class {
     this.element = resolveElement(options.element || options.target);
     this.readonly = Boolean(options.readonly);
     this.gridSize = clamp(toFiniteNumber(options.gridSize, DEFAULT_GRID_SIZE), 12, 64);
-    this.documentData = normalizeDocument(options.data || {});
+    const scaleBounds = normalizeBoundPair(
+      options.minScale,
+      options.maxScale,
+      DEFAULT_MIN_SCALE,
+      DEFAULT_MAX_SCALE
+    );
+    const sizeBounds = normalizeBoundPair(
+      options.minNodeSize,
+      options.maxNodeSize,
+      DEFAULT_MIN_NODE_SIZE,
+      DEFAULT_MAX_NODE_SIZE
+    );
+    this.minScale = scaleBounds.min;
+    this.maxScale = scaleBounds.max;
+    this.minNodeSize = sizeBounds.min;
+    this.maxNodeSize = sizeBounds.max;
+    this.documentData = normalizeDocument(options.data || {}, { scaleBounds, sizeBounds });
     this.listeners = {};
     this.selection = null;
     this.selectedNodeIds = /* @__PURE__ */ new Set();
@@ -1656,10 +1717,10 @@ var VdFlowchart = class {
     this.world = svgEl("g", { class: "vd-flowchart-world" });
     this.gridRect = svgEl("rect", {
       class: "vd-flowchart-grid",
-      x: -WORLD_EXTENT / 2,
-      y: -WORLD_EXTENT / 2,
-      width: WORLD_EXTENT,
-      height: WORLD_EXTENT,
+      x: -DEFAULT_WORLD_EXTENT / 2,
+      y: -DEFAULT_WORLD_EXTENT / 2,
+      width: DEFAULT_WORLD_EXTENT,
+      height: DEFAULT_WORLD_EXTENT,
       fill: `url(#${this.gridPatternId})`
     });
     this.edgesLayer = svgEl("g", { class: "vd-flowchart-edges" });
@@ -2442,7 +2503,7 @@ var VdFlowchart = class {
     const width = this.canvasEl.clientWidth || 800;
     const height = this.canvasEl.clientHeight || 560;
     this.scaleAround(
-      clamp(scale, MIN_SCALE, MAX_SCALE) / viewport.scale,
+      clamp(formatScale(scale), this.minScale, this.maxScale) / viewport.scale,
       width / 2,
       height / 2,
       "viewport:zoom"
@@ -2477,7 +2538,8 @@ var VdFlowchart = class {
       const node = normalizeNode(
         { ...data, id: void 0, x: data.x + 24, y: data.y + 24 },
         this.documentData.nodes.length + index,
-        usedNodeIds
+        usedNodeIds,
+        this.nodeSizeBounds()
       );
       idMap.set(data.id, node.id);
       return node;
@@ -2509,7 +2571,8 @@ var VdFlowchart = class {
     const node = normalizeNode(
       { ...data, id: void 0, collapsed: void 0, x: data.x + 24, y: data.y + 24 },
       this.documentData.nodes.length,
-      usedIds
+      usedIds,
+      this.nodeSizeBounds()
     );
     this.documentData.nodes.push(node);
     this.select({ kind: "node", id: node.id });
@@ -3123,14 +3186,15 @@ var VdFlowchart = class {
     if (this.activeTool === "arrow") return true;
     return this.selection?.kind === "node" && this.selection.id === node.id && !this.hasMultiSelection();
   }
-  getMarkerId(markerType, position, strokeWidth) {
+  getMarkerId(markerType, position, strokeWidth, edgeScale = 1) {
     const width = normalizeEdgeStrokeWidth(strokeWidth);
-    const key = `${markerType}:${position}:${width}`;
+    const scale = clamp(formatNumber(Math.max(edgeScale, 0.01)), 0.01, 1);
+    const key = `${markerType}:${position}:${width}:${scale}`;
     if (this.markerIds.has(key)) {
       return this.markerIds.get(key);
     }
     const markerId = nextId(`flowchart-${markerType}-${position}`);
-    const marker = markerType === "dot" ? createDotMarker(markerId, width) : createArrowMarker(markerId, width, position === "start");
+    const marker = markerType === "dot" ? createDotMarker(markerId, width, scale) : createArrowMarker(markerId, width, position === "start", scale);
     this.markerDefs.appendChild(marker);
     this.markerIds.set(key, markerId);
     return markerId;
@@ -3138,8 +3202,15 @@ var VdFlowchart = class {
   getEdgeStrokeWidth(edge) {
     return normalizeEdgeStrokeWidth(edge?.strokeWidth);
   }
-  getEdgeHitStrokeWidth(edge) {
-    return formatNumber(Math.max(EDGE_HIT_STROKE_MIN, this.getEdgeStrokeWidth(edge) + 12));
+  getEdgeHitStrokeWidth(edge, edgeScale = 1) {
+    const visual = clamp(toFiniteNumber(edgeScale, 1), 0.01, 1);
+    const base = this.getEdgeStrokeWidth(edge);
+    const view = Math.max(this.documentData?.viewport?.scale || 1, 1e-4);
+    const legacy = Math.max(EDGE_HIT_STROKE_MIN, base + 12);
+    if (visual >= 0.999 && view >= DEFAULT_MIN_SCALE && view <= DEFAULT_MAX_SCALE) {
+      return formatNumber(legacy);
+    }
+    return formatNumber(Math.max(base * visual, EDGE_HIT_STROKE_MIN / view));
   }
   findConnectionTarget(worldPoint, excludeNodeId, previousSnap = null, referencePoint = null) {
     const snapPadding = CONNECTION_SNAP_PADDING / this.documentData.viewport.scale;
@@ -3196,17 +3267,37 @@ var VdFlowchart = class {
     let width = original.width;
     let height = original.height;
     if (handle.includes("e")) {
-      width = clampNodeWidth(nextType, original.width + deltaX, original.width);
+      width = clampNodeWidth(
+        nextType,
+        original.width + deltaX,
+        original.width,
+        this.nodeSizeBounds()
+      );
     }
     if (handle.includes("s")) {
-      height = clampNodeHeight(nextType, original.height + deltaY, original.height);
+      height = clampNodeHeight(
+        nextType,
+        original.height + deltaY,
+        original.height,
+        this.nodeSizeBounds()
+      );
     }
     if (handle.includes("w")) {
-      width = clampNodeWidth(nextType, original.width - deltaX, original.width);
+      width = clampNodeWidth(
+        nextType,
+        original.width - deltaX,
+        original.width,
+        this.nodeSizeBounds()
+      );
       x = original.x + original.width - width;
     }
     if (handle.includes("n")) {
-      height = clampNodeHeight(nextType, original.height - deltaY, original.height);
+      height = clampNodeHeight(
+        nextType,
+        original.height - deltaY,
+        original.height,
+        this.nodeSizeBounds()
+      );
       y = original.y + original.height - height;
     }
     return {
@@ -3242,7 +3333,7 @@ var VdFlowchart = class {
   scaleAround(factor, localX, localY, reason) {
     const viewport = this.documentData.viewport;
     const anchor = this.localToWorld(localX, localY);
-    const nextScale = clamp(formatNumber(viewport.scale * factor), MIN_SCALE, MAX_SCALE);
+    const nextScale = clamp(formatScale(viewport.scale * factor), this.minScale, this.maxScale);
     if (nextScale === viewport.scale) return;
     viewport.scale = nextScale;
     viewport.x = formatNumber(localX - anchor.x * nextScale);
@@ -3425,19 +3516,20 @@ var VdFlowchart = class {
     }
     const viewport = this.documentData.viewport;
     const scale = viewport.scale;
+    const visual = nodeVisualScale(node);
     const textarea = this.textEditor.textarea;
     const width = node.width * scale;
     const height = node.height * scale;
     const metrics = getNodeFontMetrics(node);
-    const lineHeight = metrics.lineHeight * scale;
+    const lineHeight = metrics.lineHeight * visual * scale;
     const lineCount = Math.max(1, textarea.value.split(/\r?\n/).length);
-    const horizontalPadding = (node.type === "textbox" ? 16 : 12) * scale;
-    const verticalPadding = node.type === "textbox" ? 12 * scale : Math.max(4, (height - lineCount * lineHeight) / 2);
+    const horizontalPadding = (node.type === "textbox" ? 16 : 12) * visual * scale;
+    const verticalPadding = node.type === "textbox" ? 12 * visual * scale : Math.max(4 * visual, (height - lineCount * lineHeight) / 2);
     textarea.style.left = `${formatNumber(viewport.x + node.x * scale)}px`;
     textarea.style.top = `${formatNumber(viewport.y + node.y * scale)}px`;
     textarea.style.width = `${formatNumber(width)}px`;
     textarea.style.height = `${formatNumber(height)}px`;
-    textarea.style.fontSize = `${formatNumber(metrics.fontSize * scale)}px`;
+    textarea.style.fontSize = `${formatNumber(metrics.fontSize * visual * scale)}px`;
     textarea.style.lineHeight = `${formatNumber(lineHeight)}px`;
     textarea.style.padding = `${formatNumber(verticalPadding)}px ${formatNumber(horizontalPadding)}px`;
   }
@@ -3449,14 +3541,16 @@ var VdFlowchart = class {
       this.stopTextEdit({ commit: false });
       return;
     }
+    const visual = edgeVisualScale(fromNode, toNode);
     const { labelX, labelY } = buildEdgePath(edge, fromNode, toNode);
     const viewport = this.documentData.viewport;
     const textarea = this.textEditor.textarea;
-    const fontSize = Math.max(11, 13 * viewport.scale);
-    const width = clamp(textarea.value.length * fontSize * 0.62 + 28, 96, 280);
-    const height = fontSize * 1.4 + 12;
+    const fontSize = Math.max(11 * visual, 13 * visual * viewport.scale);
+    const width = clamp(textarea.value.length * fontSize * 0.62 + 28 * visual, 96 * visual, 280);
+    const height = fontSize * 1.4 + 12 * visual;
+    const labelOffset = 8 * visual;
     textarea.style.left = `${formatNumber(viewport.x + labelX * viewport.scale - width / 2)}px`;
-    textarea.style.top = `${formatNumber(viewport.y + (labelY - 8) * viewport.scale - height / 2)}px`;
+    textarea.style.top = `${formatNumber(viewport.y + (labelY - labelOffset) * viewport.scale - height / 2)}px`;
     textarea.style.width = `${formatNumber(width)}px`;
     textarea.style.height = `${formatNumber(height)}px`;
     textarea.style.fontSize = `${formatNumber(fontSize)}px`;
@@ -3465,6 +3559,7 @@ var VdFlowchart = class {
   }
   render(options = {}) {
     if (this.destroyed) return;
+    this.syncGrid();
     const shouldRenderScene = options.scene !== false;
     const shouldRenderInspector = options.inspector !== false;
     const shouldRenderJson = options.json !== false;
@@ -3488,6 +3583,8 @@ var VdFlowchart = class {
     clearChildren(this.previewLayer);
     clearChildren(this.nodesLayer);
     clearChildren(this.overlayLayer);
+    clearChildren(this.markerDefs);
+    this.markerIds = /* @__PURE__ */ new Map();
     const hidden = this.getHiddenNodeIds();
     this.sceneHidden = hidden;
     this.sceneOutgoing = this.getOutgoingMap();
@@ -3551,17 +3648,18 @@ var VdFlowchart = class {
       }
     }
   }
-  applyEdgeMarkers(pathElement, edge) {
+  applyEdgeMarkers(pathElement, edge, edgeScale = 1) {
+    const width = this.getEdgeStrokeWidth(edge);
     if (edge.startMarker && edge.startMarker !== "none") {
       pathElement.setAttribute(
         "marker-start",
-        `url(#${this.getMarkerId(edge.startMarker, "start", this.getEdgeStrokeWidth(edge))})`
+        `url(#${this.getMarkerId(edge.startMarker, "start", width, edgeScale)})`
       );
     }
     if (edge.endMarker && edge.endMarker !== "none") {
       pathElement.setAttribute(
         "marker-end",
-        `url(#${this.getMarkerId(edge.endMarker, "end", this.getEdgeStrokeWidth(edge))})`
+        `url(#${this.getMarkerId(edge.endMarker, "end", width, edgeScale)})`
       );
     }
   }
@@ -3569,6 +3667,7 @@ var VdFlowchart = class {
     const fromNode = nodeMap.get(edge.from.nodeId);
     const toNode = nodeMap.get(edge.to.nodeId);
     if (!fromNode || !toNode) return null;
+    const visual = edgeVisualScale(fromNode, toNode);
     const edgePath = buildEdgePath(edge, fromNode, toNode);
     const selected = this.selection?.kind === "edge" && this.selection.id === edge.id;
     const inReconnectMode = this.reconnectEdgeId === edge.id;
@@ -3576,13 +3675,14 @@ var VdFlowchart = class {
       class: `vd-flowchart-edge${selected ? " is-selected" : ""}${inReconnectMode ? " is-reconnecting" : ""}`,
       "data-edge-id": edge.id
     });
-    const strokeWidth = this.getEdgeStrokeWidth(edge);
+    const baseStroke = this.getEdgeStrokeWidth(edge);
+    const strokeWidth = visual < 0.999 ? formatNumber(Math.max(0.02, baseStroke * visual)) : baseStroke;
     if (selected) {
       group.appendChild(
         svgEl("path", {
           class: "vd-flowchart-edge-selection",
           d: edgePath.d,
-          "stroke-width": formatNumber(strokeWidth + 7)
+          "stroke-width": visual < 0.999 ? formatNumber((baseStroke + 7) * visual) : formatNumber(strokeWidth + 7)
         })
       );
     }
@@ -3592,23 +3692,28 @@ var VdFlowchart = class {
       "stroke-width": strokeWidth,
       "data-edge-id": edge.id
     });
-    this.applyEdgeMarkers(visiblePath, edge);
+    this.applyEdgeMarkers(visiblePath, edge, visual);
     const hitPath = svgEl("path", {
       class: "vd-flowchart-edge-hit",
       d: edgePath.d,
-      "stroke-width": this.getEdgeHitStrokeWidth(edge),
+      "stroke-width": this.getEdgeHitStrokeWidth(edge, visual),
       "data-edge-id": edge.id
     });
     group.appendChild(visiblePath);
     group.appendChild(hitPath);
     if (edge.label && this.textEditor?.edgeId !== edge.id) {
+      const labelOffset = visual < 0.999 ? formatNumber(8 * visual) : 8;
       const label = svgEl("text", {
         class: "vd-flowchart-edge-label",
         x: edgePath.labelX,
-        y: edgePath.labelY - 8,
+        y: edgePath.labelY - labelOffset,
         "text-anchor": "middle",
         "data-edge-id": edge.id
       });
+      if (visual < 0.999) {
+        label.style.fontSize = `${formatNumber(Math.max(0.06, 12 * visual))}px`;
+        label.style.strokeWidth = `${formatNumber(Math.max(0.03, 5 * visual))}px`;
+      }
       label.textContent = edge.label;
       group.appendChild(label);
     }
@@ -3647,18 +3752,26 @@ var VdFlowchart = class {
   renderPreviewEdge(interaction) {
     const fromPort = interaction.fromPort || interaction.source?.port || "right";
     const toPort = interaction.toPort || interaction.target?.port || "left";
-    const edgePath = buildEdgePath({
-      strokeWidth: interaction.strokeWidth,
-      route: interaction.route,
-      fromPoint: interaction.fromPoint,
-      toPoint: interaction.toPoint,
-      from: { port: fromPort },
-      to: { port: toPort }
-    });
+    const fromNode = interaction.source?.nodeId ? this.findNode(interaction.source.nodeId) : null;
+    const toNode = interaction.target?.nodeId ? this.findNode(interaction.target.nodeId) : null;
+    const visual = edgeVisualScale(fromNode, toNode);
+    const edgePath = buildEdgePath(
+      {
+        strokeWidth: interaction.strokeWidth,
+        route: interaction.route,
+        fromPoint: interaction.fromPoint,
+        toPoint: interaction.toPoint,
+        from: { port: fromPort },
+        to: { port: toPort }
+      },
+      fromNode,
+      toNode
+    );
+    const baseStroke = this.getEdgeStrokeWidth(interaction);
     return svgEl("path", {
       class: "vd-flowchart-preview-path",
       d: edgePath.d,
-      "stroke-width": this.getEdgeStrokeWidth(interaction)
+      "stroke-width": visual < 0.999 ? formatNumber(Math.max(0.02, baseStroke * visual)) : baseStroke
     });
   }
   renderNode(node) {
@@ -3673,17 +3786,21 @@ var VdFlowchart = class {
       "data-node-id": node.id
     });
     const portsVisible = this.shouldShowNodePorts(node);
+    const visual = nodeVisualScale(node);
+    const corner = node.type === "rounded-rect" || node.type === "textbox" ? 16 : node.type === "junction" ? node.width / 2 : 6;
     const hitbox = svgEl("rect", {
       x: 0,
       y: 0,
       width: node.width,
       height: node.height,
-      rx: node.type === "rounded-rect" || node.type === "textbox" ? 16 : node.type === "junction" ? node.width / 2 : 6,
+      rx: visual < 0.999 && node.type !== "junction" ? formatNumber(corner * visual) : corner,
       fill: "transparent",
       "data-node-id": node.id
     });
     group.appendChild(hitbox);
-    group.appendChild(this.renderNodeShape(node));
+    const shape = this.renderNodeShape(node);
+    this.applyScaledNodeShape(node, shape);
+    group.appendChild(shape);
     group.appendChild(this.renderNodeText(node));
     const scale = this.documentData.viewport.scale || 1;
     if (soloSelected && !this.readonly && SELECTION_BOX_TYPES.has(node.type)) {
@@ -3875,6 +3992,21 @@ var VdFlowchart = class {
     });
     return group;
   }
+  applyScaledNodeShape(node, shape) {
+    const visual = nodeVisualScale(node);
+    if (!shape || visual >= 0.999) return;
+    const baseStroke = node.type === "junction" ? 1.25 : 1.5;
+    shape.style.strokeWidth = String(formatNumber(Math.max(0.03, baseStroke * visual)));
+    if (node.type === "textbox") {
+      shape.style.strokeDasharray = `${formatNumber(8 * visual)} ${formatNumber(5 * visual)}`;
+    }
+    const baseRadius = node.type === "rounded-rect" ? 18 : node.type === "textbox" ? 14 : node.type === "rect" ? 2 : 0;
+    if (baseRadius > 0) {
+      const scaled = String(formatNumber(baseRadius * visual));
+      shape.setAttribute("rx", scaled);
+      shape.setAttribute("ry", scaled);
+    }
+  }
   renderNodeShape(node) {
     const baseClass = `vd-flowchart-node-shape vd-flowchart-node-shape--${node.type}`;
     if (node.type === "rounded-rect") {
@@ -3951,21 +4083,28 @@ var VdFlowchart = class {
     if (node.type === "junction" || !node.text) {
       return textElement;
     }
+    const visual = nodeVisualScale(node);
+    const metrics = getNodeFontMetrics(node);
+    const lineHeight = visual < 0.999 ? Math.max(0.06, metrics.lineHeight * visual) : metrics.lineHeight;
+    if (visual < 0.999) {
+      textElement.style.fontSize = `${formatNumber(Math.max(0.05, metrics.fontSize * visual))}px`;
+    }
+    const equivalentWidth = visual < 0.999 ? node.width / visual : node.width;
     if (node.type === "textbox") {
-      const lines2 = wrapText(node.text, estimateChars(node.width - 32));
-      const { lineHeight: lineHeight2 } = getNodeFontMetrics(node);
+      const lines2 = wrapText(node.text, estimateChars(equivalentWidth - 32));
+      const padX = visual < 0.999 ? formatNumber(16 * visual) : 16;
+      const startY2 = visual < 0.999 ? formatNumber(28 * visual) : 28;
       lines2.forEach((line, index) => {
         const span = svgEl("tspan", {
-          x: 16,
-          y: 28 + index * lineHeight2
+          x: padX,
+          y: visual < 0.999 ? formatNumber(startY2 + index * lineHeight) : startY2 + index * lineHeight
         });
         span.textContent = line;
         textElement.appendChild(span);
       });
       return textElement;
     }
-    const lines = wrapText(node.text, estimateChars(node.width));
-    const { lineHeight } = getNodeFontMetrics(node);
+    const lines = wrapText(node.text, estimateChars(equivalentWidth));
     const totalHeight = (lines.length - 1) * lineHeight;
     const startY = node.height / 2 - totalHeight / 2;
     textElement.setAttribute("text-anchor", "middle");
@@ -3973,7 +4112,7 @@ var VdFlowchart = class {
     lines.forEach((line, index) => {
       const span = svgEl("tspan", {
         x: node.width / 2,
-        y: startY + index * lineHeight,
+        y: visual < 0.999 ? formatNumber(startY + index * lineHeight) : startY + index * lineHeight,
         "text-anchor": "middle",
         "dominant-baseline": "middle"
       });
@@ -4025,12 +4164,12 @@ var VdFlowchart = class {
       textArea.setAttribute("data-field", "node-text");
       const widthInput = createElement("input", { value: node.width, type: "number" });
       widthInput.setAttribute("data-field", "node-width");
-      widthInput.setAttribute("min", String(MIN_NODE_SIZE));
-      widthInput.setAttribute("max", String(MAX_NODE_SIZE));
+      widthInput.setAttribute("min", String(this.minNodeSize));
+      widthInput.setAttribute("max", String(this.maxNodeSize));
       const heightInput = createElement("input", { value: node.height, type: "number" });
       heightInput.setAttribute("data-field", "node-height");
-      heightInput.setAttribute("min", String(MIN_NODE_SIZE));
-      heightInput.setAttribute("max", String(MAX_NODE_SIZE));
+      heightInput.setAttribute("min", String(this.minNodeSize));
+      heightInput.setAttribute("max", String(this.maxNodeSize));
       this.selectionFields.appendChild(createField("Type", typeSelect));
       if (isNodeTextEditable(node)) {
         this.selectionFields.appendChild(createField("Text", textArea));
@@ -4344,8 +4483,8 @@ var VdFlowchart = class {
     this.reconnectEdgeId = null;
     const currentViewport = deepClone(this.documentData.viewport);
     const previousSelection = this.selection;
-    this.documentData = normalizeDocument(snapshot);
-    this.documentData.viewport = normalizeViewport(currentViewport);
+    this.documentData = normalizeDocument(snapshot, this.normalizationLimits());
+    this.documentData.viewport = normalizeViewport(currentViewport, this.scaleBounds());
     this.selection = this.resolvePreservedSelection(previousSelection, true);
     this.render();
     this.emitChange(reason);
@@ -4422,7 +4561,8 @@ var VdFlowchart = class {
         y: partialNode.y == null ? fallbackY : partialNode.y
       },
       this.documentData.nodes.length,
-      usedIds
+      usedIds,
+      this.nodeSizeBounds()
     );
     this.documentData.nodes.push(node);
     this.select({ kind: "node", id: node.id });
@@ -4675,8 +4815,8 @@ var VdFlowchart = class {
     node.x = patch.x == null ? node.x : formatNumber(toFiniteNumber(patch.x, node.x));
     node.y = patch.y == null ? node.y : formatNumber(toFiniteNumber(patch.y, node.y));
     node.text = isNodeTextEditable(nextType) ? patch.text == null ? node.text : String(patch.text) : getNodeSpec(nextType).text;
-    node.width = clampNodeWidth(nextType, patch.width, node.width);
-    node.height = clampNodeHeight(nextType, patch.height, node.height);
+    node.width = clampNodeWidth(nextType, patch.width, node.width, this.nodeSizeBounds());
+    node.height = clampNodeHeight(nextType, patch.height, node.height, this.nodeSizeBounds());
     if (isPlainObject(patch.data)) {
       node.data = deepClone(patch.data);
     }
@@ -4865,8 +5005,45 @@ var VdFlowchart = class {
     if (this.selection.kind === "node") return this.removeNode(this.selection.id);
     return this.removeEdge(this.selection.id);
   }
+  nodeSizeBounds() {
+    return { min: this.minNodeSize, max: this.maxNodeSize };
+  }
+  scaleBounds() {
+    return { min: this.minScale, max: this.maxScale };
+  }
+  normalizationLimits() {
+    return { scaleBounds: this.scaleBounds(), sizeBounds: this.nodeSizeBounds() };
+  }
+  hasWideCamera() {
+    return this.minScale < DEFAULT_MIN_SCALE || this.maxScale > DEFAULT_MAX_SCALE;
+  }
+  syncGrid() {
+    const wide = this.hasWideCamera();
+    const extent = wide ? WIDE_WORLD_EXTENT : DEFAULT_WORLD_EXTENT;
+    this.gridRect?.setAttribute("x", String(-extent / 2));
+    this.gridRect?.setAttribute("y", String(-extent / 2));
+    this.gridRect?.setAttribute("width", String(extent));
+    this.gridRect?.setAttribute("height", String(extent));
+    const pattern = this.svg?.querySelector("pattern");
+    const path = pattern?.querySelector("path");
+    if (!pattern || !path) return;
+    let tile = this.gridSize;
+    if (wide) {
+      const scale = Math.max(this.minScale, this.documentData?.viewport?.scale || 1);
+      while (tile * scale < 12 && tile < extent / 8) tile *= 4;
+      while (tile * scale > 48 && tile > 1.5) tile /= 4;
+      tile = formatNumber(tile);
+      path.setAttribute("vector-effect", "non-scaling-stroke");
+    } else {
+      path.removeAttribute("vector-effect");
+    }
+    path.setAttribute("stroke-width", "1");
+    pattern.setAttribute("width", String(tile));
+    pattern.setAttribute("height", String(tile));
+    path.setAttribute("d", `M ${tile} 0 L 0 0 0 ${tile}`);
+  }
   setViewport(viewport) {
-    this.documentData.viewport = normalizeViewport(viewport);
+    this.documentData.viewport = normalizeViewport(viewport, this.scaleBounds());
     this.render({ inspector: false, json: true });
     this.emitViewportChange("viewport:set");
     return this;
@@ -4884,7 +5061,7 @@ var VdFlowchart = class {
     return this;
   }
   resetView() {
-    this.documentData.viewport = normalizeViewport({ x: 0, y: 0, scale: 1 });
+    this.documentData.viewport = normalizeViewport({ x: 0, y: 0, scale: 1 }, this.scaleBounds());
     this.render({ inspector: false, json: true });
     this.emitViewportChange("viewport:reset");
     return this;
@@ -4900,30 +5077,64 @@ var VdFlowchart = class {
     const padding = 80;
     const contentWidth = Math.max(1, bounds.right - bounds.left);
     const contentHeight = Math.max(1, bounds.bottom - bounds.top);
-    const scale = clamp(
-      Math.min((width - padding * 2) / contentWidth, (height - padding * 2) / contentHeight),
-      MIN_SCALE,
-      MAX_SCALE
+    const scale = formatScale(
+      clamp(
+        Math.min((width - padding * 2) / contentWidth, (height - padding * 2) / contentHeight),
+        this.minScale,
+        this.maxScale
+      )
     );
     this.documentData.viewport = {
       x: formatNumber(width / 2 - (bounds.left + bounds.right) / 2 * scale),
       y: formatNumber(height / 2 - (bounds.top + bounds.bottom) / 2 * scale),
-      scale: formatNumber(scale)
+      scale
     };
     this.render({ inspector: false, json: true });
     this.emitViewportChange("viewport:fit");
     return this;
   }
+  fitNode(nodeId, padding = 48) {
+    const node = this.findNode(nodeId);
+    if (!node || this.isNodeHidden(node.id)) return this;
+    const pad = Math.max(0, toFiniteNumber(padding, 48));
+    const width = this.canvasEl.clientWidth || 800;
+    const height = this.canvasEl.clientHeight || 560;
+    const availableWidth = Math.max(1, width - pad * 2);
+    const availableHeight = Math.max(1, height - pad * 2);
+    const scale = formatScale(
+      clamp(
+        Math.min(
+          availableWidth / Math.max(1, node.width),
+          availableHeight / Math.max(1, node.height)
+        ),
+        this.minScale,
+        this.maxScale
+      )
+    );
+    const centerX = node.x + node.width / 2;
+    const centerY = node.y + node.height / 2;
+    this.documentData.viewport = {
+      x: formatNumber(width / 2 - centerX * scale),
+      y: formatNumber(height / 2 - centerY * scale),
+      scale
+    };
+    this.render({ inspector: false, json: true });
+    this.emitViewportChange("viewport:fit-node");
+    return this;
+  }
   clear() {
     this.stopTextEdit({ commit: false });
     this.activeTool = null;
     this.reconnectEdgeId = null;
     this.clipboard = null;
-    this.documentData = normalizeDocument({
-      nodes: [],
-      edges: [],
-      viewport: { x: 0, y: 0, scale: 1 }
-    });
+    this.documentData = normalizeDocument(
+      {
+        nodes: [],
+        edges: [],
+        viewport: { x: 0, y: 0, scale: 1 }
+      },
+      this.normalizationLimits()
+    );
     this.selection = null;
     this.render();
     this.emitChange("clear");
@@ -4958,6 +5169,33 @@ var VdFlowchart = class {
     if ("snapGuides" in options) this.snapGuides = options.snapGuides !== false;
     if ("minimap" in options) this.setMinimapEnabled(options.minimap !== false);
     if ("autoLayout" in options) this.autoLayout = Boolean(options.autoLayout);
+    if ("minScale" in options || "maxScale" in options || "minNodeSize" in options || "maxNodeSize" in options) {
+      const nextScale = normalizeBoundPair(
+        "minScale" in options ? options.minScale : this.minScale,
+        "maxScale" in options ? options.maxScale : this.maxScale,
+        DEFAULT_MIN_SCALE,
+        DEFAULT_MAX_SCALE
+      );
+      const nextSize = normalizeBoundPair(
+        "minNodeSize" in options ? options.minNodeSize : this.minNodeSize,
+        "maxNodeSize" in options ? options.maxNodeSize : this.maxNodeSize,
+        DEFAULT_MIN_NODE_SIZE,
+        DEFAULT_MAX_NODE_SIZE
+      );
+      this.minScale = nextScale.min;
+      this.maxScale = nextScale.max;
+      this.minNodeSize = nextSize.min;
+      this.maxNodeSize = nextSize.max;
+      const clamped = clamp(
+        formatScale(this.documentData.viewport.scale),
+        this.minScale,
+        this.maxScale
+      );
+      if (clamped !== this.documentData.viewport.scale) {
+        this.documentData.viewport.scale = clamped;
+        this.pendingBoundsEvent = true;
+      }
+    }
     this.syncCanvasLabel();
     if (this.shortcutsHelpOpen) this.renderShortcutsHelp();
     if ("history" in options && options.history !== false !== this.historyEnabled) {
@@ -4975,11 +5213,15 @@ var VdFlowchart = class {
       }
     }
     this.render();
+    if (this.pendingBoundsEvent) {
+      this.pendingBoundsEvent = false;
+      this.emitViewportChange("viewport:bounds");
+    }
     this.updateHistoryButtons();
     return this;
   }
   load(data, options = {}) {
-    const documentData = normalizeDocument(data);
+    const documentData = normalizeDocument(data, this.normalizationLimits());
     if (options.silent && JSON.stringify(documentData) === JSON.stringify(this.documentData)) {
       return this;
     }
@@ -5037,7 +5279,11 @@ var EDITOR_OPTION_KEYS = [
   "keyboardShortcuts",
   "snapGuides",
   "minimap",
-  "autoLayout"
+  "autoLayout",
+  "minScale",
+  "maxScale",
+  "minNodeSize",
+  "maxNodeSize"
 ];
 var VdFlowchart2 = defineComponent({
   name: "VdFlowchart",
@@ -5063,13 +5309,29 @@ var VdFlowchart2 = defineComponent({
     /** Show the overview minimap in the canvas corner (default true). */
     minimap: { type: Boolean, default: true },
     /** Re-run the current layout after keyboard or handle insertions (default false). */
-    autoLayout: { type: Boolean, default: false }
+    autoLayout: { type: Boolean, default: false },
+    /** Lowest camera scale. Defaults to 0.35. Set it together with maxScale. */
+    minScale: { type: Number, default: void 0 },
+    /** Highest camera scale. Defaults to 3. Set it together with minScale. */
+    maxScale: { type: Number, default: void 0 },
+    /** Smallest resizable-node side. Defaults to 56. Set it together with maxNodeSize. */
+    minNodeSize: { type: Number, default: void 0 },
+    /** Largest resizable-node side. Defaults to 420. Set it together with minNodeSize. */
+    maxNodeSize: { type: Number, default: void 0 }
   },
   emits: ["change", "select", "viewport", "connect", "ready"],
   setup(props, { emit, expose }) {
     const el = ref(null);
     let instance = null;
-    const editorOptions = () => Object.fromEntries(EDITOR_OPTION_KEYS.map((key) => [key, props[key]]));
+    const editorOptions = () => Object.fromEntries(
+      EDITOR_OPTION_KEYS.flatMap((key) => {
+        const value = props[key];
+        if ((key === "minScale" || key === "maxScale" || key === "minNodeSize" || key === "maxNodeSize") && value == null) {
+          return [];
+        }
+        return [[key, value]];
+      })
+    );
     const create = () => {
       instance = new VdFlowchart({
         element: el.value,
@@ -5111,7 +5373,8 @@ var VdFlowchart2 = defineComponent({
       redo: () => instance?.redo(),
       canUndo: () => Boolean(instance?.canUndo()),
       canRedo: () => Boolean(instance?.canRedo()),
-      layout: (mode, options) => instance?.layout(mode, options)
+      layout: (mode, options) => instance?.layout(mode, options),
+      fitNode: (nodeId, padding) => instance?.fitNode(nodeId, padding)
     });
     return () => h("div", { ref: el, class: "vd-flowchart" });
   }