@pixldocs/canvas-renderer 0.5.11 → 0.5.13

package/dist/index.js

@@ -2699,18 +2699,37 @@ const clearFabricCharCache = () => {
 };
 const clearFontCacheAndRerender = (canvas) => {
   clearFabricCharCache();
-  const fixTextbox = (obj) => {
+  const resetTextboxLayoutInternals = (obj) => {
     var _a;
+    (_a = obj._clearCache) == null ? void 0 : _a.call(obj);
+    obj.__charBounds = [];
+    obj.__lineWidths = [];
+    obj.__lineHeights = [];
+    obj.__graphemeLines = [];
+    obj._textLines = [];
+    obj.textLines = [];
+    obj._styleMap = null;
+    obj.styleMap = null;
+    obj.dirty = true;
+  };
+  const fixTextbox = (obj) => {
+    var _a, _b;
     if (obj instanceof fabric.Textbox) {
       const savedWidth = obj.width;
-      obj.dirty = true;
+      const savedScaleX = obj.scaleX;
+      const savedScaleY = obj.scaleY;
+      resetTextboxLayoutInternals(obj);
       obj.initDimensions();
-      if (savedWidth != null && Math.abs((obj.width ?? 0) - savedWidth) > 0.01) {
-        obj.width = savedWidth;
+      if (savedWidth != null) {
+        obj.set({ width: savedWidth, scaleX: savedScaleX, scaleY: savedScaleY });
+        resetTextboxLayoutInternals(obj);
+        obj.initDimensions();
+        obj.set({ width: savedWidth, scaleX: savedScaleX, scaleY: savedScaleY, dirty: true });
       }
+      (_a = obj._clearCache) == null ? void 0 : _a.call(obj);
       obj.setCoords();
     } else if (obj instanceof fabric.Group) {
-      (_a = obj._objects) == null ? void 0 : _a.forEach(fixTextbox);
+      (_b = obj._objects) == null ? void 0 : _b.forEach(fixTextbox);
       obj.dirty = true;
       obj.setCoords();
     }
@@ -11823,10 +11842,12 @@ function PixldocsPreview(props) {
   const [isLoading, setIsLoading] = useState(false);
   const [fontsReady, setFontsReady] = useState(false);
   const [fontsReadyVersion, setFontsReadyVersion] = useState(0);
+  const [canvasSettled, setCanvasSettled] = useState(false);
   const isResolveMode = !("config" in props && props.config);
   useEffect(() => {
     if (!isResolveMode) {
       setResolvedConfig(null);
+      setCanvasSettled(false);
       return;
     }
     const p = props;
@@ -11834,6 +11855,7 @@ function PixldocsPreview(props) {
     let cancelled = false;
     setIsLoading(true);
     setFontsReady(false);
+    setCanvasSettled(false);
     resolveFromForm({
       templateId: p.templateId,
       formSchemaId: p.formSchemaId,
@@ -11878,6 +11900,7 @@ function PixldocsPreview(props) {
     var _a, _b;
     if (!config) return;
     let cancelled = false;
+    setCanvasSettled(false);
     const bump = () => {
       if (cancelled) return;
       clearMeasurementCache();
@@ -11895,11 +11918,17 @@ function PixldocsPreview(props) {
     if (isResolveMode) return;
     if (!config) {
       setFontsReady(false);
+      setCanvasSettled(false);
       return;
     }
     setFontsReady(false);
+    setCanvasSettled(false);
     ensureFontsForResolvedConfig(config).then(() => setFontsReady(true)).catch(() => setFontsReady(true));
   }, [isResolveMode, config]);
+  const handleCanvasReady = useCallback(() => {
+    setCanvasSettled(true);
+    onReady == null ? void 0 : onReady();
+  }, [onReady]);
   if (isLoading) {
     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..." }) });
   }
@@ -11907,18 +11936,21 @@ function PixldocsPreview(props) {
   if (!fontsReady) {
     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__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(
-    PreviewCanvas,
-    {
-      config,
-      pageIndex,
-      zoom,
-      absoluteZoom,
-      onDynamicFieldClick,
-      onReady
-    },
-    previewKey
-  ) });
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...style, position: "relative" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { visibility: canvasSettled ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx(
+      PreviewCanvas,
+      {
+        config,
+        pageIndex,
+        zoom,
+        absoluteZoom,
+        onDynamicFieldClick,
+        onReady: handleCanvasReady
+      },
+      previewKey
+    ) }),
+    !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..." }) })
+  ] });
 }
 class PixldocsRenderer {
   constructor(config) {
@@ -12562,14 +12594,30 @@ class PixldocsRenderer {
             scaleX: obj.scaleX,
             scaleY: obj.scaleY
           };
-          (_a3 = obj._clearCache) == null ? void 0 : _a3.call(obj);
-          obj.__charBounds = [];
-          obj.__lineWidths = [];
-          obj.__lineHeights = [];
-          obj._textLines = [];
-          obj.textLines = [];
-          obj.dirty = true;
+          const resetTextboxLayoutInternals = () => {
+            var _a4;
+            (_a4 = obj._clearCache) == null ? void 0 : _a4.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) {
+            (_a3 = obj.set) == null ? void 0 : _a3.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,