@effing/canvas 0.22.1 → 0.22.3

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

@@ -23,6 +23,69 @@ function renderLottieFrame(ctx, animation, frame) {
 // src/jsx/draw/index.ts
 import { loadImage as loadImage3 } from "@napi-rs/canvas";
 
+// src/jsx/font.ts
+import { GlobalFonts } from "@napi-rs/canvas";
+
+// src/jsx/font-metrics.ts
+function parseFontMetrics(data) {
+  const buf = data instanceof ArrayBuffer ? data : data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
+  const view = new DataView(buf);
+  if (buf.byteLength < 12) return null;
+  const numTables = view.getUint16(4);
+  if (buf.byteLength < 12 + numTables * 16) return null;
+  let headOffset = -1;
+  let os2Offset = -1;
+  for (let i = 0; i < numTables; i++) {
+    const recordOffset = 12 + i * 16;
+    const tag = String.fromCharCode(view.getUint8(recordOffset)) + String.fromCharCode(view.getUint8(recordOffset + 1)) + String.fromCharCode(view.getUint8(recordOffset + 2)) + String.fromCharCode(view.getUint8(recordOffset + 3));
+    const offset = view.getUint32(recordOffset + 8);
+    if (tag === "head") headOffset = offset;
+    else if (tag === "OS/2") os2Offset = offset;
+  }
+  if (headOffset < 0 || os2Offset < 0) return null;
+  if (buf.byteLength < headOffset + 20) return null;
+  const unitsPerEm = view.getUint16(headOffset + 18);
+  if (buf.byteLength < os2Offset + 74) return null;
+  const sTypoAscender = view.getInt16(os2Offset + 68);
+  const sTypoDescender = view.getInt16(os2Offset + 70);
+  const sTypoLineGap = view.getInt16(os2Offset + 72);
+  return { unitsPerEm, sTypoAscender, sTypoDescender, sTypoLineGap };
+}
+
+// src/jsx/font.ts
+var registeredFonts = /* @__PURE__ */ new Set();
+var metricsCache = /* @__PURE__ */ new Map();
+function registerFont(font) {
+  const key = `${font.name}:${font.weight}:${font.style}`;
+  if (registeredFonts.has(key)) return;
+  const buffer = Buffer.isBuffer(font.data) ? font.data : Buffer.from(font.data);
+  GlobalFonts.register(buffer, font.name);
+  const metrics = parseFontMetrics(font.data);
+  if (metrics) {
+    metricsCache.set(key, metrics);
+  }
+  registeredFonts.add(key);
+}
+function getFontMetrics(family, weight, style) {
+  const exact = metricsCache.get(`${family}:${weight}:${style}`);
+  if (exact) return exact;
+  for (const [key, metrics] of metricsCache) {
+    if (key.startsWith(`${family}:`)) return metrics;
+  }
+  return null;
+}
+function registerFontFromPath(path, nameAlias) {
+  GlobalFonts.registerFromPath(path, nameAlias ?? "");
+}
+function registeredFamilies() {
+  return GlobalFonts.families.map((f) => f.family);
+}
+function ensureFontsRegistered(fonts) {
+  for (const font of fonts) {
+    registerFont(font);
+  }
+}
+
 // src/jsx/language.ts
 function isEmoji(char) {
   const cp = char.codePointAt(0);
@@ -110,12 +173,19 @@ function measureText(text, fontSize, fontFamily, fontWeight = 400, fontStyle = "
     height: ascent + descent
   };
 }
-function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHeight, edge, ctx) {
+function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHeight, edge, ctx, fontMetrics) {
   const c = ctx ?? getScratchCtx();
   setFont(c, fontSize, fontFamily, fontWeight, fontStyle);
   const refMetrics = c.measureText("M");
-  const fontAscent = refMetrics.fontBoundingBoxAscent ?? refMetrics.actualBoundingBoxAscent ?? fontSize * 0.8;
-  const fontDescent = refMetrics.fontBoundingBoxDescent ?? refMetrics.actualBoundingBoxDescent ?? fontSize * 0.2;
+  let fontAscent;
+  let fontDescent;
+  if (fontMetrics) {
+    fontAscent = fontMetrics.sTypoAscender / fontMetrics.unitsPerEm * fontSize;
+    fontDescent = -fontMetrics.sTypoDescender / fontMetrics.unitsPerEm * fontSize;
+  } else {
+    fontAscent = refMetrics.fontBoundingBoxAscent ?? refMetrics.actualBoundingBoxAscent ?? fontSize * 0.8;
+    fontDescent = refMetrics.fontBoundingBoxDescent ?? refMetrics.actualBoundingBoxDescent ?? fontSize * 0.2;
+  }
   const parts = edge.trim().split(/\s+/);
   const overEdge = parts[0] ?? "text";
   const underEdge = parts.length > 1 ? parts[1] : overEdge;
@@ -230,10 +300,12 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
     fontStyle,
     ctx
   );
+  const fontMetrics = getFontMetrics(fontFamily, fontWeight, fontStyle);
   const lineHeightPx = resolveLineHeight(
     style.lineHeight,
     fontSize,
-    refMetrics
+    refMetrics,
+    fontMetrics
   );
   const letterSpacing = typeof style.letterSpacing === "number" ? style.letterSpacing : 0;
   const whiteSpace = style.whiteSpace ?? "normal";
@@ -338,10 +410,18 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
       fontStyle,
       ctx
     );
+    let baselineY;
+    if (fontMetrics) {
+      const typoAscent = fontMetrics.sTypoAscender / fontMetrics.unitsPerEm * fontSize;
+      const typoDescent = -fontMetrics.sTypoDescender / fontMetrics.unitsPerEm * fontSize;
+      baselineY = totalHeight + (lineHeightPx + typoAscent - typoDescent) / 2;
+    } else {
+      baselineY = totalHeight + (lineHeightPx + metrics.ascent - metrics.descent) / 2;
+    }
     segments.push({
       text: line,
       x,
-      y: totalHeight + (lineHeightPx + metrics.ascent - metrics.descent) / 2,
+      y: baselineY,
       width: lineWidth,
       height: lineHeightPx,
       fontSize,
@@ -367,7 +447,8 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
       fontStyle,
       lineHeightPx,
       textBoxEdge,
-      ctx
+      ctx,
+      fontMetrics
     );
     if (textBoxTrim === "trim-start" || textBoxTrim === "trim-both") {
       for (const seg of segments) {
@@ -385,9 +466,13 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
     height: totalHeight
   };
 }
-function resolveLineHeight(lineHeight, fontSize, metrics) {
+function resolveLineHeight(lineHeight, fontSize, canvasMetrics, fontMetrics) {
   if (lineHeight === void 0 || lineHeight === "normal") {
-    return metrics ? metrics.ascent + metrics.descent : fontSize * 1.2;
+    if (fontMetrics) {
+      const { sTypoAscender, sTypoDescender, sTypoLineGap, unitsPerEm } = fontMetrics;
+      return (sTypoAscender - sTypoDescender + sTypoLineGap) / unitsPerEm * fontSize;
+    }
+    return canvasMetrics ? canvasMetrics.ascent + canvasMetrics.descent : fontSize * 1.2;
   }
   if (typeof lineHeight === "number") {
     return lineHeight > 5 ? lineHeight : lineHeight * fontSize;
@@ -764,8 +849,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];
       }
     }
@@ -1618,9 +1702,11 @@ function drawSvgChild(ctx, child, inherited, color, defs = EMPTY_DEFS, vbW = 0,
   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;
@@ -1701,7 +1787,7 @@ function drawSvgChild(ctx, child, inherited, color, defs = EMPTY_DEFS, vbW = 0,
     releaseOffscreen(elemCanvas);
   }
   if (clipPath) ctx.restore();
-  if (transform) ctx.restore();
+  if (transform || opacity < 1) ctx.restore();
 }
 function drawPath(ctx, props, inherited, color, defs) {
   const d = props.d;
@@ -1869,17 +1955,19 @@ function drawGroup(ctx, node, inherited, color, defs = EMPTY_DEFS, vbW = 0, vbH
     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, groupInherited, color, defs, vbW, vbH);
     }
   }
-  if (transform) {
+  if (transform || opacity < 1) {
     ctx.restore();
   }
 }
@@ -2521,28 +2609,6 @@ function parseAngle(value) {
   return parseFloat(value);
 }
 
-// src/jsx/font.ts
-import { GlobalFonts } from "@napi-rs/canvas";
-var registeredFonts = /* @__PURE__ */ new Set();
-function registerFont(font) {
-  const key = `${font.name}:${font.weight}:${font.style}`;
-  if (registeredFonts.has(key)) return;
-  const buffer = Buffer.isBuffer(font.data) ? font.data : Buffer.from(font.data);
-  GlobalFonts.register(buffer, font.name);
-  registeredFonts.add(key);
-}
-function registerFontFromPath(path, nameAlias) {
-  GlobalFonts.registerFromPath(path, nameAlias ?? "");
-}
-function registeredFamilies() {
-  return GlobalFonts.families.map((f) => f.family);
-}
-function ensureFontsRegistered(fonts) {
-  for (const font of fonts) {
-    registerFont(font);
-  }
-}
-
 // src/jsx/layout.ts
 import { loadImage as loadImage4 } from "@napi-rs/canvas";
 
@@ -3219,11 +3285,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) {