@shotstack/shotstack-canvas 1.0.2 → 1.0.3

package/src/painters/web.ts

@@ -1,224 +0,0 @@
-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

@@ -1,166 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,31 +0,0 @@
-// 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

@@ -1,22 +0,0 @@
-{
-  "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

@@ -1,16 +0,0 @@
-{
-  "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

@@ -1,52 +0,0 @@
-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'];
-    },
-  },
-]);