@transitrix/diagrams 1.13.1 → 1.13.2

package/dist/fgca/preview-layout.js

@@ -235,6 +235,7 @@ export function layoutFGCAPreview(inputDoc, options = {}) {
     const coveredActivities = new Set(changes.flatMap(c => c.activity_ids.map(String)));
     // Synthesize virtual Change nodes for activities without a real Change.
     // Each virtual node is 1:1 with one activity (not shared across activities).
+    // The layout key embeds the activity id for uniqueness; it is not a display id.
     const virtualChanges = [];
     for (const a of doc.activities) {
         if (a.goal_id != null && !coveredActivities.has(String(a.id))) {

package/dist/webview/entity-text-layout.d.ts

@@ -64,7 +64,8 @@ export interface LayoutCenteredEntityOptions {
     boxHeight: number;
     name: string;
     type?: string;
-    id: string;
+    /** Canonical entity id. Empty or omitted skips the id row (placeholder nodes). */
+    id?: string;
     nameMaxLines?: number;
     idMaxLines?: number;
     marginX?: number;

package/dist/webview/entity-text-layout.js

@@ -159,7 +159,15 @@ export function truncateId(id, maxChars) {
  * to avoid overlap.
  */
 const HALF_EXTENT_PRIMARY = 6; // text-primary, 12px font
+const HALF_EXTENT_SECONDARY = 6; // text-secondary, same size as name
 const HALF_EXTENT_ID = 5; // text-id, 10px font
+function glyphHalfExtent(cls) {
+    if (cls === 'text-id')
+        return HALF_EXTENT_ID;
+    if (cls === 'text-secondary')
+        return HALF_EXTENT_SECONDARY;
+    return HALF_EXTENT_PRIMARY;
+}
 /** Place `groups`' lines starting at `startY`, advancing by each line's own height and gap. */
 function placeLines(groups, startY) {
     const out = [];
@@ -201,15 +209,18 @@ export function layoutCenteredEntityText(opts) {
     const maxCharsType = maxCharsForInnerWidth(innerW, CHAR_W_SECONDARY);
     const maxCharsId = maxCharsForInnerWidth(innerW, CHAR_W_ID);
     const typeLine = opts.type?.trim() ? truncateLine(opts.type, maxCharsType) : undefined;
+    const idText = opts.id?.trim() ?? '';
     const idMaxLines = opts.idMaxLines ?? 1;
-    const idLines = idMaxLines <= 1 ? [truncateId(opts.id, maxCharsId)] : wrapId(opts.id, maxCharsId, idMaxLines);
+    const idLines = idText
+        ? (idMaxLines <= 1 ? [truncateId(idText, maxCharsId)] : wrapId(idText, maxCharsId, idMaxLines))
+        : [];
     function buildGroups(nameLines) {
         const groups = [
             {
                 cls: 'text-primary',
                 lines: nameLines,
                 lineHeight: LINE_H_PRIMARY,
-                gapAfter: typeLine ? ROW_GROUP_GAP : NAME_ID_GAP,
+                gapAfter: typeLine ? ROW_GROUP_GAP : idLines.length > 0 ? NAME_ID_GAP : 0,
             },
         ];
         if (typeLine) {
@@ -217,28 +228,30 @@ export function layoutCenteredEntityText(opts) {
                 cls: 'text-secondary',
                 lines: [typeLine],
                 lineHeight: LINE_H_SECONDARY,
-                gapAfter: NAME_ID_GAP,
+                gapAfter: idLines.length > 0 ? NAME_ID_GAP : 0,
+            });
+        }
+        if (idLines.length > 0) {
+            groups.push({
+                cls: 'text-id',
+                lines: idLines,
+                lineHeight: LINE_H_ID,
+                gapAfter: 0,
             });
         }
-        groups.push({
-            cls: 'text-id',
-            lines: idLines,
-            lineHeight: LINE_H_ID,
-            gapAfter: 0,
-        });
         return groups;
     }
-    // groups[0] is always the name (text-primary) and the last group is always
-    // the id (text-id), so the edge-padding half-extents below are fixed.
+    // groups[0] is always the name (text-primary). The last group is the id when
+    // one is present, otherwise type or name; edge padding uses that class.
     const requestedNameMaxLines = Math.max(1, opts.nameMaxLines ?? 2);
     const availableHeight = Math.max(0, opts.boxHeight - marginY * 2);
     let nameLines = wrapWords(opts.name, maxCharsName, requestedNameMaxLines);
     let groups = buildGroups(nameLines);
-    let contentSpan = centerSpan(groups) + HALF_EXTENT_PRIMARY + HALF_EXTENT_ID;
+    let contentSpan = centerSpan(groups) + HALF_EXTENT_PRIMARY + glyphHalfExtent(groups[groups.length - 1].cls);
     for (let cap = requestedNameMaxLines - 1; cap >= 1 && contentSpan > availableHeight; cap--) {
         nameLines = wrapWords(opts.name, maxCharsName, cap);
         groups = buildGroups(nameLines);
-        contentSpan = centerSpan(groups) + HALF_EXTENT_PRIMARY + HALF_EXTENT_ID;
+        contentSpan = centerSpan(groups) + HALF_EXTENT_PRIMARY + glyphHalfExtent(groups[groups.length - 1].cls);
     }
     const margin = Math.max(0, (opts.boxHeight - contentSpan) / 2);
     const firstY = Math.round(opts.boxY + margin + HALF_EXTENT_PRIMARY);

package/dist/webview/render-fgca.js

@@ -48,7 +48,9 @@ export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature,
         .join('\n');
     const nodeSvg = nodes
         .map((n) => {
-        const entityId = n.id.slice(n.id.indexOf('_') + 1);
+        // Virtual Change nodes use a layout key such as `vchange_activity_<id>`;
+        // slicing at the first `_` would print `activity_<id>` on a Change.
+        const entityId = n.virtual ? '' : n.id.slice(n.id.indexOf('_') + 1);
         const nodeClass = n.virtual ? 'diagram-node layer-virtual' : `diagram-node layer-${n.col}`;
         const specs = layoutCenteredEntityText({
             boxX: n.x,
@@ -61,7 +63,9 @@ export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature,
             idMaxLines: 1,
         });
         const textSvg = emitCenteredTextSvg(specs, n.x + nodeWidth / 2, escXml);
-        const titleContent = `${escXml(n.label)} (${escXml(entityId)})`;
+        const titleContent = n.virtual
+            ? escXml(n.label)
+            : `${escXml(n.label)} (${escXml(entityId)})`;
         const typeBadge = n.type && n.col === 'activity'
             ? `<text class="text-id" x="${n.x + nodeWidth - 6}" y="${n.y + 10}" text-anchor="end" dominant-baseline="hanging" font-size="10">${escXml(n.type)}</text>`
             : '';

package/package.json

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

package/src/fgca/preview-layout.ts

@@ -371,6 +371,7 @@ export function layoutFGCAPreview(
 
   // Synthesize virtual Change nodes for activities without a real Change.
   // Each virtual node is 1:1 with one activity (not shared across activities).
+  // The layout key embeds the activity id for uniqueness; it is not a display id.
   const virtualChanges: Array<{ id: string; activityId: string; goalId: string }> = [];
   for (const a of doc.activities) {
     if (a.goal_id != null && !coveredActivities.has(String(a.id))) {

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

@@ -165,7 +165,8 @@ export interface LayoutCenteredEntityOptions {
   boxHeight: number;
   name: string;
   type?: string;
-  id: string;
+  /** Canonical entity id. Empty or omitted skips the id row (placeholder nodes). */
+  id?: string;
   nameMaxLines?: number;
   idMaxLines?: number;
   marginX?: number;
@@ -189,8 +190,15 @@ interface TextRowGroup {
  * to avoid overlap.
  */
 const HALF_EXTENT_PRIMARY = 6; // text-primary, 12px font
+const HALF_EXTENT_SECONDARY = 6; // text-secondary, same size as name
 const HALF_EXTENT_ID = 5; // text-id, 10px font
 
+function glyphHalfExtent(cls: string): number {
+  if (cls === 'text-id') return HALF_EXTENT_ID;
+  if (cls === 'text-secondary') return HALF_EXTENT_SECONDARY;
+  return HALF_EXTENT_PRIMARY;
+}
+
 /** Place `groups`' lines starting at `startY`, advancing by each line's own height and gap. */
 function placeLines(groups: TextRowGroup[], startY: number): TextLineSpec[] {
   const out: TextLineSpec[] = [];
@@ -234,8 +242,11 @@ export function layoutCenteredEntityText(opts: LayoutCenteredEntityOptions): Tex
   const maxCharsId = maxCharsForInnerWidth(innerW, CHAR_W_ID);
 
   const typeLine = opts.type?.trim() ? truncateLine(opts.type, maxCharsType) : undefined;
+  const idText = opts.id?.trim() ?? '';
   const idMaxLines = opts.idMaxLines ?? 1;
-  const idLines = idMaxLines <= 1 ? [truncateId(opts.id, maxCharsId)] : wrapId(opts.id, maxCharsId, idMaxLines);
+  const idLines = idText
+    ? (idMaxLines <= 1 ? [truncateId(idText, maxCharsId)] : wrapId(idText, maxCharsId, idMaxLines))
+    : [];
 
   function buildGroups(nameLines: string[]): TextRowGroup[] {
     const groups: TextRowGroup[] = [
@@ -243,7 +254,7 @@ export function layoutCenteredEntityText(opts: LayoutCenteredEntityOptions): Tex
         cls: 'text-primary',
         lines: nameLines,
         lineHeight: LINE_H_PRIMARY,
-        gapAfter: typeLine ? ROW_GROUP_GAP : NAME_ID_GAP,
+        gapAfter: typeLine ? ROW_GROUP_GAP : idLines.length > 0 ? NAME_ID_GAP : 0,
       },
     ];
     if (typeLine) {
@@ -251,26 +262,28 @@ export function layoutCenteredEntityText(opts: LayoutCenteredEntityOptions): Tex
         cls: 'text-secondary',
         lines: [typeLine],
         lineHeight: LINE_H_SECONDARY,
-        gapAfter: NAME_ID_GAP,
+        gapAfter: idLines.length > 0 ? NAME_ID_GAP : 0,
+      });
+    }
+    if (idLines.length > 0) {
+      groups.push({
+        cls: 'text-id',
+        lines: idLines,
+        lineHeight: LINE_H_ID,
+        gapAfter: 0,
       });
     }
-    groups.push({
-      cls: 'text-id',
-      lines: idLines,
-      lineHeight: LINE_H_ID,
-      gapAfter: 0,
-    });
     return groups;
   }
 
-  // groups[0] is always the name (text-primary) and the last group is always
-  // the id (text-id), so the edge-padding half-extents below are fixed.
+  // groups[0] is always the name (text-primary). The last group is the id when
+  // one is present, otherwise type or name; edge padding uses that class.
   const requestedNameMaxLines = Math.max(1, opts.nameMaxLines ?? 2);
   const availableHeight = Math.max(0, opts.boxHeight - marginY * 2);
 
   let nameLines = wrapWords(opts.name, maxCharsName, requestedNameMaxLines);
   let groups = buildGroups(nameLines);
-  let contentSpan = centerSpan(groups) + HALF_EXTENT_PRIMARY + HALF_EXTENT_ID;
+  let contentSpan = centerSpan(groups) + HALF_EXTENT_PRIMARY + glyphHalfExtent(groups[groups.length - 1].cls);
   for (
     let cap = requestedNameMaxLines - 1;
     cap >= 1 && contentSpan > availableHeight;
@@ -278,7 +291,7 @@ export function layoutCenteredEntityText(opts: LayoutCenteredEntityOptions): Tex
   ) {
     nameLines = wrapWords(opts.name, maxCharsName, cap);
     groups = buildGroups(nameLines);
-    contentSpan = centerSpan(groups) + HALF_EXTENT_PRIMARY + HALF_EXTENT_ID;
+    contentSpan = centerSpan(groups) + HALF_EXTENT_PRIMARY + glyphHalfExtent(groups[groups.length - 1].cls);
   }
 
   const margin = Math.max(0, (opts.boxHeight - contentSpan) / 2);

package/src/webview/render-fgca.ts

@@ -82,7 +82,9 @@ export function renderFgcaBody(
 
   const nodeSvg = nodes
     .map((n) => {
-      const entityId = n.id.slice(n.id.indexOf('_') + 1);
+      // Virtual Change nodes use a layout key such as `vchange_activity_<id>`;
+      // slicing at the first `_` would print `activity_<id>` on a Change.
+      const entityId = n.virtual ? '' : n.id.slice(n.id.indexOf('_') + 1);
       const nodeClass = n.virtual ? 'diagram-node layer-virtual' : `diagram-node layer-${n.col}`;
       const specs = layoutCenteredEntityText({
         boxX: n.x,
@@ -95,7 +97,9 @@ export function renderFgcaBody(
         idMaxLines: 1,
       });
       const textSvg = emitCenteredTextSvg(specs, n.x + nodeWidth / 2, escXml);
-      const titleContent = `${escXml(n.label)} (${escXml(entityId)})`;
+      const titleContent = n.virtual
+        ? escXml(n.label)
+        : `${escXml(n.label)} (${escXml(entityId)})`;
       const typeBadge = n.type && n.col === 'activity'
         ? `<text class="text-id" x="${n.x + nodeWidth - 6}" y="${n.y + 10}" text-anchor="end" dominant-baseline="hanging" font-size="10">${escXml(n.type)}</text>`
         : '';