@effing/canvas 0.18.5 → 0.18.6

package/dist/index.js

@@ -74,8 +74,28 @@ function getScratchCtx() {
   }
   return scratchCtx;
 }
+var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-serif",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "math",
+  "emoji",
+  "fangsong"
+]);
+function quoteFontFamily(family) {
+  if (!family || GENERIC_FAMILIES.has(family)) return family;
+  return `"${family}"`;
+}
 function setFont(ctx, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal") {
-  ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+  const quoted = fontFamily.split(",").map((f) => quoteFontFamily(f.trim())).join(", ");
+  ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${quoted}`;
 }
 function measureText(text, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal", ctx) {
   const c = ctx ?? getScratchCtx();
@@ -678,10 +698,7 @@ function drawRect(ctx, x, y, width, height, style) {
   drawBorders(ctx, x, y, width, height, style, borderRadius);
 }
 function resolveRadius(v, width, height) {
-  if (typeof v === "string" && v.endsWith("%")) {
-    const pct = parseFloat(v) / 100;
-    return pct * Math.min(width, height);
-  }
+  if (typeof v === "string") return parseCSSLength(v, Math.min(width, height));
   return toNumber(v);
 }
 function getBorderRadius(style, width, height) {
@@ -793,12 +810,6 @@ function drawBoxShadow(ctx, x, y, width, height, boxShadow, borderRadius) {
   ctx.fill();
   ctx.restore();
 }
-function toNumber(v) {
-  if (typeof v === "number") return v;
-  if (v === void 0 || v === null) return 0;
-  const n = parseFloat(String(v));
-  return isNaN(n) ? 0 : n;
-}
 
 // src/jsx/draw/svg.ts
 import { Path2D } from "@napi-rs/canvas";
@@ -811,6 +822,97 @@ function mergeStyleIntoProps(props) {
   if (!style) return props;
   return { ...props, ...style };
 }
+function collectDefs(children) {
+  const defs = /* @__PURE__ */ new Map();
+  for (const child of children) {
+    if (child.type !== "defs") continue;
+    const defsChildren = normalizeChildren(child);
+    for (const def of defsChildren) {
+      if (def.type === "clipPath") {
+        const id = def.props.id;
+        if (id) {
+          defs.set(id, normalizeChildren(def));
+        }
+      }
+    }
+  }
+  return defs;
+}
+function parseUrlRef(value) {
+  if (typeof value !== "string") return void 0;
+  const m = value.match(/^url\(#(.+)\)$/);
+  return m?.[1];
+}
+function normalizeChildren(node) {
+  const raw = node.children ?? node.props.children;
+  if (raw == null) return [];
+  return Array.isArray(raw) ? raw : [raw];
+}
+function buildPath(child) {
+  const props = mergeStyleIntoProps(child.props);
+  switch (child.type) {
+    case "path": {
+      const d = props.d;
+      if (!d) return void 0;
+      return new Path2D(d);
+    }
+    case "circle": {
+      const cx = Number(props.cx ?? 0);
+      const cy = Number(props.cy ?? 0);
+      const r = Number(props.r ?? 0);
+      if (r <= 0) return void 0;
+      const p = new Path2D();
+      p.arc(cx, cy, r, 0, Math.PI * 2);
+      return p;
+    }
+    case "rect": {
+      const rx = Number(props.x ?? 0);
+      const ry = Number(props.y ?? 0);
+      const w = Number(props.width ?? 0);
+      const h = Number(props.height ?? 0);
+      if (w <= 0 || h <= 0) return void 0;
+      const p = new Path2D();
+      p.rect(rx, ry, w, h);
+      return p;
+    }
+    case "ellipse": {
+      const cx = Number(props.cx ?? 0);
+      const cy = Number(props.cy ?? 0);
+      const rx = Number(props.rx ?? 0);
+      const ry = Number(props.ry ?? 0);
+      if (rx <= 0 || ry <= 0) return void 0;
+      const p = new Path2D();
+      p.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+      return p;
+    }
+    case "polygon": {
+      const points = parsePoints(props.points);
+      if (points.length < 2) return void 0;
+      const p = new Path2D();
+      p.moveTo(points[0][0], points[0][1]);
+      for (let i = 1; i < points.length; i++) {
+        p.lineTo(points[i][0], points[i][1]);
+      }
+      p.closePath();
+      return p;
+    }
+    default:
+      return void 0;
+  }
+}
+function buildClipPath(shapes) {
+  let combined;
+  for (const shape of shapes) {
+    const p = buildPath(shape);
+    if (!p) continue;
+    if (!combined) {
+      combined = p;
+    } else {
+      combined.addPath(p);
+    }
+  }
+  return combined;
+}
 function drawSvgContainer(ctx, node, x, y, width, height) {
   ctx.save();
   ctx.translate(x, y);
@@ -831,17 +933,25 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
   const children = node.props.children;
   if (children != null) {
     const childArray = Array.isArray(children) ? children : [children];
-    for (const child of childArray) {
-      if (child != null && typeof child === "object") {
-        drawSvgChild(ctx, child, inheritedFill, color);
-      }
+    const svgChildren = childArray.filter(
+      (c) => c != null && typeof c === "object"
+    );
+    const defs = collectDefs(svgChildren);
+    for (const child of svgChildren) {
+      drawSvgChild(ctx, child, inheritedFill, color, defs);
     }
   }
   ctx.restore();
 }
-function drawSvgChild(ctx, child, inheritedFill, color) {
+function drawSvgChild(ctx, child, inheritedFill, color, defs = /* @__PURE__ */ new Map()) {
   const { type } = child;
   const props = mergeStyleIntoProps(child.props);
+  if (type === "defs" || type === "clipPath") return;
+  const clipRef = parseUrlRef(props.clipPath ?? props["clip-path"]);
+  const clipShapes = clipRef ? defs.get(clipRef) : void 0;
+  const clipPath = clipShapes ? buildClipPath(clipShapes) : void 0;
+  if (clipPath) ctx.save();
+  if (clipPath) ctx.clip(clipPath);
   switch (type) {
     case "path":
       drawPath(ctx, props, inheritedFill, color);
@@ -865,9 +975,10 @@ function drawSvgChild(ctx, child, inheritedFill, color) {
       drawPolyline(ctx, props, inheritedFill, color);
       break;
     case "g":
-      drawGroup(ctx, child, inheritedFill, color);
+      drawGroup(ctx, child, inheritedFill, color, defs);
       break;
   }
+  if (clipPath) ctx.restore();
 }
 function drawPath(ctx, props, inheritedFill, color) {
   const d = props.d;
@@ -935,15 +1046,14 @@ function drawPolyline(ctx, props, inheritedFill, color) {
   }
   applyFillAndStroke(ctx, props, path, inheritedFill, color);
 }
-function drawGroup(ctx, node, inheritedFill, color) {
-  const children = node.children ?? node.props.children;
-  if (children == null) return;
+function drawGroup(ctx, node, inheritedFill, color, defs = /* @__PURE__ */ new Map()) {
+  const children = normalizeChildren(node);
+  if (children.length === 0) return;
   const merged = mergeStyleIntoProps(node.props);
   const groupFill = resolveCurrentColor(merged.fill, color) ?? inheritedFill;
-  const childArray = Array.isArray(children) ? children : [children];
-  for (const child of childArray) {
+  for (const child of children) {
     if (child != null && typeof child === "object") {
-      drawSvgChild(ctx, child, groupFill, color);
+      drawSvgChild(ctx, child, groupFill, color, defs);
     }
   }
 }
@@ -1419,12 +1529,12 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
     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 paddingTop = toNumber(style.paddingTop);
+    const paddingLeft = toNumber(style.paddingLeft);
+    const paddingRight = toNumber(style.paddingRight);
+    const borderTopW = toNumber(style.borderTopWidth);
+    const borderLeftW = toNumber(style.borderLeftWidth);
+    const borderRightW = toNumber(style.borderRightWidth);
     const contentX = x + paddingLeft + borderLeftW;
     const contentY = y + paddingTop + borderTopW;
     const contentWidth = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
@@ -1445,10 +1555,10 @@ async function drawNode(ctx, node, parentX, parentY, debug, 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 paddingTop = toNumber(style.paddingTop);
+    const paddingLeft = toNumber(style.paddingLeft);
+    const paddingRight = toNumber(style.paddingRight);
+    const paddingBottom = toNumber(style.paddingBottom);
     const imgX = x + paddingLeft;
     const imgY = y + paddingTop;
     const imgW = width - paddingLeft - paddingRight;
@@ -1614,12 +1724,12 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
     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 paddingTop = toNumber(style.paddingTop);
+    const paddingLeft = toNumber(style.paddingLeft);
+    const paddingRight = toNumber(style.paddingRight);
+    const borderTopW = toNumber(style.borderTopWidth);
+    const borderLeftW = toNumber(style.borderLeftWidth);
+    const borderRightW = toNumber(style.borderRightWidth);
     const contentX = x + paddingLeft + borderLeftW;
     const contentY = y + paddingTop + borderTopW;
     const contentWidth = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
@@ -1640,10 +1750,10 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
     );
   }
   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 paddingTop = toNumber(style.paddingTop);
+    const paddingLeft = toNumber(style.paddingLeft);
+    const paddingRight = toNumber(style.paddingRight);
+    const paddingBottom = toNumber(style.paddingBottom);
     const imgX = x + paddingLeft;
     const imgY = y + paddingTop;
     const imgW = width - paddingLeft - paddingRight;
@@ -1674,6 +1784,10 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
   }
   ctx.restore();
 }
+function parseCSSLength(value, referenceSize) {
+  if (value.endsWith("%")) return parseFloat(value) / 100 * referenceSize;
+  return parseFloat(value);
+}
 function applyTransform(ctx, transform, x, y, width, height, transformOrigin) {
   let ox = x + width / 2;
   let oy = y + height / 2;
@@ -1690,8 +1804,11 @@ function applyTransform(ctx, transform, x, y, width, height, transformOrigin) {
       case "translate":
       case "translateX":
       case "translateY": {
-        const tx = name === "translateY" ? 0 : parseFloat(values[0]);
-        const ty = name === "translateX" ? 0 : parseFloat(values[name === "translate" ? 1 : 0] ?? "0");
+        const tx = name === "translateY" ? 0 : parseCSSLength(values[0], width);
+        const ty = name === "translateX" ? 0 : parseCSSLength(
+          values[name === "translate" ? 1 : 0] ?? "0",
+          height
+        );
         ctx.translate(tx, ty);
         break;
       }
@@ -1727,8 +1844,7 @@ function resolveOrigin(value, base, size) {
   if (value === "left" || value === "top") return base;
   if (value === "right" || value === "bottom") return base + size;
   if (value === "center") return base + size / 2;
-  if (value.endsWith("%")) return base + parseFloat(value) / 100 * size;
-  return base + parseFloat(value);
+  return base + parseCSSLength(value, size);
 }
 function parseAngle(value) {
   if (value.endsWith("deg")) return parseFloat(value) * Math.PI / 180;
@@ -1736,7 +1852,7 @@ function parseAngle(value) {
   if (value.endsWith("turn")) return parseFloat(value) * 2 * Math.PI;
   return parseFloat(value);
 }
-function toNumber2(v) {
+function toNumber(v) {
   if (typeof v === "number") return v;
   if (v === void 0 || v === null) return 0;
   const n = parseFloat(String(v));
@@ -1791,7 +1907,7 @@ function parseValue(v) {
   if (s !== "" && !isNaN(n)) return n;
   return s;
 }
-function expandStyle(raw) {
+function expandStyle(raw, fontFamilies) {
   const style = { ...raw };
   if (style.margin !== void 0) {
     const sides = parseSides(String(style.margin));
@@ -1904,7 +2020,14 @@ function expandStyle(raw) {
     if (style.overflowY === void 0) style.overflowY = style.overflow;
   }
   if (typeof style.fontFamily === "string") {
-    style.fontFamily = style.fontFamily.split(",").map((s) => s.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean).join(", ");
+    const families = style.fontFamily.split(",").map((s) => s.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean);
+    if (fontFamilies) {
+      const present = new Set(families);
+      for (const name of fontFamilies) {
+        if (!present.has(name)) families.push(name);
+      }
+    }
+    style.fontFamily = families.join(", ");
   }
   return style;
 }
@@ -2075,8 +2198,41 @@ function resolveUnits(style, viewportWidth, viewportHeight, rootFontSize = DEFAU
       style[prop] = resolved;
     }
   }
+  if (style.transform) {
+    style.transform = resolveTransformUnits(
+      style.transform,
+      viewportWidth,
+      viewportHeight,
+      fontSize,
+      rootFontSize
+    );
+  }
+  if (style.transformOrigin) {
+    style.transformOrigin = resolveTransformUnits(
+      style.transformOrigin,
+      viewportWidth,
+      viewportHeight,
+      fontSize,
+      rootFontSize
+    );
+  }
   return style;
 }
+function resolveTransformUnits(transform, viewportWidth, viewportHeight, fontSize, rootFontSize) {
+  return transform.replace(
+    /(-?\d*\.?\d+)(vw|vh|vmin|vmax|em|rem|px|pt|pc|in|cm|mm)\b/g,
+    (match) => {
+      const resolved = resolveUnit(
+        match,
+        viewportWidth,
+        viewportHeight,
+        fontSize,
+        rootFontSize
+      );
+      return typeof resolved === "number" ? String(resolved) : match;
+    }
+  );
+}
 
 // src/jsx/yoga.ts
 import Yoga, {
@@ -2265,16 +2421,18 @@ function applyEdgeValue(node, setter, edge, value) {
 }
 
 // src/jsx/layout.ts
-async function buildLayoutTree(element, containerWidth, containerHeight, ctx, emojiEnabled) {
+async function buildLayoutTree(element, containerWidth, containerHeight, ctx, emojiEnabled, fontFamilies) {
   const rootYogaNode = createYogaNode();
+  const rootStyle = fontFamilies?.length ? { ...DEFAULT_STYLE, fontFamily: fontFamilies.join(", ") } : DEFAULT_STYLE;
   const rootNode = await buildNode(
     element,
-    DEFAULT_STYLE,
+    rootStyle,
     rootYogaNode,
     containerWidth,
     containerHeight,
     ctx,
-    emojiEnabled
+    emojiEnabled,
+    fontFamilies
   );
   rootYogaNode.setWidth(containerWidth);
   rootYogaNode.setHeight(containerHeight);
@@ -2283,7 +2441,7 @@ async function buildLayoutTree(element, containerWidth, containerHeight, ctx, em
   freeYogaNode(rootYogaNode);
   return layoutTree;
 }
-async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewportHeight, ctx, emojiEnabled) {
+async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewportHeight, ctx, emojiEnabled, fontFamilies) {
   if (element === null || element === void 0 || typeof element === "boolean") {
     return {
       type: "empty",
@@ -2324,7 +2482,8 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
           viewportWidth,
           viewportHeight,
           ctx,
-          emojiEnabled
+          emojiEnabled,
+          fontFamilies
         )
       );
     }
@@ -2349,12 +2508,13 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
       viewportWidth,
       viewportHeight,
       ctx,
-      emojiEnabled
+      emojiEnabled,
+      fontFamilies
     );
   }
   const props = el.props ?? {};
   const rawStyle = props.style ?? {};
-  const expanded = expandStyle(rawStyle);
+  const expanded = expandStyle(rawStyle, fontFamilies);
   const style = resolveStyle(expanded, parentStyle);
   resolveUnits(style, viewportWidth, viewportHeight);
   const tagName = String(type);
@@ -2472,7 +2632,8 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
           viewportWidth,
           viewportHeight,
           ctx,
-          emojiEnabled
+          emojiEnabled,
+          fontFamilies
         )
       );
     }
@@ -2540,12 +2701,14 @@ 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 fontFamilies = [...new Set(options.fonts.map((f) => f.name))];
   const layoutTree = await buildLayoutTree(
     element,
     width,
     height,
     ctx,
-    !!emojiStyle
+    !!emojiStyle,
+    fontFamilies
   );
   await drawNode(ctx, layoutTree, 0, 0, options.debug ?? false, emojiStyle);
 }