@pixldocs/canvas-renderer 0.5.38 → 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.37";
+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.37";
+const PACKAGE_VERSION = "0.5.40";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -12061,26 +12061,91 @@ 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];
       const hasStyled = typeof this.styleHas === "function" && this.styleHas(type);
-      if (!hasOwn && !hasStyled) {
+      if (!hasOwn && !hasStyled) return;
+      const lines = this._textLines;
+      const offsets = this.offsets;
+      if (!Array.isArray(lines) || !offsets) {
         return original.call(this, ctx, type);
       }
-      const lines = this._textLines;
-      if (Array.isArray(lines)) {
-        this.__charBounds = [];
-        for (let i = 0; i < lines.length; i++) {
-          try {
-            this.getLineWidth(i);
-          } catch {
-          }
+      const offsetY = offsets[type];
+      const offsetAligner = type === "linethrough" ? 0.5 : type === "overline" ? 1 : 0;
+      const leftOffset = this._getLeftOffset();
+      let topOffset = this._getTopOffset();
+      for (let i = 0, len = lines.length; i < len; i++) {
+        const heightOfLine = this.getHeightOfLine(i);
+        const lineHas = !!this[type] || typeof this.styleHas === "function" && this.styleHas(type, i);
+        if (!lineHas) {
+          topOffset += heightOfLine;
+          continue;
+        }
+        const fillStyle = this.getValueOfPropertyAt(i, 0, "fill");
+        const thickness = this.getValueOfPropertyAt(i, 0, "textDecorationThickness");
+        const charSize = this.getHeightOfChar(i, 0);
+        const dy = this.getValueOfPropertyAt(i, 0, "deltaY") || 0;
+        const finalThickness = this.fontSize * (thickness || 0) / 1e3;
+        if (!fillStyle || !finalThickness) {
+          topOffset += heightOfLine;
+          continue;
+        }
+        const lineWidth = measureLineTextWidth(this, ctx, i);
+        if (!lineWidth) {
+          topOffset += heightOfLine;
+          continue;
+        }
+        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;
+        }
+        const maxHeight = heightOfLine / this.lineHeight;
+        const top = topOffset + maxHeight * (1 - this._fontSizeFraction);
+        ctx.fillStyle = fillStyle;
+        ctx.fillRect(
+          drawStart,
+          top + offsetY * charSize + dy - offsetAligner * finalThickness,
+          lineWidth,
+          finalThickness
+        );
+        topOffset += heightOfLine;
+      }
+      if (typeof this._removeShadow === "function") {
+        try {
+          this._removeShadow(ctx);
+        } catch {
         }
       }
     } catch {
+      try {
+        return original.call(this, ctx, type);
+      } catch {
+      }
     }
-    return original.call(this, ctx, type);
   };
   __underlineFixInstalled = true;
   console.log(`[canvas-renderer] underline-fix monkey patch installed (v${PACKAGE_VERSION})`);