@transitrix/diagrams 1.8.13 → 1.8.19

package/src/webview/render-activities.ts

@@ -23,7 +23,7 @@ import type {
   ActivitiesLayout,
   ActivitiesLayoutOptions,
 } from '../activities/types.js';
-import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { horizontalCubicEdgePath, bowedCubicEdgePath, 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';
@@ -55,6 +55,72 @@ export const ACTIVITIES_NETWORK_DEFS = `<defs>
   </marker>
 </defs>`;
 
+type ActivityLayoutNode = ActivitiesLayout['nodes'][number];
+
+/**
+ * Nodes horizontally between `source` and `target` (a "skip" edge passes over
+ * their column) whose vertical span overlaps the edge's Y band. A
+ * straight-tangent cubic (`horizontalCubicEdgePath`) stays within
+ * [min(sourceCenterY,targetCenterY), max(...)] by convex hull, so any such
+ * node sits directly on the edge's path — the "arrow goes straight through
+ * the node" bug reported against a linear PSND chain where a multi-predecessor
+ * activity's nearer predecessor shares a row with an intermediate column.
+ */
+function blockingNodes(
+  nodes: ActivityLayoutNode[],
+  source: ActivityLayoutNode,
+  target: ActivityLayoutNode,
+): ActivityLayoutNode[] {
+  const sCenterY = source.y + source.height / 2;
+  const tCenterY = target.y + target.height / 2;
+  const loY = Math.min(sCenterY, tCenterY);
+  const hiY = Math.max(sCenterY, tCenterY);
+  const sRight = source.x + source.width;
+  const tLeft = target.x;
+  return nodes.filter((n) => {
+    if (n.id === source.id || n.id === target.id) return false;
+    if (n.x + n.width <= sRight || n.x >= tLeft) return false; // not between the two columns
+    return n.y < hiY && n.y + n.height > loY; // vertical overlap with the edge's band
+  });
+}
+
+/**
+ * Pre-offset bow-control-point Y for a skip edge arcing over `blockers`: one
+ * full node-height of clearance above the topmost blocker's top edge. A
+ * cubic's apex only reaches part-way toward its control point (see
+ * `bowedCubicEdgePath` doc), so this generous margin is what actually keeps
+ * the visible curve clear of the box — verified numerically in
+ * `render-activities.test.ts`.
+ */
+function bowY(blockers: ActivityLayoutNode[]): number {
+  const topY = Math.min(...blockers.map((n) => n.y));
+  const clearance = Math.max(...blockers.map((n) => n.height));
+  return topY - clearance;
+}
+
+/**
+ * Extra top padding (px) a network-view canvas must add so skip-edge bows
+ * (see `blockingNodes`/`bowY` above) never draw above the SVG's y=0 and get
+ * clipped. `oyBase` is the canvas's Y offset *before* this padding — the
+ * historical `-bounds.y + N_PAD + titleH` both hosts compute — since a bow
+ * near the topmost row can reach above the diagram's own node bounds.
+ * Callers add the returned value to both `oyBase` and the canvas height.
+ */
+export function computeNetworkTopPad(layout: ActivitiesLayout, oyBase: number): number {
+  const nodeMap = new Map(layout.nodes.map((n) => [n.id, n]));
+  let pad = 0;
+  for (const e of layout.edges) {
+    const s = nodeMap.get(e.sourceId);
+    const t = nodeMap.get(e.targetId);
+    if (!s || !t) continue;
+    const blockers = blockingNodes(layout.nodes, s, t);
+    if (blockers.length === 0) continue;
+    const shortfall = -(oyBase + bowY(blockers));
+    if (shortfall > pad) pad = shortfall;
+  }
+  return pad;
+}
+
 function activityNodeSvg(
   n: ActivitiesLayout['nodes'][number],
   x: number,
@@ -119,7 +185,11 @@ export function renderActivitiesNetworkBody(
       const ty = t.y + oy + t.height / 2;
       const cls = e.isCritical ? 'diagram-edge critical-edge' : 'diagram-edge';
       const marker = `url(#${e.isCritical ? 'arrow-crit' : 'arrow'})`;
-      return `<path d="${horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature)}" class="${cls}" marker-end="${marker}"/>`;
+      const blockers = blockingNodes(layout.nodes, s, t);
+      const d = blockers.length > 0
+        ? bowedCubicEdgePath(sx, sy, tx, ty, bowY(blockers) + oy, curvature)
+        : horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature);
+      return `<path d="${d}" class="${cls}" marker-end="${marker}"/>`;
     })
     .join('\n');
 
@@ -207,10 +277,12 @@ export function renderActivitiesSvg(doc: ActivityDoc, options: RenderActivitiesO
 
   const cpm = computeCpm(renderDoc.activities ?? []);
   const titleH = title ? 24 : 0;
+  const oyBase = -layout.bounds.y + N_PAD + titleH;
+  const topPad = computeNetworkTopPad(layout, oyBase);
   const w = layout.bounds.width + N_PAD * 2;
-  const h = layout.bounds.height + N_PAD * 2 + titleH;
+  const h = layout.bounds.height + N_PAD * 2 + titleH + topPad;
   const ox = -layout.bounds.x + N_PAD;
-  const oy = -layout.bounds.y + N_PAD + titleH;
+  const oy = oyBase + topPad;
 
   const body = renderActivitiesNetworkBody(layout, cpm, ox, oy, curvature, entryCurvature);
 

package/src/webview/render-blocks.ts

@@ -12,14 +12,25 @@
  * the shared theme CSS embedded in a `<style>` element and a simple optional
  * title `<text>`.
  */
-import { layoutNestedBlocks } from '../blocks/layout.js';
-import type { BlocksFile, BlocksLayout, BlocksLayoutOptions, LaidOutBlock } from '../blocks/types.js';
+import { layoutNestedBlocks, layoutGrid } from '../blocks/layout.js';
+import type {
+  BlocksFile,
+  BlocksLayout,
+  BlocksLayoutOptions,
+  GridFile,
+  GridLayout,
+  GridLayoutOptions,
+  LaidOutBlock,
+} from '../blocks/types.js';
 import { parseNodeSizePreset, resolveBlocksLeafSize, type NodeSizePreset } from '../node-size-presets.js';
 import { generateSvgEmbedCss, type ThemeId } from '../theme/index.js';
 import {
+  CHAR_W_PRIMARY,
   emitCenteredTextSvg,
   layoutHeaderBlockText,
   layoutLeafBlockText,
+  maxCharsForInnerWidth,
+  wrapWords,
 } from './entity-text-layout.js';
 import { escXml } from './render-util.js';
 import { ENTITY_NODE_RX } from './notation-style.js';
@@ -141,3 +152,149 @@ export function renderBlocksSvg(doc: BlocksFile, options: RenderBlocksOptions =
 
   return renderBlocksLayoutSvg(layout, { title: titleSvg, embedCssTheme: 'transitrix' });
 }
+
+/**
+ * Matrix subset (08-blocks.md §4a) — first cut: a single-layer rectangular
+ * `grid:` document (the RACI-style matrix case) rendered as a plain
+ * HTML/CSS-table-like SVG grid. Layers, arbitrary
+ * (non-rectangular) cell sets, and nested sub-grids belong to the general
+ * layered-grid superset, which is still in design upstream (methodology) and
+ * out of scope here — see 08-blocks.md §4a / §8.
+ */
+const GRID_CELL_PAD_X = 8;
+const GRID_LINE_HEIGHT = 15;
+const GRID_EMBED_CSS = `
+.blocks-grid-border { fill: none; stroke: var(--ts-border, #cbd5e1); }`;
+
+function centeredGridCellTextSvg(
+  lines: string[],
+  cls: string,
+  cx: number,
+  cellTop: number,
+  cellHeight: number,
+): string {
+  const ls = lines.length > 0 ? lines : [''];
+  const firstY = cellTop + cellHeight / 2 - ((ls.length - 1) / 2) * GRID_LINE_HEIGHT;
+  const tspans = ls
+    .map((ln, i) => `<tspan x="${cx}" y="${firstY + i * GRID_LINE_HEIGHT}">${escXml(ln)}</tspan>`)
+    .join('');
+  return `<text class="${cls}" text-anchor="middle" dominant-baseline="central">${tspans}</text>`;
+}
+
+/**
+ * Emit the grid body (headers, cells, grid lines) at the given origin offset.
+ * Shared by the host-neutral wrapper below; VS Code's blocks preview wraps
+ * this the same way it wraps {@link renderBlocksLayoutSvg} for the tree form.
+ */
+export function renderGridBody(layout: GridLayout, ox: number, oy: number): string {
+  const tw = layout.bounds.width;
+  const th = layout.bounds.height;
+  const parts: string[] = [];
+
+  parts.push(`<rect class="diagram-node level-0" x="${ox}" y="${oy}" width="${tw}" height="${th}" stroke="none"/>`);
+
+  // Corner cell (above the row headers, left of the column headers).
+  parts.push(
+    `<rect class="diagram-node level-1" x="${ox}" y="${oy}" width="${layout.rowHeaderWidth}" height="${layout.headerHeight}" stroke="none"/>`,
+  );
+
+  for (const col of layout.columns) {
+    const x = col.x + ox;
+    parts.push(
+      `<rect class="diagram-node level-1" x="${x}" y="${oy}" width="${col.width}" height="${layout.headerHeight}" stroke="none"/>`,
+    );
+    const maxChars = maxCharsForInnerWidth(col.width - GRID_CELL_PAD_X * 2, CHAR_W_PRIMARY);
+    const lines = wrapWords(col.name, maxChars, 2);
+    parts.push(centeredGridCellTextSvg(lines, 'text-header', x + col.width / 2, oy, layout.headerHeight));
+  }
+
+  for (const row of layout.rows) {
+    const y = row.y + oy;
+    parts.push(
+      `<rect class="diagram-node level-2" x="${ox}" y="${y}" width="${layout.rowHeaderWidth}" height="${row.height}" stroke="none"/>`,
+    );
+    const maxChars = maxCharsForInnerWidth(layout.rowHeaderWidth - GRID_CELL_PAD_X * 2, CHAR_W_PRIMARY);
+    const lines = wrapWords(row.name, maxChars, 2);
+    parts.push(centeredGridCellTextSvg(lines, 'text-primary', ox + layout.rowHeaderWidth / 2, y, row.height));
+  }
+
+  for (const cell of layout.cells) {
+    if (cell.value === undefined) continue;
+    const cx = cell.x + ox + cell.width / 2;
+    const cy = cell.y + oy + cell.height / 2;
+    parts.push(
+      `<text class="text-secondary" x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central">${escXml(cell.value)}</text>`,
+    );
+  }
+
+  const gridX1 = ox;
+  const gridX2 = ox + tw;
+  const gridY1 = oy;
+  const gridY2 = oy + th;
+
+  const headerBottomY = oy + layout.headerHeight;
+  parts.push(`<line class="diagram-edge" x1="${gridX1}" y1="${headerBottomY}" x2="${gridX2}" y2="${headerBottomY}"/>`);
+  for (const row of layout.rows) {
+    const rowBottomY = oy + row.y + row.height;
+    parts.push(`<line class="diagram-edge" x1="${gridX1}" y1="${rowBottomY}" x2="${gridX2}" y2="${rowBottomY}"/>`);
+  }
+
+  const rowHeaderLineX = ox + layout.rowHeaderWidth;
+  parts.push(`<line class="diagram-edge" x1="${rowHeaderLineX}" y1="${gridY1}" x2="${rowHeaderLineX}" y2="${gridY2}"/>`);
+  for (const col of layout.columns) {
+    const colLineX = ox + col.x + col.width;
+    parts.push(`<line class="diagram-edge" x1="${colLineX}" y1="${gridY1}" x2="${colLineX}" y2="${gridY2}"/>`);
+  }
+
+  parts.push(`<rect class="blocks-grid-border" x="${ox}" y="${oy}" width="${tw}" height="${th}"/>`);
+
+  return parts.join('\n');
+}
+
+export interface RenderGridLayoutOptions {
+  /** Extra vertical space reserved at the top of the canvas (e.g. for a title block). */
+  topInset?: number;
+  /** Raw SVG injected immediately after the opening tag — a header line or a full title block. */
+  title?: string;
+  /** When set, the theme CSS is embedded as `<style>` so the SVG is self-contained. */
+  embedCssTheme?: ThemeId;
+}
+
+/** The single grid (matrix subset) SVG emitter shared by every host. */
+export function renderGridLayoutSvg(layout: GridLayout, options: RenderGridLayoutOptions = {}): string {
+  const { topInset = 0, title = '', embedCssTheme } = options;
+
+  const w = layout.bounds.width + PAD * 2;
+  const h = layout.bounds.height + PAD * 2 + topInset;
+  const ox = PAD;
+  const oy = PAD + topInset;
+
+  const body = renderGridBody(layout, ox, oy);
+  const styleLine = embedCssTheme ? `\n<style>${generateSvgEmbedCss(embedCssTheme)}${GRID_EMBED_CSS}</style>` : '';
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">${styleLine}
+${title}
+${body}
+</svg>`;
+}
+
+export interface RenderGridOptions {
+  title?: string;
+  layoutOptions?: GridLayoutOptions;
+}
+
+/** Host-neutral grid (matrix subset) renderer (IntelliJ/UI). */
+export function renderGridSvg(doc: GridFile, options: RenderGridOptions = {}): string {
+  const { title = '', layoutOptions } = options;
+  const layout = layoutGrid(doc, layoutOptions);
+
+  if (layout.columns.length === 0 || layout.rows.length === 0) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
+  }
+
+  const titleSvg = title
+    ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(`Nested Blocks — ${title}`)}</text>`
+    : '';
+
+  return renderGridLayoutSvg(layout, { title: titleSvg, embedCssTheme: 'transitrix' });
+}