@effing/canvas 0.20.0 → 0.20.1

package/dist/index.js

@@ -21,7 +21,7 @@ function renderLottieFrame(ctx, animation, frame) {
 }
 
 // src/jsx/draw/index.ts
-import { createCanvas as createCanvas2, loadImage as loadImage3 } from "@napi-rs/canvas";
+import { loadImage as loadImage3 } from "@napi-rs/canvas";
 
 // src/jsx/language.ts
 function isEmoji(char) {
@@ -752,6 +752,37 @@ async function drawImage(ctx, src, x, y, width, height, style, preloadedImage) {
   }
 }
 
+// src/jsx/draw/offscreen.ts
+import { createCanvas as createCanvas2 } from "@napi-rs/canvas";
+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));
+}
+
 // src/jsx/draw/utils.ts
 function parseCSSLength(value, referenceSize) {
   if (value.endsWith("%")) return parseFloat(value) / 100 * referenceSize;
@@ -926,17 +957,19 @@ function mergeStyleIntoProps(props) {
 function collectDefs(children) {
   const clips = /* @__PURE__ */ new Map();
   const gradients = /* @__PURE__ */ new Map();
+  const masks = /* @__PURE__ */ new Map();
   for (const child of children) {
     if (child.type !== "defs") continue;
     for (const def of normalizeChildren(child)) {
       const id = def.props.id;
       if (!id) continue;
       if (def.type === "clipPath") clips.set(id, normalizeChildren(def));
+      else if (def.type === "mask") masks.set(id, normalizeChildren(def));
       else if (def.type === "radialGradient" || def.type === "linearGradient")
         gradients.set(id, def);
     }
   }
-  return { clips, gradients };
+  return { clips, gradients, masks };
 }
 function parseUrlRef(value) {
   if (typeof value !== "string") return void 0;
@@ -1226,13 +1259,23 @@ function buildPath(child, vbW, vbH) {
       return p;
     }
     case "rect": {
-      const rx = svgLength(props.x, vbW);
-      const ry = svgLength(props.y, vbH);
+      const x = svgLength(props.x, vbW);
+      const y = svgLength(props.y, vbH);
       const w = svgLength(props.width, vbW);
       const h = svgLength(props.height, vbH);
       if (w <= 0 || h <= 0) return void 0;
+      const rxRaw = svgLength(props.rx, vbW, -1);
+      const ryRaw = svgLength(props.ry, vbH, -1);
+      let rx = rxRaw >= 0 ? rxRaw : ryRaw >= 0 ? ryRaw : 0;
+      let ry = ryRaw >= 0 ? ryRaw : rx;
+      rx = Math.min(rx, w / 2);
+      ry = Math.min(ry, h / 2);
       const p = new Path2D();
-      p.rect(rx, ry, w, h);
+      if (rx > 0 || ry > 0) {
+        p.roundRect(x, y, w, h, [rx]);
+      } else {
+        p.rect(x, y, w, h);
+      }
       return p;
     }
     case "ellipse": {
@@ -1309,43 +1352,67 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
 }
 var EMPTY_DEFS = {
   clips: /* @__PURE__ */ new Map(),
-  gradients: /* @__PURE__ */ new Map()
+  gradients: /* @__PURE__ */ new Map(),
+  masks: /* @__PURE__ */ new Map()
 };
 function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
   const { type } = child;
   const props = mergeStyleIntoProps(child.props);
-  if (type === "defs" || type === "clipPath") return;
+  if (type === "defs" || type === "clipPath" || type === "mask") return;
   const clipRef = parseUrlRef(props.clipPath ?? props["clip-path"]);
   const clipShapes = clipRef ? defs.clips.get(clipRef) : void 0;
   const clipPath = clipShapes ? buildClipPath(clipShapes, vbW, vbH) : void 0;
+  const maskRef = parseUrlRef(props.mask);
+  const maskShapes = maskRef ? defs.masks.get(maskRef) : void 0;
   if (clipPath) ctx.save();
   if (clipPath) ctx.clip(clipPath);
+  let elemCanvas;
+  const targetCtx = maskShapes ? (() => {
+    const [c, cCtx] = acquireOffscreen(Math.ceil(vbW), Math.ceil(vbH));
+    elemCanvas = c;
+    return cCtx;
+  })() : ctx;
   switch (type) {
     case "path":
-      drawPath(ctx, props, inheritedFill, color, defs);
+      drawPath(targetCtx, props, inheritedFill, color, defs);
       break;
     case "circle":
-      drawCircle(ctx, props, inheritedFill, color, defs, vbW, vbH);
+      drawCircle(targetCtx, props, inheritedFill, color, defs, vbW, vbH);
       break;
     case "rect":
-      drawSvgRect(ctx, props, inheritedFill, color, defs, vbW, vbH);
+      drawSvgRect(targetCtx, props, inheritedFill, color, defs, vbW, vbH);
       break;
     case "line":
-      drawLine(ctx, props, color, defs, vbW, vbH);
+      drawLine(targetCtx, props, color, defs, vbW, vbH);
       break;
     case "ellipse":
-      drawEllipse(ctx, props, inheritedFill, color, defs, vbW, vbH);
+      drawEllipse(targetCtx, props, inheritedFill, color, defs, vbW, vbH);
       break;
     case "polygon":
-      drawPolygon(ctx, props, inheritedFill, color, defs);
+      drawPolygon(targetCtx, props, inheritedFill, color, defs);
       break;
     case "polyline":
-      drawPolyline(ctx, props, inheritedFill, color, defs);
+      drawPolyline(targetCtx, props, inheritedFill, color, defs);
       break;
     case "g":
-      drawGroup(ctx, child, inheritedFill, color, defs, vbW, vbH);
+      drawGroup(targetCtx, child, inheritedFill, color, defs, vbW, vbH);
       break;
   }
+  if (maskShapes && elemCanvas) {
+    const [maskCanvas, maskCtx] = acquireOffscreen(
+      Math.ceil(vbW),
+      Math.ceil(vbH)
+    );
+    for (const shape of maskShapes) {
+      drawSvgChild(maskCtx, shape, "white", "white", defs, vbW, vbH);
+    }
+    targetCtx.globalCompositeOperation = "destination-in";
+    targetCtx.drawImage(maskCanvas, 0, 0);
+    targetCtx.globalCompositeOperation = "source-over";
+    ctx.drawImage(elemCanvas, 0, 0);
+    releaseOffscreen(maskCanvas);
+    releaseOffscreen(elemCanvas);
+  }
   if (clipPath) ctx.restore();
 }
 function drawPath(ctx, props, inheritedFill, color, defs) {
@@ -1366,14 +1433,24 @@ function drawCircle(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
   applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
 }
 function drawSvgRect(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
-  const rx = svgLength(props.x, vbW);
-  const ry = svgLength(props.y, vbH);
+  const x = svgLength(props.x, vbW);
+  const y = svgLength(props.y, vbH);
   const w = svgLength(props.width, vbW);
   const h = svgLength(props.height, vbH);
   if (w <= 0 || h <= 0) return;
+  const rxRaw = svgLength(props.rx, vbW, -1);
+  const ryRaw = svgLength(props.ry, vbH, -1);
+  let rx = rxRaw >= 0 ? rxRaw : ryRaw >= 0 ? ryRaw : 0;
+  let ry = ryRaw >= 0 ? ryRaw : rx;
+  rx = Math.min(rx, w / 2);
+  ry = Math.min(ry, h / 2);
   const path = new Path2D();
-  path.rect(rx, ry, w, h);
-  const bbox = { x: rx, y: ry, width: w, height: h };
+  if (rx > 0 || ry > 0) {
+    path.roundRect(x, y, w, h, [rx]);
+  } else {
+    path.rect(x, y, w, h);
+  }
+  const bbox = { x, y, width: w, height: h };
   applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
 }
 function drawLine(ctx, props, color, defs, vbW = 0, vbH = 0) {
@@ -1776,34 +1853,6 @@ 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;