@transitrix/diagrams 1.7.6 → 1.8.2

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

@@ -0,0 +1,355 @@
+/**
+ * Shared text-in-block layout for Transitrix diagram renderers.
+ *
+ * Consolidates wrapping, truncation, and vertical placement patterns previously
+ * duplicated across Blocks, Goals, DGCA/DGA, Activities, Process Blueprint, and
+ * Capability Map renderers.
+ */
+
+export const TEXT_MARGIN_X = 8;
+/** Approximate character width (px) at text-primary size (12px/600). */
+export const CHAR_W_PRIMARY = 7;
+/** Approximate character width (px) at text-id size (10px/600). */
+export const CHAR_W_ID = 6;
+/** Approximate character width (px) at text-secondary size. */
+export const CHAR_W_SECONDARY = 7;
+/** Vertical advance between name line centres (text-primary). */
+export const LINE_H_PRIMARY = 14;
+/** Vertical advance between secondary line centres. */
+export const LINE_H_SECONDARY = 14;
+/** Vertical advance between id line centres (text-id). */
+export const LINE_H_ID = 12;
+/** Gap between the name block and the id block in leaf-style layouts. */
+export const NAME_ID_GAP = 14;
+/** Gap between stacked row groups (name → type → id). */
+export const ROW_GROUP_GAP = 9;
+
+export function maxCharsForInnerWidth(innerWidth: number, charWidth: number): number {
+  return Math.max(4, Math.floor(Math.max(0, innerWidth) / charWidth));
+}
+
+/** Word-wrap `text` to at most `maxLines` lines of `maxChars` each. */
+export function wrapWords(text: string, maxChars: number, maxLines: number): string[] {
+  const safeMax = Math.max(2, maxChars);
+  const words = text.split(' ');
+  const lines: string[] = [];
+  let cur = '';
+  for (let i = 0; i < words.length; i++) {
+    const w = words[i];
+    const next = cur ? `${cur} ${w}` : w;
+    if (next.length <= safeMax) {
+      cur = next;
+    } else {
+      if (cur) lines.push(cur);
+      cur = '';
+      if (lines.length >= maxLines) break;
+      if (lines.length === maxLines - 1) {
+        const rest = words.slice(i).join(' ');
+        lines.push(rest.length <= safeMax ? rest : `${rest.slice(0, safeMax - 1)}…`);
+        return lines;
+      }
+      cur = w.length <= safeMax ? w : `${w.slice(0, safeMax - 1)}…`;
+    }
+  }
+  if (cur && lines.length < maxLines) lines.push(cur);
+  return lines.length ? lines : [`${text.slice(0, safeMax - 1)}…`];
+}
+
+/**
+ * Greedy word-wrap with hard-break for tokens wider than the budget. When the
+ * result exceeds `maxLines`, the last kept line is truncated with an ellipsis.
+ * Used by Process Blueprint goal/result cells and aspect pill names.
+ */
+export function wrapTextLines(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) {
+      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;
+}
+
+/** Split an ID (no spaces) across lines, breaking at `_` or `-`. */
+export function wrapId(id: string, maxChars: number, maxLines = 2): string[] {
+  if (maxLines <= 1) return [truncateId(id, maxChars)];
+  if (id.length <= maxChars) return [id];
+  const seg = id.slice(0, maxChars);
+  const sepIdx = Math.max(seg.lastIndexOf('_'), seg.lastIndexOf('-'));
+  const cut = sepIdx > Math.floor(maxChars / 3) ? sepIdx : maxChars - 1;
+  const isSep = id[cut] === '_' || id[cut] === '-';
+  const line1 = id.slice(0, cut);
+  const rest = id.slice(cut + (isSep ? 1 : 0));
+  return [line1, rest.length <= maxChars ? rest : `${rest.slice(0, maxChars - 1)}…`];
+}
+
+/** Truncate `text` to at most `maxChars` characters, at a word boundary when possible. */
+export function truncateLine(text: string, maxChars: number): string {
+  const safeMax = Math.max(2, maxChars);
+  if (text.length <= safeMax) return text;
+  const cut = text.slice(0, safeMax - 1);
+  const lastSpace = cut.lastIndexOf(' ');
+  return `${lastSpace > safeMax / 2 ? cut.slice(0, lastSpace) : cut}…`;
+}
+
+/** Single-line ID truncation that prefers `_`/`-` separators before a hard cut. */
+export function truncateId(id: string, maxChars: number): string {
+  const safeMax = Math.max(2, maxChars);
+  if (id.length <= safeMax) return id;
+  const cut = id.slice(0, safeMax - 1);
+  const sepIdx = Math.max(cut.lastIndexOf('_'), cut.lastIndexOf('-'));
+  return `${sepIdx > safeMax / 3 ? cut.slice(0, sepIdx) : cut}…`;
+}
+
+export interface TextLineSpec {
+  cls: string;
+  text: string;
+  y: number;
+  /** When set, use this x; otherwise callers supply a shared anchor (e.g. box centre). */
+  x?: number;
+}
+
+export interface LayoutCenteredEntityOptions {
+  boxX: number;
+  boxY: number;
+  boxWidth: number;
+  boxHeight: number;
+  name: string;
+  type?: string;
+  id: string;
+  nameMaxLines?: number;
+  idMaxLines?: number;
+  marginX?: number;
+}
+
+interface TextRowGroup {
+  cls: string;
+  lines: string[];
+  lineHeight: number;
+  gapAfter: number;
+}
+
+function totalVerticalSpan(groups: TextRowGroup[]): number {
+  let span = 0;
+  for (let i = 0; i < groups.length; i++) {
+    const g = groups[i];
+    span += g.lines.length * g.lineHeight;
+    if (i < groups.length - 1) span += g.gapAfter;
+  }
+  return span;
+}
+
+/**
+ * Layout centred entity text (name → optional type → id) inside a fixed box.
+ * Returns absolute SVG y-positions (line centres) for each rendered row.
+ */
+export function layoutCenteredEntityText(opts: LayoutCenteredEntityOptions): TextLineSpec[] {
+  const marginX = opts.marginX ?? TEXT_MARGIN_X;
+  const innerW = Math.max(0, opts.boxWidth - marginX * 2);
+  const cx = opts.boxX + opts.boxWidth / 2;
+  const maxCharsName = maxCharsForInnerWidth(innerW, CHAR_W_PRIMARY);
+  const maxCharsType = maxCharsForInnerWidth(innerW, CHAR_W_SECONDARY);
+  const maxCharsId = maxCharsForInnerWidth(innerW, CHAR_W_ID);
+
+  const nameLines = wrapWords(opts.name, maxCharsName, opts.nameMaxLines ?? 2);
+  const typeLine = opts.type?.trim() ? truncateLine(opts.type, maxCharsType) : undefined;
+  const idMaxLines = opts.idMaxLines ?? 1;
+  const idLines = idMaxLines <= 1 ? [truncateId(opts.id, maxCharsId)] : wrapId(opts.id, maxCharsId, idMaxLines);
+
+  const groups: TextRowGroup[] = [
+    {
+      cls: 'text-primary',
+      lines: nameLines,
+      lineHeight: LINE_H_PRIMARY,
+      gapAfter: typeLine ? ROW_GROUP_GAP : NAME_ID_GAP,
+    },
+  ];
+  if (typeLine) {
+    groups.push({
+      cls: 'text-secondary',
+      lines: [typeLine],
+      lineHeight: LINE_H_SECONDARY,
+      gapAfter: NAME_ID_GAP,
+    });
+  }
+  groups.push({
+    cls: 'text-id',
+    lines: idLines,
+    lineHeight: LINE_H_ID,
+    gapAfter: 0,
+  });
+
+  const span = totalVerticalSpan(groups);
+  const firstY = Math.round(opts.boxY + (opts.boxHeight - span) / 2);
+  const out: TextLineSpec[] = [];
+  let y = firstY;
+  for (let gi = 0; gi < groups.length; gi++) {
+    const g = groups[gi];
+    for (let li = 0; li < g.lines.length; li++) {
+      out.push({ cls: g.cls, text: g.lines[li], y });
+      y += g.lineHeight;
+    }
+    if (gi < groups.length - 1) y += g.gapAfter;
+  }
+  return out;
+}
+
+/** Emit centred `<text>` elements from {@link layoutCenteredEntityText} specs. */
+export function emitCenteredTextSvg(
+  specs: TextLineSpec[],
+  centerX: number,
+  esc: (s: string) => string,
+): string {
+  return specs
+    .map((spec) => {
+      const x = spec.x ?? centerX;
+      const anchor = spec.x != null && spec.cls === 'text-pill' ? ' text-anchor="middle"' : ' text-anchor="middle"';
+      return `<text class="${spec.cls}" x="${x}" y="${spec.y}"${anchor} dominant-baseline="central">${esc(spec.text)}</text>`;
+    })
+    .join('\n');
+}
+
+export interface LayoutLeafBlockTextOptions {
+  boxX: number;
+  boxY: number;
+  boxWidth: number;
+  boxHeight: number;
+  name: string;
+  id: string;
+  nameMaxLines?: number;
+  marginX?: number;
+}
+
+/** Leaf nested-block layout: name (up to 3 lines) + id (up to 2 lines), centred. */
+export function layoutLeafBlockText(opts: LayoutLeafBlockTextOptions): TextLineSpec[] {
+  const marginX = opts.marginX ?? TEXT_MARGIN_X;
+  const innerW = Math.max(0, opts.boxWidth - marginX * 2);
+  const maxCharsName = maxCharsForInnerWidth(innerW, CHAR_W_PRIMARY);
+  const maxCharsId = maxCharsForInnerWidth(innerW, CHAR_W_ID);
+  const nameLines = wrapWords(opts.name, maxCharsName, opts.nameMaxLines ?? 3);
+  const idLines = wrapId(opts.id, maxCharsId, 2);
+
+  const nameSpan = (nameLines.length - 1) * LINE_H_PRIMARY;
+  const idSpan = (idLines.length - 1) * LINE_H_ID;
+  const totalSpan = nameSpan + NAME_ID_GAP + idSpan;
+  const firstY = Math.round(opts.boxY + (opts.boxHeight - totalSpan) / 2);
+
+  const out: TextLineSpec[] = [];
+  for (let i = 0; i < nameLines.length; i++) {
+    out.push({ cls: 'text-primary', text: nameLines[i], y: firstY + i * LINE_H_PRIMARY });
+  }
+  const idFirstY = firstY + nameSpan + NAME_ID_GAP;
+  for (let i = 0; i < idLines.length; i++) {
+    out.push({ cls: 'text-id', text: idLines[i], y: idFirstY + i * LINE_H_ID });
+  }
+  return out;
+}
+
+export interface LayoutHeaderBlockTextOptions {
+  boxX: number;
+  boxY: number;
+  boxWidth: number;
+  headerHeight: number;
+  name: string;
+  id: string;
+  marginX?: number;
+}
+
+/** Container header: single-line name + id stacked in the header strip. */
+export function layoutHeaderBlockText(opts: LayoutHeaderBlockTextOptions): TextLineSpec[] {
+  const marginX = opts.marginX ?? TEXT_MARGIN_X;
+  const innerW = Math.max(0, opts.boxWidth - marginX * 2);
+  const maxCharsName = maxCharsForInnerWidth(innerW, CHAR_W_PRIMARY);
+  const maxCharsId = maxCharsForInnerWidth(innerW, CHAR_W_ID);
+  const nameText = truncateLine(opts.name, maxCharsName);
+  const idText = truncateId(opts.id, maxCharsId);
+  const headerMid = opts.boxY + opts.headerHeight / 2;
+  const halfSpan = (LINE_H_PRIMARY + LINE_H_ID) / 4;
+  return [
+    { cls: 'text-primary', text: nameText, y: Math.round(headerMid - halfSpan) },
+    { cls: 'text-id', text: idText, y: Math.round(headerMid + halfSpan) },
+  ];
+}
+
+/**
+ * Left-anchored multi-line cell text, vertically centred (Process Blueprint cells).
+ * Returns one spec per line with absolute x baked into caller via anchorX.
+ */
+export function layoutLeftCellLines(
+  lines: string[],
+  anchorX: number,
+  cellTop: number,
+  cellHeight: number,
+  lineHeight: number,
+  cls: string,
+): TextLineSpec[] {
+  const ls = lines.length > 0 ? lines : [''];
+  const firstY = cellTop + cellHeight / 2 - ((ls.length - 1) / 2) * lineHeight;
+  return ls.map((text, i) => ({ cls, text, y: firstY + i * lineHeight, x: anchorX }));
+}
+
+/** Centred pill text: name lines + optional id line below. */
+export function layoutCenteredPillText(
+  pillX: number,
+  pillY: number,
+  pillWidth: number,
+  pillHeight: number,
+  nameLines: string[],
+  idLine: string | undefined,
+  nameLineHeight = 15,
+): TextLineSpec[] {
+  const cx = pillX + pillWidth / 2;
+  const lineCount = nameLines.length + (idLine ? 1 : 0);
+  const firstY = pillY + pillHeight / 2 - ((lineCount - 1) / 2) * nameLineHeight;
+  const out: TextLineSpec[] = nameLines.map((text, i) => ({
+    cls: 'text-pill',
+    text,
+    y: firstY + i * nameLineHeight,
+    x: cx,
+  }));
+  if (idLine) {
+    out.push({
+      cls: 'text-secondary',
+      text: idLine,
+      y: firstY + nameLines.length * nameLineHeight,
+      x: cx,
+    });
+  }
+  return out;
+}

package/src/webview/entry.ts

@@ -19,6 +19,10 @@
  * (SVG for the diagram notations, an HTML fragment for the catalogue
  * notations). The JVM host drops whatever `svg` carries into the DOM, so the
  * field name is historical — it transports any self-contained markup.
+ *
+ * Import validators/types from leaf modules (e.g. `capability-map/validate.js`),
+ * never from package `index.ts` barrels that also re-export React views —
+ * esbuild cannot tree-shake those and the JCEF bundle would pull in React.
  */
 import yaml from 'js-yaml';
 
@@ -30,8 +34,8 @@ import { validateApplicationsCatalogue } from '../applications/index.js';
 import type { ApplicationsCatalogueFile } from '../applications/index.js';
 import { validateNestedBlocks } from '../blocks/index.js';
 import type { BlocksFile } from '../blocks/index.js';
-import { validateCapabilityMap } from '../capability-map/index.js';
-import type { CapabilityMapFile } from '../capability-map/index.js';
+import { validateCapabilityMap } from '../capability-map/validate.js';
+import type { CapabilityMapFile } from '../capability-map/types.js';
 import { parseCanonicalFGCA, parseCanonicalFGA } from '../fgca/parse-canonical.js';
 import { parseCanonicalGoals } from '../goals/parse-canonical.js';
 import { validateProcessBlueprint } from '../process-blueprint/index.js';
@@ -188,7 +192,7 @@ function dispatchValidate(kind: NotationKind, doc: unknown): RenderResult {
       r.errors.push(...v.errors);
       r.warnings.push(...v.warnings);
       if (v.valid && v.parsed) {
-        r.svg = renderFgcaSvg(v.parsed, { variant: 'fgca' });
+        r.svg = renderFgcaSvg(v.parsed, { variant: 'dgca' });
       }
       return r;
     }
@@ -198,7 +202,7 @@ function dispatchValidate(kind: NotationKind, doc: unknown): RenderResult {
       r.errors.push(...v.errors);
       r.warnings.push(...v.warnings);
       if (v.valid && v.parsed) {
-        r.svg = renderFgcaSvg(v.parsed, { variant: 'fga' });
+        r.svg = renderFgcaSvg(v.parsed, { variant: 'dga' });
       }
       return r;
     }

package/src/webview/notation-style.ts

@@ -1,7 +1,7 @@
 /**
  * Shared visual constants for entity-box (block-style) notation renderers.
  *
- * Goals, Nested Blocks, FGCA/DGCA, and any future notation using the same
+ * Goals, Nested Blocks, DGCA/DGA, and any future notation using the same
  * entity-box visual language import their shared style tokens from here.
  * Centralising them prevents the per-renderer drift that caused the Goals/Blocks
  * style mismatch (border radius diverged to rx=6 in Blocks vs rx=8 everywhere

package/src/webview/render-activities.ts

@@ -24,11 +24,11 @@ import type {
   ActivitiesLayoutOptions,
 } from '../activities/types.js';
 import { horizontalCubicEdgePath, 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';
 import { escXml } from './render-util.js';
 
-const N_NODE_W = 200;
-const N_NODE_H = 80;
 const N_PAD = 24;
 
 /**
@@ -55,8 +55,31 @@ export const ACTIVITIES_NETWORK_DEFS = `<defs>
   </marker>
 </defs>`;
 
-function truncate(s: string, maxLen: number): string {
-  return s.length > maxLen ? s.slice(0, maxLen - 1) + '…' : s;
+function activityNodeSvg(
+  n: ActivitiesLayout['nodes'][number],
+  x: number,
+  y: number,
+  isCritical: boolean,
+  isMilestone: boolean,
+  durLabel: string,
+): string {
+  const cls = `diagram-node act-node ${isCritical ? 'critical-node' : ''} ${isMilestone ? 'milestone-node' : ''}`.trim();
+  const specs = layoutCenteredEntityText({
+    boxX: x,
+    boxY: y,
+    boxWidth: n.width,
+    boxHeight: n.height,
+    name: n.data.name,
+    id: n.id,
+    nameMaxLines: 2,
+    idMaxLines: 1,
+  });
+  const textSvg = emitCenteredTextSvg(specs, x + n.width / 2, escXml);
+  return [
+    `<rect class="${cls}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="8"/>`,
+    textSvg,
+    durLabel ? `<text class="text-secondary" x="${x + n.width - 8}" y="${y + n.height - 8}" text-anchor="end">${durLabel}</text>` : '',
+  ].filter(Boolean).join('\n');
 }
 
 /**
@@ -107,28 +130,8 @@ export function renderActivitiesNetworkBody(
       const isCritical = cpm.get(n.id)?.isCritical ?? false;
       const durVal = n.data.duration;
       const isMilestone = (durVal ?? -1) === 0;
-      const cls = `diagram-node act-node ${isCritical ? 'critical-node' : ''} ${isMilestone ? 'milestone-node' : ''}`.trim();
-      const idLabel = escXml(n.id);
-      const words = n.data.name.split(' ');
-      let line1 = '';
-      let line2 = '';
-      for (const w of words) {
-        if ((line1 + ' ' + w).trim().length <= 24) line1 = (line1 + ' ' + w).trim();
-        else if ((line2 + ' ' + w).trim().length <= 24) line2 = (line2 + ' ' + w).trim();
-        else if (!line2) { line2 = w.slice(0, 22) + '…'; break; }
-      }
-      const twoLines = line2.length > 0;
-      const nameY1 = twoLines ? y + 18 : y + 28;
-      const nameY2 = y + 34;
-      const idY = twoLines ? y + 54 : y + 50;
       const durLabel = (durVal !== undefined && durVal > 0) ? `${durVal}d` : '';
-      return [
-        `<rect class="${cls}" x="${x}" y="${y}" width="${N_NODE_W}" height="${N_NODE_H}" rx="8"/>`,
-        `<text class="text-primary" x="${x + N_NODE_W / 2}" y="${nameY1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>`,
-        twoLines ? `<text class="text-primary" x="${x + N_NODE_W / 2}" y="${nameY2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>` : '',
-        `<text class="text-id" x="${x + N_NODE_W / 2}" y="${idY}" text-anchor="middle" dominant-baseline="central">${idLabel}</text>`,
-        durLabel ? `<text class="text-secondary" x="${x + N_NODE_W - 8}" y="${y + N_NODE_H - 8}" text-anchor="end">${durLabel}</text>` : '',
-      ].filter(Boolean).join('\n');
+      return activityNodeSvg(n, x, y, isCritical, isMilestone, durLabel);
     })
     .join('\n');
 
@@ -138,8 +141,9 @@ export function renderActivitiesNetworkBody(
 export interface RenderActivitiesOptions {
   /** Optional heading rendered as a `text-header` above the diagram. */
   title?: string;
-  /** Network column / row gaps. Defaults match `layoutActivities`. */
+  /** Network column / row gaps and node size. Defaults match `layoutActivities`. */
   gaps?: ActivitiesLayoutOptions;
+  nodeSizePreset?: NodeSizePreset;
   /** Exit edge curvature; 1 = default, 0 = straight, higher = stronger arc. */
   curvature?: number;
   /** Entry curvature at the target node; defaults to `curvature` when omitted. */
@@ -176,10 +180,17 @@ export function renderActivitiesSvg(doc: ActivityDoc, options: RenderActivitiesO
   const {
     title = '',
     gaps = {},
+    nodeSizePreset = 'normal',
     curvature = DEFAULT_EDGE_CURVATURE,
     entryCurvature,
     suppressProjectNodes = true,
   } = options;
+  const nodeSize = resolveActionNodeSize(parseNodeSizePreset(nodeSizePreset));
+  const layoutGaps: ActivitiesLayoutOptions = {
+    ...gaps,
+    nodeWidth: gaps.nodeWidth ?? nodeSize.width,
+    nodeHeight: gaps.nodeHeight ?? nodeSize.height,
+  };
 
   // #421: Suppress project-type container nodes in the network layout by
   // default (see suppressProjectNodes JSDoc). A shallow copy avoids mutating
@@ -188,7 +199,7 @@ export function renderActivitiesSvg(doc: ActivityDoc, options: RenderActivitiesO
     ? { ...doc, activities: (doc.activities ?? []).filter((a) => a.activity_type?.toLowerCase() !== 'project') }
     : doc;
 
-  const layout: ActivitiesLayout = layoutActivities(renderDoc, gaps);
+  const layout: ActivitiesLayout = layoutActivities(renderDoc, layoutGaps);
 
   if (layout.nodes.length === 0) {
     return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;