@shotstack/shotstack-canvas 1.0.2

package/src/painters/web.ts

@@ -0,0 +1,224 @@
+import type { DrawOp, GradientSpec } from "../types";
+import { parseHex6 } from "../core/colors";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export function createWebPainter(canvas: HTMLCanvasElement | OffscreenCanvas) {
+  // @ts-ignore
+  const ctx: CanvasRenderingContext2D = (canvas as any).getContext("2d");
+  if (!ctx) throw new Error("2D context unavailable");
+
+  return {
+    async render(ops: DrawOp[]) {
+      const globalBox = computeGlobalTextBounds(ops);
+
+      for (const op of ops) {
+        if (op.op === "BeginFrame") {
+          const dpr = op.pixelRatio;
+          const w = op.width,
+            h = op.height;
+
+          if ("width" in canvas && "height" in canvas) {
+            (canvas as any).width = Math.floor(w * dpr);
+            (canvas as any).height = Math.floor(h * dpr);
+          }
+          ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+          if (op.clear) ctx.clearRect(0, 0, w, h);
+          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) {
+                drawRoundedRect(ctx, 0, 0, w, h, radius);
+                ctx.fill();
+              } else {
+                ctx.fillRect(0, 0, w, h);
+              }
+            }
+          }
+          continue;
+        }
+
+        if (op.op === "FillPath") {
+          const p = new Path2D(op.path);
+          ctx.save();
+          ctx.translate(op.x, op.y);
+
+          const s = (op as any).scale ?? 1;
+          ctx.scale(s, -s);
+
+          const bbox = (op as any).gradientBBox ?? globalBox;
+          const fill = makeGradientFromBBox(ctx, op.fill, bbox);
+          ctx.fillStyle = fill as any;
+          ctx.fill(p);
+          ctx.restore();
+          continue;
+        }
+
+        if (op.op === "StrokePath") {
+          const p = new Path2D(op.path);
+          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);
+
+          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;
+          ctx.lineJoin = "round";
+          ctx.lineCap = "round";
+          ctx.stroke(p);
+          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;
+        }
+      }
+    },
+  };
+}
+
+function drawRoundedRect(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number
+) {
+  const p = new Path2D();
+  p.moveTo(x + r, y);
+  p.arcTo(x + w, y, x + w, y + h, r);
+  p.arcTo(x + w, y + h, x, y + h, r);
+  p.arcTo(x, y + h, x, y, r);
+  p.arcTo(x, y, x + w, y, r);
+  p.closePath();
+  ctx.save();
+  ctx.fill(p);
+  ctx.restore();
+}
+
+function makeGradientFromBBox(
+  ctx: CanvasRenderingContext2D,
+  spec: GradientSpec,
+  box: { x: number; y: number; w: number; h: number }
+): CanvasGradient | string {
+  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: CanvasGradient) => {
+    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 computePathBounds(d: string) {
+  const tokens = 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 < tokens.length) {
+    const t = tokens[i++];
+    switch (t) {
+      case "M":
+      case "L": {
+        const x = parseFloat(tokens[i++]);
+        const y = parseFloat(tokens[i++]);
+        touch(x, y);
+        break;
+      }
+      case "C": {
+        const c1x = parseFloat(tokens[i++]);
+        const c1y = parseFloat(tokens[i++]);
+        const c2x = parseFloat(tokens[i++]);
+        const c2y = parseFloat(tokens[i++]);
+        const x = parseFloat(tokens[i++]);
+        const y = parseFloat(tokens[i++]);
+        touch(c1x, c1y);
+        touch(c2x, c2y);
+        touch(x, y);
+        break;
+      }
+      case "Q": {
+        const cx = parseFloat(tokens[i++]);
+        const cy = parseFloat(tokens[i++]);
+        const x = parseFloat(tokens[i++]);
+        const y = parseFloat(tokens[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 tokenizePath(d: string): string[] {
+  return d.match(/[MLCQZ]|-?\d*\.?\d+(?:e[-+]?\d+)?/gi) ?? [];
+}

package/src/schema/asset-schema.ts

@@ -0,0 +1,166 @@
+import Joi from "joi";
+import { CANVAS_CONFIG } from "../config/canvas-constants";
+
+const HEX6 = /^#[A-Fa-f0-9]{6}$/;
+
+const gradientSchema = Joi.object({
+  type: Joi.string().valid("linear", "radial").default("linear"),
+  angle: Joi.number().min(0).max(360).default(0),
+  stops: Joi.array()
+    .items(
+      Joi.object({
+        offset: Joi.number().min(0).max(1).required(),
+        color: Joi.string().pattern(HEX6).required()
+      }).unknown(false)
+    )
+    .min(2)
+    .required()
+}).unknown(false);
+
+const shadowSchema = Joi.object({
+  offsetX: Joi.number().default(0),
+  offsetY: Joi.number().default(0),
+  blur: Joi.number().min(0).default(0),
+  color: Joi.string().pattern(HEX6).default("#000000"),
+  opacity: Joi.number().min(0).max(1).default(0.5)
+}).unknown(false);
+
+const strokeSchema = Joi.object({
+  width: Joi.number().min(0).default(0),
+  color: Joi.string().pattern(HEX6).default("#000000"),
+  opacity: Joi.number().min(0).max(1).default(1)
+}).unknown(false);
+
+const fontSchema = Joi.object({
+  family: Joi.string().default(CANVAS_CONFIG.DEFAULTS.fontFamily),
+  size: Joi.number()
+    .min(CANVAS_CONFIG.LIMITS.minFontSize)
+    .max(CANVAS_CONFIG.LIMITS.maxFontSize)
+    .default(CANVAS_CONFIG.DEFAULTS.fontSize),
+  weight: Joi.alternatives().try(Joi.string(), Joi.number()).default("400"),
+  style: Joi.string().valid("normal", "italic", "oblique").default("normal"),
+  color: Joi.string().pattern(HEX6).default(CANVAS_CONFIG.DEFAULTS.color),
+  opacity: Joi.number().min(0).max(1).default(1)
+}).unknown(false);
+
+const styleSchema = Joi.object({
+  letterSpacing: Joi.number().default(0),
+  lineHeight: Joi.number().min(0).max(10).default(1.2),
+  textTransform: Joi.string().valid("none", "uppercase", "lowercase", "capitalize").default("none"),
+  textDecoration: Joi.string().valid("none", "underline", "line-through").default("none"),
+  gradient: gradientSchema.optional()
+}).unknown(false);
+
+const alignmentSchema = Joi.object({
+  horizontal: Joi.string()
+    .valid("left", "center", "right")
+    .default(CANVAS_CONFIG.DEFAULTS.textAlign),
+  vertical: Joi.string().valid("top", "middle", "bottom").default("middle")
+}).unknown(false);
+
+const animationSchema = Joi.object({
+  preset: Joi.string().valid(...CANVAS_CONFIG.ANIMATION_TYPES as readonly string[]),
+  speed: Joi.number().min(0.1).max(10).default(1),
+  duration: Joi.number()
+    .min(CANVAS_CONFIG.LIMITS.minDuration)
+    .max(CANVAS_CONFIG.LIMITS.maxDuration)
+    .optional(),
+  style: Joi.string()
+    .valid("character", "word")
+    .optional()
+    .when("preset", {
+      is: Joi.valid("typewriter", "shift"),
+      then: Joi.optional(),
+      otherwise: Joi.forbidden()
+    }),
+  direction: Joi.string()
+    .optional()
+    .when("preset", {
+      switch: [
+        { is: "ascend", then: Joi.valid("up", "down") },
+        { is: "shift", then: Joi.valid("left", "right", "up", "down") },
+        { is: "slideIn", then: Joi.valid("left", "right", "up", "down") },
+        { is: "movingLetters", then: Joi.valid("left", "right", "up", "down") }
+      ],
+      otherwise: Joi.forbidden()
+    })
+}).unknown(false);
+
+const backgroundSchema = Joi.object({
+  color: Joi.string().pattern(HEX6).optional(),
+  opacity: Joi.number().min(0).max(1).default(1),
+  borderRadius: Joi.number().min(0).default(0)
+}).unknown(false);
+
+const customFontSchema = Joi.object({
+  src: Joi.string().uri().required(),
+  family: Joi.string().required(),
+  weight: Joi.alternatives().try(Joi.string(), Joi.number()).optional(),
+  style: Joi.string().optional(),
+  originalFamily: Joi.string().optional()
+}).unknown(false);
+
+export const RichTextAssetSchema = Joi.object({
+  type: Joi.string().valid("rich-text").required(),
+  text: Joi.string().allow("").max(CANVAS_CONFIG.LIMITS.maxTextLength).default(""),
+  width: Joi.number()
+    .min(CANVAS_CONFIG.LIMITS.minWidth)
+    .max(CANVAS_CONFIG.LIMITS.maxWidth)
+    .default(CANVAS_CONFIG.DEFAULTS.width)
+    .optional(),
+  height: Joi.number()
+    .min(CANVAS_CONFIG.LIMITS.minHeight)
+    .max(CANVAS_CONFIG.LIMITS.maxHeight)
+    .default(CANVAS_CONFIG.DEFAULTS.height)
+    .optional(),
+  font: fontSchema.optional(),
+  style: styleSchema.optional(),
+  stroke: strokeSchema.optional(),
+  shadow: shadowSchema.optional(),
+  background: backgroundSchema.optional(),
+  align: alignmentSchema.optional(),
+  animation: animationSchema.optional(),
+  customFonts: Joi.array().items(customFontSchema).optional(),
+  cacheEnabled: Joi.boolean().default(true),
+  pixelRatio: Joi.number().min(1).max(3).default(CANVAS_CONFIG.DEFAULTS.pixelRatio)
+}).unknown(false);
+
+export type RichTextValidated = Required<{
+  type: "rich-text";
+  text: string;
+  width?: number;
+  height?: number;
+  font?: {
+    family: string;
+    size: number;
+    weight: string | number;
+    style: "normal" | "italic" | "oblique";
+    color: string;
+    opacity: number;
+  };
+  style?: {
+    letterSpacing: number;
+    lineHeight: number;
+    textTransform: "none" | "uppercase" | "lowercase" | "capitalize";
+    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 };
+  background?: { color?: string; opacity: number; borderRadius: number };
+  align?: { horizontal: "left" | "center" | "right"; vertical: "top" | "middle" | "bottom" };
+  animation?: {
+    preset: typeof CANVAS_CONFIG.ANIMATION_TYPES[number];
+    speed: number;
+    duration?: number;
+    style?: "character" | "word";
+    direction?: "left" | "right" | "up" | "down";
+  };
+  customFonts?: { src: string; family: string; weight?: string | number; style?: string; originalFamily?: string }[];
+  cacheEnabled: boolean;
+  pixelRatio: number;
+}>;

package/src/types.ts

@@ -0,0 +1,36 @@
+import type { RichTextValidated } from "./schema/asset-schema";
+
+export type RGBA = { r: number; g: number; b: number; a: number };
+
+export type GradientSpec =
+  | { kind: "solid"; color: string; opacity: number }
+  | { kind: "linear"; angle: number; stops: { offset: number; color: string }[]; opacity: number }
+  | { kind: "radial"; stops: { offset: number; color: string }[]; opacity: number };
+
+export type Glyph = {
+  id: number;
+  xAdvance: number;
+  xOffset: number;
+  yOffset: number;
+  cluster: number;
+  char?: string;
+};
+
+export type ShapedLine = {
+  glyphs: Glyph[];
+  width: number;
+  y: number; // baseline y
+};
+
+export type DrawOp =
+  | { op: "BeginFrame"; width: number; height: number; pixelRatio: number; clear: boolean; bg?: { color?: string; opacity: number; radius: number } }
+  | { op: "FillPath"; path: string; x: number; y: number; fill: GradientSpec }
+  | { op: "StrokePath"; path: string; x: number; y: number; width: number; color: string; opacity: number }
+  | { op: "DecorationLine"; from: { x: number; y: number }; to: { x: number; y: number }; width: number; color: string; opacity: number }
+  ;
+
+export type EngineInit = { width: number; height: number; pixelRatio?: number; fps?: number };
+
+export type Renderer = { render(ops: DrawOp[]): Promise<void>; toPNG?: () => Promise<Buffer> };
+
+export type ValidAsset = RichTextValidated;

package/src/wasm/hb-loader.ts

@@ -0,0 +1,31 @@
+// src/wasm/hb-loader.ts
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+let hbSingleton: any | null = null;
+
+export async function initHB(wasmBaseURL?: string): Promise<any> {
+  if (hbSingleton) return hbSingleton;
+
+  // Simply import harfbuzzjs and let it handle WASM loading
+  const harfbuzzjs = await import('harfbuzzjs');
+  
+  // harfbuzzjs default export is a Promise that resolves to the hb object
+  const hbPromise = harfbuzzjs.default;
+  
+  if (typeof hbPromise === 'function') {
+    hbSingleton = await hbPromise();
+  } else if (hbPromise && typeof hbPromise.then === 'function') {
+    hbSingleton = await hbPromise;
+  } else {
+    hbSingleton = hbPromise;
+  }
+
+  // Validate the API
+  if (!hbSingleton || typeof hbSingleton.createBuffer !== "function") {
+    throw new Error("Failed to initialize HarfBuzz: invalid API");
+  }
+
+  return hbSingleton;
+}
+
+export type HB = any;

package/tsconfig.base.json

@@ -0,0 +1,22 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": false,
+    "allowJs": false,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "esModuleInterop": false,
+    "resolveJsonModule": true,
+    "types": []
+  }
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*", "scripts/**/*"]
+}

package/tsup.config.ts

@@ -0,0 +1,52 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig([
+  // Node build
+  {
+    name: 'node',
+    entry: { 'entry.node': 'src/env/entry.node.ts' },
+    format: ['esm', 'cjs'],
+    dts: true,
+    sourcemap: true,
+    clean: true,
+    platform: 'node',
+    target: 'node18',
+    // Mark these as external to avoid bundling issues
+    external: [
+      'canvas',
+      'harfbuzzjs',
+      'ffmpeg-static',
+      'fluent-ffmpeg',
+      'child_process',
+      'stream',
+      'path',
+      'fs',
+      'node:fs',
+      'node:fs/promises',
+      'node:path',
+      'node:http',
+      'node:https',
+      'node:stream',
+      'node:child_process'
+    ],
+    esbuildOptions(options) {
+      options.mainFields = ['module', 'main'];
+      options.conditions = ['node', 'import'];
+    },
+  },
+  // Web build
+  {
+    name: 'web',
+    entry: { 'entry.web': 'src/env/entry.web.ts' },
+    format: ['esm'],
+    dts: true,
+    sourcemap: true,
+    platform: 'browser',
+    target: 'es2020',
+    external: ['harfbuzzjs'],
+    esbuildOptions(options) {
+      options.mainFields = ['browser', 'module', 'main'];
+      options.conditions = ['browser', 'import'];
+    },
+  },
+]);