@shotstack/shotstack-canvas 1.4.6 → 1.5.0

package/dist/entry.node.js

@@ -94,11 +94,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(),
@@ -116,6 +131,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(),
@@ -254,6 +270,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) {
@@ -291,21 +324,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("harfbuzzjs/hb.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("harfbuzzjs/hbjs.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'.");
     }
@@ -768,15 +805,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());
@@ -786,33 +835,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;
@@ -836,7 +886,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,
@@ -847,7 +897,7 @@ async function buildDrawOps(p) {
         });
       }
       if (p.stroke && p.stroke.width > 0) {
-        ops.push({
+        textOps.push({
           op: "StrokePath",
           path,
           x: glyphX,
@@ -858,7 +908,7 @@ async function buildDrawOps(p) {
           opacity: p.stroke.opacity
         });
       }
-      ops.push({
+      textOps.push({
         op: "FillPath",
         path,
         x: glyphX,
@@ -875,7 +925,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 },
@@ -887,12 +937,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) {
@@ -1702,6 +1786,44 @@ async function createNodePainter(opts) {
           });
           continue;
         }
+        if (op.op === "Rectangle") {
+          renderToBoth((context) => {
+            context.save();
+            const fill = makeGradientFromBBox(context, op.fill, {
+              x: op.x,
+              y: op.y,
+              w: op.width,
+              h: op.height
+            });
+            context.fillStyle = fill;
+            if (op.borderRadius && op.borderRadius > 0) {
+              context.beginPath();
+              roundRectPath(context, op.x, op.y, op.width, op.height, op.borderRadius);
+              context.fill();
+            } else {
+              context.fillRect(op.x, op.y, op.width, op.height);
+            }
+            context.restore();
+          });
+          continue;
+        }
+        if (op.op === "RectangleStroke") {
+          renderToBoth((context) => {
+            context.save();
+            const c = parseHex6(op.stroke.color, op.stroke.opacity);
+            context.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+            context.lineWidth = op.stroke.width;
+            if (op.borderRadius && op.borderRadius > 0) {
+              context.beginPath();
+              roundRectPath(context, op.x, op.y, op.width, op.height, op.borderRadius);
+              context.stroke();
+            } else {
+              context.strokeRect(op.x, op.y, op.width, op.height);
+            }
+            context.restore();
+          });
+          continue;
+        }
       }
       if (needsAlphaExtraction) {
         const whiteData = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -2265,14 +2387,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 {
@@ -2299,6 +2422,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)
           });

package/dist/entry.web.d.ts

@@ -64,6 +64,17 @@ type RichTextValidated = Required<{
         color?: string;
         opacity: number;
         borderRadius: number;
+        border?: {
+            width: number;
+            color: string;
+            opacity: number;
+        };
+    };
+    padding?: number | {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
     };
     align?: {
         horizontal: "left" | "center" | "right";
@@ -177,6 +188,26 @@ type DrawOp = {
     width: number;
     color: string;
     opacity: number;
+} | {
+    op: "Rectangle";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill: GradientSpec;
+    borderRadius?: number;
+} | {
+    op: "RectangleStroke";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    stroke: {
+        width: number;
+        color: string;
+        opacity: number;
+    };
+    borderRadius?: number;
 };
 type EngineInit = {
     width: number;