@pixldocs/canvas-renderer 0.5.19 → 0.5.21

package/dist/index.js

@@ -11844,6 +11844,89 @@ async function ensureFontsForResolvedConfig(config) {
     });
   }
 }
+const TEXT_TYPES = /* @__PURE__ */ new Set(["textbox", "text", "i-text"]);
+function getTextLines(obj) {
+  const lines = Array.isArray(obj.textLines) && obj.textLines.length ? obj.textLines : String(obj.text || "").split("\n");
+  return lines.map((line) => Array.isArray(line) ? line.join("") : String(line ?? ""));
+}
+function measureLineWidth(obj, line) {
+  if (typeof document === "undefined") return 0;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return 0;
+  const fontStyle = obj.fontStyle || "normal";
+  const fontWeight = obj.fontWeight || 400;
+  const fontSize = obj.fontSize || 16;
+  const fontFamily = obj.fontFamily || "sans-serif";
+  ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+  const charSpacing = Number(obj.charSpacing || 0) / 1e3 * fontSize;
+  return ctx.measureText(line).width + Math.max(0, line.length - 1) * charSpacing;
+}
+function getDecorationPadding(obj) {
+  var _a;
+  const strokeWidth = Number(obj.strokeWidth || 0);
+  const shadowBlur = Number(((_a = obj.shadow) == null ? void 0 : _a.blur) || 0);
+  return Math.max(0, strokeWidth) + Math.max(0, shadowBlur * 0.25);
+}
+function getFabricCanvasFromContainer(container) {
+  const registry2 = window.__fabricCanvasRegistry;
+  if (registry2 instanceof Map) {
+    for (const entry of registry2.values()) {
+      const canvas = (entry == null ? void 0 : entry.canvas) || entry;
+      if (!canvas || typeof canvas.toSVG !== "function") continue;
+      const el = canvas.lowerCanvasEl || canvas.upperCanvasEl;
+      if (el && container.contains(el)) return canvas;
+    }
+  }
+  return null;
+}
+function stabilizeFabricTextObjects(fabricInstance) {
+  var _a, _b, _c;
+  if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
+  clearFabricCharCache();
+  clearMeasurementCache();
+  const walk = (obj) => {
+    var _a2, _b2, _c2, _d;
+    if (!obj) return;
+    const children = Array.isArray(obj._objects) ? obj._objects : Array.isArray(obj.objects) ? obj.objects : [];
+    if (children.length) children.forEach(walk);
+    const isTextObject = typeof obj.text === "string" && typeof obj.initDimensions === "function" && (TEXT_TYPES.has(obj.type) || obj.isEditing !== void 0);
+    if (!isTextObject) return;
+    const saved = { width: obj.width, scaleX: obj.scaleX, scaleY: obj.scaleY };
+    const reset = () => {
+      var _a3;
+      (_a3 = obj._clearCache) == null ? void 0 : _a3.call(obj);
+      obj.__charBounds = [];
+      obj.__lineWidths = [];
+      obj.__lineHeights = [];
+      obj.__graphemeLines = [];
+      obj._textLines = [];
+      obj.textLines = [];
+      obj._styleMap = null;
+      obj.styleMap = null;
+      obj.dirty = true;
+    };
+    reset();
+    obj.initDimensions();
+    if (saved.width != null) {
+      (_a2 = obj.set) == null ? void 0 : _a2.call(obj, { width: saved.width, scaleX: saved.scaleX, scaleY: saved.scaleY });
+      reset();
+      obj.initDimensions();
+      (_b2 = obj.set) == null ? void 0 : _b2.call(obj, { width: saved.width, scaleX: saved.scaleX, scaleY: saved.scaleY });
+    }
+    if (obj.underline || obj.linethrough) {
+      const decorationPadding = getDecorationPadding(obj);
+      obj.__lineWidths = getTextLines(obj).map((line) => Math.max(0, measureLineWidth(obj, line) + decorationPadding));
+    }
+    obj.dirty = true;
+    (_c2 = obj._clearCache) == null ? void 0 : _c2.call(obj);
+    (_d = obj.setCoords) == null ? void 0 : _d.call(obj);
+  };
+  fabricInstance.getObjects().forEach(walk);
+  (_a = fabricInstance.calcOffset) == null ? void 0 : _a.call(fabricInstance);
+  (_b = fabricInstance.renderAll) == null ? void 0 : _b.call(fabricInstance);
+  (_c = fabricInstance.requestRenderAll) == null ? void 0 : _c.call(fabricInstance);
+}
 function PixldocsPreview(props) {
   const {
     pageIndex = 0,
@@ -11940,6 +12023,13 @@ function PixldocsPreview(props) {
     () => `${pageIndex}-${fontsReadyVersion}-${stabilizationPass}`,
     [pageIndex, fontsReadyVersion, stabilizationPass]
   );
+  const previewWrapRef = useCallback((node) => {
+    if (!node || !config) return;
+    requestAnimationFrame(() => {
+      const fabricCanvas = getFabricCanvasFromContainer(node);
+      if (fabricCanvas) stabilizeFabricTextObjects(fabricCanvas);
+    });
+  }, [config, previewKey]);
   useEffect(() => {
     if (isResolveMode) return;
     if (!config) {
@@ -11970,7 +12060,7 @@ function PixldocsPreview(props) {
     return /* @__PURE__ */ jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
   return /* @__PURE__ */ jsxs("div", { className, style: { ...style, position: "relative" }, children: [
-    /* @__PURE__ */ jsx("div", { style: { visibility: canvasSettled ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { ref: previewWrapRef, style: { visibility: canvasSettled ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx(
       PreviewCanvas,
       {
         config,
@@ -12537,7 +12627,6 @@ class PixldocsRenderer {
           pageIndex,
           zoom: pixelRatio,
           absoluteZoom: true,
-          skipFontReadyWait: true,
           onReady
         })
       );
@@ -12641,7 +12730,6 @@ class PixldocsRenderer {
           zoom: 1,
           // 1:1 — no UI scaling for SVG capture
           absoluteZoom: true,
-          skipFontReadyWait: true,
           onReady
         })
       );
@@ -12702,16 +12790,7 @@ class PixldocsRenderer {
    * using the global __fabricCanvasRegistry (set by PageCanvas).
    */
   getFabricCanvasFromContainer(container) {
-    const registry2 = window.__fabricCanvasRegistry;
-    if (registry2 instanceof Map) {
-      for (const entry of registry2.values()) {
-        const canvas = (entry == null ? void 0 : entry.canvas) || entry;
-        if (!canvas || typeof canvas.toSVG !== "function") continue;
-        const el = canvas.lowerCanvasEl || canvas.upperCanvasEl;
-        if (el && container.contains(el)) return canvas;
-      }
-    }
-    return null;
+    return getFabricCanvasFromContainer(container);
   }
   async waitForStableTextMetrics(container, config) {
     if (typeof document !== "undefined") {
@@ -12725,59 +12804,7 @@ class PixldocsRenderer {
       clearFabricCharCache();
       clearMeasurementCache();
     };
-    const reflowTextboxes = () => {
-      var _a, _b, _c;
-      const walk = (obj) => {
-        var _a2, _b2, _c2, _d;
-        if (!obj) return;
-        const children = Array.isArray(obj._objects) ? obj._objects : Array.isArray(obj.objects) ? obj.objects : [];
-        if (children.length) children.forEach(walk);
-        const isTextObject = typeof obj.text === "string" && typeof obj.initDimensions === "function" && (obj.type === "textbox" || obj.type === "text" || obj.type === "i-text" || obj.isEditing !== void 0);
-        if (isTextObject) {
-          const saved = {
-            width: obj.width,
-            scaleX: obj.scaleX,
-            scaleY: obj.scaleY
-          };
-          const resetTextboxLayoutInternals = () => {
-            var _a3;
-            (_a3 = obj._clearCache) == null ? void 0 : _a3.call(obj);
-            obj.__charBounds = [];
-            obj.__lineWidths = [];
-            obj.__lineHeights = [];
-            obj.__graphemeLines = [];
-            obj._textLines = [];
-            obj.textLines = [];
-            obj._styleMap = null;
-            obj.styleMap = null;
-            obj.dirty = true;
-          };
-          resetTextboxLayoutInternals();
-          obj.initDimensions();
-          if (saved.width != null) {
-            (_a2 = obj.set) == null ? void 0 : _a2.call(obj, {
-              width: saved.width,
-              scaleX: saved.scaleX,
-              scaleY: saved.scaleY
-            });
-            resetTextboxLayoutInternals();
-            obj.initDimensions();
-          }
-          (_b2 = obj.set) == null ? void 0 : _b2.call(obj, {
-            width: saved.width,
-            scaleX: saved.scaleX,
-            scaleY: saved.scaleY,
-            dirty: true
-          });
-          (_c2 = obj._clearCache) == null ? void 0 : _c2.call(obj);
-          (_d = obj.setCoords) == null ? void 0 : _d.call(obj);
-        }
-      };
-      fabricInstance.getObjects().forEach(walk);
-      (_a = fabricInstance.calcOffset) == null ? void 0 : _a.call(fabricInstance);
-      (_b = fabricInstance.renderAll) == null ? void 0 : _b.call(fabricInstance);
-      (_c = fabricInstance.requestRenderAll) == null ? void 0 : _c.call(fabricInstance);
-    };
+    const reflowTextboxes = () => stabilizeFabricTextObjects(fabricInstance);
     clearTextMetricCaches();
     await waitForPaint();
     reflowTextboxes();
@@ -14533,6 +14560,12 @@ function convertTextDecorationsToLines(svg) {
       } else {
         textWidth = content.length * fontSize * 0.6;
       }
+      if (typeof tspan.getComputedTextLength === "function") {
+        try {
+          textWidth = Math.max(textWidth, tspan.getComputedTextLength());
+        } catch {
+        }
+      }
       const underlineY = y + fontSize * 0.15;
       const thickness = Math.max(0.5, fontSize * 0.066667);
       const line = doc.createElementNS("http://www.w3.org/2000/svg", "line");