@effing/canvas 0.24.7 → 0.25.0

package/dist/index.js

@@ -261,6 +261,12 @@ import { GlobalFonts } from "@napi-rs/canvas";
 
 // src/jsx/font-metrics.ts
 import { inflateSync } from "zlib";
+function fontMetricsToPx(metrics, fontSize) {
+  return {
+    ascent: metrics.ascender / metrics.unitsPerEm * fontSize,
+    descent: -metrics.descender / metrics.unitsPerEm * fontSize
+  };
+}
 var WOFF_SIGNATURE = 2001684038;
 function readWoffTable(view, entry) {
   const compressed = entry.compLength < entry.origLength;
@@ -474,8 +480,9 @@ function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHei
   let fontAscent;
   let fontDescent;
   if (fontMetrics) {
-    fontAscent = fontMetrics.ascender / fontMetrics.unitsPerEm * fontSize;
-    fontDescent = -fontMetrics.descender / fontMetrics.unitsPerEm * fontSize;
+    const px = fontMetricsToPx(fontMetrics, fontSize);
+    fontAscent = px.ascent;
+    fontDescent = px.descent;
   } else {
     fontAscent = refMetrics.fontBoundingBoxAscent ?? refMetrics.actualBoundingBoxAscent ?? fontSize * 0.8;
     fontDescent = refMetrics.fontBoundingBoxDescent ?? refMetrics.actualBoundingBoxDescent ?? fontSize * 0.2;
@@ -699,7 +706,8 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
   let totalHeight = 0;
   let maxLineWidth = 0;
   const isAutoLineHeight = style.lineHeight === void 0 || style.lineHeight === "normal";
-  let lastMetrics;
+  const fontPx = fontMetrics ? fontMetricsToPx(fontMetrics, fontSize) : null;
+  let lastPositioningDescent;
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
     const lineWidth = measure(line);
@@ -717,14 +725,16 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
       fontStyle,
       ctx
     );
-    lastMetrics = metrics;
-    const contentHeight = metrics.ascent + metrics.descent;
-    let effectiveAscent = metrics.ascent;
-    let effectiveDescent = metrics.descent;
+    const positioningAscent = fontPx?.ascent ?? metrics.ascent;
+    const positioningDescent = fontPx?.descent ?? metrics.descent;
+    lastPositioningDescent = positioningDescent;
+    const contentHeight = positioningAscent + positioningDescent;
+    let effectiveAscent = positioningAscent;
+    let effectiveDescent = positioningDescent;
     if (isAutoLineHeight && contentHeight > lineHeightPx) {
       const scale = lineHeightPx / contentHeight;
-      effectiveAscent = metrics.ascent * scale;
-      effectiveDescent = metrics.descent * scale;
+      effectiveAscent = positioningAscent * scale;
+      effectiveDescent = positioningDescent * scale;
     }
     const baselineY = totalHeight + (lineHeightPx + effectiveAscent - effectiveDescent) / 2;
     segments.push({
@@ -748,9 +758,9 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
     totalHeight += lineHeightPx;
     maxLineWidth = Math.max(maxLineWidth, lineWidth);
   }
-  if (isAutoLineHeight && lastMetrics && segments.length > 0) {
+  if (isAutoLineHeight && lastPositioningDescent !== void 0 && segments.length > 0) {
     const lastSeg = segments[segments.length - 1];
-    const descentOverflow = lastSeg.y + lastMetrics.descent - totalHeight;
+    const descentOverflow = lastSeg.y + lastPositioningDescent - totalHeight;
     if (descentOverflow > 0) {
       totalHeight += descentOverflow;
     }
@@ -788,8 +798,8 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
 function resolveLineHeight(lineHeight, fontSize, canvasMetrics, fontMetrics) {
   if (lineHeight === void 0 || lineHeight === "normal") {
     if (fontMetrics) {
-      const { ascender, descender, unitsPerEm } = fontMetrics;
-      return (ascender - descender) / unitsPerEm * fontSize;
+      const px = fontMetricsToPx(fontMetrics, fontSize);
+      return px.ascent + px.descent;
     }
     return canvasMetrics ? canvasMetrics.ascent + canvasMetrics.descent : fontSize * 1.2;
   }
@@ -1207,9 +1217,6 @@ function resolveBoxValue(v, referenceWidth) {
 function drawRect(ctx, x, y, width, height, style) {
   const borderRadius = getBorderRadiusFromStyle(style, width, height);
   const hasRoundedCorners = hasRadius(borderRadius);
-  if (style.boxShadow) {
-    drawBoxShadow(ctx, x, y, width, height, style.boxShadow, borderRadius);
-  }
   if (style.backgroundColor) {
     ctx.fillStyle = style.backgroundColor;
     if (hasRoundedCorners) {
@@ -2831,12 +2838,15 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug
       style.transformOrigin
     );
   }
+  const borderRadius = getBorderRadiusFromStyle(style, width, height);
+  if (style.boxShadow) {
+    drawBoxShadow(ctx, x, y, width, height, style.boxShadow, borderRadius);
+  }
   const isClipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
   if (isClipped) {
-    const borderRadius = getBorderRadiusFromStyle(style, width, height);
     applyClip(ctx, x, y, width, height, borderRadius);
   }
-  if (style.backgroundColor || style.borderTopWidth || style.borderRightWidth || style.borderBottomWidth || style.borderLeftWidth || style.boxShadow) {
+  if (style.backgroundColor || style.borderTopWidth || style.borderRightWidth || style.borderBottomWidth || style.borderLeftWidth) {
     drawRect(ctx, x, y, width, height, style);
   }
   if (style.backgroundImage) {
@@ -2846,7 +2856,6 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug
       const gradient = createGradientFromCSS(ctx, layer, x, y, width, height);
       if (gradient) {
         ctx.fillStyle = gradient;
-        const borderRadius = getBorderRadiusFromStyle(style, width, height);
         if (hasRadius(borderRadius)) {
           ctx.beginPath();
           roundedRect(
@@ -2867,7 +2876,6 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug
       } else {
         const urlMatch = layer.match(/url\(["']?(.*?)["']?\)/);
         if (urlMatch) {
-          const borderRadius = getBorderRadiusFromStyle(style, width, height);
           if (hasRadius(borderRadius)) {
             applyClip(ctx, x, y, width, height, borderRadius);
           }
@@ -2968,7 +2976,6 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug
     const imgW = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
     const imgH = height - paddingTop - paddingBottom - borderTopW - borderBottomW;
     if (!isClipped) {
-      const borderRadius = getBorderRadiusFromStyle(style, width, height);
       if (hasRadius(borderRadius)) {
         applyClip(ctx, imgX, imgY, imgW, imgH, borderRadius);
       }