@shotstack/shotstack-canvas 1.0.2 → 1.0.3

package/src/env/entry.node.ts

@@ -1,167 +0,0 @@
-import { RichTextAssetSchema, type RichTextValidated } from "../schema/asset-schema";
-import { CANVAS_CONFIG } from "../config/canvas-constants";
-import { FontRegistry } from "../core/font-registry";
-import { LayoutEngine } from "../core/layout";
-import { buildDrawOps } from "../core/drawops";
-import { applyAnimation } from "../core/animations";
-import { createNodePainter } from "../painters/node";
-import { loadFileOrHttpToArrayBuffer } from "../io/node";
-import { VideoGenerator, VideoGenerationOptions } from "../core/video-generator";
-
-export async function createTextEngine(
-  opts: {
-    width?: number;
-    height?: number;
-    pixelRatio?: number;
-    fps?: number;
-    wasmBaseURL?: string;
-  } = {}
-) {
-  const width = opts.width ?? CANVAS_CONFIG.DEFAULTS.width;
-  const height = opts.height ?? CANVAS_CONFIG.DEFAULTS.height;
-  const pixelRatio = opts.pixelRatio ?? CANVAS_CONFIG.DEFAULTS.pixelRatio;
-  const fps = opts.fps ?? 30;
-  const wasmBaseURL = opts.wasmBaseURL;
-
-  const fonts = new FontRegistry(wasmBaseURL);
-  const layout = new LayoutEngine(fonts);
-  const videoGenerator = new VideoGenerator();
-
-  async function ensureFonts(asset: RichTextValidated) {
-    if (asset.customFonts) {
-      for (const cf of asset.customFonts) {
-        const bytes = await loadFileOrHttpToArrayBuffer(cf.src);
-        await fonts.registerFromBytes(bytes, {
-          family: cf.family,
-          weight: cf.weight ?? "400",
-          style: cf.style ?? "normal",
-        });
-      }
-    }
-    const main = asset.font ?? {
-      family: "Roboto",
-      weight: "400",
-      style: "normal",
-      size: 48,
-      color: "#000000",
-      opacity: 1,
-    };
-    return main;
-  }
-
-  return {
-    validate(input: unknown): { value: RichTextValidated } {
-      const { value, error } = RichTextAssetSchema.validate(input, {
-        abortEarly: false,
-        convert: true,
-      });
-      if (error) throw error;
-      return { value: value as RichTextValidated };
-    },
-
-    async registerFontFromFile(
-      path: string,
-      desc: { family: string; weight?: string | number; style?: string }
-    ) {
-      const bytes = await loadFileOrHttpToArrayBuffer(path);
-      await fonts.registerFromBytes(bytes, desc);
-    },
-    async registerFontFromUrl(
-      url: string,
-      desc: { family: string; weight?: string | number; style?: string }
-    ) {
-      const bytes = await loadFileOrHttpToArrayBuffer(url);
-      await fonts.registerFromBytes(bytes, desc);
-    },
-
-    async renderFrame(asset: RichTextValidated, tSeconds: number) {
-      const main = await ensureFonts(asset);
-      const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
-
-      const lines = layout.layout({
-        text: asset.text,
-        width: asset.width ?? width,
-        letterSpacing: asset.style?.letterSpacing ?? 0,
-        fontSize: main.size,
-        lineHeight: asset.style?.lineHeight ?? 1.2,
-        desc,
-        textTransform: asset.style?.textTransform ?? "none",
-      });
-
-      const textRect = { x: 0, y: 0, width: asset.width ?? width, height: asset.height ?? height };
-
-      const canvasW = asset.width ?? width;
-      const canvasH = asset.height ?? height;
-      const canvasPR = asset.pixelRatio ?? pixelRatio;
-
-      const ops0 = buildDrawOps({
-        canvas: { width: canvasW, height: canvasH, pixelRatio: canvasPR },
-        textRect,
-        lines,
-        font: {
-          family: main.family,
-          size: main.size,
-          weight: `${main.weight}`,
-          style: main.style,
-          color: main.color,
-          opacity: main.opacity,
-        },
-        style: {
-          lineHeight: asset.style?.lineHeight ?? 1.2,
-          textDecoration: asset.style?.textDecoration ?? "none",
-          gradient: asset.style?.gradient,
-        },
-        stroke: asset.stroke,
-        shadow: asset.shadow,
-        align: asset.align ?? { horizontal: "left", vertical: "middle" },
-        background: asset.background,
-        glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
-        /** NEW: provide UPEM so drawops can compute scale */
-        getUnitsPerEm: () => fonts.getUnitsPerEm(desc),
-      });
-
-      const ops = applyAnimation(ops0, lines, {
-        t: tSeconds,
-        fontSize: main.size,
-        anim: asset.animation
-          ? {
-              preset: asset.animation.preset as any,
-              speed: asset.animation.speed,
-              duration: asset.animation.duration,
-              style: asset.animation.style as any,
-              direction: asset.animation.direction as any,
-            }
-          : undefined,
-      });
-
-      return ops;
-    },
-
-    async createRenderer(p: { width?: number; height?: number; pixelRatio?: number }) {
-      return createNodePainter({
-        width: p.width ?? width,
-        height: p.height ?? height,
-        pixelRatio: p.pixelRatio ?? pixelRatio,
-      });
-    },
-
-    async generateVideo(asset: RichTextValidated, options: Partial<VideoGenerationOptions>) {
-      const finalOptions: VideoGenerationOptions = {
-        width: asset.width ?? width,
-        height: asset.height ?? height,
-        fps: fps,
-        duration: asset.animation?.duration ?? 3,
-        outputPath: options.outputPath ?? "output.mp4",
-        pixelRatio: asset.pixelRatio ?? pixelRatio,
-      };
-
-      const frameGenerator = async (time: number) => {
-        return this.renderFrame(asset, time);
-      };
-
-      await videoGenerator.generateVideo(frameGenerator, finalOptions);
-    },
-  };
-}
-
-export * from "../types";

package/src/env/entry.web.ts

@@ -1,146 +0,0 @@
-// src/env/entry.web.ts
-import { RichTextAssetSchema, type RichTextValidated } from "../schema/asset-schema";
-import { CANVAS_CONFIG } from "../config/canvas-constants";
-import { FontRegistry } from "../core/font-registry";
-import { LayoutEngine } from "../core/layout";
-import { buildDrawOps } from "../core/drawops";
-import { applyAnimation } from "../core/animations";
-import { createWebPainter } from "../painters/web";
-import { fetchToArrayBuffer } from "../io/web";
-
-export async function createTextEngine(
-  opts: {
-    width?: number;
-    height?: number;
-    pixelRatio?: number;
-    fps?: number;
-    wasmBaseURL?: string;
-  } = {}
-) {
-  const width = opts.width ?? CANVAS_CONFIG.DEFAULTS.width;
-  const height = opts.height ?? CANVAS_CONFIG.DEFAULTS.height;
-  const pixelRatio = opts.pixelRatio ?? CANVAS_CONFIG.DEFAULTS.pixelRatio;
-  const wasmBaseURL = opts.wasmBaseURL;
-
-  const fonts = new FontRegistry(wasmBaseURL);
-  // initHB via registry as needed
-  const layout = new LayoutEngine(fonts);
-
-  async function ensureFonts(asset: RichTextValidated) {
-    // Load custom fonts (bytes) if provided
-    if (asset.customFonts) {
-      for (const cf of asset.customFonts) {
-        const bytes = await fetchToArrayBuffer(cf.src);
-        await fonts.registerFromBytes(bytes, {
-          family: cf.family,
-          weight: cf.weight ?? "400",
-          style: cf.style ?? "normal",
-        });
-      }
-    }
-    // Ensure main font is loaded (if same as custom, already there)
-    const main = asset.font ?? {
-      family: "Roboto",
-      weight: "400",
-      style: "normal",
-      size: 48,
-      color: "#000000",
-      opacity: 1,
-    };
-    // No system fonts: require the user to register customFonts for deterministic results.
-    return main;
-  }
-
-  return {
-    validate(input: unknown): { value: RichTextValidated } {
-      const { value, error } = RichTextAssetSchema.validate(input, {
-        abortEarly: false,
-        convert: true,
-      });
-      if (error) throw error;
-      return { value: value as RichTextValidated };
-    },
-    async registerFontFromUrl(
-      url: string,
-      desc: { family: string; weight?: string | number; style?: string }
-    ) {
-      const bytes = await fetchToArrayBuffer(url);
-      await fonts.registerFromBytes(bytes, desc);
-    },
-    async registerFontFromFile(
-      source: string | Blob,
-      desc: { family: string; weight?: string | number; style?: string }
-    ) {
-      let bytes: ArrayBuffer;
-      if (typeof source === "string") {
-        bytes = await fetchToArrayBuffer(source);
-      } else {
-        bytes = await source.arrayBuffer();
-      }
-      await fonts.registerFromBytes(bytes, desc);
-    },
-
-    async renderFrame(asset: RichTextValidated, tSeconds: number) {
-      const main = await ensureFonts(asset);
-      const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
-
-      const lines = layout.layout({
-        text: asset.text,
-        width: asset.width ?? width,
-        letterSpacing: asset.style?.letterSpacing ?? 0,
-        fontSize: main.size,
-        lineHeight: asset.style?.lineHeight ?? 1.2,
-        desc,
-        textTransform: asset.style?.textTransform ?? "none",
-      });
-
-      const textRect = { x: 0, y: 0, width: asset.width ?? width, height: asset.height ?? height };
-      const ops0 = buildDrawOps({
-        canvas: { width, height, pixelRatio },
-        textRect,
-        lines,
-        font: {
-          family: main.family,
-          size: main.size,
-          weight: `${main.weight}`,
-          style: main.style,
-          color: main.color,
-          opacity: main.opacity,
-        },
-        style: {
-          lineHeight: asset.style?.lineHeight ?? 1.2,
-          textDecoration: asset.style?.textDecoration ?? "none",
-          gradient: asset.style?.gradient,
-        },
-        stroke: asset.stroke,
-        shadow: asset.shadow,
-        align: asset.align ?? { horizontal: "left", vertical: "middle" },
-        background: asset.background,
-        glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
-        /** NEW: provide UPEM so drawops can compute scale */
-        getUnitsPerEm: () => fonts.getUnitsPerEm(desc),
-      });
-
-      const ops = applyAnimation(ops0, lines, {
-        t: tSeconds,
-        fontSize: main.size,
-        anim: asset.animation
-          ? {
-              preset: asset.animation.preset as any,
-              speed: asset.animation.speed,
-              duration: asset.animation.duration,
-              style: asset.animation.style as any,
-              direction: asset.animation.direction as any,
-            }
-          : undefined,
-      });
-
-      return ops;
-    },
-    createRenderer(canvas: HTMLCanvasElement | OffscreenCanvas) {
-      return createWebPainter(canvas);
-    },
-  };
-}
-
-export * from "../types";

package/src/index.ts

@@ -1 +0,0 @@
-export * from "./types";

package/src/io/node.ts

@@ -1,45 +0,0 @@
-import { readFile } from "node:fs/promises";
-import * as http from "node:http";
-import * as https from "node:https";
-
-/** Ensure we always return a plain ArrayBuffer (never SharedArrayBuffer). */
-function bufferToArrayBuffer(buf: Buffer): ArrayBuffer {
-  const { buffer, byteOffset, byteLength } = buf as unknown as {
-    buffer: ArrayBuffer | SharedArrayBuffer;
-    byteOffset: number;
-    byteLength: number;
-  };
-
-  // If backing store is SharedArrayBuffer, copy to a fresh ArrayBuffer
-  if (typeof SharedArrayBuffer !== "undefined" && buffer instanceof SharedArrayBuffer) {
-    const ab = new ArrayBuffer(byteLength);
-    new Uint8Array(ab).set(buf);
-    return ab;
-  }
-
-  // Backing store is ArrayBuffer; slice to the exact view range
-  // (works even when Buffer is a view into a larger ArrayBuffer)
-  const ab = buffer as ArrayBuffer;
-  // ArrayBuffer#slice returns ArrayBuffer
-  return ab.slice(byteOffset, byteOffset + byteLength);
-}
-
-export async function loadFileOrHttpToArrayBuffer(pathOrUrl: string): Promise<ArrayBuffer> {
-  if (/^https?:\/\//.test(pathOrUrl)) {
-    const client = pathOrUrl.startsWith("https:") ? https : http;
-    const buf: Buffer = await new Promise((resolve, reject) => {
-      client
-        .get(pathOrUrl, (res) => {
-          const chunks: Buffer[] = [];
-          res.on("data", (d) => chunks.push(d));
-          res.on("end", () => resolve(Buffer.concat(chunks)));
-          res.on("error", reject);
-        })
-        .on("error", reject);
-    });
-    return bufferToArrayBuffer(buf);
-  }
-
-  const buf = await readFile(pathOrUrl);
-  return bufferToArrayBuffer(buf);
-}

package/src/io/web.ts

@@ -1,5 +0,0 @@
-export async function fetchToArrayBuffer(url: string): Promise<ArrayBuffer> {
-  const res = await fetch(url);
-  if (!res.ok) throw new Error(`Failed to fetch ${url}: ${res.status}`);
-  return await res.arrayBuffer();
-}

package/src/painters/node.ts

@@ -1,290 +0,0 @@
-import type { DrawOp, GradientSpec } from "../types";
-import { parseHex6 } from "../core/colors";
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-type Ctx = any;
-
-export async function createNodePainter(opts: {
-  width: number;
-  height: number;
-  pixelRatio: number;
-}) {
-  const canvasMod = await import("canvas");
-  const { createCanvas } = canvasMod as any;
-
-  const canvas = createCanvas(
-    Math.floor(opts.width * opts.pixelRatio),
-    Math.floor(opts.height * opts.pixelRatio)
-  );
-  const ctx: Ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error("2D context unavailable in Node (canvas).");
-
-  const api = {
-    async render(ops: DrawOp[]) {
-      // Compute once; used for whole-text gradient
-      const globalBox = computeGlobalTextBounds(ops);
-
-      for (const op of ops) {
-        if (op.op === "BeginFrame") {
-          // Ensure canvas pixel size matches this frame
-          const dpr = op.pixelRatio ?? opts.pixelRatio;
-          const wantW = Math.floor(op.width * dpr);
-          const wantH = Math.floor(op.height * dpr);
-
-          if ((canvas as any).width !== wantW || (canvas as any).height !== wantH) {
-            (canvas as any).width = wantW;
-            (canvas as any).height = wantH;
-          }
-
-          // Re-apply DPR transform every frame (resize resets state)
-          ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-          if (op.clear) ctx.clearRect(0, 0, op.width, op.height);
-          if (op.bg) {
-            const { color, opacity, radius } = op.bg;
-            if (color) {
-              const c = parseHex6(color, opacity);
-              ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
-              if (radius && radius > 0) {
-                ctx.save();
-                ctx.beginPath();
-                roundRectPath(ctx, 0, 0, op.width, op.height, radius);
-                ctx.fill();
-                ctx.restore();
-              } else {
-                ctx.fillRect(0, 0, op.width, op.height);
-              }
-            }
-          }
-          continue;
-        }
-
-        if (op.op === "FillPath") {
-          ctx.save();
-          ctx.translate(op.x, op.y);
-
-          const s = (op as any).scale ?? 1;
-          ctx.scale(s, -s);
-
-          ctx.beginPath();
-          drawSvgPathOnCtx(ctx, op.path);
-
-          const bbox = (op as any).gradientBBox ?? globalBox;
-          const fill = makeGradientFromBBox(ctx, op.fill, bbox);
-          ctx.fillStyle = fill as any;
-          ctx.fill();
-
-          ctx.restore();
-          continue;
-        }
-
-        if (op.op === "StrokePath") {
-          ctx.save();
-          ctx.translate(op.x, op.y);
-
-          const s = (op as any).scale ?? 1;
-          ctx.scale(s, -s);
-          const invAbs = 1 / Math.abs(s);
-
-          ctx.beginPath();
-          drawSvgPathOnCtx(ctx, op.path);
-
-          const c = parseHex6((op as any).color, (op as any).opacity);
-          ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
-          ctx.lineWidth = (op as any).width * invAbs; // keep px width
-          ctx.lineJoin = "round";
-          ctx.lineCap = "round";
-          ctx.stroke();
-
-          ctx.restore();
-          continue;
-        }
-
-        if (op.op === "DecorationLine") {
-          ctx.save();
-          const c = parseHex6((op as any).color, (op as any).opacity);
-          ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
-          ctx.lineWidth = (op as any).width;
-          ctx.beginPath();
-          ctx.moveTo((op as any).from.x, (op as any).from.y);
-          ctx.lineTo((op as any).to.x, (op as any).to.y);
-          ctx.stroke();
-          ctx.restore();
-          continue;
-        }
-      }
-    },
-
-    async toPNG(): Promise<Buffer> {
-      return (canvas as any).toBuffer("image/png");
-    },
-  };
-
-  return api;
-}
-
-// --------- helpers ---------
-
-function makeGradientFromBBox(
-  ctx: any,
-  spec: GradientSpec,
-  box: { x: number; y: number; w: number; h: number }
-) {
-  if (spec.kind === "solid") {
-    const c = parseHex6((spec as any).color, (spec as any).opacity);
-    return `rgba(${c.r},${c.g},${c.b},${c.a})`;
-  }
-  const cx = box.x + box.w / 2,
-    cy = box.y + box.h / 2,
-    r = Math.max(box.w, box.h) / 2;
-  const addStops = (g: any) => {
-    const op = (spec as any).opacity ?? 1;
-    for (const s of (spec as any).stops) {
-      const c = parseHex6(s.color, op);
-      g.addColorStop(s.offset, `rgba(${c.r},${c.g},${c.b},${c.a})`);
-    }
-    return g;
-  };
-  if (spec.kind === "linear") {
-    const rad = (((spec as any).angle || 0) * Math.PI) / 180;
-    const x1 = cx + Math.cos(rad + Math.PI) * r;
-    const y1 = cy + Math.sin(rad + Math.PI) * r;
-    const x2 = cx + Math.cos(rad) * r;
-    const y2 = cy + Math.sin(rad) * r;
-    return addStops(ctx.createLinearGradient(x1, y1, x2, y2));
-  } else {
-    return addStops(ctx.createRadialGradient(cx, cy, 0, cx, cy, r));
-  }
-}
-
-function computeGlobalTextBounds(ops: DrawOp[]) {
-  let minX = Infinity,
-    minY = Infinity,
-    maxX = -Infinity,
-    maxY = -Infinity;
-  for (const op of ops) {
-    if (op.op !== "FillPath" || (op as any).isShadow) continue;
-    const b = computePathBounds(op.path);
-    const s = (op as any).scale ?? 1;
-    const x1 = op.x + s * b.x;
-    const x2 = op.x + s * (b.x + b.w);
-    const y1 = op.y - s * (b.y + b.h);
-    const y2 = op.y - s * b.y;
-    if (x1 < minX) minX = x1;
-    if (y1 < minY) minY = y1;
-    if (x2 > maxX) maxX = x2;
-    if (y2 > maxY) maxY = y2;
-  }
-  if (minX === Infinity) return { x: 0, y: 0, w: 1, h: 1 };
-  return { x: minX, y: minY, w: Math.max(1, maxX - minX), h: Math.max(1, maxY - minY) };
-}
-
-function drawSvgPathOnCtx(ctx: any, d: string) {
-  const t = tokenizePath(d);
-  let i = 0;
-  while (i < t.length) {
-    const cmd = t[i++];
-    switch (cmd) {
-      case "M": {
-        const x = parseFloat(t[i++]);
-        const y = parseFloat(t[i++]);
-        ctx.moveTo(x, y);
-        break;
-      }
-      case "L": {
-        const x = parseFloat(t[i++]);
-        const y = parseFloat(t[i++]);
-        ctx.lineTo(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++]);
-        ctx.bezierCurveTo(c1x, c1y, c2x, c2y, 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++]);
-        ctx.quadraticCurveTo(cx, cy, x, y);
-        break;
-      }
-      case "Z": {
-        ctx.closePath();
-        break;
-      }
-    }
-  }
-}
-
-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 };
-}
-
-function roundRectPath(ctx: any, x: number, y: number, w: number, h: number, r: number) {
-  ctx.moveTo(x + r, y);
-  ctx.arcTo(x + w, y, x + w, y + h, r);
-  ctx.arcTo(x + w, y + h, x, y + h, r);
-  ctx.arcTo(x, y + h, x, y, r);
-  ctx.arcTo(x, y, x + w, y, r);
-  ctx.closePath();
-}
-
-function tokenizePath(d: string): string[] {
-  return d.match(/[MLCQZ]|-?\d*\.?\d+(?:e[-+]?\d+)?/gi) ?? [];
-}