@pixldocs/canvas-renderer 0.5.95 → 0.5.96

package/dist/index.js

@@ -396,33 +396,6 @@ function measureTextHeight(element) {
     return fallbackEstimateHeight(element);
   }
 }
-function getMinTextWidth(element) {
-  if (element.type !== "text" || !element.text) {
-    return typeof element.width === "number" ? element.width : 200;
-  }
-  try {
-    const textbox = new fabric.Textbox(element.text, {
-      width: 1e4,
-      fontSize: element.fontSize || 16,
-      fontFamily: element.fontFamily || "Open Sans",
-      fontWeight: element.fontWeight || 400,
-      fontStyle: element.fontStyle || "normal",
-      lineHeight: element.lineHeight || 1.2,
-      charSpacing: element.charSpacing || 0,
-      splitByGrapheme: element.splitByGrapheme ?? element.wordWrap === "break-word",
-      left: 0,
-      top: 0
-    });
-    textbox.initDimensions();
-    const lineWidths = textbox.__lineWidths;
-    if (lineWidths && lineWidths.length > 0) {
-      const maxLine = Math.max(...lineWidths);
-      return Math.ceil(maxLine) + 2;
-    }
-  } catch (_) {
-  }
-  return typeof element.width === "number" ? element.width : 200;
-}
 function fallbackEstimateHeight(element) {
   if (element.type !== "text" || !element.text) {
     return element.height || 20;
@@ -2778,11 +2751,22 @@ const waitUntilFontsAvailable = async (fontFamilies, options) => {
   }
 };
 const clearFabricCharCache = () => {
+  var _a;
   const fabricAny = fabric;
+  if (fabricAny.cache && typeof fabricAny.cache.clearFontCache === "function") {
+    fabricAny.cache.clearFontCache();
+  }
+  if (((_a = fabricAny.cache) == null ? void 0 : _a.charWidthsCache) instanceof Map) {
+    fabricAny.cache.charWidthsCache.clear();
+  }
   if (typeof fabricAny.charWidthsCache === "object" && fabricAny.charWidthsCache !== null) {
-    Object.keys(fabricAny.charWidthsCache).forEach((key) => {
-      delete fabricAny.charWidthsCache[key];
-    });
+    if (fabricAny.charWidthsCache instanceof Map) {
+      fabricAny.charWidthsCache.clear();
+    } else {
+      Object.keys(fabricAny.charWidthsCache).forEach((key) => {
+        delete fabricAny.charWidthsCache[key];
+      });
+    }
   }
   if (typeof fabric.util !== "undefined" && typeof fabric.util.clearFabricFontCache === "function") {
     fabric.util.clearFabricFontCache();
@@ -5557,6 +5541,8 @@ function createText(element) {
   const targetScaleY = element.scaleY ?? 1;
   const textbox = new fabric.Textbox(text, {
     width: targetWidth,
+    minWidth: 1,
+    dynamicMinWidth: 0,
     scaleX: targetScaleX,
     scaleY: targetScaleY,
     fontSize,
@@ -5577,6 +5563,8 @@ function createText(element) {
   textbox.initDimensions();
   textbox.set({
     width: targetWidth,
+    minWidth: 1,
+    dynamicMinWidth: 0,
     scaleX: targetScaleX,
     scaleY: targetScaleY
   });
@@ -5586,6 +5574,7 @@ function createText(element) {
   const scaleYAfterSet = textbox.scaleY ?? 1;
   if (Math.abs(widthAfterSet - targetWidth) > 0.01 || Math.abs(scaleXAfterSet - targetScaleX) > 0.01 || Math.abs(scaleYAfterSet - targetScaleY) > 0.01) {
     textbox.width = targetWidth;
+    textbox.dynamicMinWidth = 0;
     textbox.scaleX = targetScaleX;
     textbox.scaleY = targetScaleY;
     textbox.setCoords();
@@ -6432,6 +6421,48 @@ const PageCanvas = forwardRef(
       if (!canvas2) return false;
       return !!canvas2._currentTransform || !!canvas2.__isUserTransforming;
     }, []);
+    const reflowTextboxesFromCurrentElements = useCallback((canvas2) => {
+      const elementById = new Map(elementsRef.current.map((el) => [el.id, el]));
+      let didReflow = false;
+      const reflowObject = (obj) => {
+        var _a;
+        if (obj instanceof fabric.Group) {
+          (_a = obj._objects) == null ? void 0 : _a.forEach(reflowObject);
+          obj.dirty = true;
+          return;
+        }
+        if (!(obj instanceof fabric.Textbox)) return;
+        const id = getObjectId(obj);
+        const element = id ? elementById.get(id) : void 0;
+        if (!element) return;
+        const targetWidth = Math.max(1, Number(element.width) > 0 ? Number(element.width) : Number(obj.width ?? 200));
+        const overflowPolicy = element.overflowPolicy || "grow-and-push";
+        const splitByGrapheme = overflowPolicy === "auto-shrink" ? false : element.splitByGrapheme ?? element.wordWrap === "break-word";
+        obj.set({
+          width: targetWidth,
+          minWidth: 1,
+          dynamicMinWidth: 0,
+          text: element.text || "Text",
+          fontSize: element.fontSize || 16,
+          fontFamily: element.fontFamily || "Open Sans",
+          fontWeight: element.fontWeight || 400,
+          fontStyle: element.fontStyle || "normal",
+          lineHeight: element.lineHeight || 1.2,
+          charSpacing: element.charSpacing || 0,
+          splitByGrapheme
+        });
+        obj.initDimensions();
+        if (Math.abs((obj.width ?? 0) - targetWidth) > 0.01) {
+          obj.width = targetWidth;
+        }
+        obj.dynamicMinWidth = 0;
+        obj.setCoords();
+        obj.dirty = true;
+        didReflow = true;
+      };
+      canvas2.getObjects().forEach(reflowObject);
+      if (didReflow) canvas2.requestRenderAll();
+    }, []);
     useEffect(() => {
       if (!canvasElRef.current) return;
       const zoom2 = workspaceZoom || 1;
@@ -6512,6 +6543,8 @@ const PageCanvas = forwardRef(
       };
       initFonts();
       const persistTextDimensionsAfterFontLoad = (canvas2) => {
+        reflowTextboxesFromCurrentElements(canvas2);
+        if (isPreviewMode) return;
         const state = useEditorStore.getState();
         const page = state.canvas.pages.find((p) => p.id === pageId);
         if (!page) return;
@@ -9108,10 +9141,11 @@ const PageCanvas = forwardRef(
             text = result;
           }
         }
-        const minWidth = getMinTextWidth(element);
-        const textboxWidth = overflowPolicy === "auto-shrink" ? fixedWidth : Math.max(storedWidth, minWidth);
+        const textboxWidth = fixedWidth;
         obj.set({
           width: textboxWidth,
+          minWidth: 1,
+          dynamicMinWidth: 0,
           fontSize,
           fontFamily: element.fontFamily || "Open Sans",
           fill: element.fill || "#1a1a1a",
@@ -9131,6 +9165,7 @@ const PageCanvas = forwardRef(
         if (Math.abs((obj.width ?? 0) - textboxWidth) > 0.01) {
           obj.width = textboxWidth;
         }
+        obj.dynamicMinWidth = 0;
         obj.setCoords();
         obj.dirty = true;
         try {
@@ -12919,7 +12954,6 @@ function PixldocsPreview(props) {
   const [isLoading, setIsLoading] = useState(false);
   const [fontsReady, setFontsReady] = useState(false);
   const [canvasSettled, setCanvasSettled] = useState(false);
-  const [stabilizationPass, setStabilizationPass] = useState(0);
   const isResolveMode = !("config" in props && props.config);
   useEffect(() => {
     if (!isResolveMode) {
@@ -12990,21 +13024,16 @@ function PixldocsPreview(props) {
     isResolveMode ? props.themeId : void 0
   ]);
   const config = isResolveMode ? resolvedConfig : props.config;
-  const previewKey = useMemo(
-    () => `${pageIndex}-${stabilizationPass}`,
-    [pageIndex, stabilizationPass]
-  );
+  const previewKey = useMemo(() => `${pageIndex}`, [pageIndex]);
   useEffect(() => {
     if (isResolveMode) return;
     if (!config) {
       setFontsReady(false);
       setCanvasSettled(false);
-      setStabilizationPass(0);
       return;
     }
     setFontsReady(false);
     setCanvasSettled(false);
-    setStabilizationPass(0);
     let cancelled = false;
     const hasAutoShrink = configHasAutoShrinkText$1(config);
     const waitMs = hasAutoShrink ? 4e3 : 1800;
@@ -13027,16 +13056,10 @@ function PixldocsPreview(props) {
     };
   }, [isResolveMode, config]);
   const handleCanvasReady = useCallback(() => {
-    if (stabilizationPass === 0) {
-      console.log(PREVIEW_DEBUG_PREFIX, "canvas-ready-pass", { pageIndex, stabilizationPass, action: "stabilize-again" });
-      setCanvasSettled(false);
-      setStabilizationPass(1);
-      return;
-    }
-    console.log(PREVIEW_DEBUG_PREFIX, "canvas-ready-pass", { pageIndex, stabilizationPass, action: "settled" });
+    console.log(PREVIEW_DEBUG_PREFIX, "canvas-ready", { pageIndex, action: "settled" });
     setCanvasSettled(true);
     onReady == null ? void 0 : onReady();
-  }, [onReady, pageIndex, stabilizationPass]);
+  }, [onReady, pageIndex]);
   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..." }) });
   }