@vyaz/renderer 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vyaz/renderer",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -15,6 +15,9 @@
     "@vyaz/core": "*"
   },
   "devDependencies": {
+    "@types/node": "^26.1.1",
+    "is-svg": "^6.1.0",
+    "svg-parser": "^2.0.4",
     "typescript": "^5.4.0"
   }
 }

package/src/CanvasRenderer.ts

@@ -1,18 +1,26 @@
 /**
- * CanvasRenderer.ts — render LineBox[] → Canvas.
+ * CanvasRenderer.ts — Layered Canvas rendering for Line[].
  *
- * Takes ready LineBox[] with absolute coordinates.
- * Does not compute anything — only draws (dumb drawer principle).
+ * Takes ready Line[] with absolute coordinates and provides
+ * rendering functions for each visual layer:
  *
- * Options:
- *   - sizing: 'frame' | 'content' — auto canvas size
- *   - preserveSpaces: boolean — draw spaces (instead of skip)
- *   - backgroundColor: string — background color
- *   - debug: DebugFlags — debug overlays
+ *   1. Background layer     — clearRect / fillRect
+ *   2. Text layer           — text spans (dumb drawer)
+ *   3. Selection layer      — highlighted selection range
+ *   4. Cursor layer         — blinking caret
+ *   5. Debug overlay layer  — bounding boxes, baselines, labels
+ *
+ * Each function is standalone so consumers (e.g. fabric.js adapter)
+ * can compose layers in any order or skip layers as needed.
+ *
+ * Does NOT compute anything — only draws (dumb drawer principle).
+ *
+ * @see SVGRenderer for reference SVG implementation.
  */
 
-import type { LineBox, FragmentBox } from '@vyaz/core';
+import type { Line, Span } from '@vyaz/core';
 import type { DebugFlags } from './types.js';
+import type { CharPos } from './interactive.js';
 import { computeBBox } from './utils.js';
 
 export interface CanvasRenderOptions {
@@ -23,8 +31,8 @@ export interface CanvasRenderOptions {
    */
   sizing?: 'frame' | 'content';
   /**
-   * When true: render space fragments with a space character.
-   * When false (default): skip space fragments (position is already accounted for in x).
+   * When true: render space spans with a space character.
+   * When false (default): skip space spans (position is already accounted for in x).
    */
   preserveSpaces?: boolean;
   /** Background color for clearing. If omitted, canvas is cleared transparent. */
@@ -33,29 +41,177 @@ export interface CanvasRenderOptions {
   debug?: DebugFlags;
 }
 
-/** Font weight to CSS value */
-function fontWeightCSS(weight: string | number): string {
-  if (weight === 'bold') return 'bold';
-  if (weight === 'normal') return 'normal';
-  if (typeof weight === 'number') return String(weight);
-  return 'normal';
+/**
+ * Options for cursor rendering.
+ */
+export interface CursorOptions {
+  /** Cursor color. Default: '#000'. */
+  color?: string;
+  /** Cursor width in px. Default: 1. */
+  width?: number;
+  /** Cursor height relative to baseline. If undefined, uses the line's ascent + descent. */
+  height?: number;
+}
+
+// ── Style helpers ────────────────────────────────────────────────────────
+
+/**
+ * Resolve font weight to a numeric CSS value.
+ * Mirrors SVGRenderer's fontWeightNumeric for consistency.
+ */
+function fontWeightNumeric(weight: string | number): number {
+  if (weight === 'bold') return 700;
+  if (weight === 'normal') return 400;
+  if (typeof weight === 'number') return weight;
+  return 400;
 }
 
-/** Font style to CSS value */
+/**
+ * Resolve font style to CSS value.
+ */
 function fontStyleCSS(style: string): string {
   return style === 'italic' ? 'italic' : 'normal';
 }
 
 /**
- * Render LineBox[] array to Canvas.
+ * Build the CSS font string for Canvas 2D context.
+ * Matches format: `[font-style] [font-weight] [font-size]px [font-family]`
+ */
+function buildFontString(span: Span): string {
+  const style = fontStyleCSS(span.style.fontStyle);
+  const weight = fontWeightNumeric(span.style.fontWeight);
+  const size = span.fontMetrics.fontSize;
+  const family = span.style.fontFamily;
+  return `${style} ${weight} ${size}px ${family}`;
+}
+
+// ── Text rendering ──────────────────────────────────────────────────────
+
+/**
+ * Group spans within a line by their baseline offset (for sub/superscript).
+ *
+ * SVG expanded mode (SVGRenderer.ts lines 896-960) groups spans by targetY
+ * so sub/superscript gets a separate <text> element at the correct y.
+ * We mirror that here: each group gets drawn with its own ctx.save/restore.
+ */
+interface SpanRenderGroup {
+  targetY: number;
+  spans: Span[];
+}
+
+function groupSpansByBaseline(line: Line, spans: Span[]): SpanRenderGroup[] {
+  const groups: SpanRenderGroup[] = [];
+  for (const span of spans) {
+    if (!span.text) continue;
+    const offset = span.fontMetrics.baselineOffset || 0;
+    const targetY = Math.round((line.y + line.baseline + offset) * 100) / 100;
+    const last = groups[groups.length - 1];
+    if (last && last.targetY === targetY) {
+      last.spans.push(span);
+    } else {
+      groups.push({ targetY, spans: [span] });
+    }
+  }
+  return groups;
+}
+
+/**
+ * Draw background rect for a span (used for code blocks, highlights).
+ */
+function drawSpanBackground(
+  ctx: CanvasRenderingContext2D,
+  line: Line,
+  span: Span,
+): void {
+  const baselineY = line.y + line.baseline;
+  const x = line.x + span.x;
+  const y = baselineY - span.fontMetrics.ascent;
+  const w = span.width;
+  const h = span.fontMetrics.ascent + span.fontMetrics.descent;
+
+  ctx.fillStyle = span.style.backgroundColor || 'transparent';
+  if (span.style.backgroundColor) {
+    ctx.fillRect(x, y, w, h);
+  }
+}
+
+/**
+ * Render a single span at the given baseline Y.
+ */
+function renderSpan(
+  ctx: CanvasRenderingContext2D,
+  line: Line,
+  span: Span,
+  baselineY: number,
+  preserveSpaces: boolean,
+): void {
+  const x = line.x + span.x;
+
+  // ── Background ────────────────────────────────────────────────────
+  drawSpanBackground(ctx, line, span);
+
+  // ── Font setting ──────────────────────────────────────────────────
+  ctx.font = buildFontString(span);
+  ctx.fillStyle = span.style.color || '#000000';
+  ctx.textBaseline = 'alphabetic';
+
+  // ── Letter spacing ────────────────────────────────────────────────
+  const ls = span.style.letterSpacing;
+  if (ls !== undefined && ls !== 0) {
+    ctx.letterSpacing = `${ls}px`;
+  } else {
+    ctx.letterSpacing = 'normal';
+  }
+
+  // ── Draw text ────────────────────────────────────────────────────
+  if (preserveSpaces || span.type !== 'space') {
+    ctx.fillText(span.text, x, baselineY);
+  }
+
+  // ── Reset letter spacing ──────────────────────────────────────────
+  ctx.letterSpacing = 'normal';
+
+  // ── Underline ────────────────────────────────────────────────────
+  if (span.style.underline) {
+    const ulY = baselineY + 2;
+    ctx.strokeStyle = span.style.color || '#000000';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(x, ulY);
+    ctx.lineTo(x + span.width, ulY);
+    ctx.stroke();
+  }
+
+  // ── Strikethrough ────────────────────────────────────────────────
+  if (span.style.strikethrough) {
+    const stY = baselineY - span.fontMetrics.ascent * 0.4;
+    ctx.strokeStyle = span.style.color || '#000000';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(x, stY);
+    ctx.lineTo(x + span.width, stY);
+    ctx.stroke();
+  }
+
+  // ── InlineWidget (simple rectangle) ──────────────────────────────
+  if (span.inlineWidget) {
+    const iw = span.inlineWidget;
+    const iwY = baselineY - (iw.height || span.fontMetrics.ascent) + (iw.baselineOffset || 0);
+    ctx.fillStyle = '#cccccc';
+    ctx.fillRect(x, iwY, iw.width, iw.height);
+  }
+}
+
+/**
+ * Render Line[] array to Canvas.
  *
  * @param ctx — Canvas 2D rendering context
- * @param lines — ready LineBox[] with absolute coordinates
+ * @param lines — ready Line[] with absolute coordinates
  * @param options — rendering options
  */
 export function renderToCanvas(
   ctx: CanvasRenderingContext2D | any,
-  lines: LineBox[],
+  lines: Line[],
   options: CanvasRenderOptions = {},
 ): void {
   const sizing = options.sizing ?? 'frame';
@@ -84,55 +240,22 @@ export function renderToCanvas(
     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
   }
 
-  // ── Render lines ─────────────────────────────────────────────────
+  // ── Render lines with baselineOffset support ──────────────────────
+  // SVG expanded mode groups spans by targetY (accounts for sub/superscript
+  // baselineOffset). We do the same here: each group gets its own y coordinate.
   for (const line of lines) {
-    const baselineY = line.y + line.baseline;
-
-    for (const frag of line.fragments) {
-      const x = line.x + frag.x;
-
-      // Font setting
-      const style = fontStyleCSS(frag.style.fontStyle);
-      const weight = fontWeightCSS(frag.style.fontWeight);
-      const size = frag.fontMetrics.fontSize;
-      const family = frag.style.fontFamily;
-      ctx.font = `${style} ${weight} ${size}px ${family}`;
-      ctx.fillStyle = frag.style.color || '#000000';
-      ctx.textBaseline = 'alphabetic';
-
-      // Draw text
-      if (preserveSpaces || frag.type !== 'space') {
-        ctx.fillText(frag.text, x, baselineY);
-      }
+    // Collect all non-space spans that should be drawn
+    const drawableSpans = line.spans.filter(
+      s => preserveSpaces || s.type !== 'space',
+    );
+    if (drawableSpans.length === 0) continue;
 
-      // Underline
-      if (frag.style.underline) {
-        const ulY = baselineY + 2;
-        ctx.strokeStyle = frag.style.color || '#000000';
-        ctx.lineWidth = 1;
-        ctx.beginPath();
-        ctx.moveTo(x, ulY);
-        ctx.lineTo(x + frag.width, ulY);
-        ctx.stroke();
-      }
-
-      // Strikethrough
-      if (frag.style.strikethrough) {
-        const stY = baselineY - frag.fontMetrics.ascent * 0.4;
-        ctx.strokeStyle = frag.style.color || '#000000';
-        ctx.lineWidth = 1;
-        ctx.beginPath();
-        ctx.moveTo(x, stY);
-        ctx.lineTo(x + frag.width, stY);
-        ctx.stroke();
-      }
+    // Group by baseline offset (same logic as SVGRenderer expanded mode)
+    const groups = groupSpansByBaseline(line, drawableSpans);
 
-      // InlineWidget (simple rectangle)
-      if (frag.inlineWidget) {
-        const iw = frag.inlineWidget;
-        const iwY = baselineY - (iw.height || frag.fontMetrics.ascent) + (iw.baselineOffset || 0);
-        ctx.fillStyle = '#cccccc';
-        ctx.fillRect(x, iwY, iw.width, iw.height);
+    for (const group of groups) {
+      for (const span of group.spans) {
+        renderSpan(ctx, line, span, group.targetY, preserveSpaces);
       }
     }
   }
@@ -145,18 +268,39 @@ export function renderToCanvas(
 
 // ── Debug overlay ────────────────────────────────────────────────────
 
-/** Draw debug overlays on canvas */
+/**
+ * Draw debug overlays on Canvas.
+ *
+ * Mirrors SVGRenderer's renderDebugToSVG (lines 658-814) but draws
+ * directly on Canvas 2D instead of generating SVG markup.
+ *
+ * Supported flags:
+ *   frameBox / frame   — frame container bounding box (blue dashed)
+ *   contentBox         — content bounding box (pink dotted)
+ *   paragraphBox       — per-paragraph colored boxes (requires groupLinesByParagraph)
+ *   columnBox          — column separators for multi-column layout
+ *   box                — line box outlines (red)
+ *   baseline           — baseline line (blue)
+ *   ascentDescent      — ascent/descent lines (green dashed)
+ *   lineGap            — line height fill (blue transparent)
+ *   labels             — coordinate labels
+ *   runs               — span bounding boxes (purple)
+ */
 export function renderDebugToCanvas(
   ctx: CanvasRenderingContext2D,
-  lines: LineBox[],
+  lines: Line[],
   _width: number,
   _height: number,
   flags: DebugFlags,
 ): void {
   ctx.save();
 
-  // Text frame — outer bounding box of all lines
-  if (flags.frame && lines.length > 0) {
+  const sw = flags.widthBorder ?? 1;
+  const hasBBox = lines.length > 0;
+  const bbox = hasBBox ? computeBBox(lines) : null;
+
+  // ── Frame container bounding box (SVG: line 671) ────────────────
+  if ((flags.frameBox || flags.frame) && hasBBox) {
     const first = lines[0];
     const last = lines[lines.length - 1];
     const maxW = Math.max(...lines.map(l => l.x + l.width));
@@ -164,14 +308,54 @@ export function renderDebugToCanvas(
     const frameY = first.y;
     const frameW = maxW - frameX;
     const frameH = last.y + last.height - first.y;
-    ctx.strokeStyle = 'rgba(255,200,0,0.6)';
-    ctx.lineWidth = 1;
-    ctx.setLineDash([6, 2]);
+
+    ctx.strokeStyle = 'rgba(0,140,255,0.8)';
+    ctx.lineWidth = sw;
+    ctx.setLineDash([4, 3]);
     ctx.strokeRect(frameX, frameY, frameW, frameH);
+    ctx.setLineDash([]);
+
+    if (flags.labels && bbox) {
+      ctx.font = '10px monospace';
+      ctx.fillStyle = 'rgba(0,140,255,0.9)';
+      ctx.textBaseline = 'top';
+      ctx.fillText(`frame ${frameW.toFixed(0)}×${frameH.toFixed(0)}`, 4, 4);
+    }
+  }
+
+  // ── Content bounding box (SVG: line 684) ────────────────────────
+  if (flags.contentBox && bbox) {
+    ctx.strokeStyle = 'rgba(255,60,140,0.8)';
+    ctx.lineWidth = sw;
+    ctx.setLineDash([1, 2]);
+    ctx.strokeRect(bbox.x, bbox.y, bbox.width, bbox.height);
+    ctx.setLineDash([]);
+
+    if (flags.labels) {
+      const labelY = bbox.y + bbox.height + 4;
+      ctx.font = '10px monospace';
+      ctx.fillStyle = 'rgba(255,60,140,0.9)';
+      ctx.textBaseline = 'top';
+      ctx.fillText(`content ${bbox.width.toFixed(0)}×${bbox.height.toFixed(0)}`, bbox.x, labelY);
+    }
   }
 
-  ctx.setLineDash([]);
+  // ── Overflow warning (SVG: line 699) ────────────────────────────
+  if (flags.contentBox && bbox && _width > 0 && _height > 0) {
+    const overflowX = bbox.width > _width;
+    const overflowY = bbox.height > _height;
+    if (overflowX || overflowY) {
+      ctx.font = '10px monospace';
+      ctx.fillStyle = 'rgba(220,0,0,0.9)';
+      ctx.textBaseline = 'top';
+      const warnParts: string[] = [];
+      if (overflowX) warnParts.push(`Δx=${(bbox.width - _width).toFixed(0)}`);
+      if (overflowY) warnParts.push(`Δy=${(bbox.height - _height).toFixed(0)}`);
+      ctx.fillText(`⚠ content overflow: ${warnParts.join(' ')}`, 4, _height + 4);
+    }
+  }
 
+  // ── Per-line debug overlays (SVG: line 783) ─────────────────────
   for (const line of lines) {
     const bx = line.x;
     const by = line.y;
@@ -179,35 +363,35 @@ export function renderDebugToCanvas(
     const bh = line.height;
     const baselineY = line.y + line.baseline;
 
-    // Line gap — blue filled rect for lineHeight visualization
+    // Line gap — blue filled rect for lineHeight visualization (SVG: line 787)
     if (flags.lineGap) {
       ctx.fillStyle = 'rgba(0,150,255,0.10)';
       ctx.fillRect(bx, by, bw, bh);
     }
 
-    // Bounding box — red rect
+    // Bounding box — red rect (SVG: line 790)
     if (flags.box) {
       ctx.strokeStyle = 'rgba(255,100,100,0.5)';
-      ctx.lineWidth = 1;
+      ctx.lineWidth = sw;
       ctx.strokeRect(bx, by, bw, bh);
     }
 
-    // Baseline — blue line
+    // Baseline — blue line (SVG: line 793)
     if (flags.baseline) {
       ctx.strokeStyle = 'rgba(100,100,255,0.5)';
-      ctx.lineWidth = 1;
+      ctx.lineWidth = sw;
       ctx.beginPath();
       ctx.moveTo(bx, baselineY);
       ctx.lineTo(bx + bw, baselineY);
       ctx.stroke();
     }
 
-    // Ascent / Descent — green dashed lines
+    // Ascent / Descent — green dashed lines (SVG: line 796)
     if (flags.ascentDescent) {
       const ascentY = baselineY - line.ascent;
       const descentY = baselineY + line.descent;
       ctx.strokeStyle = 'rgba(100,255,100,0.4)';
-      ctx.lineWidth = 0.5;
+      ctx.lineWidth = sw;
       ctx.setLineDash([3, 2]);
       ctx.beginPath();
       ctx.moveTo(bx, ascentY);
@@ -220,7 +404,7 @@ export function renderDebugToCanvas(
       ctx.setLineDash([]);
     }
 
-    // Labels — small monospace text
+    // Labels — small monospace text (SVG: line 800)
     if (flags.labels) {
       const labelY = by - 2;
       const label = `y=${by.toFixed(1)} x=${bx.toFixed(1)} w=${bw.toFixed(1)} h=${bh.toFixed(1)} bl=${baselineY.toFixed(1)}`;
@@ -230,20 +414,146 @@ export function renderDebugToCanvas(
       ctx.fillText(label, bx, labelY);
     }
 
-    // Run boxes — purple rects around FragmentBox
+    // Run boxes — purple rects around Spans (SVG: line 803)
     if (flags.runs) {
-      for (const frag of line.fragments) {
-        if (frag.width <= 0) continue;
-        const rx = line.x + frag.x;
-        const ry = baselineY - frag.fontMetrics.ascent;
-        const rw = frag.width;
-        const rh = frag.fontMetrics.ascent + frag.fontMetrics.descent;
+      for (const span of line.spans) {
+        if (span.width <= 0) continue;
+        const rx = line.x + span.x;
+        const ry = baselineY - span.fontMetrics.ascent;
+        const rw = span.width;
+        const rh = span.fontMetrics.ascent + span.fontMetrics.descent;
         ctx.strokeStyle = 'rgba(200,100,255,0.4)';
-        ctx.lineWidth = 0.5;
+        ctx.lineWidth = sw;
         ctx.strokeRect(rx, ry, rw, rh);
       }
     }
   }
 
+  ctx.restore();
+}
+
+// ── Selection layer ──────────────────────────────────────────────────
+
+/**
+ * Render a text selection highlight overlay.
+ *
+ * Draws a semi-transparent blue rectangle for each character
+ * in the range [start, end). Supports cross-line selections.
+ *
+ * If `start` and `end` are in different lines, the full width
+ * of intermediate lines is highlighted.
+ *
+ * @param ctx — Canvas 2D rendering context
+ * @param lines — layout lines
+ * @param start — selection start position (inclusive)
+ * @param end — selection end position (exclusive)
+ * @param color — highlight color. Default: 'rgba(100, 150, 255, 0.3)'
+ */
+export function renderSelection(
+  ctx: CanvasRenderingContext2D,
+  lines: Line[],
+  start: CharPos,
+  end: CharPos,
+  color: string = 'rgba(100, 150, 255, 0.3)',
+): void {
+  ctx.save();
+  ctx.fillStyle = color;
+
+  const liMin = Math.min(start.lineIndex, end.lineIndex);
+  const liMax = Math.max(start.lineIndex, end.lineIndex);
+
+  for (let li = liMin; li <= liMax; li++) {
+    const line = lines[li];
+    if (!line) continue;
+
+    const baselineY = line.y + line.baseline;
+
+    // Determine X range for this line
+    let xStart: number;
+    let xEnd: number;
+
+    if (li === liMin && li === liMax) {
+      // Selection within single line
+      xStart = Math.min(start.x, end.x);
+      xEnd = Math.max(start.x, end.x);
+      // If end has zero width (end-of-line), use the last span's right edge
+      if (xEnd === xStart) {
+        // Extend to the full line width if cursor is at the very end
+        const spansEnd = line.x + line.spans[line.spans.length - 1].x +
+          line.spans[line.spans.length - 1].width;
+        xEnd = spansEnd;
+      }
+    } else if (li === liMin) {
+      // Start line: from start.x to end of line
+      xStart = start.x;
+      // Compute the end of this line (right edge of last span)
+      const lastSpan = line.spans[line.spans.length - 1];
+      xEnd = line.x + lastSpan.x + lastSpan.width;
+    } else if (li === liMax) {
+      // End line: from start of line to end.x
+      xStart = line.x;
+      xEnd = end.x;
+    } else {
+      // Full line highlight
+      xStart = line.x;
+      const lastSpan = line.spans[line.spans.length - 1];
+      xEnd = line.x + lastSpan.x + lastSpan.width;
+    }
+
+    const y = baselineY - line.ascent;
+    const h = line.ascent + line.descent;
+    const w = xEnd - xStart;
+
+    if (w > 0) {
+      ctx.fillRect(xStart, y, w, h);
+    }
+  }
+
+  ctx.restore();
+}
+
+// ── Cursor layer ─────────────────────────────────────────────────────
+
+/**
+ * Render a text cursor (caret) at the given character position.
+ *
+ * Draws a vertical line at the character's left edge.
+ * The caller is responsible for cursor blink timing.
+ *
+ * @param ctx — Canvas 2D rendering context
+ * @param lines — layout lines
+ * @param pos — cursor position (character left edge)
+ * @param options — cursor visual options
+ */
+export function renderCursor(
+  ctx: CanvasRenderingContext2D,
+  lines: Line[],
+  pos: CharPos,
+  options: CursorOptions = {},
+): void {
+  const color = options.color ?? '#000';
+  const width = options.width ?? 1;
+
+  ctx.save();
+
+  // Determine cursor height
+  let cursorHeight: number;
+  if (options.height !== undefined) {
+    cursorHeight = options.height;
+  } else {
+    // Use the line's ascent + descent for the cursor height
+    const line = lines[pos.lineIndex];
+    cursorHeight = line.ascent + line.descent;
+  }
+
+  const topY = pos.y - (options.height !== undefined ? options.height : lines[pos.lineIndex].ascent);
+
+  ctx.strokeStyle = color;
+  ctx.lineWidth = width;
+  ctx.beginPath();
+  ctx.moveTo(pos.x, topY);
+  ctx.lineTo(pos.x, topY + cursorHeight);
+  ctx.stroke();
+
   ctx.restore();
 }