@transitrix/diagrams 1.8.18 → 1.8.19

package/dist/edge-path.d.ts

@@ -20,3 +20,18 @@ export declare const DEFAULT_EDGE_CURVATURE = 1;
  *   - >1  → progressively stronger arc at that end.
  */
 export declare function horizontalCubicEdgePath(sx: number, sy: number, tx: number, ty: number, curvature?: number, entryCurvature?: number): string;
+/**
+ * Builds the SVG `d` for a "skip" edge that must arc over an intermediate
+ * node sitting on the direct (sx,sy)→(tx,ty) line — e.g. a Network/PSND view
+ * where a multi-predecessor activity's nearer predecessor shares a row with
+ * one of the columns in between, so the direct line would be drawn straight
+ * through that node. Both control points target `bowY` instead of each
+ * endpoint's own Y, producing a hump that departs/arrives at an angle rather
+ * than the flat horizontal tangent of `horizontalCubicEdgePath`.
+ *
+ * A cubic's actual apex only reaches part-way from an endpoint Y to the
+ * control-point Y (75% at the midpoint for a fully symmetric sy=ty curve),
+ * so callers must pick `bowY` well past the obstacle for the apex to clear
+ * it — see `render-activities.ts`'s `blockingNodes`/`bowY` for the margin.
+ */
+export declare function bowedCubicEdgePath(sx: number, sy: number, tx: number, ty: number, bowY: number, curvature?: number): string;

package/dist/edge-path.js

@@ -47,3 +47,22 @@ export function horizontalCubicEdgePath(sx, sy, tx, ty, curvature = DEFAULT_EDGE
     const entryHandle = baseHandle * (entryCurvature ?? curvature);
     return `M${sx},${sy} C${sx + exitHandle},${sy} ${tx - entryHandle},${ty} ${tx},${ty}`;
 }
+/**
+ * Builds the SVG `d` for a "skip" edge that must arc over an intermediate
+ * node sitting on the direct (sx,sy)→(tx,ty) line — e.g. a Network/PSND view
+ * where a multi-predecessor activity's nearer predecessor shares a row with
+ * one of the columns in between, so the direct line would be drawn straight
+ * through that node. Both control points target `bowY` instead of each
+ * endpoint's own Y, producing a hump that departs/arrives at an angle rather
+ * than the flat horizontal tangent of `horizontalCubicEdgePath`.
+ *
+ * A cubic's actual apex only reaches part-way from an endpoint Y to the
+ * control-point Y (75% at the midpoint for a fully symmetric sy=ty curve),
+ * so callers must pick `bowY` well past the obstacle for the apex to clear
+ * it — see `render-activities.ts`'s `blockingNodes`/`bowY` for the margin.
+ */
+export function bowedCubicEdgePath(sx, sy, tx, ty, bowY, curvature = DEFAULT_EDGE_CURVATURE) {
+    const dx = tx - sx;
+    const handle = Math.max(EDGE_MIN_HANDLE, Math.min(Math.abs(dx) * DX_FACTOR, MAX_HANDLE)) * curvature;
+    return `M${sx},${sy} C${sx + handle},${bowY} ${tx - handle},${bowY} ${tx},${ty}`;
+}

package/dist/webview/render-activities.d.ts

@@ -10,6 +10,15 @@ import { type NodeSizePreset } from '../node-size-presets.js';
 export declare const ACTIVITIES_NETWORK_CSS = "\n  .act-node { fill: var(--ts-layer-activity, #d4edda); stroke: var(--ts-node-stroke, #004d67); stroke-width: 1; }\n  .critical-node { fill: var(--ts-brand-orange-tint, #ffeee5); stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1; }\n  .milestone-node { fill: #ecfeff; stroke: var(--ts-text-muted, #64748b); stroke-dasharray: 4 2; }\n  .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1.5; }\n  .arrow-fill-critical { fill: var(--ts-brand-orange, #ff4d00); }\n";
 /** Arrowhead marker defs shared by both hosts for the network view. */
 export declare const ACTIVITIES_NETWORK_DEFS = "<defs>\n  <marker id=\"arrow\" markerWidth=\"8\" markerHeight=\"8\" refX=\"8\" refY=\"3\" orient=\"auto\">\n    <path d=\"M0,0 L0,6 L8,3 z\" class=\"arrow-fill\"/>\n  </marker>\n  <marker id=\"arrow-crit\" markerWidth=\"8\" markerHeight=\"8\" refX=\"8\" refY=\"3\" orient=\"auto\">\n    <path d=\"M0,0 L0,6 L8,3 z\" class=\"arrow-fill-critical\"/>\n  </marker>\n</defs>";
+/**
+ * Extra top padding (px) a network-view canvas must add so skip-edge bows
+ * (see `blockingNodes`/`bowY` above) never draw above the SVG's y=0 and get
+ * clipped. `oyBase` is the canvas's Y offset *before* this padding — the
+ * historical `-bounds.y + N_PAD + titleH` both hosts compute — since a bow
+ * near the topmost row can reach above the diagram's own node bounds.
+ * Callers add the returned value to both `oyBase` and the canvas height.
+ */
+export declare function computeNetworkTopPad(layout: ActivitiesLayout, oyBase: number): number;
 /**
  * Canonical Network (PSND) body — the node rects and edge paths that go inside
  * the `<svg>`, shared verbatim by the VS Code preview and the host-neutral

package/dist/webview/render-activities.js

@@ -18,7 +18,7 @@
  */
 import { layoutActivities } from '../activities/layout.js';
 import { computeCpm } from '../activities/cpm.js';
-import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { horizontalCubicEdgePath, bowedCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { parseNodeSizePreset, resolveActionNodeSize } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { emitCenteredTextSvg, layoutCenteredEntityText } from './entity-text-layout.js';
@@ -46,6 +46,68 @@ export const ACTIVITIES_NETWORK_DEFS = `<defs>
     <path d="M0,0 L0,6 L8,3 z" class="arrow-fill-critical"/>
   </marker>
 </defs>`;
+/**
+ * Nodes horizontally between `source` and `target` (a "skip" edge passes over
+ * their column) whose vertical span overlaps the edge's Y band. A
+ * straight-tangent cubic (`horizontalCubicEdgePath`) stays within
+ * [min(sourceCenterY,targetCenterY), max(...)] by convex hull, so any such
+ * node sits directly on the edge's path — the "arrow goes straight through
+ * the node" bug reported against a linear PSND chain where a multi-predecessor
+ * activity's nearer predecessor shares a row with an intermediate column.
+ */
+function blockingNodes(nodes, source, target) {
+    const sCenterY = source.y + source.height / 2;
+    const tCenterY = target.y + target.height / 2;
+    const loY = Math.min(sCenterY, tCenterY);
+    const hiY = Math.max(sCenterY, tCenterY);
+    const sRight = source.x + source.width;
+    const tLeft = target.x;
+    return nodes.filter((n) => {
+        if (n.id === source.id || n.id === target.id)
+            return false;
+        if (n.x + n.width <= sRight || n.x >= tLeft)
+            return false; // not between the two columns
+        return n.y < hiY && n.y + n.height > loY; // vertical overlap with the edge's band
+    });
+}
+/**
+ * Pre-offset bow-control-point Y for a skip edge arcing over `blockers`: one
+ * full node-height of clearance above the topmost blocker's top edge. A
+ * cubic's apex only reaches part-way toward its control point (see
+ * `bowedCubicEdgePath` doc), so this generous margin is what actually keeps
+ * the visible curve clear of the box — verified numerically in
+ * `render-activities.test.ts`.
+ */
+function bowY(blockers) {
+    const topY = Math.min(...blockers.map((n) => n.y));
+    const clearance = Math.max(...blockers.map((n) => n.height));
+    return topY - clearance;
+}
+/**
+ * Extra top padding (px) a network-view canvas must add so skip-edge bows
+ * (see `blockingNodes`/`bowY` above) never draw above the SVG's y=0 and get
+ * clipped. `oyBase` is the canvas's Y offset *before* this padding — the
+ * historical `-bounds.y + N_PAD + titleH` both hosts compute — since a bow
+ * near the topmost row can reach above the diagram's own node bounds.
+ * Callers add the returned value to both `oyBase` and the canvas height.
+ */
+export function computeNetworkTopPad(layout, oyBase) {
+    const nodeMap = new Map(layout.nodes.map((n) => [n.id, n]));
+    let pad = 0;
+    for (const e of layout.edges) {
+        const s = nodeMap.get(e.sourceId);
+        const t = nodeMap.get(e.targetId);
+        if (!s || !t)
+            continue;
+        const blockers = blockingNodes(layout.nodes, s, t);
+        if (blockers.length === 0)
+            continue;
+        const shortfall = -(oyBase + bowY(blockers));
+        if (shortfall > pad)
+            pad = shortfall;
+    }
+    return pad;
+}
 function activityNodeSvg(n, x, y, isCritical, isMilestone, durLabel) {
     const cls = `diagram-node act-node ${isCritical ? 'critical-node' : ''} ${isMilestone ? 'milestone-node' : ''}`.trim();
     const specs = layoutCenteredEntityText({
@@ -92,7 +154,11 @@ export function renderActivitiesNetworkBody(layout, cpm, ox, oy, curvature, entr
         const ty = t.y + oy + t.height / 2;
         const cls = e.isCritical ? 'diagram-edge critical-edge' : 'diagram-edge';
         const marker = `url(#${e.isCritical ? 'arrow-crit' : 'arrow'})`;
-        return `<path d="${horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature)}" class="${cls}" marker-end="${marker}"/>`;
+        const blockers = blockingNodes(layout.nodes, s, t);
+        const d = blockers.length > 0
+            ? bowedCubicEdgePath(sx, sy, tx, ty, bowY(blockers) + oy, curvature)
+            : horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature);
+        return `<path d="${d}" class="${cls}" marker-end="${marker}"/>`;
     })
         .join('\n');
     const nodeSvg = layout.nodes
@@ -142,10 +208,12 @@ export function renderActivitiesSvg(doc, options = {}) {
     }
     const cpm = computeCpm(renderDoc.activities ?? []);
     const titleH = title ? 24 : 0;
+    const oyBase = -layout.bounds.y + N_PAD + titleH;
+    const topPad = computeNetworkTopPad(layout, oyBase);
     const w = layout.bounds.width + N_PAD * 2;
-    const h = layout.bounds.height + N_PAD * 2 + titleH;
+    const h = layout.bounds.height + N_PAD * 2 + titleH + topPad;
     const ox = -layout.bounds.x + N_PAD;
-    const oy = -layout.bounds.y + N_PAD + titleH;
+    const oy = oyBase + topPad;
     const body = renderActivitiesNetworkBody(layout, cpm, ox, oy, curvature, entryCurvature);
     const titleSvg = title
         ? `<text class="text-header" x="${N_PAD}" y="${N_PAD - 6}">${escXml(title)}</text>`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transitrix/diagrams",
-  "version": "1.8.18",
+  "version": "1.8.19",
   "type": "module",
   "description": "Shared rendering, validation, and pure mutations for Transitrix custom diagram formats.",
   "license": "MIT",

package/src/edge-path.ts

@@ -62,3 +62,30 @@ export function horizontalCubicEdgePath(
   const entryHandle = baseHandle * (entryCurvature ?? curvature);
   return `M${sx},${sy} C${sx + exitHandle},${sy} ${tx - entryHandle},${ty} ${tx},${ty}`;
 }
+
+/**
+ * Builds the SVG `d` for a "skip" edge that must arc over an intermediate
+ * node sitting on the direct (sx,sy)→(tx,ty) line — e.g. a Network/PSND view
+ * where a multi-predecessor activity's nearer predecessor shares a row with
+ * one of the columns in between, so the direct line would be drawn straight
+ * through that node. Both control points target `bowY` instead of each
+ * endpoint's own Y, producing a hump that departs/arrives at an angle rather
+ * than the flat horizontal tangent of `horizontalCubicEdgePath`.
+ *
+ * A cubic's actual apex only reaches part-way from an endpoint Y to the
+ * control-point Y (75% at the midpoint for a fully symmetric sy=ty curve),
+ * so callers must pick `bowY` well past the obstacle for the apex to clear
+ * it — see `render-activities.ts`'s `blockingNodes`/`bowY` for the margin.
+ */
+export function bowedCubicEdgePath(
+  sx: number,
+  sy: number,
+  tx: number,
+  ty: number,
+  bowY: number,
+  curvature: number = DEFAULT_EDGE_CURVATURE,
+): string {
+  const dx = tx - sx;
+  const handle = Math.max(EDGE_MIN_HANDLE, Math.min(Math.abs(dx) * DX_FACTOR, MAX_HANDLE)) * curvature;
+  return `M${sx},${sy} C${sx + handle},${bowY} ${tx - handle},${bowY} ${tx},${ty}`;
+}

package/src/webview/render-activities.ts

@@ -23,7 +23,7 @@ import type {
   ActivitiesLayout,
   ActivitiesLayoutOptions,
 } from '../activities/types.js';
-import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { horizontalCubicEdgePath, bowedCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { parseNodeSizePreset, resolveActionNodeSize, type NodeSizePreset } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { emitCenteredTextSvg, layoutCenteredEntityText } from './entity-text-layout.js';
@@ -55,6 +55,72 @@ export const ACTIVITIES_NETWORK_DEFS = `<defs>
   </marker>
 </defs>`;
 
+type ActivityLayoutNode = ActivitiesLayout['nodes'][number];
+
+/**
+ * Nodes horizontally between `source` and `target` (a "skip" edge passes over
+ * their column) whose vertical span overlaps the edge's Y band. A
+ * straight-tangent cubic (`horizontalCubicEdgePath`) stays within
+ * [min(sourceCenterY,targetCenterY), max(...)] by convex hull, so any such
+ * node sits directly on the edge's path — the "arrow goes straight through
+ * the node" bug reported against a linear PSND chain where a multi-predecessor
+ * activity's nearer predecessor shares a row with an intermediate column.
+ */
+function blockingNodes(
+  nodes: ActivityLayoutNode[],
+  source: ActivityLayoutNode,
+  target: ActivityLayoutNode,
+): ActivityLayoutNode[] {
+  const sCenterY = source.y + source.height / 2;
+  const tCenterY = target.y + target.height / 2;
+  const loY = Math.min(sCenterY, tCenterY);
+  const hiY = Math.max(sCenterY, tCenterY);
+  const sRight = source.x + source.width;
+  const tLeft = target.x;
+  return nodes.filter((n) => {
+    if (n.id === source.id || n.id === target.id) return false;
+    if (n.x + n.width <= sRight || n.x >= tLeft) return false; // not between the two columns
+    return n.y < hiY && n.y + n.height > loY; // vertical overlap with the edge's band
+  });
+}
+
+/**
+ * Pre-offset bow-control-point Y for a skip edge arcing over `blockers`: one
+ * full node-height of clearance above the topmost blocker's top edge. A
+ * cubic's apex only reaches part-way toward its control point (see
+ * `bowedCubicEdgePath` doc), so this generous margin is what actually keeps
+ * the visible curve clear of the box — verified numerically in
+ * `render-activities.test.ts`.
+ */
+function bowY(blockers: ActivityLayoutNode[]): number {
+  const topY = Math.min(...blockers.map((n) => n.y));
+  const clearance = Math.max(...blockers.map((n) => n.height));
+  return topY - clearance;
+}
+
+/**
+ * Extra top padding (px) a network-view canvas must add so skip-edge bows
+ * (see `blockingNodes`/`bowY` above) never draw above the SVG's y=0 and get
+ * clipped. `oyBase` is the canvas's Y offset *before* this padding — the
+ * historical `-bounds.y + N_PAD + titleH` both hosts compute — since a bow
+ * near the topmost row can reach above the diagram's own node bounds.
+ * Callers add the returned value to both `oyBase` and the canvas height.
+ */
+export function computeNetworkTopPad(layout: ActivitiesLayout, oyBase: number): number {
+  const nodeMap = new Map(layout.nodes.map((n) => [n.id, n]));
+  let pad = 0;
+  for (const e of layout.edges) {
+    const s = nodeMap.get(e.sourceId);
+    const t = nodeMap.get(e.targetId);
+    if (!s || !t) continue;
+    const blockers = blockingNodes(layout.nodes, s, t);
+    if (blockers.length === 0) continue;
+    const shortfall = -(oyBase + bowY(blockers));
+    if (shortfall > pad) pad = shortfall;
+  }
+  return pad;
+}
+
 function activityNodeSvg(
   n: ActivitiesLayout['nodes'][number],
   x: number,
@@ -119,7 +185,11 @@ export function renderActivitiesNetworkBody(
       const ty = t.y + oy + t.height / 2;
       const cls = e.isCritical ? 'diagram-edge critical-edge' : 'diagram-edge';
       const marker = `url(#${e.isCritical ? 'arrow-crit' : 'arrow'})`;
-      return `<path d="${horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature)}" class="${cls}" marker-end="${marker}"/>`;
+      const blockers = blockingNodes(layout.nodes, s, t);
+      const d = blockers.length > 0
+        ? bowedCubicEdgePath(sx, sy, tx, ty, bowY(blockers) + oy, curvature)
+        : horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature);
+      return `<path d="${d}" class="${cls}" marker-end="${marker}"/>`;
     })
     .join('\n');
 
@@ -207,10 +277,12 @@ export function renderActivitiesSvg(doc: ActivityDoc, options: RenderActivitiesO
 
   const cpm = computeCpm(renderDoc.activities ?? []);
   const titleH = title ? 24 : 0;
+  const oyBase = -layout.bounds.y + N_PAD + titleH;
+  const topPad = computeNetworkTopPad(layout, oyBase);
   const w = layout.bounds.width + N_PAD * 2;
-  const h = layout.bounds.height + N_PAD * 2 + titleH;
+  const h = layout.bounds.height + N_PAD * 2 + titleH + topPad;
   const ox = -layout.bounds.x + N_PAD;
-  const oy = -layout.bounds.y + N_PAD + titleH;
+  const oy = oyBase + topPad;
 
   const body = renderActivitiesNetworkBody(layout, cpm, ox, oy, curvature, entryCurvature);