@bwp-web/canvas 1.1.0 → 1.1.2

package/dist/index.js

@@ -2756,14 +2756,17 @@ function useEditCanvas(options) {
               });
               setObjects(loaded);
             } finally {
-              isInitialLoadRef.current = false;
               setIsLoading(false);
             }
           }
         })();
         initPromise.then(async () => {
-          const onReadyResult = opts?.onReady?.(canvas);
-          await Promise.resolve(onReadyResult);
+          try {
+            const onReadyResult = opts?.onReady?.(canvas);
+            await Promise.resolve(onReadyResult);
+          } finally {
+            isInitialLoadRef.current = false;
+          }
           if (opts?.invertBackground !== void 0) {
             setBackgroundInverted(canvas, opts.invertBackground);
           }
@@ -3522,7 +3525,7 @@ function ObjectOverlay({
   const canvasRef = canvasRefProp ?? contextCanvasRef;
   const insideContainer = useIsInsideOverlayContainer();
   const stackRef = useRef8(null);
-  const prev = useRef8({ transform: "", w: "", h: "" });
+  const prev = useRef8({ transform: "", w: "", h: "", z: "" });
   useEffect8(() => {
     const canvas = canvasRef?.current;
     if (!canvas || !object) return;
@@ -3553,6 +3556,11 @@ function ObjectOverlay({
         el.style.transform = transform;
         prev.current.transform = transform;
       }
+      const z = String(zoom);
+      if (prev.current.z !== z) {
+        el.style.setProperty("--overlay-zoom", z);
+        prev.current.z = z;
+      }
       const w = `${screenWidth}px`;
       const h = `${screenHeight}px`;
       if (prev.current.w !== w || prev.current.h !== h) {
@@ -3572,7 +3580,7 @@ function ObjectOverlay({
       object.off("moving", update);
       object.off("scaling", update);
       object.off("rotating", update);
-      prev.current = { transform: "", w: "", h: "" };
+      prev.current = { transform: "", w: "", h: "", z: "" };
     };
   }, [canvasRef, object, insideContainer]);
   if (!object) return null;
@@ -3798,10 +3806,10 @@ function ellipsePosition(angleDeg) {
 function toNum(v) {
   return typeof v === "number" ? v : 0;
 }
-function readOverlayScale(el) {
+function readInlineProperty(el, prop) {
   let node = el.parentElement;
   while (node) {
-    const val = node.style.getPropertyValue("--overlay-scale");
+    const val = node.style.getPropertyValue(prop);
     if (val) return parseFloat(val) || 1;
     node = node.parentElement;
   }
@@ -3820,7 +3828,6 @@ function OverlayBadge({
   ...rest
 }) {
   const ref = useRef11(null);
-  const baseSize = useRef11(null);
   useEffect11(() => {
     const el = ref.current;
     if (!el) return;
@@ -3829,21 +3836,13 @@ function OverlayBadge({
     let rafId = 0;
     function doUpdate() {
       if (!el || !ancestor) return;
-      const containerW = ancestor.clientWidth;
-      const containerH = ancestor.clientHeight;
-      if (containerW <= 0 || containerH <= 0) {
+      if (ancestor.clientWidth <= 0 || ancestor.clientHeight <= 0) {
         el.style.transform = "";
         return;
       }
-      if (!baseSize.current) {
-        baseSize.current = { w: containerW, h: containerH };
-      }
-      const ratio = Math.min(
-        containerW / baseSize.current.w,
-        containerH / baseSize.current.h
-      );
-      const ownScale = Math.max(minScale, Math.min(ratio, maxScale));
-      const overlayScale = readOverlayScale(el);
+      const zoom = readInlineProperty(el, "--overlay-zoom");
+      const ownScale = Math.max(minScale, Math.min(zoom, maxScale));
+      const overlayScale = readInlineProperty(el, "--overlay-scale");
       const scale = `scale(${ownScale / overlayScale})`;
       el.style.transform = circular ? `translate(-50%, -50%) ${scale}` : scale;
     }
@@ -3861,7 +3860,6 @@ function OverlayBadge({
     return () => {
       if (rafId) cancelAnimationFrame(rafId);
       observer.disconnect();
-      baseSize.current = null;
     };
   }, [maxScale, minScale, circular]);
   const positionSx = circular ? (() => {