@shotstack/shotstack-canvas 1.4.6 → 1.5.0

package/dist/entry.web.js

@@ -1,6 +1,6 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import {
+  __publicField
+} from "./chunk-HYGMWVDX.js";
 
 // src/schema/asset-schema.ts
 import Joi from "joi";
@@ -98,11 +98,26 @@ var animationSchema = Joi.object({
     otherwise: Joi.forbidden()
   })
 }).unknown(false);
+var borderSchema = 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);
 var 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)
+  borderRadius: Joi.number().min(0).default(0),
+  border: borderSchema.optional()
 }).unknown(false);
+var paddingSchema = Joi.alternatives().try(
+  Joi.number().min(0).default(0),
+  Joi.object({
+    top: Joi.number().min(0).default(0),
+    right: Joi.number().min(0).default(0),
+    bottom: Joi.number().min(0).default(0),
+    left: Joi.number().min(0).default(0)
+  }).unknown(false)
+);
 var customFontSchema = Joi.object({
   src: Joi.string().uri().required(),
   family: Joi.string().required(),
@@ -120,6 +135,7 @@ var RichTextAssetSchema = Joi.object({
   stroke: strokeSchema.optional(),
   shadow: shadowSchema.optional(),
   background: backgroundSchema.optional(),
+  padding: paddingSchema.optional(),
   align: alignmentSchema.optional(),
   animation: animationSchema.optional(),
   customFonts: Joi.array().items(customFontSchema).optional(),
@@ -258,6 +274,23 @@ function setupWasmInterceptors(wasmBinary) {
     }
     return originalFetch.apply(this, [input, init]);
   };
+  const originalInstantiate = WebAssembly.instantiate;
+  WebAssembly.instantiate = async function(bufferSourceOrModule, importObject) {
+    console.log(
+      `\u{1F504} WebAssembly.instantiate called, type: ${bufferSourceOrModule instanceof WebAssembly.Module ? "Module" : "BufferSource"}`
+    );
+    if (bufferSourceOrModule instanceof WebAssembly.Module) {
+      return originalInstantiate.call(WebAssembly, bufferSourceOrModule, importObject);
+    }
+    console.log(`\u{1F504} Intercepted WebAssembly.instantiate, using pre-loaded WASM binary`);
+    const module = await WebAssembly.compile(wasmBinary);
+    const instance = await originalInstantiate.call(
+      WebAssembly,
+      module,
+      importObject
+    );
+    return { module, instance };
+  };
   const originalInstantiateStreaming = WebAssembly.instantiateStreaming;
   if (originalInstantiateStreaming) {
     WebAssembly.instantiateStreaming = async function(source, importObject) {
@@ -295,21 +328,25 @@ async function initHB(wasmBaseURL) {
     console.log(`\u2705 WASM binary loaded successfully (${wasmBinary.byteLength} bytes)`);
     if (!isNode()) {
       setupWasmInterceptors(wasmBinary);
-    }
-    const mod = await import("harfbuzzjs");
-    let hb;
-    const candidate = mod.default || mod;
-    if (typeof candidate === "function") {
-      hb = await candidate({
-        wasmBinary
-      });
-    } else if (candidate && typeof candidate.then === "function") {
-      hb = await candidate;
-    } else if (candidate && typeof candidate.createBuffer === "function") {
-      hb = candidate;
-    } else {
-      throw new Error(`Unexpected harfbuzzjs export type: ${typeof candidate}`);
-    }
+      window.Module = {
+        wasmBinary,
+        locateFile: (path) => {
+          console.log(`\u{1F50D} locateFile called for: ${path}`);
+          return path;
+        }
+      };
+      console.log(`\u{1F30D} Set global Module.wasmBinary (${wasmBinary.byteLength} bytes)`);
+    }
+    console.log("\u{1F504} Importing harfbuzzjs/hb.js (factory)");
+    const hbModule = await import("./hb-KXF2MJ2J.js");
+    const hbFactory = hbModule.default || hbModule;
+    console.log("\u{1F504} Calling hb factory with wasmBinary");
+    const hbInstance = await hbFactory({ wasmBinary });
+    console.log("\u{1F504} Importing harfbuzzjs/hbjs.js (wrapper)");
+    const hbjsModule = await import("./hbjs-ZTRARROF.js");
+    const hbjsWrapper = hbjsModule.default || hbjsModule;
+    console.log("\u{1F504} Wrapping hb instance");
+    const hb = hbjsWrapper(hbInstance);
     if (!hb || typeof hb.createBuffer !== "function" || typeof hb.createFont !== "function") {
       throw new Error("Failed to initialize HarfBuzz: unexpected export shape from 'harfbuzzjs'.");
     }
@@ -773,15 +810,27 @@ function decorationGeometry(kind, p) {
 }
 
 // src/core/drawops.ts
+function normalizePadding(padding) {
+  if (padding === void 0 || padding === null) {
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+  }
+  if (typeof padding === "number") {
+    return { top: padding, right: padding, bottom: padding, left: padding };
+  }
+  return padding;
+}
 async function buildDrawOps(p) {
   const ops = [];
+  const padding = normalizePadding(p.padding);
+  const borderWidth = p.background?.border?.width ?? 0;
   ops.push({
     op: "BeginFrame",
     width: p.canvas.width,
     height: p.canvas.height,
     pixelRatio: p.canvas.pixelRatio,
     clear: true,
-    bg: p.background && p.background.color ? { color: p.background.color, opacity: p.background.opacity, radius: p.background.borderRadius } : void 0
+    bg: void 0
+    // Background will be drawn as a separate layer with proper padding/border
   });
   if (p.lines.length === 0) return ops;
   const upem = Math.max(1, await p.getUnitsPerEm());
@@ -791,33 +840,34 @@ async function buildDrawOps(p) {
   let blockY;
   switch (p.align.vertical) {
     case "top":
-      blockY = p.font.size;
+      blockY = p.font.size + padding.top;
       break;
     case "bottom":
-      blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
+      blockY = p.textRect.height - (numLines - 1) * lineHeightPx + padding.top;
       break;
     case "middle":
     default:
       const capHeightRatio = 0.35;
       const visualOffset = p.font.size * capHeightRatio;
-      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
+      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + padding.top;
       break;
   }
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
   const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
+  const textOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
     let lineX;
     switch (p.align.horizontal) {
       case "left":
-        lineX = 0;
+        lineX = padding.left;
         break;
       case "right":
-        lineX = p.textRect.width - line.width;
+        lineX = p.textRect.width - line.width + padding.left;
         break;
       case "center":
       default:
-        lineX = (p.textRect.width - line.width) / 2;
+        lineX = (p.textRect.width - line.width) / 2 + padding.left;
         break;
     }
     let xCursor = lineX;
@@ -841,7 +891,7 @@ async function buildDrawOps(p) {
       if (x2 > gMaxX) gMaxX = x2;
       if (y2 > gMaxY) gMaxY = y2;
       if (p.shadow && p.shadow.blur > 0) {
-        ops.push({
+        textOps.push({
           isShadow: true,
           op: "FillPath",
           path,
@@ -852,7 +902,7 @@ async function buildDrawOps(p) {
         });
       }
       if (p.stroke && p.stroke.width > 0) {
-        ops.push({
+        textOps.push({
           op: "StrokePath",
           path,
           x: glyphX,
@@ -863,7 +913,7 @@ async function buildDrawOps(p) {
           opacity: p.stroke.opacity
         });
       }
-      ops.push({
+      textOps.push({
         op: "FillPath",
         path,
         x: glyphX,
@@ -880,7 +930,7 @@ async function buildDrawOps(p) {
         lineWidth: line.width,
         xStart: lineX
       });
-      ops.push({
+      textOps.push({
         op: "DecorationLine",
         from: { x: deco.x1, y: deco.y },
         to: { x: deco.x2, y: deco.y },
@@ -892,12 +942,46 @@ async function buildDrawOps(p) {
   }
   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) {
+    for (const op of textOps) {
       if (op.op === "FillPath" && !op.isShadow) {
         op.gradientBBox = gbox;
       }
     }
   }
+  if (p.background && (p.background.color || p.background.border)) {
+    const bgX = 0;
+    const bgY = 0;
+    const bgWidth = p.canvas.width;
+    const bgHeight = p.canvas.height;
+    if (p.background.color) {
+      ops.push({
+        op: "Rectangle",
+        x: bgX,
+        y: bgY,
+        width: bgWidth,
+        height: bgHeight,
+        fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
+        borderRadius: p.background.borderRadius
+      });
+    }
+    if (p.background.border && p.background.border.width > 0) {
+      const halfBorder = p.background.border.width / 2;
+      ops.push({
+        op: "RectangleStroke",
+        x: bgX + halfBorder,
+        y: bgY + halfBorder,
+        width: bgWidth - p.background.border.width,
+        height: bgHeight - p.background.border.width,
+        stroke: {
+          width: p.background.border.width,
+          color: p.background.border.color,
+          opacity: p.background.border.opacity
+        },
+        borderRadius: Math.max(0, p.background.borderRadius - halfBorder)
+      });
+    }
+  }
+  ops.push(...textOps);
   return ops;
 }
 function tokenizePath(d) {
@@ -1655,6 +1739,48 @@ function createWebPainter(canvas) {
           ctx.restore();
           continue;
         }
+        if (op.op === "Rectangle") {
+          ctx.save();
+          const fill = makeGradientFromBBox(ctx, op.fill, {
+            x: op.x,
+            y: op.y,
+            w: op.width,
+            h: op.height
+          });
+          ctx.fillStyle = fill;
+          if (op.borderRadius && op.borderRadius > 0) {
+            drawRoundedRect(ctx, op.x, op.y, op.width, op.height, op.borderRadius);
+          } else {
+            ctx.fillRect(op.x, op.y, op.width, op.height);
+          }
+          ctx.restore();
+          continue;
+        }
+        if (op.op === "RectangleStroke") {
+          ctx.save();
+          const c = parseHex6(op.stroke.color, op.stroke.opacity);
+          ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+          ctx.lineWidth = op.stroke.width;
+          if (op.borderRadius && op.borderRadius > 0) {
+            const p = new Path2D();
+            const r = op.borderRadius;
+            const x = op.x;
+            const y = op.y;
+            const w = op.width;
+            const h = op.height;
+            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.stroke(p);
+          } else {
+            ctx.strokeRect(op.x, op.y, op.width, op.height);
+          }
+          ctx.restore();
+          continue;
+        }
       }
     }
   };
@@ -1984,14 +2110,15 @@ async function createTextEngine(opts = {}) {
             `Failed to layout text: ${err instanceof Error ? err.message : String(err)}`
           );
         }
+        const padding = asset.padding ? typeof asset.padding === "number" ? { top: asset.padding, right: asset.padding, bottom: asset.padding, left: asset.padding } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
         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 canvasW = (asset.width ?? width) + padding.left + padding.right;
+        const canvasH = (asset.height ?? height) + padding.top + padding.bottom;
         const canvasPR = asset.pixelRatio ?? pixelRatio;
         let ops0;
         try {
@@ -2018,6 +2145,7 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
+            padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
             getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
           });