@zseven-w/pen-renderer 0.5.2 → 0.7.0

package/src/path-utils.ts

@@ -1,4 +1,4 @@
-import type { CanvasKit, Path } from 'canvaskit-wasm'
+import type { CanvasKit, Path } from 'canvaskit-wasm';
 
 /**
  * Normalize SVG path data for CanvasKit's parser:
@@ -17,7 +17,7 @@ export function sanitizeSvgPath(d: string): string {
     .replace(/,/g, ' ')
     // Collapse multiple spaces
     .replace(/\s+/g, ' ')
-    .trim()
+    .trim();
 
   // Separate concatenated arc flags: in SVG arc commands, the large-arc and
   // sweep flags are single digits (0 or 1) that may be concatenated with each
@@ -25,20 +25,20 @@ export function sanitizeSvgPath(d: string): string {
   result = result.replace(
     /([aA])\s*([\d.e+-]+)\s+([\d.e+-]+)\s+([\d.e+-]+)\s+([01])([01])([\d.+-])/g,
     '$1 $2 $3 $4 $5 $6 $7',
-  )
+  );
   // Handle the case where all three (rotation + flags) are concatenated without spaces,
   // e.g. "a4 4 0100-8" where 0100 = rotation=0, large-arc=1, sweep=0, then 0 is start of x
   result = result.replace(
     /([aA])\s*([\d.e+-]+)\s+([\d.e+-]+)\s+(\d)([01])([01])([\d.+-])/g,
     '$1 $2 $3 $4 $5 $6 $7',
-  )
+  );
 
-  return result
+  return result;
 }
 
 /** Returns true if the path string contains NaN or Infinity values. */
 export function hasInvalidNumbers(d: string): boolean {
-  return /NaN|Infinity/i.test(d)
+  return /NaN|Infinity/i.test(d);
 }
 
 /**
@@ -47,89 +47,93 @@ export function hasInvalidNumbers(d: string): boolean {
  */
 function arcToCubics(
   path: Path,
-  x1: number, y1: number,
-  rxIn: number, ryIn: number,
-  largeArc: boolean, sweep: boolean,
-  x2: number, y2: number,
+  x1: number,
+  y1: number,
+  rxIn: number,
+  ryIn: number,
+  largeArc: boolean,
+  sweep: boolean,
+  x2: number,
+  y2: number,
 ): void {
   // Degenerate: start == end
-  if (x1 === x2 && y1 === y2) return
+  if (x1 === x2 && y1 === y2) return;
 
-  let rx = Math.abs(rxIn)
-  let ry = Math.abs(ryIn)
+  let rx = Math.abs(rxIn);
+  let ry = Math.abs(ryIn);
 
-  const dx = (x1 - x2) / 2
-  const dy = (y1 - y2) / 2
+  const dx = (x1 - x2) / 2;
+  const dy = (y1 - y2) / 2;
   // Simplified: ignore rotation (most icons use rotation=0)
-  const x1p = dx
-  const y1p = dy
+  const x1p = dx;
+  const y1p = dy;
 
   // Correct radii
-  let lambda = (x1p * x1p) / (rx * rx) + (y1p * y1p) / (ry * ry)
+  let lambda = (x1p * x1p) / (rx * rx) + (y1p * y1p) / (ry * ry);
   if (lambda > 1) {
-    const s = Math.sqrt(lambda)
-    rx *= s
-    ry *= s
+    const s = Math.sqrt(lambda);
+    rx *= s;
+    ry *= s;
   }
 
-  const rxSq = rx * rx
-  const rySq = ry * ry
-  const x1pSq = x1p * x1p
-  const y1pSq = y1p * y1p
+  const rxSq = rx * rx;
+  const rySq = ry * ry;
+  const x1pSq = x1p * x1p;
+  const y1pSq = y1p * y1p;
 
-  let sq = (rxSq * rySq - rxSq * y1pSq - rySq * x1pSq) / (rxSq * y1pSq + rySq * x1pSq)
-  if (sq < 0) sq = 0
-  let root = Math.sqrt(sq)
-  if (largeArc === sweep) root = -root
+  let sq = (rxSq * rySq - rxSq * y1pSq - rySq * x1pSq) / (rxSq * y1pSq + rySq * x1pSq);
+  if (sq < 0) sq = 0;
+  let root = Math.sqrt(sq);
+  if (largeArc === sweep) root = -root;
 
-  const cxp = root * rx * y1p / ry
-  const cyp = -root * ry * x1p / rx
+  const cxp = (root * rx * y1p) / ry;
+  const cyp = (-root * ry * x1p) / rx;
 
-  const cx = cxp + (x1 + x2) / 2
-  const cy = cyp + (y1 + y2) / 2
+  const cx = cxp + (x1 + x2) / 2;
+  const cy = cyp + (y1 + y2) / 2;
 
   const angle = (ux: number, uy: number, vx: number, vy: number) => {
-    const n = Math.sqrt(ux * ux + uy * uy)
-    const d = Math.sqrt(vx * vx + vy * vy)
-    const c = (ux * vx + uy * vy) / (n * d)
-    const clamped = Math.max(-1, Math.min(1, c))
-    let a = Math.acos(clamped)
-    if (ux * vy - uy * vx < 0) a = -a
-    return a
-  }
+    const n = Math.sqrt(ux * ux + uy * uy);
+    const d = Math.sqrt(vx * vx + vy * vy);
+    const c = (ux * vx + uy * vy) / (n * d);
+    const clamped = Math.max(-1, Math.min(1, c));
+    let a = Math.acos(clamped);
+    if (ux * vy - uy * vx < 0) a = -a;
+    return a;
+  };
 
-  const theta1 = angle(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry)
-  let dTheta = angle(
-    (x1p - cxp) / rx, (y1p - cyp) / ry,
-    (-x1p - cxp) / rx, (-y1p - cyp) / ry,
-  )
+  const theta1 = angle(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
+  let dTheta = angle((x1p - cxp) / rx, (y1p - cyp) / ry, (-x1p - cxp) / rx, (-y1p - cyp) / ry);
 
-  if (!sweep && dTheta > 0) dTheta -= 2 * Math.PI
-  if (sweep && dTheta < 0) dTheta += 2 * Math.PI
+  if (!sweep && dTheta > 0) dTheta -= 2 * Math.PI;
+  if (sweep && dTheta < 0) dTheta += 2 * Math.PI;
 
   // Split into segments of at most PI/2
-  const segments = Math.ceil(Math.abs(dTheta) / (Math.PI / 2))
-  const segAngle = dTheta / segments
+  const segments = Math.ceil(Math.abs(dTheta) / (Math.PI / 2));
+  const segAngle = dTheta / segments;
 
   for (let i = 0; i < segments; i++) {
-    const t1 = theta1 + i * segAngle
-    const t2 = t1 + segAngle
-    const alpha = Math.sin(segAngle) * (Math.sqrt(4 + 3 * Math.pow(Math.tan(segAngle / 2), 2)) - 1) / 3
+    const t1 = theta1 + i * segAngle;
+    const t2 = t1 + segAngle;
+    const alpha =
+      (Math.sin(segAngle) * (Math.sqrt(4 + 3 * Math.pow(Math.tan(segAngle / 2), 2)) - 1)) / 3;
 
-    const cos1 = Math.cos(t1), sin1 = Math.sin(t1)
-    const cos2 = Math.cos(t2), sin2 = Math.sin(t2)
+    const cos1 = Math.cos(t1),
+      sin1 = Math.sin(t1);
+    const cos2 = Math.cos(t2),
+      sin2 = Math.sin(t2);
 
-    const p1x = cx + rx * cos1
-    const p1y = cy + ry * sin1
-    const p2x = cx + rx * cos2
-    const p2y = cy + ry * sin2
+    const p1x = cx + rx * cos1;
+    const p1y = cy + ry * sin1;
+    const p2x = cx + rx * cos2;
+    const p2y = cy + ry * sin2;
 
-    const cp1x = p1x - alpha * rx * sin1
-    const cp1y = p1y + alpha * ry * cos1
-    const cp2x = p2x + alpha * rx * sin2
-    const cp2y = p2y - alpha * ry * cos2
+    const cp1x = p1x - alpha * rx * sin1;
+    const cp1y = p1y + alpha * ry * cos1;
+    const cp2x = p2x + alpha * rx * sin2;
+    const cp2y = p2y - alpha * ry * cos2;
 
-    path.cubicTo(cp1x, cp1y, cp2x, cp2y, p2x, p2y)
+    path.cubicTo(cp1x, cp1y, cp2x, cp2y, p2x, p2y);
   }
 }
 
@@ -140,86 +144,202 @@ function arcToCubics(
  */
 export function tryManualPathParse(ck: CanvasKit, d: string): Path | null {
   try {
-    const path = new ck.Path()
+    const path = new ck.Path();
     // Replace NaN/Infinity with 0 so commands keep their parameter count.
-    const cleaned = d.replace(/-?NaN/g, '0').replace(/-?Infinity/g, '0')
+    const cleaned = d.replace(/-?NaN/g, '0').replace(/-?Infinity/g, '0');
     // Tokenize: split on commands and extract numbers
-    const tokens = cleaned.match(/[MLCQZAHVSmlcqzahvs]|[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/g)
-    if (!tokens || tokens.length === 0) return null
+    const tokens = cleaned.match(/[MLCQZAHVSmlcqzahvs]|[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/g);
+    if (!tokens || tokens.length === 0) return null;
 
-    let i = 0
-    let lastCmd = ''
-    let cx = 0, cy = 0 // current point
+    let i = 0;
+    let lastCmd = '';
+    let cx = 0,
+      cy = 0; // current point
 
     while (i < tokens.length) {
-      let cmd = tokens[i]
+      let cmd = tokens[i];
       if (/^[MLCQZAHVSmlcqzahvs]$/.test(cmd)) {
-        lastCmd = cmd
-        i++
+        lastCmd = cmd;
+        i++;
       } else if (lastCmd) {
         // Implicit repeat of last command (M becomes L after first pair)
-        cmd = lastCmd === 'M' ? 'L' : lastCmd === 'm' ? 'l' : lastCmd
+        cmd = lastCmd === 'M' ? 'L' : lastCmd === 'm' ? 'l' : lastCmd;
       } else {
-        i++
-        continue
+        i++;
+        continue;
       }
 
       const nums = (count: number): number[] => {
-        const result: number[] = []
+        const result: number[] = [];
         for (let j = 0; j < count && i < tokens.length; j++) {
-          const n = parseFloat(tokens[i])
-          if (isNaN(n)) break
-          result.push(n)
-          i++
+          const n = parseFloat(tokens[i]);
+          if (isNaN(n)) break;
+          result.push(n);
+          i++;
         }
-        return result
-      }
+        return result;
+      };
 
       switch (cmd) {
-        case 'M': { const p = nums(2); if (p.length === 2) { path.moveTo(p[0], p[1]); cx = p[0]; cy = p[1]; lastCmd = 'L' } break }
-        case 'm': { const p = nums(2); if (p.length === 2) { path.moveTo(cx + p[0], cy + p[1]); cx += p[0]; cy += p[1]; lastCmd = 'l' } break }
-        case 'L': { const p = nums(2); if (p.length === 2) { path.lineTo(p[0], p[1]); cx = p[0]; cy = p[1] } break }
-        case 'l': { const p = nums(2); if (p.length === 2) { path.lineTo(cx + p[0], cy + p[1]); cx += p[0]; cy += p[1] } break }
-        case 'H': { const p = nums(1); if (p.length === 1) { path.lineTo(p[0], cy); cx = p[0] } break }
-        case 'h': { const p = nums(1); if (p.length === 1) { path.lineTo(cx + p[0], cy); cx += p[0] } break }
-        case 'V': { const p = nums(1); if (p.length === 1) { path.lineTo(cx, p[0]); cy = p[0] } break }
-        case 'v': { const p = nums(1); if (p.length === 1) { path.lineTo(cx, cy + p[0]); cy += p[0] } break }
-        case 'C': { const p = nums(6); if (p.length === 6) { path.cubicTo(p[0], p[1], p[2], p[3], p[4], p[5]); cx = p[4]; cy = p[5] } break }
-        case 'c': { const p = nums(6); if (p.length === 6) { path.cubicTo(cx+p[0], cy+p[1], cx+p[2], cy+p[3], cx+p[4], cy+p[5]); cx += p[4]; cy += p[5] } break }
-        case 'Q': { const p = nums(4); if (p.length === 4) { path.quadTo(p[0], p[1], p[2], p[3]); cx = p[2]; cy = p[3] } break }
-        case 'q': { const p = nums(4); if (p.length === 4) { path.quadTo(cx+p[0], cy+p[1], cx+p[2], cy+p[3]); cx += p[2]; cy += p[3] } break }
-        case 'S': { const p = nums(4); if (p.length === 4) { path.cubicTo(cx, cy, p[0], p[1], p[2], p[3]); cx = p[2]; cy = p[3] } break }
-        case 's': { const p = nums(4); if (p.length === 4) { path.cubicTo(cx, cy, cx+p[0], cy+p[1], cx+p[2], cy+p[3]); cx += p[2]; cy += p[3] } break }
-        case 'Z': case 'z': path.close(); break
-        case 'A': case 'a': {
+        case 'M': {
+          const p = nums(2);
+          if (p.length === 2) {
+            path.moveTo(p[0], p[1]);
+            cx = p[0];
+            cy = p[1];
+            lastCmd = 'L';
+          }
+          break;
+        }
+        case 'm': {
+          const p = nums(2);
+          if (p.length === 2) {
+            path.moveTo(cx + p[0], cy + p[1]);
+            cx += p[0];
+            cy += p[1];
+            lastCmd = 'l';
+          }
+          break;
+        }
+        case 'L': {
+          const p = nums(2);
+          if (p.length === 2) {
+            path.lineTo(p[0], p[1]);
+            cx = p[0];
+            cy = p[1];
+          }
+          break;
+        }
+        case 'l': {
+          const p = nums(2);
+          if (p.length === 2) {
+            path.lineTo(cx + p[0], cy + p[1]);
+            cx += p[0];
+            cy += p[1];
+          }
+          break;
+        }
+        case 'H': {
+          const p = nums(1);
+          if (p.length === 1) {
+            path.lineTo(p[0], cy);
+            cx = p[0];
+          }
+          break;
+        }
+        case 'h': {
+          const p = nums(1);
+          if (p.length === 1) {
+            path.lineTo(cx + p[0], cy);
+            cx += p[0];
+          }
+          break;
+        }
+        case 'V': {
+          const p = nums(1);
+          if (p.length === 1) {
+            path.lineTo(cx, p[0]);
+            cy = p[0];
+          }
+          break;
+        }
+        case 'v': {
+          const p = nums(1);
+          if (p.length === 1) {
+            path.lineTo(cx, cy + p[0]);
+            cy += p[0];
+          }
+          break;
+        }
+        case 'C': {
+          const p = nums(6);
+          if (p.length === 6) {
+            path.cubicTo(p[0], p[1], p[2], p[3], p[4], p[5]);
+            cx = p[4];
+            cy = p[5];
+          }
+          break;
+        }
+        case 'c': {
+          const p = nums(6);
+          if (p.length === 6) {
+            path.cubicTo(cx + p[0], cy + p[1], cx + p[2], cy + p[3], cx + p[4], cy + p[5]);
+            cx += p[4];
+            cy += p[5];
+          }
+          break;
+        }
+        case 'Q': {
+          const p = nums(4);
+          if (p.length === 4) {
+            path.quadTo(p[0], p[1], p[2], p[3]);
+            cx = p[2];
+            cy = p[3];
+          }
+          break;
+        }
+        case 'q': {
+          const p = nums(4);
+          if (p.length === 4) {
+            path.quadTo(cx + p[0], cy + p[1], cx + p[2], cy + p[3]);
+            cx += p[2];
+            cy += p[3];
+          }
+          break;
+        }
+        case 'S': {
+          const p = nums(4);
+          if (p.length === 4) {
+            path.cubicTo(cx, cy, p[0], p[1], p[2], p[3]);
+            cx = p[2];
+            cy = p[3];
+          }
+          break;
+        }
+        case 's': {
+          const p = nums(4);
+          if (p.length === 4) {
+            path.cubicTo(cx, cy, cx + p[0], cy + p[1], cx + p[2], cy + p[3]);
+            cx += p[2];
+            cy += p[3];
+          }
+          break;
+        }
+        case 'Z':
+        case 'z':
+          path.close();
+          break;
+        case 'A':
+        case 'a': {
           // Arc: rx, ry, rotation, largeArc, sweep, x, y
-          const p = nums(7)
+          const p = nums(7);
           if (p.length === 7) {
-            const [rx, ry, , largeArc, sweep, ex, ey] = p
-            const endX = cmd === 'a' ? cx + ex : ex
-            const endY = cmd === 'a' ? cy + ey : ey
+            const [rx, ry, , largeArc, sweep, ex, ey] = p;
+            const endX = cmd === 'a' ? cx + ex : ex;
+            const endY = cmd === 'a' ? cy + ey : ey;
             if (rx > 0 && ry > 0) {
-              arcToCubics(path, cx, cy, rx, ry, largeArc !== 0, sweep !== 0, endX, endY)
+              arcToCubics(path, cx, cy, rx, ry, largeArc !== 0, sweep !== 0, endX, endY);
             } else {
-              path.lineTo(endX, endY)
+              path.lineTo(endX, endY);
             }
-            cx = endX
-            cy = endY
+            cx = endX;
+            cy = endY;
           }
-          break
+          break;
         }
-        default: i++
+        default:
+          i++;
       }
     }
 
     // Check if path has any geometry
-    const bounds = path.getBounds()
+    const bounds = path.getBounds();
     if (bounds[2] - bounds[0] < 0.001 && bounds[3] - bounds[1] < 0.001) {
-      path.delete()
-      return null
+      path.delete();
+      return null;
     }
-    return path
+    return path;
   } catch {
-    return null
+    return null;
   }
 }

package/src/render-node-thumbnail.ts

@@ -0,0 +1,155 @@
+// packages/pen-renderer/src/render-node-thumbnail.ts
+//
+// Offscreen thumbnail helper for individual PenNodes. Used by the git conflict
+// UI to render side-by-side ours/theirs previews without mounting a full
+// PenRenderer instance.
+//
+// Design goals:
+//   - Accept full document context so ref-type nodes resolve correctly.
+//   - Return a data-URL string on success, null on any failure (graceful).
+//   - Never throw — all errors are caught and converted to null.
+//   - CanvasKit is not available in tests / SSR: detect and fall back to null.
+//   - The output shape (data URL | null) is stable for test assertions.
+
+import type { PenDocument, PenNode } from '@zseven-w/pen-types';
+import { getAllChildren, getDefaultTheme, resolveNodeForCanvas } from '@zseven-w/pen-core';
+import { flattenToRenderNodes, resolveRefs } from './document-flattener.js';
+
+export interface ThumbnailContext {
+  /** Full document used for ref node resolution. */
+  document: PenDocument;
+  /** Page id used to locate the node in a multi-page doc (unused today; reserved for future per-page context). */
+  pageId: string | null;
+  /** Output canvas size in logical pixels (square, default: 128). */
+  size?: number;
+}
+
+/**
+ * Render a single PenNode into a data URL at the requested size.
+ *
+ * Returns a data URL string when rendering succeeded, or `null` when:
+ *   - CanvasKit / OffscreenCanvas is unavailable (Node.js / test env)
+ *   - The node or document is invalid
+ *   - Any rendering step throws
+ *
+ * Callers MUST handle the `null` case and display a placeholder.
+ */
+export async function renderNodeThumbnail(
+  node: PenNode,
+  ctx: ThumbnailContext,
+): Promise<string | null> {
+  try {
+    // Guard: need a valid node object.
+    if (!node || typeof node !== 'object') return null;
+
+    const size = ctx.size ?? 128;
+    if (!Number.isFinite(size) || size <= 0) return null;
+
+    // Resolve ref nodes using the root document tree as the component registry.
+    // resolveRefs walks the node tree and substitutes `ref` nodes with their
+    // component originals. For non-ref nodes it is a shallow identity pass.
+    // getAllChildren handles both single-page (document.children) and multi-page
+    // (document.pages[i].children) layouts — refs can cross pages so we need all.
+    const rootNodes: PenNode[] = ctx.document ? getAllChildren(ctx.document) : [];
+    let resolvedNodes: PenNode[];
+    try {
+      resolvedNodes = resolveRefs([node], rootNodes);
+    } catch {
+      // If ref resolution fails (e.g. circular ref), fall back to raw node.
+      resolvedNodes = [node];
+    }
+
+    const resolvedNode = resolvedNodes[0] ?? node;
+
+    // Resolve design $variable references so fill colors, stroke widths, etc.
+    // render with their concrete values rather than the raw "$color-primary"
+    // strings.  Mirrors the same step in renderer.ts (line ~279).
+    const variables = ctx.document?.variables ?? {};
+    const themes = ctx.document?.themes;
+    const activeTheme = getDefaultTheme(themes);
+    const variableResolved = resolveNodeForCanvas(resolvedNode, variables, activeTheme);
+
+    // Flatten to RenderNode array so we have absolute coordinates, auto-layout
+    // positions, and text pre-measurements for all descendants.
+    let renderNodes;
+    try {
+      renderNodes = flattenToRenderNodes([variableResolved]);
+    } catch {
+      return null;
+    }
+
+    if (!renderNodes || renderNodes.length === 0) return null;
+
+    // Detect CanvasKit availability — not available in tests or SSR.
+    let ck: import('canvaskit-wasm').CanvasKit | null = null;
+    try {
+      const { getCanvasKit } = await import('./init.js');
+      ck = getCanvasKit();
+    } catch {
+      return null;
+    }
+
+    if (!ck) {
+      // CanvasKit not initialised yet.
+      return null;
+    }
+
+    // OffscreenCanvas guard — not available in Node.js.
+    if (typeof OffscreenCanvas === 'undefined') return null;
+
+    // Determine scaling: fit the node's bounding box into the requested size.
+    const rootRenderNode = renderNodes[0];
+    const nodeW = rootRenderNode.absW > 0 ? rootRenderNode.absW : size;
+    const nodeH = rootRenderNode.absH > 0 ? rootRenderNode.absH : size;
+    const scale = Math.min(size / nodeW, size / nodeH);
+
+    const canvasW = Math.max(1, Math.round(nodeW * scale));
+    const canvasH = Math.max(1, Math.round(nodeH * scale));
+
+    // Software SkSurface (no WebGL required — safe for offscreen use).
+    const skSurface = ck.MakeSurface(canvasW, canvasH);
+    if (!skSurface) return null;
+
+    try {
+      const skCanvas = skSurface.getCanvas();
+      skCanvas.clear(ck.TRANSPARENT);
+      skCanvas.scale(scale, scale);
+
+      const { SkiaNodeRenderer } = await import('./node-renderer.js');
+      const renderer = new SkiaNodeRenderer(ck);
+      for (const rn of renderNodes) {
+        renderer.drawNode(skCanvas, rn);
+      }
+
+      skSurface.flush();
+      const imgSnapshot = skSurface.makeImageSnapshot();
+      if (!imgSnapshot) return null;
+
+      const pngBytes = imgSnapshot.encodeToBytes();
+      if (!pngBytes) return null;
+
+      // Convert raw PNG bytes to a data URL via Blob + FileReader.
+      const blob = new Blob([pngBytes as Uint8Array<ArrayBuffer>], { type: 'image/png' });
+      const dataUrl = await blobToDataUrl(blob);
+      return dataUrl;
+    } finally {
+      skSurface.delete();
+    }
+  } catch {
+    // Any unexpected error → graceful null
+    return null;
+  }
+}
+
+/** Convert a Blob to a data URL using FileReader. */
+async function blobToDataUrl(blob: Blob): Promise<string | null> {
+  return new Promise<string | null>((resolve) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      resolve(typeof result === 'string' ? result : null);
+    };
+    reader.onerror = () => resolve(null);
+    reader.readAsDataURL(blob);
+  });
+}