@effing/canvas 0.22.2 → 0.22.3

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;
@@ -2524,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";