@effing/canvas 0.24.5 → 0.24.6

package/dist/index.js

@@ -267,22 +267,21 @@ function parseFontMetrics(data) {
   const numTables = view.getUint16(4);
   if (buf.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 (headOffset < 0 || hheaOffset < 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 };
+  if (buf.byteLength < hheaOffset + 8) return null;
+  const ascender = view.getInt16(hheaOffset + 4);
+  const descender = view.getInt16(hheaOffset + 6);
+  return { unitsPerEm, ascender, descender };
 }
 
 // src/jsx/font.ts
@@ -413,8 +412,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 +726,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 +2324,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 +2440,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 +2460,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 +2481,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 +2515,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 +2600,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) {