@shotstack/shotstack-canvas 1.0.2 → 1.0.4

package/src/core/drawops.ts

@@ -1,206 +0,0 @@
-import { DrawOp, GradientSpec, ShapedLine } from "../types";
-import { gradientSpecFrom } from "./gradients";
-import { decorationGeometry } from "./decoration";
-
-export type PaintParams = {
-  canvas: { width: number; height: number; pixelRatio: number };
-  textRect: { x: number; y: number; width: number; height: number };
-  lines: ShapedLine[];
-  font: { family: string; size: number; weight: string | number; style: string; color: string; opacity: number };
-  style: {
-    lineHeight: number;
-    textDecoration: "none" | "underline" | "line-through";
-    gradient?: { type: "linear" | "radial"; angle: number; stops: { offset: number; color: string }[] };
-  };
-  stroke?: { width: number; color: string; opacity: number };
-  shadow?: { offsetX: number; offsetY: number; blur: number; color: string; opacity: number };
-  align: { horizontal: "left" | "center" | "right"; vertical: "top" | "middle" | "bottom" };
-  background?: { color?: string; opacity: number; borderRadius: number };
-  glyphPathProvider: (glyphId: number) => string;
-  /** UPEM for scaling glyph paths from font units → px */
-  getUnitsPerEm?: () => number;
-};
-
-export function buildDrawOps(p: PaintParams): DrawOp[] {
-  const ops: DrawOp[] = [];
-
-  // Begin frame / background
-  ops.push({
-    op: "BeginFrame",
-    width: p.canvas.width,
-    height: p.canvas.height,
-    pixelRatio: p.canvas.pixelRatio,
-    clear: true,
-    bg: p.background
-      ? { color: p.background.color, opacity: p.background.opacity, radius: p.background.borderRadius }
-      : undefined
-  });
-
-  if (p.lines.length === 0) return ops;
-
-  // Font units → px
-  const upem = Math.max(1, p.getUnitsPerEm?.() ?? 1000);
-  const scale = p.font.size / upem;
-
-  // Block metrics
-  const blockHeight = p.lines[p.lines.length - 1].y;
-
-  // Vertical anchor
-  let blockY: number;
-  switch (p.align.vertical) {
-    case "top": blockY = p.font.size; break;
-    case "bottom": blockY = p.textRect.height - blockHeight + p.font.size; break;
-    case "middle":
-    default: blockY = (p.textRect.height - blockHeight) / 2 + p.font.size; break;
-  }
-
-  // Fill style (solid or gradient)
-  const fill: GradientSpec = p.style.gradient
-    ? gradientSpecFrom(p.style.gradient, 1)
-    : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
-
-  // Decoration/cursor color should match text (for gradient, use the last stop as a representative color)
-  const decoColor = p.style.gradient
-    ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color
-    : p.font.color;
-
-  // Track global text bounds in world space so painters can build a single gradient
-  let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
-
-  for (const line of p.lines) {
-    // Horizontal anchor
-    let lineX: number;
-    switch (p.align.horizontal) {
-      case "left": lineX = 0; break;
-      case "right": lineX = p.textRect.width - line.width; break;
-      case "center":
-      default: lineX = (p.textRect.width - line.width) / 2; break;
-    }
-
-    let xCursor = lineX;
-    const baselineY = blockY + line.y - p.font.size;
-
-    for (const glyph of line.glyphs) {
-      const path = p.glyphPathProvider(glyph.id);
-      if (!path || path === "M 0 0") {
-        xCursor += glyph.xAdvance;
-        continue;
-      }
-
-      const glyphX = xCursor + glyph.xOffset;
-      const glyphY = baselineY + glyph.yOffset;
-
-      // Update global bbox using path's local bounds mapped to world (scale s, flip Y)
-      const pb = computePathBounds(path);
-      const x1 = glyphX + scale * pb.x;
-      const x2 = glyphX + scale * (pb.x + pb.w);
-      const y1 = glyphY - scale * (pb.y + pb.h);
-      const y2 = glyphY - scale * pb.y;
-      if (x1 < gMinX) gMinX = x1;
-      if (y1 < gMinY) gMinY = y1;
-      if (x2 > gMaxX) gMaxX = x2;
-      if (y2 > gMaxY) gMaxY = y2;
-
-      // 1) Shadow (under everything)
-      if (p.shadow && p.shadow.blur > 0) {
-        ops.push({
-          isShadow: true,
-          op: "FillPath",
-          path,
-          x: glyphX + p.shadow.offsetX,
-          y: glyphY + p.shadow.offsetY,
-          // @ts-ignore scale propagated to painters
-          scale,
-          fill: { kind: "solid", color: p.shadow.color, opacity: p.shadow.opacity }
-        } as any);
-      }
-
-      // 2) Stroke (under fill)
-      if (p.stroke && p.stroke.width > 0) {
-        ops.push({
-          op: "StrokePath",
-          path,
-          x: glyphX,
-          y: glyphY,
-          // @ts-ignore scale propagated to painters
-          scale,
-          width: p.stroke.width,
-          color: p.stroke.color,
-          opacity: p.stroke.opacity
-        } as any);
-      }
-
-      // 3) Fill (on top)
-      ops.push({
-        op: "FillPath",
-        path,
-        x: glyphX,
-        y: glyphY,
-        // @ts-ignore scale propagated to painters
-        scale,
-        fill
-      } as any);
-
-      xCursor += glyph.xAdvance;
-    }
-
-    // Decoration lines (use text/deco color)
-    if (p.style.textDecoration !== "none") {
-      const deco = decorationGeometry(p.style.textDecoration, {
-        baselineY,
-        fontSize: p.font.size,
-        lineWidth: line.width,
-        xStart: lineX
-      });
-
-      ops.push({
-        op: "DecorationLine",
-        from: { x: deco.x1, y: deco.y },
-        to: { x: deco.x2, y: deco.y },
-        width: deco.width,
-        color: decoColor,
-        opacity: p.font.opacity
-      });
-    }
-  }
-
-  // Attach a full-text gradient bbox to all glyph fills (stable across typewriter)
-  if (gMinX !== Infinity) {
-    const gbox = { x: gMinX, y: gMinY, w: Math.max(1, gMaxX - gMinX), h: Math.max(1, gMaxY - gMinY) };
-    for (const op of ops) {
-      if (op.op === "FillPath" && !(op as any).isShadow) {
-        (op as any).gradientBBox = gbox;
-      }
-    }
-  }
-
-  return ops;
-}
-
-/* ----------------- local helpers ----------------- */
-function tokenizePath(d: string): string[] {
-  return d.match(/[MLCQZ]|-?\d*\.?\d+(?:e[-+]?\d+)?/gi) ?? [];
-}
-function computePathBounds(d: string) {
-  const t = tokenizePath(d);
-  let i = 0;
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  const touch = (x: number, y: number) => { if (x < minX) minX = x; if (y < minY) minY = y; if (x > maxX) maxX = x; if (y > maxY) maxY = y; };
-  while (i < t.length) {
-    const cmd = t[i++];
-    switch (cmd) {
-      case "M":
-      case "L": { const x = parseFloat(t[i++]); const y = parseFloat(t[i++]); touch(x, y); break; }
-      case "C": {
-        const c1x = parseFloat(t[i++]); const c1y = parseFloat(t[i++]);
-        const c2x = parseFloat(t[i++]); const c2y = parseFloat(t[i++]);
-        const x = parseFloat(t[i++]); const y = parseFloat(t[i++]);
-        touch(c1x, c1y); touch(c2x, c2y); touch(x, y); break;
-      }
-      case "Q": { const cx = parseFloat(t[i++]); const cy = parseFloat(t[i++]); const x = parseFloat(t[i++]); const y = parseFloat(t[i++]); touch(cx, cy); touch(x, y); break; }
-      case "Z": break;
-    }
-  }
-  if (minX === Infinity) return { x: 0, y: 0, w: 0, h: 0 };
-  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
-}

package/src/core/font-registry.ts

@@ -1,77 +0,0 @@
-import { initHB, type HB } from "../wasm/hb-loader";
-
-export type FontDescriptor = { family: string; weight?: string | number; style?: string };
-
-export class FontRegistry {
-  private hb!: HB;
-  private faces = new Map<string, any>();
-  private fonts = new Map<string, any>();
-  private blobs = new Map<string, any>();
-  private wasmBaseURL?: string;
-
-  constructor(wasmBaseURL?: string) {
-    this.wasmBaseURL = wasmBaseURL;
-  }
-
-  async init() {
-    if (!this.hb) this.hb = await initHB(this.wasmBaseURL);
-  }
-
-  getHB(): HB {
-    if (!this.hb) throw new Error("FontRegistry not initialized - call init() first");
-    return this.hb;
-  }
-
-  private key(desc: FontDescriptor) {
-    return `${desc.family}__${desc.weight ?? "400"}__${desc.style ?? "normal"}`;
-  }
-
-  async registerFromBytes(bytes: ArrayBuffer, desc: FontDescriptor): Promise<void> {
-    if (!this.hb) await this.init();
-    const k = this.key(desc);
-    if (this.fonts.has(k)) return;
-
-    const blob = this.hb.createBlob(bytes);
-    const face = this.hb.createFace(blob, 0);
-    const font = this.hb.createFont(face);
-
-    // Keep HarfBuzz in font-units; we scale during painting
-    const upem = face.upem || 1000;
-    font.setScale(upem, upem);
-
-    this.blobs.set(k, blob);
-    this.faces.set(k, face);
-    this.fonts.set(k, font);
-  }
-
-  getFont(desc: FontDescriptor): any {
-    const k = this.key(desc);
-    const f = this.fonts.get(k);
-    if (!f) throw new Error(`Font not registered for ${k}`);
-    return f;
-  }
-
-  getFace(desc: FontDescriptor): any {
-    const k = this.key(desc);
-    return this.faces.get(k);
-  }
-
-  /** NEW: expose units-per-em for scaling glyph paths to px */
-  getUnitsPerEm(desc: FontDescriptor): number {
-    const face = this.getFace(desc);
-    return face?.upem || 1000;
-  }
-
-  glyphPath(desc: FontDescriptor, glyphId: number): string {
-    const font = this.getFont(desc);
-    const path = font.glyphToPath(glyphId);
-    return path && path !== "" ? path : "M 0 0";
-  }
-
-  destroy() {
-    for (const [, f] of this.fonts) f.destroy?.();
-    for (const [, f] of this.faces) f.destroy?.();
-    for (const [, b] of this.blobs) b.destroy?.();
-    this.fonts.clear(); this.faces.clear(); this.blobs.clear();
-  }
-}

package/src/core/gradients.ts

@@ -1,12 +0,0 @@
-import { GradientSpec } from "../types";
-
-export function gradientSpecFrom(
-  g: { type: "linear" | "radial"; angle: number; stops: { offset: number; color: string }[] },
-  opacity: number
-): GradientSpec {
-  if (g.type === "linear") {
-    return { kind: "linear", angle: g.angle, stops: g.stops, opacity };
-  } else {
-    return { kind: "radial", stops: g.stops, opacity };
-  }
-}

package/src/core/layout.ts

@@ -1,184 +0,0 @@
-import { FontRegistry, FontDescriptor } from "./font-registry";
-import { Glyph, ShapedLine } from "../types";
-
-export type ShapeParams = {
-  text: string;
-  width: number;
-  letterSpacing: number;
-  fontSize: number;
-  lineHeight: number;
-  desc: FontDescriptor;
-  textTransform: "none" | "uppercase" | "lowercase" | "capitalize";
-};
-
-type HBRunGlyph = { g: number; ax: number; ay: number; dx: number; dy: number; cl: number };
-
-export class LayoutEngine {
-  constructor(private fonts: FontRegistry) {}
-
-  private transformText(t: string, tr: ShapeParams["textTransform"]) {
-    switch (tr) {
-      case "uppercase":
-        return t.toUpperCase();
-      case "lowercase":
-        return t.toLowerCase();
-      case "capitalize":
-        return t.replace(/\b\w/g, (c) => c.toUpperCase());
-      default:
-        return t;
-    }
-  }
-
-  private shapeFull(text: string, desc: FontDescriptor): HBRunGlyph[] {
-    const hb = this.fonts.getHB();
-    const buffer = hb.createBuffer();
-
-    buffer.addText(text);
-    buffer.guessSegmentProperties();
-
-    const font = this.fonts.getFont(desc);
-    const face = this.fonts.getFace(desc);
-
-    // Set proper scale for shaping
-    const upem = face?.upem || 1000;
-    font.setScale(upem, upem);
-
-    hb.shape(font, buffer);
-
-    const result = buffer.json();
-    buffer.destroy();
-
-    return result;
-  }
-
-  layout(params: ShapeParams): ShapedLine[] {
-    const { textTransform, desc, fontSize, letterSpacing, width } = params;
-    const input = this.transformText(params.text, textTransform);
-
-    if (!input || input.length === 0) {
-      return [];
-    }
-
-    // Shape the text
-    const shaped = this.shapeFull(input, desc);
-
-    // Get font metrics for proper scaling
-    const face = this.fonts.getFace(desc);
-    const upem = face?.upem || 1000;
-    const scale = fontSize / upem;
-
-    // Convert shaped glyphs to our format
-    const glyphs: Glyph[] = shaped.map((g, i) => {
-      // Get the actual character from the input text using the cluster index
-      const charIndex = g.cl;
-      let char: string | undefined;
-
-      // Cluster index tells us which character in the original text this glyph represents
-      if (charIndex >= 0 && charIndex < input.length) {
-        char = input[charIndex];
-      }
-
-      return {
-        id: g.g,
-        xAdvance: g.ax * scale + letterSpacing,
-        xOffset: g.dx * scale,
-        yOffset: -g.dy * scale,
-        cluster: g.cl,
-        char: char, // This now correctly maps to the original character
-      };
-    });
-
-    // Line breaking logic
-    const lines: ShapedLine[] = [];
-    let currentLine: Glyph[] = [];
-    let currentWidth = 0;
-
-    // Identify space positions
-    const spaceIndices = new Set<number>();
-    for (let i = 0; i < input.length; i++) {
-      if (input[i] === " ") {
-        spaceIndices.add(i);
-      }
-    }
-
-    let lastBreakIndex = -1;
-
-    for (let i = 0; i < glyphs.length; i++) {
-      const glyph = glyphs[i];
-      const glyphWidth = glyph.xAdvance;
-
-      // Check for newline
-      if (glyph.char === "\n") {
-        if (currentLine.length > 0) {
-          lines.push({
-            glyphs: currentLine,
-            width: currentWidth,
-            y: 0,
-          });
-        }
-        currentLine = [];
-        currentWidth = 0;
-        lastBreakIndex = i;
-        continue;
-      }
-
-      // Check if adding this glyph would exceed width
-      if (currentWidth + glyphWidth > width && currentLine.length > 0) {
-        // Try to break at last space
-        if (lastBreakIndex > -1) {
-          // Move glyphs after last space to new line
-          const breakPoint = lastBreakIndex - (i - currentLine.length) + 1;
-          const nextLine = currentLine.splice(breakPoint);
-
-          // Recalculate current line width
-          const lineWidth = currentLine.reduce((sum, g) => sum + g.xAdvance, 0);
-
-          lines.push({
-            glyphs: currentLine,
-            width: lineWidth,
-            y: 0,
-          });
-
-          currentLine = nextLine;
-          currentWidth = nextLine.reduce((sum, g) => sum + g.xAdvance, 0);
-        } else {
-          // No space found, break at current position
-          lines.push({
-            glyphs: currentLine,
-            width: currentWidth,
-            y: 0,
-          });
-          currentLine = [];
-          currentWidth = 0;
-        }
-        lastBreakIndex = -1;
-      }
-
-      // Add glyph to current line
-      currentLine.push(glyph);
-      currentWidth += glyphWidth;
-
-      // Track spaces for line breaking
-      if (spaceIndices.has(glyph.cluster)) {
-        lastBreakIndex = i;
-      }
-    }
-
-    // Add remaining glyphs
-    if (currentLine.length > 0) {
-      lines.push({
-        glyphs: currentLine,
-        width: currentWidth,
-        y: 0,
-      });
-    }
-
-    // Set line Y positions
-    const lineHeight = params.lineHeight * fontSize;
-    for (let i = 0; i < lines.length; i++) {
-      lines[i].y = (i + 1) * lineHeight;
-    }
-
-    return lines;
-  }
-}

package/src/core/utils.ts

@@ -1,3 +0,0 @@
-export function clamp(n: number, a: number, b: number) {
-  return Math.max(a, Math.min(b, n));
-}

package/src/core/video-generator.ts

@@ -1,157 +0,0 @@
-// src/core/video-generator.ts
-import type { DrawOp } from "../types";
-import { createNodePainter } from "../painters/node";
-import { spawn } from "child_process";
-
-export interface VideoGenerationOptions {
-  width: number;
-  height: number;
-  fps: number;
-  duration: number;
-  outputPath: string;
-  pixelRatio?: number;
-
-  /** Optional quality controls (sane defaults provided) */
-  crf?: number;                 // lower = better quality (and larger file). default 17
-  preset?: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow";
-  tune?: "film" | "animation" | "grain" | "stillimage" | "psnr" | "ssim" | "fastdecode" | "zerolatency";
-  profile?: "baseline" | "main" | "high";
-  level?: string;               // e.g. "4.2"
-  pixFmt?: string;              // e.g. "yuv420p", "yuv444p" (note: yuv444p less compatible)
-}
-
-export class VideoGenerator {
-  private ffmpegPath: string | null = null;
-
-  async init() {
-    if (typeof window !== "undefined") {
-      throw new Error("VideoGenerator is only available in Node.js environment");
-    }
-    try {
-      const ffmpegStatic = await import("ffmpeg-static");
-      this.ffmpegPath = ffmpegStatic.default as unknown as string;
-    } catch (error) {
-      console.error("Failed to load ffmpeg-static:", error);
-      throw new Error("FFmpeg not available. Please install ffmpeg-static");
-    }
-  }
-
-  async generateVideo(
-    frameGenerator: (time: number) => Promise<DrawOp[]>,
-    options: VideoGenerationOptions
-  ): Promise<void> {
-    if (!this.ffmpegPath) await this.init();
-
-    const {
-      width,
-      height,
-      fps,
-      duration,
-      outputPath,
-      pixelRatio = 1,
-      crf = 17,
-      preset = "slow",
-      tune = "animation",
-      profile = "high",
-      level = "4.2",
-      pixFmt = "yuv420p",
-    } = options;
-
-    // Inclusive last frame so t hits duration exactly
-    const totalFrames = Math.max(2, Math.round(duration * fps) + 1);
-
-    console.log(
-      `🎬 Generating video: ${width}x${height} @ ${fps}fps, ${duration}s (${totalFrames} frames)\n` +
-      `    CRF=${crf}, preset=${preset}, tune=${tune}, profile=${profile}, level=${level}, pix_fmt=${pixFmt}`
-    );
-
-    return new Promise(async (resolve, reject) => {
-      const args = [
-        "-y",
-        // Input as image pipe
-        "-f", "image2pipe",
-        "-vcodec", "png",
-        "-framerate", String(fps), // input frame rate
-        "-i", "-",
-        // Encoding params
-        "-c:v", "libx264",
-        "-preset", preset,
-        "-crf", String(crf),
-        "-tune", tune,
-        "-profile:v", profile,
-        "-level", level,
-        "-pix_fmt", pixFmt,
-        // Set output framerate explicitly
-        "-r", String(fps),
-        "-movflags", "+faststart",
-        outputPath,
-      ];
-
-      const ffmpeg = spawn(this.ffmpegPath!, args, { stdio: ["pipe", "inherit", "pipe"] });
-
-      let ffmpegError = "";
-
-      ffmpeg.stderr.on("data", (data) => {
-        const message = data.toString();
-        // Parse progress such as: time=00:00:01.50
-        const m = message.match(/time=(\d{2}):(\d{2}):(\d{2})(?:\.(\d+))?/);
-        if (m) {
-          const hh = parseInt(m[1], 10);
-          const mm = parseInt(m[2], 10);
-          const ss = parseInt(m[3], 10);
-          const ff = m[4] ? parseFloat(`0.${m[4]}`) : 0;
-          const currentTime = hh * 3600 + mm * 60 + ss + ff;
-          const pct = Math.min(100, Math.round((currentTime / duration) * 100));
-          if (pct % 10 === 0) console.log(`📹 Encoding: ${pct}%`);
-        }
-        ffmpegError += message;
-      });
-
-      ffmpeg.on("close", (code) => {
-        if (code === 0) {
-          console.log("✅ Video generation complete!");
-          resolve();
-        } else {
-          console.error("FFmpeg stderr:", ffmpegError);
-          reject(new Error(`FFmpeg exited with code ${code}`));
-        }
-      });
-
-      ffmpeg.on("error", (err) => {
-        console.error("❌ FFmpeg spawn error:", err);
-        reject(err);
-      });
-
-      // Generate frames and pipe to ffmpeg
-      try {
-        // Reuse one canvas/painter for all frames (faster & consistent)
-        const painter = await createNodePainter({ width, height, pixelRatio });
-
-        for (let frame = 0; frame < totalFrames; frame++) {
-          // Normalized sampling so last frame hits t=duration exactly
-          const t = (frame / (totalFrames - 1)) * duration;
-
-          const ops = await frameGenerator(t);
-          await painter.render(ops);
-          const png = await painter.toPNG();
-
-          const ok = ffmpeg.stdin.write(png);
-          if (!ok) {
-            await new Promise((r) => ffmpeg.stdin.once("drain", r));
-          }
-
-          if (frame % Math.max(1, Math.floor(fps / 2)) === 0) {
-            const pct = Math.round(((frame + 1) / totalFrames) * 100);
-            console.log(`🎞️ Rendering frames: ${pct}%`);
-          }
-        }
-
-        ffmpeg.stdin.end();
-      } catch (err) {
-        console.error("Frame generation error:", err);
-        ffmpeg.kill("SIGKILL");
-        reject(err);
-      }
-    });
-  }
-}