@transitrix/diagrams 1.7.6 → 1.8.2

package/src/node-size-presets.ts

@@ -0,0 +1,180 @@
+/**
+ * Block/cell size presets for diagram renderers.
+ *
+ * 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';
+
+export const NODE_SIZE_PRESET_VALUES: readonly NodeSizePreset[] = ['compact', 'normal', 'wide'] as const;
+
+export interface BoxDimensions {
+  width: number;
+  height: number;
+}
+
+export interface BlocksLeafDimensions extends BoxDimensions {}
+
+export interface ProcessBlueprintDimensions {
+  legendColumnWidth: number;
+  stageColumnWidth: number;
+  stageHeaderHeight: number;
+  goalRowHeight: number;
+  resultRowHeight: number;
+  aspectRowMinHeight: number;
+  pillHeight: number;
+  pillGap: number;
+  cellPadding: number;
+  textLineHeight: number;
+  textCharWidth: number;
+  cellTextPadX: number;
+  cellTextPadY: number;
+}
+
+export interface CapabilityMapDimensions {
+  nodeWidth: number;
+  nodeHeight: number;
+}
+
+type PresetTable<T> = Record<NodeSizePreset, T>;
+
+/** Shared entity-node width tiers (px). */
+export const ENTITY_NODE_WIDTH: Record<NodeSizePreset, number> = {
+  compact: 200,
+  normal: 250,
+  wide: 320,
+};
+
+/** 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,
+};
+
+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'),
+};
+
+/** @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 },
+};
+
+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,
+};
+
+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 =
+  | 'goals'
+  | 'dgca'
+  | 'dga'
+  | 'blocks'
+  | 'action'
+  | 'processBlueprint'
+  | 'capabilityMap';
+
+/** Parse a VS Code setting value into a preset id (defaults to `normal`). */
+export function parseNodeSizePreset(value: string | undefined): NodeSizePreset {
+  if (value === 'compact' || value === 'wide') return value;
+  return 'normal';
+}
+
+export function resolveGoalsNodeSize(preset: NodeSizePreset): BoxDimensions {
+  return ENTITY_NODE_SIZE[preset];
+}
+
+export function resolveDgcaNodeSize(preset: NodeSizePreset): BoxDimensions {
+  return ENTITY_NODE_SIZE[preset];
+}
+
+export function resolveBlocksLeafSize(preset: NodeSizePreset): BlocksLeafDimensions {
+  return ENTITY_NODE_SIZE[preset];
+}
+
+export function resolveActionNodeSize(preset: NodeSizePreset): BoxDimensions {
+  return ENTITY_NODE_SIZE[preset];
+}
+
+export function resolveProcessBlueprintSize(preset: NodeSizePreset): ProcessBlueprintDimensions {
+  return PROCESS_BLUEPRINT_SIZE[preset];
+}
+
+export function resolveCapabilityMapNodeSize(preset: NodeSizePreset): CapabilityMapDimensions {
+  return CAPABILITY_MAP_NODE_SIZE[preset];
+}

package/src/process-blueprint/layout.ts

@@ -18,6 +18,7 @@ import type {
   StageHeaderCell,
   StageTextCell,
 } from './types.js';
+import { wrapTextLines } from '../webview/entity-text-layout.js';
 
 const ASPECT_CATEGORIES: AspectCategory[] = ['systems', 'actors', 'equipment', 'information_entities'];
 
@@ -78,56 +79,11 @@ function resolveOptions(options: ProcessBlueprintLayoutOptions | undefined): Res
 }
 
 /**
- * Greedy word-wrap to a max characters-per-line budget. Words longer than the
- * budget are hard-split; if the result exceeds `maxLines`, the last kept line
- * is truncated with an ellipsis so a single pathological cell can't grow the
- * whole row unbounded.
+ * Greedy word-wrap to a max characters-per-line budget. Delegates to the shared
+ * shared text-layout module.
  */
 function wrapText(text: string, maxChars: number, maxLines: number): string[] {
-  const trimmed = (text ?? '').trim();
-  if (trimmed.length === 0) return [];
-  const budget = Math.max(1, maxChars);
-
-  const words = trimmed.split(/\s+/);
-  const lines: string[] = [];
-  let cur = '';
-  const flush = (): void => {
-    if (cur.length > 0) {
-      lines.push(cur);
-      cur = '';
-    }
-  };
-
-  for (const word of words) {
-    if (word.length > budget) {
-      // Token wider than the cell: hard-break it across lines.
-      flush();
-      let rest = word;
-      while (rest.length > budget) {
-        lines.push(rest.slice(0, budget));
-        rest = rest.slice(budget);
-      }
-      cur = rest;
-      continue;
-    }
-    const candidate = cur.length > 0 ? `${cur} ${word}` : word;
-    if (candidate.length > budget) {
-      flush();
-      cur = word;
-    } else {
-      cur = candidate;
-    }
-  }
-  flush();
-
-  if (lines.length > maxLines) {
-    const capped = lines.slice(0, maxLines);
-    const last = capped[maxLines - 1];
-    const clipped = last.length > budget - 1 ? last.slice(0, budget - 1) : last;
-    capped[maxLines - 1] = `${clipped.replace(/…$/, '')}…`;
-    return capped;
-  }
-  return lines;
+  return wrapTextLines(text, maxChars, maxLines);
 }
 
 function buildStageIndex(stages: Stage[]): Map<string, number> {

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

@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest';
+import {
+  layoutCenteredEntityText,
+  LINE_H_PRIMARY,
+  LINE_H_SECONDARY,
+  maxCharsForInnerWidth,
+  ROW_GROUP_GAP,
+  wrapWords,
+  wrapTextLines,
+} from '../entity-text-layout.js';
+
+describe('entity-text-layout', () => {
+  it('wrapWords respects max lines and truncates with ellipsis', () => {
+    const long = 'one two three four five six seven eight nine ten eleven twelve';
+    const lines = wrapWords(long, 12, 2);
+    expect(lines.length).toBeLessThanOrEqual(2);
+    expect(lines[lines.length - 1]).toMatch(/…$/);
+  });
+
+  it('maxCharsForInnerWidth scales with inner width', () => {
+    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: 80,
+      name: 'Improve customer onboarding experience across regions',
+      id: 'GOAL-001',
+      nameMaxLines: 2,
+      idMaxLines: 1,
+    });
+    const wide = layoutCenteredEntityText({
+      boxX: 0,
+      boxY: 0,
+      boxWidth: 320,
+      boxHeight: 80,
+      name: 'Improve customer onboarding experience across regions',
+      id: 'GOAL-001',
+      nameMaxLines: 2,
+      idMaxLines: 1,
+    });
+    const narrowPrimary = narrow.filter((l) => l.cls === 'text-primary').map((l) => l.text).join(' ');
+    const widePrimary = wide.filter((l) => l.cls === 'text-primary').map((l) => l.text).join(' ');
+    expect(widePrimary.replace(/…/g, '').length).toBeGreaterThanOrEqual(narrowPrimary.replace(/…/g, '').length);
+  });
+
+  it('wrapTextLines hard-breaks oversized tokens (blueprint cells)', () => {
+    const lines = wrapTextLines('supercalifragilisticexpialidocious word', 10, 3);
+    expect(lines.length).toBeGreaterThan(1);
+    expect(lines.every((l) => l.length <= 10)).toBe(true);
+  });
+});

package/src/webview/__tests__/entry.test.ts

@@ -47,9 +47,9 @@ describe('webview/entry — Step 2 host API', () => {
 
   it('routes non-goals kinds to their validator after Step 4 (no NOTATION-NOT-WIRED)', () => {
     // Every supported kind is now wired to its validator + renderer. A
-    // malformed fgca document must surface a structured validation error from
-    // the fgca validator — never the Step-2/3 "not wired" placeholder.
-    const r = render('fgca', 'changes: []\n');
+    // malformed dgca document must surface a structured validation error from
+    // the dgca validator — never the Step-2/3 "not wired" placeholder.
+    const r = render('dgca', 'changes: []\n');
     expect(r.status).toBe('error');
     expect(r.errors.length).toBeGreaterThan(0);
     expect(r.errors.every((e) => e.code !== 'NOTATION-NOT-WIRED')).toBe(true);

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

@@ -10,15 +10,11 @@ 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';
 
-// Approximate character widths used by the renderer when sizing labels.
-// Kept in sync with `CHAR_W` / `CHAR_W_ID` in render-blocks.ts so the test
-// can compute the same overflow bounds the renderer uses.
-const CHAR_W = 7;
-const CHAR_W_ID = 6;
-
-// Same horizontal margin the renderer reserves so text never abuts the rect.
-const TEXT_MARGIN_X = 8;
+const LEAF_W = ENTITY_NODE_SIZE.normal.width;
+const LEAF_H = ENTITY_NODE_SIZE.normal.height;
 
 function leafDoc(name: string, id: string): BlocksFile {
   return {
@@ -84,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);
@@ -94,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',
@@ -102,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);
@@ -134,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;
@@ -152,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 }],