@transitrix/diagrams 1.8.13 → 1.8.18

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' });
+}