@effing/canvas 0.22.0 → 0.22.2

package/dist/index.d.ts

@@ -93,7 +93,7 @@ type RenderReactElementOptions = {
  *
  * await renderReactElement(ctx, <MyComponent />, { fonts: [myFont] });
  *
- * const png = canvas.encodeSync("png");
+ * const png = await canvas.encode("png");
  * ```
  *
  * @example HiDPI rendering (2x)

package/dist/index.js

@@ -764,8 +764,7 @@ function acquireOffscreen(w, h) {
       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);
+        ctx.reset();
         return [canvas2, ctx];
       }
     }
@@ -1041,6 +1040,7 @@ function drawBoxShadow(ctx, x, y, width, height, boxShadow, borderRadius) {
 
 // src/jsx/draw/svg.ts
 import { Path2D } from "@napi-rs/canvas";
+import parseCssColor from "parse-css-color";
 function resolveCurrentColor(value, color) {
   if (value?.toLowerCase() === "currentcolor") return color;
   return value;
@@ -1098,10 +1098,10 @@ function parseFrac(value, fallback) {
 }
 function applyOpacity(color, opacity) {
   if (opacity >= 1) return color;
-  const m = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
-  if (m)
-    return `rgba(${parseInt(m[1], 16)}, ${parseInt(m[2], 16)}, ${parseInt(m[3], 16)}, ${opacity})`;
-  return color;
+  const parsed = parseCssColor(color);
+  if (!parsed) return color;
+  const [r, g, b] = parsed.values;
+  return `rgba(${r}, ${g}, ${b}, ${parsed.alpha * opacity})`;
 }
 function addGradientStops(gradient, def) {
   for (const stop of normalizeChildren(def)) {
@@ -1438,7 +1438,14 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
   }
   const color = node.style.color ?? "black";
   const merged = mergeStyleIntoProps(node.props);
-  const inheritedFill = resolveCurrentColor(merged.fill, color) ?? "black";
+  const inherited = {
+    fill: resolveCurrentColor(merged.fill, color) ?? "black",
+    stroke: resolveCurrentColor(merged.stroke, color),
+    strokeWidth: merged.strokeWidth ?? merged["stroke-width"],
+    strokeLinecap: merged.strokeLinecap ?? merged["stroke-linecap"],
+    strokeLinejoin: merged.strokeLinejoin ?? merged["stroke-linejoin"],
+    strokeOpacity: merged.strokeOpacity ?? merged["stroke-opacity"]
+  };
   const children = node.props.children;
   if (children != null) {
     const childArray = Array.isArray(children) ? children : [children];
@@ -1447,7 +1454,7 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
     );
     const defs = collectDefs(svgChildren);
     for (const child of svgChildren) {
-      drawSvgChild(ctx, child, inheritedFill, color, defs, vbW, vbH);
+      drawSvgChild(ctx, child, inherited, color, defs, vbW, vbH);
     }
   }
   ctx.restore();
@@ -1604,15 +1611,17 @@ function applyFilter(filterDef, sourceGraphic, w, h) {
   }
   return lastResult;
 }
-function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
+function drawSvgChild(ctx, child, inherited, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
   const { type } = child;
   const props = mergeStyleIntoProps(child.props);
   if (type === "defs" || type === "clipPath" || type === "mask" || type === "filter")
     return;
   const transform = type !== "g" ? props.transform : void 0;
-  if (transform) {
+  const opacity = type !== "g" ? Number(props.opacity ?? 1) : 1;
+  if (transform || opacity < 1) {
     ctx.save();
-    applySvgTransform(ctx, transform);
+    if (transform) applySvgTransform(ctx, transform);
+    if (opacity < 1) ctx.globalAlpha *= opacity;
   }
   const clipRef = parseUrlRef(props.clipPath ?? props["clip-path"]);
   const clipShapes = clipRef ? defs.clips.get(clipRef) : void 0;
@@ -1632,28 +1641,28 @@ function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS, vbW =
   })() : ctx;
   switch (type) {
     case "path":
-      drawPath(targetCtx, props, inheritedFill, color, defs);
+      drawPath(targetCtx, props, inherited, color, defs);
       break;
     case "circle":
-      drawCircle(targetCtx, props, inheritedFill, color, defs, vbW, vbH);
+      drawCircle(targetCtx, props, inherited, color, defs, vbW, vbH);
       break;
     case "rect":
-      drawSvgRect(targetCtx, props, inheritedFill, color, defs, vbW, vbH);
+      drawSvgRect(targetCtx, props, inherited, color, defs, vbW, vbH);
       break;
     case "line":
-      drawLine(targetCtx, props, color, defs, vbW, vbH);
+      drawLine(targetCtx, props, inherited, color, defs, vbW, vbH);
       break;
     case "ellipse":
-      drawEllipse(targetCtx, props, inheritedFill, color, defs, vbW, vbH);
+      drawEllipse(targetCtx, props, inherited, color, defs, vbW, vbH);
       break;
     case "polygon":
-      drawPolygon(targetCtx, props, inheritedFill, color, defs);
+      drawPolygon(targetCtx, props, inherited, color, defs);
       break;
     case "polyline":
-      drawPolyline(targetCtx, props, inheritedFill, color, defs);
+      drawPolyline(targetCtx, props, inherited, color, defs);
       break;
     case "g":
-      drawGroup(targetCtx, child, inheritedFill, color, defs, vbW, vbH);
+      drawGroup(targetCtx, child, inherited, color, defs, vbW, vbH);
       break;
   }
   if (needsOffscreen && elemCanvas) {
@@ -1663,7 +1672,15 @@ function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS, vbW =
         Math.ceil(vbH)
       );
       for (const shape of maskShapes) {
-        drawSvgChild(maskCtx, shape, "white", "white", defs, vbW, vbH);
+        drawSvgChild(
+          maskCtx,
+          shape,
+          { fill: "white" },
+          "white",
+          defs,
+          vbW,
+          vbH
+        );
       }
       targetCtx.globalCompositeOperation = "destination-in";
       targetCtx.drawImage(maskCanvas, 0, 0);
@@ -1685,16 +1702,16 @@ function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS, vbW =
     releaseOffscreen(elemCanvas);
   }
   if (clipPath) ctx.restore();
-  if (transform) ctx.restore();
+  if (transform || opacity < 1) ctx.restore();
 }
-function drawPath(ctx, props, inheritedFill, color, defs) {
+function drawPath(ctx, props, inherited, color, defs) {
   const d = props.d;
   if (!d) return;
   const path = new Path2D(d);
   const bbox = pathBBox(d);
-  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
+  applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function drawCircle(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
+function drawCircle(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   const cx = svgLength(props.cx, vbW);
   const cy = svgLength(props.cy, vbH);
   const r = svgLength(props.r, Math.min(vbW, vbH));
@@ -1702,9 +1719,9 @@ function drawCircle(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
   const path = new Path2D();
   path.arc(cx, cy, r, 0, Math.PI * 2);
   const bbox = { x: cx - r, y: cy - r, width: 2 * r, height: 2 * r };
-  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
+  applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function drawSvgRect(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
+function drawSvgRect(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   const x = svgLength(props.x, vbW);
   const y = svgLength(props.y, vbH);
   const w = svgLength(props.width, vbW);
@@ -1723,9 +1740,9 @@ function drawSvgRect(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
     path.rect(x, y, w, h);
   }
   const bbox = { x, y, width: w, height: h };
-  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
+  applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function drawLine(ctx, props, color, defs, vbW = 0, vbH = 0) {
+function drawLine(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   const x1 = svgLength(props.x1, vbW);
   const y1 = svgLength(props.y1, vbH);
   const x2 = svgLength(props.x2, vbW);
@@ -1739,9 +1756,9 @@ function drawLine(ctx, props, color, defs, vbW = 0, vbH = 0) {
     width: Math.abs(x2 - x1),
     height: Math.abs(y2 - y1)
   };
-  applyStroke(ctx, props, path, color, defs, bbox);
+  applyStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function drawEllipse(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
+function drawEllipse(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   const cx = svgLength(props.cx, vbW);
   const cy = svgLength(props.cy, vbH);
   const rx = svgLength(props.rx, vbW);
@@ -1755,9 +1772,9 @@ function drawEllipse(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
     width: 2 * rx,
     height: 2 * ry
   };
-  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
+  applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function drawPolygon(ctx, props, inheritedFill, color, defs) {
+function drawPolygon(ctx, props, inherited, color, defs) {
   const points = parsePoints(props.points);
   if (points.length < 2) return;
   const path = new Path2D();
@@ -1767,9 +1784,9 @@ function drawPolygon(ctx, props, inheritedFill, color, defs) {
   }
   path.closePath();
   const bbox = pointsBBox(points);
-  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
+  applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function drawPolyline(ctx, props, inheritedFill, color, defs) {
+function drawPolyline(ctx, props, inherited, color, defs) {
   const points = parsePoints(props.points);
   if (points.length < 2) return;
   const path = new Path2D();
@@ -1778,7 +1795,7 @@ function drawPolyline(ctx, props, inheritedFill, color, defs) {
     path.lineTo(points[i][0], points[i][1]);
   }
   const bbox = pointsBBox(points);
-  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
+  applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
 function applySvgTransform(ctx, transform) {
   const re = /\b(translate|scale|rotate|skewX|skewY|matrix)\s*\(([^)]*)\)/g;
@@ -1841,22 +1858,31 @@ function applySvgTransform(ctx, transform) {
     }
   }
 }
-function drawGroup(ctx, node, inheritedFill, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
+function drawGroup(ctx, node, inherited, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
   const children = normalizeChildren(node);
   if (children.length === 0) return;
   const merged = mergeStyleIntoProps(node.props);
-  const groupFill = resolveCurrentColor(merged.fill, color) ?? inheritedFill;
+  const groupInherited = {
+    fill: resolveCurrentColor(merged.fill, color) ?? inherited.fill,
+    stroke: resolveCurrentColor(merged.stroke, color) ?? inherited.stroke,
+    strokeWidth: merged.strokeWidth ?? merged["stroke-width"] ?? inherited.strokeWidth,
+    strokeLinecap: merged.strokeLinecap ?? merged["stroke-linecap"] ?? inherited.strokeLinecap,
+    strokeLinejoin: merged.strokeLinejoin ?? merged["stroke-linejoin"] ?? inherited.strokeLinejoin,
+    strokeOpacity: merged.strokeOpacity ?? merged["stroke-opacity"] ?? inherited.strokeOpacity
+  };
+  const opacity = Number(merged.opacity ?? 1);
   const transform = merged.transform;
-  if (transform) {
+  if (transform || opacity < 1) {
     ctx.save();
-    applySvgTransform(ctx, transform);
+    if (transform) applySvgTransform(ctx, transform);
+    if (opacity < 1) ctx.globalAlpha *= opacity;
   }
   for (const child of children) {
     if (child != null && typeof child === "object") {
-      drawSvgChild(ctx, child, groupFill, color, defs, vbW, vbH);
+      drawSvgChild(ctx, child, groupInherited, color, defs, vbW, vbH);
     }
   }
-  if (transform) {
+  if (transform || opacity < 1) {
     ctx.restore();
   }
 }
@@ -1869,8 +1895,8 @@ function parsePoints(value) {
   }
   return result;
 }
-function applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox) {
-  const fill = resolveCurrentColor(props.fill, color) ?? inheritedFill;
+function applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox) {
+  const fill = resolveCurrentColor(props.fill, color) ?? inherited.fill;
   const fillRule = props.fillRule ?? props["fill-rule"];
   const fillOpacity = Number(props.fillOpacity ?? props["fill-opacity"] ?? 1);
   const fillRef = parseUrlRef(fill);
@@ -1902,17 +1928,19 @@ function applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox)
     ctx.fillStyle = applyOpacity(fill, fillOpacity);
     ctx.fill(path, fillRule ?? "nonzero");
   }
-  applyStroke(ctx, props, path, color, defs, bbox);
+  applyStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function applyStroke(ctx, props, path, color, defs, bbox) {
-  const stroke = resolveCurrentColor(props.stroke, color);
+function applyStroke(ctx, props, path, inherited, color, defs, bbox) {
+  const stroke = resolveCurrentColor(props.stroke, color) ?? inherited.stroke;
   if (!stroke || stroke === "none") return;
   const strokeOpacity = Number(
-    props.strokeOpacity ?? props["stroke-opacity"] ?? 1
+    props.strokeOpacity ?? props["stroke-opacity"] ?? inherited.strokeOpacity ?? 1
   );
-  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.lineWidth = Number(
+    props.strokeWidth ?? props["stroke-width"] ?? inherited.strokeWidth ?? 1
+  );
+  ctx.lineCap = props.strokeLinecap ?? props["stroke-linecap"] ?? inherited.strokeLinecap ?? "butt";
+  ctx.lineJoin = props.strokeLinejoin ?? props["stroke-linejoin"] ?? inherited.strokeLinejoin ?? "miter";
   const strokeRef = parseUrlRef(stroke);
   if (strokeRef) {
     const gradientDef = defs.gradients.get(strokeRef);
@@ -3194,11 +3222,21 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
   if (tagName === "svg") {
     if (props.width != null && style.width === void 0) {
       const v = props.width;
-      style.width = typeof v === "string" && v.endsWith("%") ? v : Number(v);
+      if (typeof v === "string") {
+        const resolved = resolveUnit(v, viewportWidth, viewportHeight, 16, 16);
+        style.width = typeof resolved === "string" && resolved.endsWith("%") ? resolved : Number(resolved);
+      } else {
+        style.width = Number(v);
+      }
     }
     if (props.height != null && style.height === void 0) {
       const v = props.height;
-      style.height = typeof v === "string" && v.endsWith("%") ? v : Number(v);
+      if (typeof v === "string") {
+        const resolved = resolveUnit(v, viewportWidth, viewportHeight, 16, 16);
+        style.height = typeof resolved === "string" && resolved.endsWith("%") ? resolved : Number(resolved);
+      } else {
+        style.height = Number(v);
+      }
     }
     const viewBox = props.viewBox;
     if (viewBox) {