@effing/canvas 0.24.5 → 0.24.7

package/dist/index.js

@@ -260,29 +260,87 @@ function resolveTransformUnits(transform, viewportWidth, viewportHeight, fontSiz
 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;
+import { inflateSync } from "zlib";
+var WOFF_SIGNATURE = 2001684038;
+function readWoffTable(view, entry) {
+  const compressed = entry.compLength < entry.origLength;
+  if (compressed) {
+    try {
+      const compData = new Uint8Array(
+        view.buffer,
+        view.byteOffset + entry.offset,
+        entry.compLength
+      );
+      const decompressed = inflateSync(compData);
+      return new DataView(
+        decompressed.buffer,
+        decompressed.byteOffset,
+        decompressed.byteLength
+      );
+    } catch {
+      return null;
+    }
+  }
+  return new DataView(
+    view.buffer,
+    view.byteOffset + entry.offset,
+    entry.origLength
+  );
+}
+function parseWoff(view) {
+  if (view.byteLength < 44) return null;
+  const numTables = view.getUint16(12);
+  if (view.byteLength < 44 + numTables * 20) return null;
+  let headEntry = null;
+  let hheaEntry = null;
+  for (let i = 0; i < numTables; i++) {
+    const r = 44 + i * 20;
+    const tag = String.fromCharCode(view.getUint8(r)) + String.fromCharCode(view.getUint8(r + 1)) + String.fromCharCode(view.getUint8(r + 2)) + String.fromCharCode(view.getUint8(r + 3));
+    const offset = view.getUint32(r + 4);
+    const compLength = view.getUint32(r + 8);
+    const origLength = view.getUint32(r + 12);
+    if (tag === "head") headEntry = { offset, compLength, origLength };
+    else if (tag === "hhea") hheaEntry = { offset, compLength, origLength };
+  }
+  if (!headEntry || !hheaEntry) return null;
+  const headView = readWoffTable(view, headEntry);
+  const hheaView = readWoffTable(view, hheaEntry);
+  if (!headView || !hheaView) return null;
+  if (headView.byteLength < 20 || hheaView.byteLength < 8) return null;
+  const unitsPerEm = headView.getUint16(18);
+  const ascender = hheaView.getInt16(4);
+  const descender = hheaView.getInt16(6);
+  return { unitsPerEm, ascender, descender };
+}
+function parseSfnt(view) {
   const numTables = view.getUint16(4);
-  if (buf.byteLength < 12 + numTables * 16) return null;
+  if (view.byteLength < 12 + numTables * 16) return null;
   let headOffset = -1;
-  let os2Offset = -1;
+  let hheaOffset = -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;
+    else if (tag === "hhea") hheaOffset = offset;
   }
-  if (headOffset < 0 || os2Offset < 0) return null;
-  if (buf.byteLength < headOffset + 20) return null;
+  if (headOffset < 0 || hheaOffset < 0) return null;
+  if (view.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 };
+  if (view.byteLength < hheaOffset + 8) return null;
+  const ascender = view.getInt16(hheaOffset + 4);
+  const descender = view.getInt16(hheaOffset + 6);
+  return { unitsPerEm, ascender, descender };
+}
+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 signature = view.getUint32(0);
+  if (signature === WOFF_SIGNATURE) {
+    return parseWoff(view);
+  }
+  return parseSfnt(view);
 }
 
 // src/jsx/font.ts
@@ -300,10 +358,13 @@ function registerFont(font) {
   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;
+  const families = family.split(",").map((f) => f.trim().replace(/^['"]|['"]$/g, ""));
+  for (const name of families) {
+    const exact = metricsCache.get(`${name}:${weight}:${style}`);
+    if (exact) return exact;
+    for (const [key, metrics] of metricsCache) {
+      if (key.startsWith(`${name}:`)) return metrics;
+    }
   }
   return null;
 }
@@ -413,8 +474,8 @@ function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHei
   let fontAscent;
   let fontDescent;
   if (fontMetrics) {
-    fontAscent = fontMetrics.sTypoAscender / fontMetrics.unitsPerEm * fontSize;
-    fontDescent = -fontMetrics.sTypoDescender / fontMetrics.unitsPerEm * fontSize;
+    fontAscent = fontMetrics.ascender / fontMetrics.unitsPerEm * fontSize;
+    fontDescent = -fontMetrics.descender / fontMetrics.unitsPerEm * fontSize;
   } else {
     fontAscent = refMetrics.fontBoundingBoxAscent ?? refMetrics.actualBoundingBoxAscent ?? fontSize * 0.8;
     fontDescent = refMetrics.fontBoundingBoxDescent ?? refMetrics.actualBoundingBoxDescent ?? fontSize * 0.2;
@@ -727,8 +788,8 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
 function resolveLineHeight(lineHeight, fontSize, canvasMetrics, fontMetrics) {
   if (lineHeight === void 0 || lineHeight === "normal") {
     if (fontMetrics) {
-      const { sTypoAscender, sTypoDescender, sTypoLineGap, unitsPerEm } = fontMetrics;
-      return (sTypoAscender - sTypoDescender + sTypoLineGap) / unitsPerEm * fontSize;
+      const { ascender, descender, unitsPerEm } = fontMetrics;
+      return (ascender - descender) / unitsPerEm * fontSize;
     }
     return canvasMetrics ? canvasMetrics.ascent + canvasMetrics.descent : fontSize * 1.2;
   }
@@ -2325,6 +2386,7 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
 
 // src/jsx/draw/text.ts
 import { loadImage as loadImage2 } from "@napi-rs/canvas";
+import parseCssColor2 from "parse-css-color";
 
 // src/jsx/emoji.ts
 var emojiApis = {
@@ -2440,12 +2502,14 @@ function loadEmojiImage(style, char) {
   return cached;
 }
 async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle) {
+  const shadow = textShadow ? parseShadow(textShadow) : null;
   for (const seg of segments) {
     if (!seg.text) continue;
     setFont(ctx, seg.fontSize, seg.fontFamily, seg.fontWeight, seg.fontStyle);
     ctx.fillStyle = seg.color;
     const x = offsetX + seg.x;
     const y = offsetY + seg.y;
+    const textAlpha = shadow ? getColorAlpha(seg.color) : 1;
     const hasStroke = seg.textStrokeWidth !== void 0 && seg.textStrokeWidth > 0;
     if (emojiStyle) {
       await drawSegmentWithEmoji(
@@ -2458,6 +2522,14 @@ async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle)
         hasStroke
       );
     } else if (seg.letterSpacing && seg.letterSpacing !== 0) {
+      if (shadow) {
+        drawShadowPass(
+          ctx,
+          shadow,
+          textAlpha,
+          () => drawTextWithLetterSpacing(ctx, seg.text, x, y, seg.letterSpacing)
+        );
+      }
       if (hasStroke) {
         drawStrokeWithLetterSpacing(
           ctx,
@@ -2471,8 +2543,13 @@ async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle)
       }
       drawTextWithLetterSpacing(ctx, seg.text, x, y, seg.letterSpacing);
     } else {
-      if (textShadow) {
-        drawTextShadow(ctx, seg.text, x, y, textShadow);
+      if (shadow) {
+        drawShadowPass(
+          ctx,
+          shadow,
+          textAlpha,
+          () => ctx.fillText(seg.text, x, y)
+        );
       }
       if (hasStroke) {
         ctx.save();
@@ -2500,10 +2577,32 @@ async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle, hasS
     seg.fontSize,
     letterSpacing
   );
+  const shadow = textShadow ? parseShadow(textShadow) : null;
+  const textAlpha = shadow ? getColorAlpha(seg.color) : 1;
   for (const run of runs) {
     if (run.kind === "text") {
-      if (textShadow) {
-        drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
+      if (shadow) {
+        if (letterSpacing !== 0) {
+          drawShadowPass(
+            ctx,
+            shadow,
+            textAlpha,
+            () => drawTextWithLetterSpacing(
+              ctx,
+              run.text,
+              x + run.x,
+              y,
+              letterSpacing
+            )
+          );
+        } else {
+          drawShadowPass(
+            ctx,
+            shadow,
+            textAlpha,
+            () => ctx.fillText(run.text, x + run.x, y)
+          );
+        }
       }
       if (hasStroke) {
         if (letterSpacing !== 0) {
@@ -2563,17 +2662,29 @@ function drawStrokeWithLetterSpacing(ctx, text, x, y, letterSpacing, strokeWidth
   }
   ctx.restore();
 }
-function drawTextShadow(ctx, text, x, y, shadow) {
+function parseShadow(shadow) {
   const parts = shadow.match(
     /(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(.*)/
   );
-  if (!parts) return;
+  if (!parts) return null;
+  return {
+    offsetX: parseFloat(parts[1]),
+    offsetY: parseFloat(parts[2]),
+    blur: parseFloat(parts[3]),
+    color: parts[4].trim()
+  };
+}
+function getColorAlpha(color) {
+  const parsed = parseCssColor2(color);
+  return parsed ? parsed.alpha : 1;
+}
+function drawShadowPass(ctx, shadow, textAlpha, drawFn) {
   ctx.save();
-  ctx.shadowOffsetX = parseFloat(parts[1]);
-  ctx.shadowOffsetY = parseFloat(parts[2]);
-  ctx.shadowBlur = parseFloat(parts[3]);
-  ctx.shadowColor = parts[4].trim();
-  ctx.fillText(text, x, y);
+  ctx.fillStyle = shadow.color;
+  if (textAlpha < 1) ctx.globalAlpha *= textAlpha;
+  if (shadow.blur > 0) ctx.filter = `blur(${shadow.blur / 2}px)`;
+  ctx.translate(shadow.offsetX, shadow.offsetY);
+  drawFn();
   ctx.restore();
 }
 function drawTextDecoration(ctx, seg, offsetX, offsetY) {