@transitrix/diagrams 1.8.4 → 1.8.6

package/dist/__tests__/edge-path.test.js

@@ -44,4 +44,12 @@ describe('horizontalCubicEdgePath', () => {
     it('omitting entryCurvature gives symmetric handles (historical behaviour)', () => {
         expect(horizontalCubicEdgePath(0, 0, 40, 0, 0.5)).toBe(horizontalCubicEdgePath(0, 0, 40, 0, 0.5, 0.5));
     });
+    it('caps the handle for a tall edge with a narrow column gap, instead of overshooting the target', () => {
+        // A network-view edge spanning several rows (|dy|=500) with a typical
+        // adjacent-column gap (dx=80): uncapped, |dy|*0.8=400 would push the exit
+        // control point 320px past the target's x, producing an exaggerated
+        // S-bow. Capped at 160, the control points stay close to the endpoints.
+        const d = horizontalCubicEdgePath(0, 0, 80, 500, 1);
+        expect(d).toBe('M0,0 C160,0 -80,500 80,500');
+    });
 });

package/dist/edge-path.js

@@ -15,6 +15,15 @@
 export const EDGE_MIN_HANDLE = 64;
 const DX_FACTOR = 0.5;
 const DY_FACTOR = 0.8;
+/**
+ * Ceiling on each span factor's contribution. Uncapped, a tall edge with a
+ * narrow column gap (large dy, small dx — the common case in a many-row
+ * network view) grows a handle far past the endpoints' actual x-distance;
+ * the two control points then overshoot each other, producing an
+ * exaggerated S-bow instead of a gentle curve. Capping keeps typical spans
+ * (within the existing historical range) untouched while reining in outliers.
+ */
+const MAX_HANDLE = 160;
 /** Multiplier applied to the base handle length. 1 = historical appearance. */
 export const DEFAULT_EDGE_CURVATURE = 1;
 /**
@@ -33,7 +42,7 @@ export const DEFAULT_EDGE_CURVATURE = 1;
 export function horizontalCubicEdgePath(sx, sy, tx, ty, curvature = DEFAULT_EDGE_CURVATURE, entryCurvature) {
     const dx = tx - sx;
     const dy = ty - sy;
-    const baseHandle = Math.max(EDGE_MIN_HANDLE, Math.abs(dx) * DX_FACTOR, Math.abs(dy) * DY_FACTOR);
+    const baseHandle = Math.max(EDGE_MIN_HANDLE, Math.min(Math.abs(dx) * DX_FACTOR, MAX_HANDLE), Math.min(Math.abs(dy) * DY_FACTOR, MAX_HANDLE));
     const exitHandle = baseHandle * curvature;
     const entryHandle = baseHandle * (entryCurvature ?? curvature);
     return `M${sx},${sy} C${sx + exitHandle},${sy} ${tx - entryHandle},${ty} ${tx},${ty}`;

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

@@ -7,7 +7,7 @@ import { type NodeSizePreset } from '../node-size-presets.js';
  * network subset. Embedded alongside the shared theme CSS so the SVG is
  * self-contained for the JCEF host.
  */
-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: 2.5; }\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: 2; }\n  .arrow-fill-critical { fill: var(--ts-brand-orange, #ff4d00); }\n";
+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>";
 /**

package/dist/webview/render-activities.js

@@ -32,9 +32,9 @@ const N_PAD = 24;
  */
 export const ACTIVITIES_NETWORK_CSS = `
   .act-node { fill: var(--ts-layer-activity, #d4edda); stroke: var(--ts-node-stroke, #004d67); stroke-width: 1; }
-  .critical-node { fill: var(--ts-brand-orange-tint, #ffeee5); stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2.5; }
+  .critical-node { fill: var(--ts-brand-orange-tint, #ffeee5); stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1; }
   .milestone-node { fill: #ecfeff; stroke: var(--ts-text-muted, #64748b); stroke-dasharray: 4 2; }
-  .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2; }
+  .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1.5; }
   .arrow-fill-critical { fill: var(--ts-brand-orange, #ff4d00); }
 `;
 /** Arrowhead marker defs shared by both hosts for the network view. */

package/dist/webview/render-fgca.js

@@ -38,10 +38,7 @@ export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature,
     const nodeHeight = bodyOptions.nodeHeight ?? FGCA_NODE_H;
     const headerTruncate = Math.max(8, Math.floor((nodeWidth - 16) / 7));
     const headerSvg = columns
-        .map(({ col, x }) => [
-        `<rect class="diagram-node layer-${col}" x="${x}" y="${PAD}" width="${nodeWidth}" height="${HEADER_H}" rx="6"/>`,
-        `<text class="text-header" x="${x + nodeWidth / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(COL_LABELS[col], headerTruncate))}</text>`,
-    ].join('\n'))
+        .map(({ col, x }) => `<text class="text-header" x="${x + nodeWidth / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(COL_LABELS[col], headerTruncate))}</text>`)
         .join('\n');
     const edgeSvg = edges
         .map((e) => `<path d="${horizontalCubicEdgePath(e.sx, e.sy, e.tx, e.ty, curvature, entryCurvature)}" class="diagram-edge" marker-end="url(#arrow)"/>`)

package/package.json

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

package/src/__tests__/edge-path.test.ts

@@ -55,4 +55,13 @@ describe('horizontalCubicEdgePath', () => {
       horizontalCubicEdgePath(0, 0, 40, 0, 0.5, 0.5),
     );
   });
+
+  it('caps the handle for a tall edge with a narrow column gap, instead of overshooting the target', () => {
+    // A network-view edge spanning several rows (|dy|=500) with a typical
+    // adjacent-column gap (dx=80): uncapped, |dy|*0.8=400 would push the exit
+    // control point 320px past the target's x, producing an exaggerated
+    // S-bow. Capped at 160, the control points stay close to the endpoints.
+    const d = horizontalCubicEdgePath(0, 0, 80, 500, 1);
+    expect(d).toBe('M0,0 C160,0 -80,500 80,500');
+  });
 });

package/src/edge-path.ts

@@ -17,6 +17,16 @@ export const EDGE_MIN_HANDLE = 64;
 const DX_FACTOR = 0.5;
 const DY_FACTOR = 0.8;
 
+/**
+ * Ceiling on each span factor's contribution. Uncapped, a tall edge with a
+ * narrow column gap (large dy, small dx — the common case in a many-row
+ * network view) grows a handle far past the endpoints' actual x-distance;
+ * the two control points then overshoot each other, producing an
+ * exaggerated S-bow instead of a gentle curve. Capping keeps typical spans
+ * (within the existing historical range) untouched while reining in outliers.
+ */
+const MAX_HANDLE = 160;
+
 /** Multiplier applied to the base handle length. 1 = historical appearance. */
 export const DEFAULT_EDGE_CURVATURE = 1;
 
@@ -43,7 +53,11 @@ export function horizontalCubicEdgePath(
 ): string {
   const dx = tx - sx;
   const dy = ty - sy;
-  const baseHandle = Math.max(EDGE_MIN_HANDLE, Math.abs(dx) * DX_FACTOR, Math.abs(dy) * DY_FACTOR);
+  const baseHandle = Math.max(
+    EDGE_MIN_HANDLE,
+    Math.min(Math.abs(dx) * DX_FACTOR, MAX_HANDLE),
+    Math.min(Math.abs(dy) * DY_FACTOR, MAX_HANDLE),
+  );
   const exitHandle = baseHandle * curvature;
   const entryHandle = baseHandle * (entryCurvature ?? curvature);
   return `M${sx},${sy} C${sx + exitHandle},${sy} ${tx - entryHandle},${ty} ${tx},${ty}`;

package/src/webview/render-activities.ts

@@ -39,9 +39,9 @@ const N_PAD = 24;
  */
 export const ACTIVITIES_NETWORK_CSS = `
   .act-node { fill: var(--ts-layer-activity, #d4edda); stroke: var(--ts-node-stroke, #004d67); stroke-width: 1; }
-  .critical-node { fill: var(--ts-brand-orange-tint, #ffeee5); stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2.5; }
+  .critical-node { fill: var(--ts-brand-orange-tint, #ffeee5); stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1; }
   .milestone-node { fill: #ecfeff; stroke: var(--ts-text-muted, #64748b); stroke-dasharray: 4 2; }
-  .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2; }
+  .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1.5; }
   .arrow-fill-critical { fill: var(--ts-brand-orange, #ff4d00); }
 `;
 

package/src/webview/render-fgca.ts

@@ -64,10 +64,7 @@ export function renderFgcaBody(
 
   const headerSvg = columns
     .map(({ col, x }) =>
-      [
-        `<rect class="diagram-node layer-${col}" x="${x}" y="${PAD}" width="${nodeWidth}" height="${HEADER_H}" rx="6"/>`,
-        `<text class="text-header" x="${x + nodeWidth / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(COL_LABELS[col], headerTruncate))}</text>`,
-      ].join('\n'),
+      `<text class="text-header" x="${x + nodeWidth / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(COL_LABELS[col], headerTruncate))}</text>`,
     )
     .join('\n');