@vanduo-oss/vd3-flowchart 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to `@vanduo-oss/vd3-flowchart` are documented here.
 
+## 1.5.1 — 2026-11-01
+
+### Fixed
+
+- Inline text editors for shapes use transparent chrome so circles and diamonds
+  keep their SVG silhouette while typing. Textbox, edge, and label editors keep
+  an opaque panel.
+- Dark theme idle node strokes lean on the accent color so outlines stay visible
+  without hover or selection. Hosts may still override `--vd-flowchart-node-stroke`.
+- The diagram canvas no longer draws a full-viewport focus ring. Mindmap Tab that
+  opens a new branch editor skips the intermediate canvas focus flash.
+- Tree layout measures node size. Rank and sibling gaps stay clear of the boxes,
+  and a decision with one deep branch keeps that branch on the main spine.
+- Facing orthogonal connectors shorten their stubs when two shapes sit closer
+  than two full stubs, so the route does not loop around the pair.
+- Tree layout re-picks ports from the flow: diamond side branches leave the side
+  ports, and a reverse loop uses the quieter side of the spine.
+
 ## 1.5.0 — 2026-10-25
 
 ### Added

package/README.md

@@ -1,12 +1,14 @@
 # @vanduo-oss/vd3-flowchart
 
+<a href="https://snyk.io/?utm_source=open-source&utm_medium=pg-ptr&utm_campaign=ref-2501-osp&utm_content=pg-cta"><img src="https://raw.githubusercontent.com/vanduo-oss/vd3-flowchart/main/assets/scanned-by-snyk.png" alt="Scanned by Snyk" width="206" height="141"></a>
+
 [![license: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
 
 Vanduo **flowchart** for Vue 3: a node/edge editor with undo/redo, layout
 modes, and a framework-agnostic core. Extracted 1-to-1 from
 `@vanduo-oss/vd3-cbun` flowchart **1.2.0**.
 
-**Status: 1.5.0.** `VD_FLOWCHART_VERSION` tracks the package release.
+**Status: 1.5.1.** `VD_FLOWCHART_VERSION` tracks the package release.
 `FLOWCHART_DOCUMENT_VERSION` (currently `1.3.0`) is the value `toJSON()`
 writes. Do not reset either independently without a compatibility plan.
 
@@ -50,7 +52,7 @@ if anything but `vue` is externalized. The package declares
 
 ## Version policy
 
-`package.json` version **is** `VD_FLOWCHART_VERSION` (`1.5.0`). Bump those
+`package.json` version **is** `VD_FLOWCHART_VERSION` (`1.5.1`). Bump those
 together for a package release. Keep `FLOWCHART_DOCUMENT_VERSION` unchanged
 unless the serialized schema changes; add fixtures and explicit compatibility
 rules for a format change. Unversioned 1.x documents through 1.3.0 still load;
@@ -144,6 +146,9 @@ Tokens consumed include `--vd-bg-primary`, `--vd-bg-secondary`,
 
 ## Security
 
+- **Open-source scanning** — this repo is monitored with
+  [Snyk](https://snyk.io/?utm_source=open-source&utm_medium=pg-ptr&utm_campaign=ref-2501-osp&utm_content=pg-cta)
+  (thanks for their support of open source).
 - **No bundled dependencies** — beyond the `vue` peer, nothing is bundled; the
   build fails if any other module is externalized or any `node_modules` input
   is bundled.

package/dist/index.cjs

@@ -44,6 +44,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;
@@ -68,60 +70,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 }
@@ -435,7 +559,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.5.0";
+var VD_FLOWCHART_VERSION = "1.5.1";
 var FLOWCHART_DOCUMENT_VERSION = "1.3.0";
 var FLOWCHART_NODE_TYPES = [
   "rounded-rect",
@@ -1142,10 +1266,37 @@ function getOrthogonalMidpoints(fromStub, toStub, fromPort, toPort) {
 function getOrthogonalPoints(fromPoint, toPoint, fromPort, toPort, fromRect, toRect, metrics = routeMetrics(1)) {
   const fromNormal = getPortNormal(fromPort);
   const toNormal = getPortNormal(toPort);
-  const fromStub = offsetPoint(fromPoint, fromNormal, metrics.stub);
-  const toStub = offsetPoint(toPoint, toNormal, metrics.stub);
   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;
@@ -1568,6 +1719,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);
@@ -1980,6 +2132,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);
@@ -1998,6 +2151,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);
@@ -2006,6 +2160,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) => {
@@ -3461,7 +3628,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", () => {
@@ -3488,7 +3655,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") {
@@ -3497,13 +3664,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 });
     }
   }
@@ -4811,7 +4977,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 });
@@ -4824,8 +4990,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);
@@ -4835,8 +5009,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;