@transitrix/diagrams 1.8.1 → 1.8.3

package/src/node-size-presets.ts

@@ -1,8 +1,11 @@
 /**
  * Block/cell size presets for diagram renderers.
  *
- * Presets drive both layout geometry and shared text-layout char budgets.
- * Smooth per-pixel sliders are intentionally deferred.
+ * Entity nodes (Goals, DGCA/DGA, Blocks leaves, Activities, Capability Map)
+ * share one width × height ladder. Heights use fixed tiers (72 / 80 / 96 px)
+ * so name + type + id never collide; widths scale independently (200 / 250 / 320).
+ *
+ * Process Blueprint uses a separate cell grid, scaled from the same tiers.
  */
 
 export type NodeSizePreset = 'compact' | 'normal' | 'wide';
@@ -39,82 +42,102 @@ export interface CapabilityMapDimensions {
 
 type PresetTable<T> = Record<NodeSizePreset, T>;
 
-export const GOALS_NODE_SIZE: PresetTable<BoxDimensions> = {
-  compact: { width: 200, height: 72 },
-  normal: { width: 250, height: 72 },
-  wide: { width: 320, height: 72 },
+/** Shared entity-node width tiers (px). */
+export const ENTITY_NODE_WIDTH: Record<NodeSizePreset, number> = {
+  compact: 200,
+  normal: 250,
+  wide: 320,
 };
 
-export const DGCA_NODE_SIZE: PresetTable<BoxDimensions> = {
-  compact: { width: 200, height: 72 },
-  normal: { width: 220, height: 72 },
-  wide: { width: 280, height: 72 },
+/** Shared entity-node height tiers (px) — room for name + type + id. */
+export const ENTITY_NODE_HEIGHT: Record<NodeSizePreset, number> = {
+  compact: 72,
+  normal: 80,
+  wide: 96,
 };
 
-export const BLOCKS_LEAF_SIZE: PresetTable<BlocksLeafDimensions> = {
-  compact: { width: 140, height: 72 },
-  normal: { width: 160, height: 72 },
-  wide: { width: 200, height: 72 },
+function entityNodeSize(preset: NodeSizePreset): BoxDimensions {
+  return { width: ENTITY_NODE_WIDTH[preset], height: ENTITY_NODE_HEIGHT[preset] };
+}
+
+/** Canonical entity-node sizes — used by every box-based notation preview. */
+export const ENTITY_NODE_SIZE: PresetTable<BoxDimensions> = {
+  compact: entityNodeSize('compact'),
+  normal: entityNodeSize('normal'),
+  wide: entityNodeSize('wide'),
 };
 
-export const ACTION_NODE_SIZE: PresetTable<BoxDimensions> = {
-  compact: { width: 180, height: 72 },
-  normal: { width: 200, height: 80 },
-  wide: { width: 260, height: 80 },
+/** @deprecated alias — use {@link ENTITY_NODE_SIZE} */
+export const GOALS_NODE_SIZE = ENTITY_NODE_SIZE;
+/** @deprecated alias — use {@link ENTITY_NODE_SIZE} */
+export const DGCA_NODE_SIZE = ENTITY_NODE_SIZE;
+/** @deprecated alias — use {@link ENTITY_NODE_SIZE} */
+export const BLOCKS_LEAF_SIZE = ENTITY_NODE_SIZE;
+/** @deprecated alias — use {@link ENTITY_NODE_SIZE} */
+export const ACTION_NODE_SIZE = ENTITY_NODE_SIZE;
+
+export const CAPABILITY_MAP_NODE_SIZE: PresetTable<CapabilityMapDimensions> = {
+  compact: { nodeWidth: ENTITY_NODE_WIDTH.compact, nodeHeight: ENTITY_NODE_HEIGHT.compact },
+  normal: { nodeWidth: ENTITY_NODE_WIDTH.normal, nodeHeight: ENTITY_NODE_HEIGHT.normal },
+  wide: { nodeWidth: ENTITY_NODE_WIDTH.wide, nodeHeight: ENTITY_NODE_HEIGHT.wide },
 };
 
-export const PROCESS_BLUEPRINT_SIZE: PresetTable<ProcessBlueprintDimensions> = {
-  compact: {
-    legendColumnWidth: 120,
-    stageColumnWidth: 180,
-    stageHeaderHeight: 36,
-    goalRowHeight: 52,
-    resultRowHeight: 52,
-    aspectRowMinHeight: 56,
-    pillHeight: 36,
-    pillGap: 4,
-    cellPadding: 8,
-    textLineHeight: 16,
-    textCharWidth: 7.5,
-    cellTextPadX: 10,
-    cellTextPadY: 10,
-  },
-  normal: {
-    legendColumnWidth: 140,
-    stageColumnWidth: 220,
-    stageHeaderHeight: 40,
-    goalRowHeight: 56,
-    resultRowHeight: 56,
-    aspectRowMinHeight: 60,
-    pillHeight: 40,
-    pillGap: 4,
-    cellPadding: 8,
-    textLineHeight: 17,
-    textCharWidth: 7.5,
-    cellTextPadX: 10,
-    cellTextPadY: 10,
-  },
-  wide: {
-    legendColumnWidth: 160,
-    stageColumnWidth: 280,
-    stageHeaderHeight: 44,
-    goalRowHeight: 60,
-    resultRowHeight: 60,
-    aspectRowMinHeight: 64,
-    pillHeight: 44,
-    pillGap: 4,
-    cellPadding: 8,
-    textLineHeight: 18,
-    textCharWidth: 7.5,
-    cellTextPadX: 10,
-    cellTextPadY: 10,
-  },
+const PROCESS_BLUEPRINT_NORMAL: ProcessBlueprintDimensions = {
+  legendColumnWidth: 140,
+  stageColumnWidth: 220,
+  stageHeaderHeight: 40,
+  goalRowHeight: 56,
+  resultRowHeight: 56,
+  aspectRowMinHeight: 60,
+  pillHeight: 40,
+  pillGap: 4,
+  cellPadding: 8,
+  textLineHeight: 17,
+  textCharWidth: 7.5,
+  cellTextPadX: 10,
+  cellTextPadY: 10,
 };
 
-export const CAPABILITY_MAP_NODE_SIZE: PresetTable<CapabilityMapDimensions> = {
-  compact: { nodeWidth: 200, nodeHeight: 56 },
-  normal: { nodeWidth: 240, nodeHeight: 60 },
-  wide: { nodeWidth: 300, nodeHeight: 64 },
+function scaleBlueprint(
+  base: ProcessBlueprintDimensions,
+  widthScale: number,
+  heightScale: number,
+): ProcessBlueprintDimensions {
+  const w = (n: number) => Math.round(n * widthScale);
+  const h = (n: number) => Math.round(n * heightScale);
+  return {
+    legendColumnWidth: w(base.legendColumnWidth),
+    stageColumnWidth: w(base.stageColumnWidth),
+    stageHeaderHeight: h(base.stageHeaderHeight),
+    goalRowHeight: h(base.goalRowHeight),
+    resultRowHeight: h(base.resultRowHeight),
+    aspectRowMinHeight: h(base.aspectRowMinHeight),
+    pillHeight: h(base.pillHeight),
+    pillGap: base.pillGap,
+    cellPadding: base.cellPadding,
+    textLineHeight: h(base.textLineHeight),
+    textCharWidth: base.textCharWidth,
+    cellTextPadX: base.cellTextPadX,
+    cellTextPadY: base.cellTextPadY,
+  };
+}
+
+const PB_WIDTH_SCALE: Record<NodeSizePreset, number> = {
+  compact: ENTITY_NODE_WIDTH.compact / ENTITY_NODE_WIDTH.normal,
+  normal: 1,
+  wide: ENTITY_NODE_WIDTH.wide / ENTITY_NODE_WIDTH.normal,
+};
+
+const PB_HEIGHT_SCALE: Record<NodeSizePreset, number> = {
+  compact: ENTITY_NODE_HEIGHT.compact / ENTITY_NODE_HEIGHT.normal,
+  normal: 1,
+  wide: ENTITY_NODE_HEIGHT.wide / ENTITY_NODE_HEIGHT.normal,
+};
+
+export const PROCESS_BLUEPRINT_SIZE: PresetTable<ProcessBlueprintDimensions> = {
+  compact: scaleBlueprint(PROCESS_BLUEPRINT_NORMAL, PB_WIDTH_SCALE.compact, PB_HEIGHT_SCALE.compact),
+  normal: PROCESS_BLUEPRINT_NORMAL,
+  wide: scaleBlueprint(PROCESS_BLUEPRINT_NORMAL, PB_WIDTH_SCALE.wide, PB_HEIGHT_SCALE.wide),
 };
 
 export type NodeSizeNotation =
@@ -133,19 +156,19 @@ export function parseNodeSizePreset(value: string | undefined): NodeSizePreset {
 }
 
 export function resolveGoalsNodeSize(preset: NodeSizePreset): BoxDimensions {
-  return GOALS_NODE_SIZE[preset];
+  return ENTITY_NODE_SIZE[preset];
 }
 
 export function resolveDgcaNodeSize(preset: NodeSizePreset): BoxDimensions {
-  return DGCA_NODE_SIZE[preset];
+  return ENTITY_NODE_SIZE[preset];
 }
 
 export function resolveBlocksLeafSize(preset: NodeSizePreset): BlocksLeafDimensions {
-  return BLOCKS_LEAF_SIZE[preset];
+  return ENTITY_NODE_SIZE[preset];
 }
 
 export function resolveActionNodeSize(preset: NodeSizePreset): BoxDimensions {
-  return ACTION_NODE_SIZE[preset];
+  return ENTITY_NODE_SIZE[preset];
 }
 
 export function resolveProcessBlueprintSize(preset: NodeSizePreset): ProcessBlueprintDimensions {

package/src/webview/__tests__/entity-text-layout.test.ts

@@ -1,10 +1,17 @@
 import { describe, expect, it } from 'vitest';
 import {
   layoutCenteredEntityText,
+  layoutLeafBlockText,
+  layoutHeaderBlockText,
+  LINE_H_PRIMARY,
+  LINE_H_SECONDARY,
+  TEXT_MARGIN_Y,
   maxCharsForInnerWidth,
+  ROW_GROUP_GAP,
   wrapWords,
   wrapTextLines,
 } from '../entity-text-layout.js';
+import { ENTITY_NODE_SIZE } from '../../node-size-presets.js';
 
 describe('entity-text-layout', () => {
   it('wrapWords respects max lines and truncates with ellipsis', () => {
@@ -18,12 +25,30 @@ describe('entity-text-layout', () => {
     expect(maxCharsForInnerWidth(160, 7)).toBeGreaterThan(maxCharsForInnerWidth(120, 7));
   });
 
+  it('layoutCenteredEntityText keeps name and type labels separated', () => {
+    const specs = layoutCenteredEntityText({
+      boxX: 0,
+      boxY: 0,
+      boxWidth: 250,
+      boxHeight: 80,
+      name: 'Grow enterprise value',
+      type: 'Strategic',
+      id: 'GOAL-VALUE-1',
+      nameMaxLines: 2,
+      idMaxLines: 1,
+    });
+    const nameY = specs.find((l) => l.cls === 'text-primary')!.y;
+    const typeY = specs.find((l) => l.cls === 'text-secondary')!.y;
+    const minGap = typeY - nameY - LINE_H_PRIMARY / 2 - LINE_H_SECONDARY / 2;
+    expect(minGap).toBeGreaterThanOrEqual(ROW_GROUP_GAP - 1);
+  });
+
   it('layoutCenteredEntityText emits more name capacity on wide boxes', () => {
     const narrow = layoutCenteredEntityText({
       boxX: 0,
       boxY: 0,
       boxWidth: 200,
-      boxHeight: 72,
+      boxHeight: 80,
       name: 'Improve customer onboarding experience across regions',
       id: 'GOAL-001',
       nameMaxLines: 2,
@@ -33,7 +58,7 @@ describe('entity-text-layout', () => {
       boxX: 0,
       boxY: 0,
       boxWidth: 320,
-      boxHeight: 72,
+      boxHeight: 80,
       name: 'Improve customer onboarding experience across regions',
       id: 'GOAL-001',
       nameMaxLines: 2,
@@ -50,3 +75,108 @@ describe('entity-text-layout', () => {
     expect(lines.every((l) => l.length <= 10)).toBe(true);
   });
 });
+
+// Approximate half-extent (px) of each text class's glyphs around its centre
+// y — font-size / 2, the same heuristic the render-blocks overlap regression
+// test (#419) uses. Used below to assert text never visually crosses the box
+// border, not just that the *nominal* line-height budget fits.
+const HALF_EXTENT: Record<string, number> = {
+  'text-primary': 6, // 12px font
+  'text-secondary': 6, // 11px font, rounded up
+  'text-id': 5, // 10px font
+};
+
+describe('entity text layout — never overflows the box, always keeps padding', () => {
+  const PRESETS = Object.entries(ENTITY_NODE_SIZE); // compact/normal/wide
+  const NAMES = [
+    'Short',
+    'Achieve full GDPR & NIS2 compliance',
+    'A name so long it would need three or more lines to render in full without any height limit at all',
+  ];
+
+  function assertNoOverflowAndPadded(
+    specs: { cls: string; y: number }[],
+    boxTop: number,
+    boxBottom: number,
+  ): void {
+    for (const s of specs) {
+      const half = HALF_EXTENT[s.cls] ?? 6;
+      expect(s.y - half).toBeGreaterThanOrEqual(boxTop);
+      expect(s.y + half).toBeLessThanOrEqual(boxBottom);
+    }
+  }
+
+  for (const [presetName, size] of PRESETS) {
+    for (const withType of [false, true]) {
+      for (const name of NAMES) {
+        it(`layoutCenteredEntityText: ${presetName} preset, type=${withType}, name="${name.slice(0, 20)}…" stays inside the box`, () => {
+          const boxY = 0;
+          const specs = layoutCenteredEntityText({
+            boxX: 0,
+            boxY,
+            boxWidth: size.width,
+            boxHeight: size.height,
+            name,
+            type: withType ? 'Strategic Goal' : undefined,
+            id: 'GOAL-EU-COMPLIANCE-1',
+            nameMaxLines: 2,
+            idMaxLines: 1,
+          });
+          assertNoOverflowAndPadded(specs, boxY, boxY + size.height);
+        });
+      }
+    }
+  }
+
+  it('reproduces the reported case (wide preset, 2-line name + type + long id) with real padding on all sides', () => {
+    const size = ENTITY_NODE_SIZE.normal;
+    const boxY = 100;
+    const specs = layoutCenteredEntityText({
+      boxX: 0,
+      boxY,
+      boxWidth: size.width,
+      boxHeight: size.height,
+      name: 'Achieve full GDPR & NIS2 compliance',
+      type: 'Project Goal',
+      id: 'GOAL-EU-COMPLIANCE-1',
+      nameMaxLines: 2,
+      idMaxLines: 1,
+    });
+    const nameLines = specs.filter((s) => s.cls === 'text-primary');
+    expect(nameLines.length).toBe(2); // normal preset is tall enough to keep both lines
+    assertNoOverflowAndPadded(specs, boxY, boxY + size.height);
+    // Explicit padding, not just "doesn't cross the border".
+    const firstTop = Math.min(...specs.map((s) => s.y - (HALF_EXTENT[s.cls] ?? 6)));
+    const lastBottom = Math.max(...specs.map((s) => s.y + (HALF_EXTENT[s.cls] ?? 6)));
+    expect(firstTop - boxY).toBeGreaterThanOrEqual(TEXT_MARGIN_Y);
+    expect(boxY + size.height - lastBottom).toBeGreaterThanOrEqual(TEXT_MARGIN_Y);
+  });
+
+  it('layoutLeafBlockText stays inside the box for compact preset with a long name and id', () => {
+    const size = ENTITY_NODE_SIZE.compact;
+    const boxY = 0;
+    const specs = layoutLeafBlockText({
+      boxX: 0,
+      boxY,
+      boxWidth: size.width,
+      boxHeight: size.height,
+      name: 'Personal data records that linger after consent withdrawal across many systems and archives',
+      id: 'VERY_LONG_BLOCK_IDENTIFIER_WITH_MANY_SEGMENTS_AND_MORE',
+    });
+    assertNoOverflowAndPadded(specs, boxY, boxY + size.height);
+  });
+
+  it('layoutHeaderBlockText stays inside a short header strip', () => {
+    const boxY = 0;
+    const headerHeight = 28;
+    const specs = layoutHeaderBlockText({
+      boxX: 0,
+      boxY,
+      boxWidth: 250,
+      headerHeight,
+      name: 'A fairly long container name here',
+      id: 'VERY_LONG_CONTAINER_IDENTIFIER',
+    });
+    assertNoOverflowAndPadded(specs, boxY, boxY + headerHeight);
+  });
+});

package/src/webview/__tests__/render-blocks.test.ts

@@ -11,6 +11,10 @@ import { describe, expect, it } from 'vitest';
 import type { BlocksFile } from '../../blocks/types.js';
 import { renderBlocksSvg } from '../render-blocks.js';
 import { CHAR_W_PRIMARY as CHAR_W, CHAR_W_ID, TEXT_MARGIN_X } from '../entity-text-layout.js';
+import { ENTITY_NODE_SIZE } from '../../node-size-presets.js';
+
+const LEAF_W = ENTITY_NODE_SIZE.normal.width;
+const LEAF_H = ENTITY_NODE_SIZE.normal.height;
 
 function leafDoc(name: string, id: string): BlocksFile {
   return {
@@ -76,7 +80,8 @@ describe('renderBlocksSvg — leaf labels', () => {
   });
 
   it('wraps a long ID to at most 2 lines and truncates with …', () => {
-    const longId = 'VERY_LONG_BLOCK_IDENTIFIER_WITH_MANY_SEGMENTS_AND_MORE_AND_MORE';
+    const longId =
+      'VERY_LONG_BLOCK_IDENTIFIER_WITH_MANY_SEGMENTS_AND_MORE_AND_MORE_EXTRA_TAIL_TO_FORCE_TRUNCATION';
     const svg = renderBlocksSvg(leafDoc('Short name', longId));
     const idLines = extractLabels(svg).filter((l) => l.cls === 'text-id');
     expect(idLines.length).toBeGreaterThan(0);
@@ -86,7 +91,7 @@ describe('renderBlocksSvg — leaf labels', () => {
     }
   });
 
-  it('keeps every label inside the 160px leaf width (approximated by CHAR_W * length)', () => {
+  it(`keeps every label inside the ${LEAF_W}px leaf width (approximated by CHAR_W * length)`, () => {
     const svg = renderBlocksSvg(
       leafDoc(
         'Personal data records that linger after consent withdrawal across many systems',
@@ -94,7 +99,7 @@ describe('renderBlocksSvg — leaf labels', () => {
       ),
     );
     const labels = extractLabels(svg);
-    const inner = 160 - TEXT_MARGIN_X * 2;
+    const inner = LEAF_W - TEXT_MARGIN_X * 2;
     for (const l of labels) {
       const cw = l.cls === 'text-primary' ? CHAR_W : CHAR_W_ID;
       expect(l.text.length * cw).toBeLessThanOrEqual(inner);
@@ -126,8 +131,8 @@ describe('renderBlocksSvg — container headers', () => {
       ),
     );
     const labels = extractLabels(svg);
-    // The container width derives from its single 160px child: 160 + 2*12 (padding) = 184.
-    const containerW = 160 + 24;
+    // Container width derives from its single leaf child: leafW + 2×padding.
+    const containerW = LEAF_W + 24;
     const inner = containerW - TEXT_MARGIN_X * 2;
     for (const l of labels) {
       const cw = l.cls === 'text-primary' ? CHAR_W : CHAR_W_ID;
@@ -144,7 +149,7 @@ describe('renderBlocksSvg — container headers', () => {
       'Active systems that are erasure-reachable within the standard 30-day operational window';
     const svg = renderBlocksSvg(containerDoc(longName, 'ACTIVE'));
     const labels = extractLabels(svg);
-    const containerW = 160 + 24;
+    const containerW = LEAF_W + 24;
     const inner = containerW - TEXT_MARGIN_X * 2;
     const primaries = labels.filter((l) => l.cls === 'text-primary');
     for (const l of primaries) {

package/src/webview/__tests__/render-goals.test.ts

@@ -65,6 +65,48 @@ describe('renderGoalsSvg', () => {
     expect(svg).toContain('height="0"');
   });
 
+  it('renders name, type, and id on separate lines without overlap', () => {
+    const tree: GoalTree = {
+      goal_types: [
+        { name: 'Strategic', level: 0 },
+        { name: 'Objective', level: 1 },
+      ],
+      goals: [
+        {
+          id: 1,
+          canonical_id: 'GOAL-VALUE-1',
+          name: 'Grow enterprise value',
+          type: 'Strategic',
+          level: 0,
+          parent_id: 0,
+        },
+        {
+          id: 2,
+          canonical_id: 'GOAL-COST-1',
+          name: 'Reduce run cost 20%',
+          type: 'Objective',
+          level: 1,
+          parent_id: 1,
+        },
+      ],
+    };
+    const svg = renderGoalsSvg(tree);
+    expect(svg).toContain('Grow enterprise value');
+    expect(svg).toContain('Strategic');
+    expect(svg).toContain('GOAL-VALUE-1');
+    const typeMatches = [...svg.matchAll(/class="text-secondary"[^>]*y="(\d+)"/g)];
+    const nameMatches = [...svg.matchAll(/class="text-primary"[^>]*y="(\d+)"/g)];
+    expect(typeMatches.length).toBeGreaterThan(0);
+    for (const type of typeMatches) {
+      const typeY = Number(type[1]);
+      const nearestName = nameMatches
+        .map((m) => Number(m[1]))
+        .filter((y) => y < typeY)
+        .sort((a, b) => b - a)[0];
+      expect(typeY - nearestName).toBeGreaterThanOrEqual(18);
+    }
+  });
+
   it('shows canonical goal ids in node labels when present', () => {
     const tree: GoalTree = {
       goal_types: [{ name: 'Strategy', level: 0 }],