@effing/canvas 0.18.0 → 0.18.2

package/dist/index.js

@@ -3,7 +3,7 @@ import { createCanvas as _createCanvas } from "@napi-rs/canvas";
 import {
   Canvas,
   GlobalFonts as GlobalFonts2,
-  loadImage as loadImage4,
+  loadImage as loadImage5,
   Image
 } from "@napi-rs/canvas";
 
@@ -21,7 +21,7 @@ function renderLottieFrame(ctx, animation, frame) {
 }
 
 // src/jsx/draw/index.ts
-import { loadImage as loadImage3 } from "@napi-rs/canvas";
+import { createCanvas as createCanvas2, loadImage as loadImage3 } from "@napi-rs/canvas";
 
 // src/jsx/language.ts
 function isEmoji(char) {
@@ -617,8 +617,8 @@ function computeContain(imgW, imgH, boxX, boxY, boxW, boxH) {
 }
 
 // src/jsx/draw/image.ts
-async function drawImage(ctx, src, x, y, width, height, style) {
-  const image = await loadImage(src);
+async function drawImage(ctx, src, x, y, width, height, style, preloadedImage) {
+  const image = preloadedImage ?? await loadImage(src);
   const objectFit = style?.objectFit ?? "fill";
   if (objectFit === "fill") {
     ctx.drawImage(image, x, y, width, height);
@@ -795,6 +795,11 @@ function toNumber(v) {
 
 // src/jsx/draw/svg.ts
 import { Path2D } from "@napi-rs/canvas";
+function mergeStyleIntoProps(props) {
+  const style = props.style;
+  if (!style) return props;
+  return { ...props, ...style };
+}
 function drawSvgContainer(ctx, node, x, y, width, height) {
   ctx.save();
   ctx.translate(x, y);
@@ -809,7 +814,8 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
       ctx.translate(-vbX, -vbY);
     }
   }
-  const inheritedFill = node.props.fill ?? "black";
+  const merged = mergeStyleIntoProps(node.props);
+  const inheritedFill = merged.fill ?? "black";
   const children = node.props.children;
   if (children != null) {
     const childArray = Array.isArray(children) ? children : [children];
@@ -822,7 +828,8 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
   ctx.restore();
 }
 function drawSvgChild(ctx, child, inheritedFill) {
-  const { type, props } = child;
+  const { type } = child;
+  const props = mergeStyleIntoProps(child.props);
   switch (type) {
     case "path":
       drawPath(ctx, props, inheritedFill);
@@ -919,7 +926,8 @@ function drawPolyline(ctx, props, inheritedFill) {
 function drawGroup(ctx, node, inheritedFill) {
   const children = node.children ?? node.props.children;
   if (children == null) return;
-  const groupFill = node.props.fill ?? inheritedFill;
+  const merged = mergeStyleIntoProps(node.props);
+  const groupFill = merged.fill ?? inheritedFill;
   const childArray = Array.isArray(children) ? children : [children];
   for (const child of childArray) {
     if (child != null && typeof child === "object") {
@@ -948,9 +956,9 @@ function applyStroke(ctx, props, path) {
   const stroke = props.stroke;
   if (!stroke || stroke === "none") return;
   ctx.strokeStyle = stroke;
-  ctx.lineWidth = Number(props.strokeWidth ?? 1);
-  ctx.lineCap = props.strokeLinecap ?? "butt";
-  ctx.lineJoin = props.strokeLinejoin ?? "miter";
+  ctx.lineWidth = Number(props.strokeWidth ?? props["stroke-width"] ?? 1);
+  ctx.lineCap = props.strokeLinecap ?? props["stroke-linecap"] ?? "butt";
+  ctx.lineJoin = props.strokeLinejoin ?? props["stroke-linejoin"] ?? "miter";
   ctx.stroke(path);
 }
 
@@ -1168,6 +1176,34 @@ function drawTextDecoration(ctx, seg, offsetX, offsetY) {
 }
 
 // src/jsx/draw/index.ts
+var canvasPool = /* @__PURE__ */ new Map();
+function acquireOffscreen(w, h) {
+  const key = `${w}x${h}`;
+  const stack = canvasPool.get(key);
+  if (stack) {
+    while (stack.length > 0) {
+      const ref = stack.pop();
+      const canvas2 = ref.deref();
+      if (canvas2) {
+        const ctx = canvas2.getContext("2d");
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(0, 0, w, h);
+        return [canvas2, ctx];
+      }
+    }
+  }
+  const canvas = createCanvas2(w, h);
+  return [canvas, canvas.getContext("2d")];
+}
+function releaseOffscreen(canvas) {
+  const key = `${canvas.width}x${canvas.height}`;
+  let stack = canvasPool.get(key);
+  if (!stack) {
+    stack = [];
+    canvasPool.set(key, stack);
+  }
+  stack.push(new WeakRef(canvas));
+}
 async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
   const x = parentX + node.x;
   const y = parentY + node.y;
@@ -1175,6 +1211,61 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
   if (style.display === "none") return;
   const opacity = style.opacity ?? 1;
   if (opacity <= 0) return;
+  const scaleInfo = style.transform ? extractScale(style.transform) : null;
+  if (scaleInfo && (scaleInfo.sx !== 1 || scaleInfo.sy !== 1)) {
+    const sx = scaleInfo.sx;
+    const sy = scaleInfo.sy;
+    const transformWithoutScale = scaleInfo.remaining;
+    const qx = Math.max(1, Math.ceil(Math.abs(sx)));
+    const qy = Math.max(1, Math.ceil(Math.abs(sy)));
+    const bufW = Math.ceil((width + 2) * qx);
+    const bufH = Math.ceil((height + 2) * qy);
+    if (bufW > 0 && bufH > 0) {
+      const [offscreen, offCtx] = acquireOffscreen(bufW, bufH);
+      offCtx.save();
+      offCtx.scale(qx, qy);
+      await drawNodeInner(
+        offCtx,
+        node,
+        parentX,
+        parentY,
+        1 - x,
+        1 - y,
+        debug,
+        emojiStyle,
+        transformWithoutScale
+      );
+      offCtx.restore();
+      ctx.save();
+      if (opacity < 1) {
+        ctx.globalAlpha *= opacity;
+      }
+      let ox = x + width / 2;
+      let oy = y + height / 2;
+      if (style.transformOrigin) {
+        const parts = style.transformOrigin.split(/\s+/);
+        ox = resolveOrigin(parts[0], x, width);
+        oy = resolveOrigin(parts[1], y, height);
+      }
+      ctx.translate(ox, oy);
+      ctx.scale(sx, sy);
+      ctx.translate(-ox, -oy);
+      ctx.drawImage(
+        offscreen,
+        0,
+        0,
+        bufW,
+        bufH,
+        x - 1,
+        y - 1,
+        width + 2,
+        height + 2
+      );
+      releaseOffscreen(offscreen);
+      ctx.restore();
+      return;
+    }
+  }
   ctx.save();
   if (opacity < 1) {
     ctx.globalAlpha *= opacity;
@@ -1332,7 +1423,8 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
       imgY,
       imgW,
       imgH,
-      style
+      style,
+      node.props.__loadedImage
     );
   }
   if (node.type === "svg") {
@@ -1344,6 +1436,194 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
   }
   ctx.restore();
 }
+function extractScale(transform) {
+  const scaleMatch = transform.match(/\b(scale|scaleX|scaleY)\(([^)]+)\)/);
+  if (!scaleMatch) return null;
+  const [fullMatch, name, args] = scaleMatch;
+  const values = args.split(",").map((s) => s.trim());
+  const sx = name === "scaleY" ? 1 : parseFloat(values[0]);
+  const sy = name === "scaleX" ? 1 : parseFloat(values[name === "scale" ? 1 : 0] ?? String(sx));
+  const remaining = transform.replace(fullMatch, "").trim();
+  return { sx, sy, remaining };
+}
+async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debug, emojiStyle, overrideTransform) {
+  const x = parentX + node.x + offsetX;
+  const y = parentY + node.y + offsetY;
+  const { width, height, style } = node;
+  if (style.display === "none") return;
+  const opacity = style.opacity ?? 1;
+  if (opacity <= 0) return;
+  ctx.save();
+  if (opacity < 1) {
+    ctx.globalAlpha *= opacity;
+  }
+  if (style.filter) {
+    ctx.filter = style.filter;
+  }
+  const transformToApply = overrideTransform !== void 0 ? overrideTransform : style.transform;
+  if (transformToApply) {
+    applyTransform(
+      ctx,
+      transformToApply,
+      x,
+      y,
+      width,
+      height,
+      style.transformOrigin
+    );
+  }
+  const isClipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
+  if (isClipped) {
+    const borderRadius = getBorderRadiusFromStyle(style);
+    applyClip(ctx, x, y, width, height, borderRadius);
+  }
+  if (style.backgroundColor || style.borderTopWidth || style.borderRightWidth || style.borderBottomWidth || style.borderLeftWidth || style.boxShadow) {
+    drawRect(ctx, x, y, width, height, style);
+  }
+  if (style.backgroundImage) {
+    const gradient = createGradientFromCSS(
+      ctx,
+      style.backgroundImage,
+      x,
+      y,
+      width,
+      height
+    );
+    if (gradient) {
+      ctx.fillStyle = gradient;
+      const borderRadius = getBorderRadiusFromStyle(style);
+      if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
+        ctx.beginPath();
+        roundedRect(
+          ctx,
+          x,
+          y,
+          width,
+          height,
+          borderRadius.topLeft,
+          borderRadius.topRight,
+          borderRadius.bottomRight,
+          borderRadius.bottomLeft
+        );
+        ctx.fill();
+      } else {
+        ctx.fillRect(x, y, width, height);
+      }
+    } else {
+      const urlMatch = style.backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+      if (urlMatch) {
+        const borderRadius = getBorderRadiusFromStyle(style);
+        const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
+        if (hasRadius2) {
+          applyClip(ctx, x, y, width, height, borderRadius);
+        }
+        const image = await loadImage3(urlMatch[1]);
+        const bgSize = style.backgroundSize;
+        if (bgSize === "cover") {
+          const r = computeCover(
+            image.width,
+            image.height,
+            x,
+            y,
+            width,
+            height
+          );
+          ctx.drawImage(image, r.sx, r.sy, r.sw, r.sh, r.dx, r.dy, r.dw, r.dh);
+        } else {
+          let tileW, tileH;
+          if (bgSize === "contain") {
+            const r = computeContain(
+              image.width,
+              image.height,
+              0,
+              0,
+              width,
+              height
+            );
+            tileW = r.dw;
+            tileH = r.dh;
+          } else if (bgSize === "100% 100%") {
+            tileW = width;
+            tileH = height;
+          } else {
+            tileW = image.width;
+            tileH = image.height;
+          }
+          for (let ty = y; ty < y + height; ty += tileH) {
+            for (let tx = x; tx < x + width; tx += tileW) {
+              ctx.drawImage(image, tx, ty, tileW, tileH);
+            }
+          }
+        }
+      }
+    }
+  }
+  if (debug) {
+    ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x, y, width, height);
+  }
+  if (node.textContent !== void 0 && node.textContent !== "") {
+    const paddingTop = toNumber2(style.paddingTop);
+    const paddingLeft = toNumber2(style.paddingLeft);
+    const paddingRight = toNumber2(style.paddingRight);
+    const borderTopW = toNumber2(style.borderTopWidth);
+    const borderLeftW = toNumber2(style.borderLeftWidth);
+    const borderRightW = toNumber2(style.borderRightWidth);
+    const contentX = x + paddingLeft + borderLeftW;
+    const contentY = y + paddingTop + borderTopW;
+    const contentWidth = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
+    const textLayout = layoutText(
+      node.textContent,
+      style,
+      contentWidth,
+      ctx,
+      !!emojiStyle
+    );
+    await drawText(
+      ctx,
+      textLayout.segments,
+      contentX,
+      contentY,
+      style.textShadow,
+      emojiStyle
+    );
+  }
+  if (node.type === "img" && node.props.src) {
+    const paddingTop = toNumber2(style.paddingTop);
+    const paddingLeft = toNumber2(style.paddingLeft);
+    const paddingRight = toNumber2(style.paddingRight);
+    const paddingBottom = toNumber2(style.paddingBottom);
+    const imgX = x + paddingLeft;
+    const imgY = y + paddingTop;
+    const imgW = width - paddingLeft - paddingRight;
+    const imgH = height - paddingTop - paddingBottom;
+    if (!isClipped) {
+      const borderRadius = getBorderRadiusFromStyle(style);
+      if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
+        applyClip(ctx, imgX, imgY, imgW, imgH, borderRadius);
+      }
+    }
+    await drawImage(
+      ctx,
+      node.props.src,
+      imgX,
+      imgY,
+      imgW,
+      imgH,
+      style,
+      node.props.__loadedImage
+    );
+  }
+  if (node.type === "svg") {
+    drawSvgContainer(ctx, node, x, y, width, height);
+  } else {
+    for (const child of node.children) {
+      await drawNodeInner(ctx, child, x, y, 0, 0, debug, emojiStyle, void 0);
+    }
+  }
+  ctx.restore();
+}
 function applyTransform(ctx, transform, x, y, width, height, transformOrigin) {
   let ox = x + width / 2;
   let oy = y + height / 2;
@@ -1435,6 +1715,9 @@ function ensureFontsRegistered(fonts) {
   }
 }
 
+// src/jsx/layout.ts
+import { loadImage as loadImage4 } from "@napi-rs/canvas";
+
 // src/jsx/style/expand.ts
 var SIDES = ["Top", "Right", "Bottom", "Left"];
 function parseSides(value) {
@@ -1643,6 +1926,99 @@ function resolveStyle(rawStyle, parentStyle) {
   }
   return style;
 }
+var DIMENSION_PROPS = [
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "rowGap",
+  "columnGap",
+  "flexBasis"
+];
+function resolveUnit(value, viewportWidth, viewportHeight, fontSize, rootFontSize) {
+  if (value.endsWith("%") || value === "auto") return value;
+  if (value.endsWith("vmin")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n / 100 * Math.min(viewportWidth, viewportHeight);
+  }
+  if (value.endsWith("vmax")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n / 100 * Math.max(viewportWidth, viewportHeight);
+  }
+  if (value.endsWith("vw")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n / 100 * viewportWidth;
+  }
+  if (value.endsWith("vh")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n / 100 * viewportHeight;
+  }
+  if (value.endsWith("rem")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * rootFontSize;
+  }
+  if (value.endsWith("em")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * fontSize;
+  }
+  if (value.endsWith("px")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n;
+  }
+  if (value.endsWith("pt")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * (96 / 72);
+  }
+  if (value.endsWith("pc")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * 16;
+  }
+  if (value.endsWith("in")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * 96;
+  }
+  if (value.endsWith("cm")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * (96 / 2.54);
+  }
+  if (value.endsWith("mm")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * (96 / 25.4);
+  }
+  return value;
+}
+function resolveUnits(style, viewportWidth, viewportHeight, rootFontSize = DEFAULT_STYLE.fontSize) {
+  const fontSize = typeof style.fontSize === "number" ? style.fontSize : rootFontSize;
+  for (const prop of DIMENSION_PROPS) {
+    const value = style[prop];
+    if (typeof value !== "string") continue;
+    const resolved = resolveUnit(
+      value,
+      viewportWidth,
+      viewportHeight,
+      fontSize,
+      rootFontSize
+    );
+    if (resolved !== value) {
+      style[prop] = resolved;
+    }
+  }
+  return style;
+}
 
 // src/jsx/yoga.ts
 import Yoga, {
@@ -1831,12 +2207,14 @@ function applyEdgeValue(node, setter, edge, value) {
 }
 
 // src/jsx/layout.ts
-function buildLayoutTree(element, containerWidth, containerHeight, ctx, emojiEnabled) {
+async function buildLayoutTree(element, containerWidth, containerHeight, ctx, emojiEnabled) {
   const rootYogaNode = createYogaNode();
-  const rootNode = buildNode(
+  const rootNode = await buildNode(
     element,
     DEFAULT_STYLE,
     rootYogaNode,
+    containerWidth,
+    containerHeight,
     ctx,
     emojiEnabled
   );
@@ -1847,7 +2225,7 @@ function buildLayoutTree(element, containerWidth, containerHeight, ctx, emojiEna
   freeYogaNode(rootYogaNode);
   return layoutTree;
 }
-function buildNode(element, parentStyle, yogaNode, ctx, emojiEnabled) {
+async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewportHeight, ctx, emojiEnabled) {
   if (element === null || element === void 0 || typeof element === "boolean") {
     return {
       type: "empty",
@@ -1880,7 +2258,17 @@ function buildNode(element, parentStyle, yogaNode, ctx, emojiEnabled) {
         continue;
       const childYogaNode = createYogaNode();
       yogaNode.insertChild(childYogaNode, children2.length);
-      children2.push(buildNode(child, style2, childYogaNode, ctx, emojiEnabled));
+      children2.push(
+        await buildNode(
+          child,
+          style2,
+          childYogaNode,
+          viewportWidth,
+          viewportHeight,
+          ctx,
+          emojiEnabled
+        )
+      );
     }
     return {
       type: "div",
@@ -1896,12 +2284,21 @@ function buildNode(element, parentStyle, yogaNode, ctx, emojiEnabled) {
     const rendered = type(
       el.props ?? {}
     );
-    return buildNode(rendered, parentStyle, yogaNode, ctx, emojiEnabled);
+    return await buildNode(
+      rendered,
+      parentStyle,
+      yogaNode,
+      viewportWidth,
+      viewportHeight,
+      ctx,
+      emojiEnabled
+    );
   }
   const props = el.props ?? {};
   const rawStyle = props.style ?? {};
   const expanded = expandStyle(rawStyle);
   const style = resolveStyle(expanded, parentStyle);
+  resolveUnits(style, viewportWidth, viewportHeight);
   const tagName = String(type);
   if (tagName === "svg") {
     if (props.width != null && style.width === void 0)
@@ -1928,6 +2325,32 @@ function buildNode(element, parentStyle, yogaNode, ctx, emojiEnabled) {
       }
     }
   }
+  if (tagName === "img") {
+    if (props.width != null && style.width === void 0)
+      style.width = Number(props.width);
+    if (props.height != null && style.height === void 0)
+      style.height = Number(props.height);
+    const src = props.src;
+    if (src) {
+      try {
+        const image = await loadImage4(src);
+        const naturalW = image.width;
+        const naturalH = image.height;
+        const w = typeof style.width === "number" ? style.width : void 0;
+        const h = typeof style.height === "number" ? style.height : void 0;
+        if (w !== void 0 && h === void 0 && naturalW > 0) {
+          style.height = w * (naturalH / naturalW);
+        } else if (h !== void 0 && w === void 0 && naturalH > 0) {
+          style.width = h * (naturalW / naturalH);
+        } else if (w === void 0 && h === void 0) {
+          style.width = naturalW;
+          style.height = naturalH;
+        }
+        props.__loadedImage = image;
+      } catch {
+      }
+    }
+  }
   applyStylesToYoga(yogaNode, style);
   if (tagName === "svg") {
     return {
@@ -1976,7 +2399,17 @@ function buildNode(element, parentStyle, yogaNode, ctx, emojiEnabled) {
         continue;
       const childYogaNode = createYogaNode();
       yogaNode.insertChild(childYogaNode, children.length);
-      children.push(buildNode(child, style, childYogaNode, ctx, emojiEnabled));
+      children.push(
+        await buildNode(
+          child,
+          style,
+          childYogaNode,
+          viewportWidth,
+          viewportHeight,
+          ctx,
+          emojiEnabled
+        )
+      );
     }
   }
   return {
@@ -2042,12 +2475,18 @@ async function renderReactElement(ctx, element, options) {
   const width = ctx.canvas.width;
   const height = ctx.canvas.height;
   const emojiStyle = options.emoji === "none" ? void 0 : options.emoji ?? "twemoji";
-  const layoutTree = buildLayoutTree(element, width, height, ctx, !!emojiStyle);
+  const layoutTree = await buildLayoutTree(
+    element,
+    width,
+    height,
+    ctx,
+    !!emojiStyle
+  );
   await drawNode(ctx, layoutTree, 0, 0, options.debug ?? false, emojiStyle);
 }
 
 // src/index.ts
-function createCanvas2(width, height) {
+function createCanvas3(width, height) {
   const canvas = _createCanvas(width, height);
   const origEncode = canvas.encode.bind(canvas);
   canvas.encode = (async (...args) => Buffer.from(await origEncode(...args)));
@@ -2058,8 +2497,8 @@ export {
   GlobalFonts2 as GlobalFonts,
   Image,
   LottieAnimation,
-  createCanvas2 as createCanvas,
-  loadImage4 as loadImage,
+  createCanvas3 as createCanvas,
+  loadImage5 as loadImage,
   loadLottie,
   registerFont,
   registerFontFromPath,