@vanduo-oss/vd3-flowchart 1.4.0 → 1.5.1

package/dist/index.js

@@ -8,6 +8,8 @@ var DIRECTIONS = {
   down: { main: "y", sign: 1 },
   up: { main: "y", sign: -1 }
 };
+var DEFAULT_LEVEL_EDGE_GAP = 88;
+var DEFAULT_SIBLING_EDGE_GAP = 64;
 function num(value, fallback) {
   const next = Number(value);
   return Number.isFinite(next) ? next : fallback;
@@ -32,60 +34,182 @@ function pickRoots(nodes, indegree, optRoot) {
 }
 function spanningForest(allIds, roots, children) {
   const visited = /* @__PURE__ */ new Set();
-  const depth = /* @__PURE__ */ new Map();
-  const tree = /* @__PURE__ */ new Map();
+  const active = /* @__PURE__ */ new Set();
   const forestRoots = [];
-  const walk = (id, d) => {
+  const forwardParents = new Map(allIds.map((id) => [id, []]));
+  const dfs = (id) => {
     visited.add(id);
-    depth.set(id, d);
-    const kids = [];
+    active.add(id);
     (children.get(id) || []).forEach((child) => {
-      if (!visited.has(child)) {
-        kids.push(child);
-        walk(child, d + 1);
-      }
+      if (active.has(child)) return;
+      const list = forwardParents.get(child);
+      if (list && !list.includes(id)) list.push(id);
+      if (!visited.has(child)) dfs(child);
     });
-    tree.set(id, kids);
+    active.delete(id);
   };
   roots.forEach((root) => {
     if (!visited.has(root)) {
       forestRoots.push(root);
-      walk(root, 0);
+      dfs(root);
     }
   });
   allIds.forEach((id) => {
     if (!visited.has(id)) {
       forestRoots.push(id);
-      walk(id, 0);
+      dfs(id);
     }
   });
+  const depth = new Map(allIds.map((id) => [id, 0]));
+  const limit = Math.max(1, allIds.length);
+  for (let pass = 0; pass < limit; pass += 1) {
+    let changed = false;
+    for (const id of allIds) {
+      const parents = forwardParents.get(id) || [];
+      for (const parent of parents) {
+        const nextDepth = Math.min(limit, (depth.get(parent) || 0) + 1);
+        if (nextDepth > (depth.get(id) || 0)) {
+          depth.set(id, nextDepth);
+          changed = true;
+        }
+      }
+    }
+    if (!changed) break;
+  }
+  const tree = new Map(allIds.map((id) => [id, []]));
+  const rootSet = new Set(forestRoots);
+  const chosenParent = /* @__PURE__ */ new Map();
+  for (const id of allIds) {
+    if (rootSet.has(id)) continue;
+    const parents = forwardParents.get(id) || [];
+    if (!parents.length) continue;
+    let bestParent = parents[0];
+    let bestDepth = depth.get(bestParent) ?? -1;
+    for (let index = 1; index < parents.length; index += 1) {
+      const candidate = parents[index];
+      const candidateDepth = depth.get(candidate) ?? -1;
+      if (candidateDepth > bestDepth) {
+        bestDepth = candidateDepth;
+        bestParent = candidate;
+      }
+    }
+    chosenParent.set(id, bestParent);
+  }
+  const placedChild = /* @__PURE__ */ new Set();
+  for (const parentId of allIds) {
+    const out = tree.get(parentId);
+    for (const childId of children.get(parentId) || []) {
+      if (chosenParent.get(childId) === parentId && !placedChild.has(childId)) {
+        placedChild.add(childId);
+        out.push(childId);
+      }
+    }
+  }
   return { depth, tree, forestRoots };
 }
 function treeCenters(forestRoots, tree, depth, sizeOf, options) {
   const dir = DIRECTIONS[options.direction] || DIRECTIONS.right;
-  const levelGap = num(options.levelGap, 220);
-  const siblingGap = num(options.siblingGap, 140);
+  const hasExplicitLevel = Number.isFinite(Number(options.levelGap));
+  const hasExplicitSibling = Number.isFinite(Number(options.siblingGap));
+  const explicitLevelGap = num(options.levelGap, 220);
+  const explicitSiblingGap = num(options.siblingGap, 140);
+  const edgeSiblingGap = hasExplicitSibling ? Math.max(16, explicitSiblingGap - 96) : DEFAULT_SIBLING_EDGE_GAP;
+  const crossSpan = (id) => {
+    const size = sizeOf(id);
+    return dir.main === "x" ? size.height : size.width;
+  };
+  const mainSpan = (id) => {
+    const size = sizeOf(id);
+    return dir.main === "x" ? size.width : size.height;
+  };
+  const subtreeSpan = /* @__PURE__ */ new Map();
+  const subtreeCount = /* @__PURE__ */ new Map();
+  const measure = (id) => {
+    const selfSpan = crossSpan(id);
+    const kids = tree.get(id) || [];
+    if (!kids.length) {
+      subtreeSpan.set(id, selfSpan);
+      subtreeCount.set(id, 1);
+      return selfSpan;
+    }
+    let childTotal = 0;
+    let totalCount = 1;
+    kids.forEach((kid, index) => {
+      if (index > 0) childTotal += edgeSiblingGap;
+      childTotal += measure(kid);
+      totalCount += subtreeCount.get(kid) || 1;
+    });
+    const span = Math.max(selfSpan, childTotal);
+    subtreeSpan.set(id, span);
+    subtreeCount.set(id, totalCount);
+    return span;
+  };
+  forestRoots.forEach(measure);
   const crossOf = /* @__PURE__ */ new Map();
-  let cursor = 0;
-  const place = (id) => {
+  const place = (id, startCross) => {
+    const span = subtreeSpan.get(id) || crossSpan(id);
     const kids = tree.get(id) || [];
     if (!kids.length) {
-      crossOf.set(id, cursor);
-      cursor += siblingGap;
-      return crossOf.get(id);
+      const center2 = startCross + span / 2;
+      crossOf.set(id, center2);
+      return center2;
+    }
+    let childTotal = 0;
+    const kidSpans = kids.map((kid, index) => {
+      const kidSpan = subtreeSpan.get(kid) || crossSpan(kid);
+      if (index > 0) childTotal += edgeSiblingGap;
+      childTotal += kidSpan;
+      return kidSpan;
+    });
+    let cursor = startCross + (span - childTotal) / 2;
+    const childCenters = kids.map((kid, index) => {
+      const kidSpan = kidSpans[index];
+      const center2 = place(kid, cursor);
+      cursor += kidSpan + edgeSiblingGap;
+      return center2;
+    });
+    if (kids.length >= 2) {
+      const counts = kids.map((kid) => subtreeCount.get(kid) || 1);
+      const maxCount = Math.max(...counts);
+      const minCount = Math.min(...counts);
+      if (maxCount > minCount) {
+        const primaryIndex = counts.indexOf(maxCount);
+        const center2 = childCenters[primaryIndex];
+        crossOf.set(id, center2);
+        return center2;
+      }
     }
-    const childCenters = kids.map(place);
     const center = (childCenters[0] + childCenters[childCenters.length - 1]) / 2;
     crossOf.set(id, center);
     return center;
   };
-  forestRoots.forEach((root) => {
-    place(root);
-    cursor += siblingGap;
+  let rootCursor = 0;
+  forestRoots.forEach((root, index) => {
+    if (index > 0) rootCursor += edgeSiblingGap;
+    const span = subtreeSpan.get(root) || crossSpan(root);
+    place(root, rootCursor);
+    rootCursor += span;
+  });
+  let maxDepth = 0;
+  const maxMainAtDepth = /* @__PURE__ */ new Map();
+  crossOf.forEach((_cross, id) => {
+    const d = depth.get(id) || 0;
+    if (d > maxDepth) maxDepth = d;
+    const current = maxMainAtDepth.get(d) || 0;
+    const span = mainSpan(id);
+    if (span > current) maxMainAtDepth.set(d, span);
   });
+  const mainCenterAtDepth = /* @__PURE__ */ new Map([[0, 0]]);
+  for (let d = 1; d <= maxDepth; d += 1) {
+    const prevCenter = mainCenterAtDepth.get(d - 1) || 0;
+    const prevSpan = maxMainAtDepth.get(d - 1) || 160;
+    const currSpan = maxMainAtDepth.get(d) || 160;
+    const step = hasExplicitLevel ? Math.max(explicitLevelGap, (prevSpan + currSpan) / 2 + 24) : (prevSpan + currSpan) / 2 + DEFAULT_LEVEL_EDGE_GAP;
+    mainCenterAtDepth.set(d, prevCenter + step * dir.sign);
+  }
   const centers = /* @__PURE__ */ new Map();
   crossOf.forEach((cross, id) => {
-    const main = (depth.get(id) || 0) * levelGap * dir.sign;
+    const main = mainCenterAtDepth.get(depth.get(id) || 0) || 0;
     centers.set(
       id,
       dir.main === "x" ? { centerX: main, centerY: cross } : { centerX: cross, centerY: main }
@@ -362,11 +486,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 +523,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.1";
 var FLOWCHART_DOCUMENT_VERSION = "1.3.0";
 var FLOWCHART_NODE_TYPES = [
   "rounded-rect",
@@ -539,6 +664,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 +732,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 +785,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 +802,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 +896,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 +919,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 +1142,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,13 +1227,40 @@ 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 sourceHorizontal = isHorizontalPort(fromPort);
   const targetHorizontal = isHorizontalPort(toPort);
+  const minStub = 4 * (metrics.scale || 1);
+  let fromStubLen = metrics.stub;
+  let toStubLen = metrics.stub;
+  if (sourceHorizontal && targetHorizontal && fromNormal.x === -toNormal.x) {
+    const span = (toPoint.x - fromPoint.x) * fromNormal.x;
+    if (span > 0) {
+      const fitted = Math.min(metrics.stub, span * 0.45, span / 2);
+      fromStubLen = fitted;
+      toStubLen = fitted;
+    }
+  } else if (!sourceHorizontal && !targetHorizontal && fromNormal.y === -toNormal.y) {
+    const span = (toPoint.y - fromPoint.y) * fromNormal.y;
+    if (span > 0) {
+      const fitted = Math.min(metrics.stub, span * 0.45, span / 2);
+      fromStubLen = fitted;
+      toStubLen = fitted;
+    }
+  } else if (sourceHorizontal !== targetHorizontal) {
+    const spanFrom = sourceHorizontal ? (toPoint.x - fromPoint.x) * fromNormal.x : (toPoint.y - fromPoint.y) * fromNormal.y;
+    const spanTo = targetHorizontal ? (fromPoint.x - toPoint.x) * toNormal.x : (fromPoint.y - toPoint.y) * toNormal.y;
+    if (spanFrom > 0 && spanFrom < metrics.stub) {
+      fromStubLen = Math.min(spanFrom / 2, Math.max(minStub, spanFrom * 0.5));
+    }
+    if (spanTo > 0 && spanTo < metrics.stub) {
+      toStubLen = Math.min(spanTo / 2, Math.max(minStub, spanTo * 0.5));
+    }
+  }
+  const fromStub = offsetPoint(fromPoint, fromNormal, fromStubLen);
+  const toStub = offsetPoint(toPoint, toNormal, toStubLen);
   const mids = [];
   if (sourceHorizontal && targetHorizontal) {
     const facing = fromNormal.x === -toNormal.x;
@@ -1107,13 +1298,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 +1316,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 +1327,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 +1335,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 +1363,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 +1624,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();
@@ -1471,6 +1683,7 @@ var VdFlowchart = class {
     this.handleClick = this.handleClick.bind(this);
     this.handleDoubleClick = this.handleDoubleClick.bind(this);
     this.handleWheel = this.handleWheel.bind(this);
+    this.handleCanvasBlur = this.handleCanvasBlur.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleSelectionFieldInput = this.handleSelectionFieldInput.bind(this);
     this.handleSelectionFieldChange = this.handleSelectionFieldChange.bind(this);
@@ -1656,10 +1869,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" });
@@ -1883,6 +2096,7 @@ var VdFlowchart = class {
     this.canvasEl.addEventListener("click", this.handleClick);
     this.canvasEl.addEventListener("dblclick", this.handleDoubleClick);
     this.canvasEl.addEventListener("wheel", this.handleWheel, { passive: false });
+    this.canvasEl.addEventListener("blur", this.handleCanvasBlur);
     this.root.addEventListener("keydown", this.handleKeyDown, true);
     window.addEventListener("pointerup", this.handlePointerUp);
     window.addEventListener("resize", this.handleResize);
@@ -1901,6 +2115,7 @@ var VdFlowchart = class {
     this.canvasEl.removeEventListener("click", this.handleClick);
     this.canvasEl.removeEventListener("dblclick", this.handleDoubleClick);
     this.canvasEl.removeEventListener("wheel", this.handleWheel);
+    this.canvasEl.removeEventListener("blur", this.handleCanvasBlur);
     this.root.removeEventListener("keydown", this.handleKeyDown, true);
     window.removeEventListener("pointerup", this.handlePointerUp);
     window.removeEventListener("resize", this.handleResize);
@@ -1909,6 +2124,19 @@ var VdFlowchart = class {
     if (this.destroyed) return;
     this.render({ inspector: false, json: false });
   }
+  /**
+   * Focus the diagram canvas. Quiet focus returns from an inline editor without
+   * painting the full-canvas `:focus-visible` ring (see `.is-quiet-focus`).
+   */
+  focusCanvas(options = {}) {
+    if (!this.canvasEl || this.destroyed) return;
+    const quiet = options.quiet === true;
+    this.canvasEl.classList.toggle("is-quiet-focus", quiet);
+    this.canvasEl.focus({ preventScroll: true });
+  }
+  handleCanvasBlur() {
+    this.canvasEl?.classList.remove("is-quiet-focus");
+  }
   updatePaletteState() {
     const arrowArmed = this.activeTool === "arrow";
     this.paletteGrid.querySelectorAll(".vd-flowchart-palette-btn").forEach((button) => {
@@ -2442,7 +2670,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 +2705,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 +2738,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 +3353,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 +3369,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 +3434,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 +3500,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);
@@ -3334,7 +3592,7 @@ var VdFlowchart = class {
       if (event.key === "Escape" || event.key === "Enter") {
         event.preventDefault();
         this.stopTextEdit({ commit: event.key === "Enter" });
-        this.canvasEl.focus();
+        this.focusCanvas({ quiet: true });
       }
     });
     textarea.addEventListener("blur", () => {
@@ -3361,7 +3619,7 @@ var VdFlowchart = class {
     if (event.key === "Escape") {
       event.preventDefault();
       this.stopTextEdit({ commit: false });
-      this.canvasEl.focus();
+      this.focusCanvas({ quiet: true });
       return;
     }
     if (event.key === "Enter") {
@@ -3370,13 +3628,12 @@ var VdFlowchart = class {
       if (!commits) return;
       event.preventDefault();
       this.stopTextEdit({ commit: true });
-      this.canvasEl.focus();
+      this.focusCanvas({ quiet: true });
       return;
     }
     if (event.key === "Tab" && mindmap && !event.shiftKey && !event.altKey && !event.ctrlKey) {
       event.preventDefault();
       this.stopTextEdit({ commit: true });
-      this.canvasEl.focus();
       this.insertBranchNode(node.id, { edit: true });
     }
   }
@@ -3425,19 +3682,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 +3707,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 +3725,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 +3749,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 +3814,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 +3833,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 +3841,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 +3858,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 +3918,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 +3952,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 +4158,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 +4249,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 +4278,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 +4330,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 +4649,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 +4727,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 });
@@ -4635,7 +4941,7 @@ var VdFlowchart = class {
         changed = true;
       }
     });
-    const rerouted = options.reroutePorts === false ? false : this.rerouteEdgePorts();
+    const rerouted = options.reroutePorts === false ? false : this.rerouteEdgePorts(resolvedMode === "tree" ? options.direction || "right" : null);
     if (!changed && !rerouted) return this;
     this.render();
     this.emitChange("layout", { mode: resolvedMode });
@@ -4648,8 +4954,16 @@ var VdFlowchart = class {
   // Re-pick each edge's from/to port from the nodes' current centers, so a
   // freshly laid-out graph attaches connectors on sensible sides. Returns
   // whether any port actually changed.
-  rerouteEdgePorts() {
+  rerouteEdgePorts(flowDirection = null) {
     let changed = false;
+    const flow = flowDirection === "down" || flowDirection === "up" || flowDirection === "left" || flowDirection === "right" ? flowDirection : null;
+    const outDegree = /* @__PURE__ */ new Map();
+    if (flow) {
+      this.documentData.edges.forEach((edge) => {
+        const fromId = edge?.from?.nodeId;
+        if (fromId) outDegree.set(fromId, (outDegree.get(fromId) || 0) + 1);
+      });
+    }
     this.documentData.edges.forEach((edge) => {
       const fromNode = this.findNode(edge.from.nodeId);
       const toNode = this.findNode(edge.to.nodeId);
@@ -4659,8 +4973,82 @@ var VdFlowchart = class {
         y: fromNode.y + fromNode.height / 2
       };
       const toCenter = { x: toNode.x + toNode.width / 2, y: toNode.y + toNode.height / 2 };
-      const nextFrom = getPortByDirection(fromNode, toCenter).port;
-      const nextTo = getPortByDirection(toNode, fromCenter).port;
+      let nextFrom;
+      let nextTo;
+      if (flow) {
+        const dx = toCenter.x - fromCenter.x;
+        const dy = toCenter.y - fromCenter.y;
+        const vertical = flow === "down" || flow === "up";
+        const sign = flow === "up" || flow === "left" ? -1 : 1;
+        const mainDelta = (vertical ? dy : dx) * sign;
+        const crossDelta = vertical ? dx : dy;
+        const isDiamondBranch = fromNode.type === "diamond" && (outDegree.get(fromNode.id) || 0) >= 2;
+        if (mainDelta < -8) {
+          const allNodes = this.documentData.nodes;
+          if (vertical) {
+            const minX = Math.min(fromNode.x, toNode.x);
+            const maxRight = Math.max(fromNode.x + fromNode.width, toNode.x + toNode.width);
+            const minY = Math.min(fromCenter.y, toCenter.y) - 8;
+            const maxY = Math.max(fromCenter.y, toCenter.y) + 8;
+            let rightCount = 0;
+            let leftCount = 0;
+            allNodes.forEach((n) => {
+              if (!n || n.id === fromNode.id || n.id === toNode.id) return;
+              const ny = n.y + n.height / 2;
+              if (ny < minY || ny > maxY) return;
+              const nx = n.x + n.width / 2;
+              if (nx >= maxRight - 20) rightCount += 1;
+              if (nx <= minX + 20) leftCount += 1;
+            });
+            const side = leftCount < rightCount ? "left" : rightCount < leftCount ? "right" : crossDelta < -8 ? "left" : "right";
+            nextFrom = side;
+            nextTo = side;
+          } else {
+            const minY = Math.min(fromNode.y, toNode.y);
+            const maxBottom = Math.max(fromNode.y + fromNode.height, toNode.y + toNode.height);
+            const minX = Math.min(fromCenter.x, toCenter.x) - 8;
+            const maxX = Math.max(fromCenter.x, toCenter.x) + 8;
+            let bottomCount = 0;
+            let topCount = 0;
+            allNodes.forEach((n) => {
+              if (!n || n.id === fromNode.id || n.id === toNode.id) return;
+              const nx = n.x + n.width / 2;
+              if (nx < minX || nx > maxX) return;
+              const ny = n.y + n.height / 2;
+              if (ny >= maxBottom - 20) bottomCount += 1;
+              if (ny <= minY + 20) topCount += 1;
+            });
+            const side = topCount < bottomCount ? "top" : bottomCount < topCount ? "bottom" : crossDelta < -8 ? "top" : "bottom";
+            nextFrom = side;
+            nextTo = side;
+          }
+        } else if (mainDelta >= 12) {
+          if (vertical) {
+            nextTo = sign > 0 ? "top" : "bottom";
+            if (isDiamondBranch && Math.abs(crossDelta) >= fromNode.width * 0.45) {
+              nextFrom = crossDelta > 0 ? "right" : "left";
+            } else {
+              nextFrom = sign > 0 ? "bottom" : "top";
+            }
+          } else {
+            nextTo = sign > 0 ? "left" : "right";
+            if (isDiamondBranch && Math.abs(crossDelta) >= fromNode.height * 0.45) {
+              nextFrom = crossDelta > 0 ? "bottom" : "top";
+            } else {
+              nextFrom = sign > 0 ? "right" : "left";
+            }
+          }
+        } else if (vertical) {
+          nextFrom = dx >= 0 ? "right" : "left";
+          nextTo = dx >= 0 ? "left" : "right";
+        } else {
+          nextFrom = dy >= 0 ? "bottom" : "top";
+          nextTo = dy >= 0 ? "top" : "bottom";
+        }
+      } else {
+        nextFrom = getPortByDirection(fromNode, toCenter).port;
+        nextTo = getPortByDirection(toNode, fromCenter).port;
+      }
       if (nextFrom !== edge.from.port || nextTo !== edge.to.port) {
         edge.from.port = nextFrom;
         edge.to.port = nextTo;
@@ -4675,8 +5063,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 +5253,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 +5309,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 +5325,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 +5417,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 +5461,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 +5527,11 @@ var EDITOR_OPTION_KEYS = [
   "keyboardShortcuts",
   "snapGuides",
   "minimap",
-  "autoLayout"
+  "autoLayout",
+  "minScale",
+  "maxScale",
+  "minNodeSize",
+  "maxNodeSize"
 ];
 var VdFlowchart2 = defineComponent({
   name: "VdFlowchart",
@@ -5063,13 +5557,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 +5621,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" });
   }