@pixldocs/canvas-renderer 0.5.10 → 0.5.12

package/dist/index.cjs

@@ -11842,10 +11842,12 @@ function PixldocsPreview(props) {
   const [isLoading, setIsLoading] = react.useState(false);
   const [fontsReady, setFontsReady] = react.useState(false);
   const [fontsReadyVersion, setFontsReadyVersion] = react.useState(0);
+  const [canvasSettled, setCanvasSettled] = react.useState(false);
   const isResolveMode = !("config" in props && props.config);
   react.useEffect(() => {
     if (!isResolveMode) {
       setResolvedConfig(null);
+      setCanvasSettled(false);
       return;
     }
     const p = props;
@@ -11853,6 +11855,7 @@ function PixldocsPreview(props) {
     let cancelled = false;
     setIsLoading(true);
     setFontsReady(false);
+    setCanvasSettled(false);
     resolveFromForm({
       templateId: p.templateId,
       formSchemaId: p.formSchemaId,
@@ -11897,6 +11900,7 @@ function PixldocsPreview(props) {
     var _a, _b;
     if (!config) return;
     let cancelled = false;
+    setCanvasSettled(false);
     const bump = () => {
       if (cancelled) return;
       clearMeasurementCache();
@@ -11914,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 = react.useCallback(() => {
+    setCanvasSettled(true);
+    onReady == null ? void 0 : onReady();
+  }, [onReady]);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
@@ -11926,18 +11936,21 @@ function PixldocsPreview(props) {
   if (!fontsReady) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: /* @__PURE__ */ jsxRuntime.jsx(
-    PreviewCanvas,
-    {
-      config,
-      pageIndex,
-      zoom,
-      absoluteZoom,
-      onDynamicFieldClick,
-      onReady
-    },
-    previewKey
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...style, position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { visibility: canvasSettled ? "visible" : "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      PreviewCanvas,
+      {
+        config,
+        pageIndex,
+        zoom,
+        absoluteZoom,
+        onDynamicFieldClick,
+        onReady: handleCanvasReady
+      },
+      previewKey
+    ) }),
+    !canvasSettled && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
+  ] });
 }
 class PixldocsRenderer {
   constructor(config) {
@@ -12568,23 +12581,41 @@ class PixldocsRenderer {
       clearMeasurementCache();
     };
     const reflowTextboxes = () => {
-      var _a2, _b;
+      var _a2, _b, _c;
       const walk = (obj) => {
-        var _a3, _b2;
+        var _a3, _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);
-        if (typeof obj.initDimensions === "function" && (obj.type === "textbox" || obj.isEditing !== void 0)) {
-          const savedWidth = obj.width;
+        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
+          };
+          (_a3 = obj._clearCache) == null ? void 0 : _a3.call(obj);
+          obj.__charBounds = [];
+          obj.__lineWidths = [];
+          obj.__lineHeights = [];
+          obj._textLines = [];
+          obj.textLines = [];
           obj.dirty = true;
           obj.initDimensions();
-          if (savedWidth != null) (_a3 = obj.set) == null ? void 0 : _a3.call(obj, { width: savedWidth });
-          (_b2 = obj.setCoords) == null ? void 0 : _b2.call(obj);
+          (_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);
       (_a2 = fabricInstance.calcOffset) == null ? void 0 : _a2.call(fabricInstance);
-      (_b = fabricInstance.requestRenderAll) == null ? void 0 : _b.call(fabricInstance);
+      (_b = fabricInstance.renderAll) == null ? void 0 : _b.call(fabricInstance);
+      (_c = fabricInstance.requestRenderAll) == null ? void 0 : _c.call(fabricInstance);
     };
     clearTextMetricCaches();
     await waitForPaint();