@pixldocs/canvas-renderer 0.5.39 → 0.5.40

package/dist/index.d.ts

@@ -221,7 +221,7 @@ export declare function normalizeFontFamily(fontStack: string): string;
  * Package version banner. Bump alongside package.json so we can confirm
  * (via browser:log) that the deployed bundle matches the expected build.
  */
-export declare const PACKAGE_VERSION = "0.5.39";
+export declare const PACKAGE_VERSION = "0.5.40";
 
 export declare interface PageSettings {
     backgroundColor?: string;

package/dist/index.js

@@ -12053,7 +12053,7 @@ function PixldocsPreview(props) {
     !canvasSettled && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
-const PACKAGE_VERSION = "0.5.39";
+const PACKAGE_VERSION = "0.5.40";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -12061,6 +12061,24 @@ function installUnderlineFix(fab) {
   const TextProto = (_a = fab.Text) == null ? void 0 : _a.prototype;
   if (!TextProto || typeof TextProto._renderTextDecoration !== "function") return;
   const original = TextProto._renderTextDecoration;
+  const measureLineTextWidth = (obj, ctx, lineIndex) => {
+    var _a2, _b, _c, _d, _e, _f;
+    const rawLine = (_a2 = obj._textLines) == null ? void 0 : _a2[lineIndex];
+    const lineText = Array.isArray(rawLine) ? rawLine.join("") : String(rawLine ?? "");
+    if (!lineText) return 0;
+    const fontSize = Number(((_b = obj.getValueOfPropertyAt) == null ? void 0 : _b.call(obj, lineIndex, 0, "fontSize")) ?? obj.fontSize ?? 0);
+    const fontStyle = String(((_c = obj.getValueOfPropertyAt) == null ? void 0 : _c.call(obj, lineIndex, 0, "fontStyle")) ?? obj.fontStyle ?? "normal");
+    const fontWeight = String(((_d = obj.getValueOfPropertyAt) == null ? void 0 : _d.call(obj, lineIndex, 0, "fontWeight")) ?? obj.fontWeight ?? "400");
+    const fontFamily = String(((_e = obj.getValueOfPropertyAt) == null ? void 0 : _e.call(obj, lineIndex, 0, "fontFamily")) ?? obj.fontFamily ?? "sans-serif");
+    const charSpacing = Number(((_f = obj.getValueOfPropertyAt) == null ? void 0 : _f.call(obj, lineIndex, 0, "charSpacing")) ?? obj.charSpacing ?? 0);
+    ctx.save();
+    ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px ${fontFamily}`;
+    const measured = ctx.measureText(lineText).width;
+    ctx.restore();
+    const graphemeCount = Array.from(lineText).length;
+    const spacingWidth = graphemeCount > 1 ? charSpacing / 1e3 * fontSize * (graphemeCount - 1) : 0;
+    return Math.max(0, measured + spacingWidth);
+  };
   TextProto._renderTextDecoration = function patchedRenderTextDecoration(ctx, type) {
     try {
       const hasOwn = !!this[type];
@@ -12091,20 +12109,16 @@ function installUnderlineFix(fab) {
           topOffset += heightOfLine;
           continue;
         }
-        if (Array.isArray(this.__lineWidths)) {
-          this.__lineWidths[i] = void 0;
-        }
-        let lineWidth = 0;
-        try {
-          lineWidth = this.getLineWidth(i);
-        } catch {
-          lineWidth = 0;
-        }
+        const lineWidth = measureLineTextWidth(this, ctx, i);
         if (!lineWidth) {
           topOffset += heightOfLine;
           continue;
         }
-        const lineLeftOffset = this._getLineLeftOffset(i);
+        const availableWidth = Number(this.width ?? lineWidth);
+        let lineLeftOffset = 0;
+        const align = String(this.textAlign ?? "left");
+        if (align === "center") lineLeftOffset = (availableWidth - lineWidth) / 2;
+        else if (align === "right" || align === "end") lineLeftOffset = availableWidth - lineWidth;
         let drawStart = leftOffset + lineLeftOffset;
         if (this.direction === "rtl") {
           drawStart = this.width - drawStart - lineWidth;