@bwp-web/canvas 1.1.0 → 1.1.1

package/dist/index.cjs

@@ -3595,7 +3595,7 @@ function ObjectOverlay({
   const canvasRef = canvasRefProp ?? contextCanvasRef;
   const insideContainer = useIsInsideOverlayContainer();
   const stackRef = (0, import_react12.useRef)(null);
-  const prev = (0, import_react12.useRef)({ transform: "", w: "", h: "" });
+  const prev = (0, import_react12.useRef)({ transform: "", w: "", h: "", z: "" });
   (0, import_react12.useEffect)(() => {
     const canvas = canvasRef?.current;
     if (!canvas || !object) return;
@@ -3626,6 +3626,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) {
@@ -3645,7 +3650,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;
@@ -3871,10 +3876,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;
   }
@@ -3893,7 +3898,6 @@ function OverlayBadge({
   ...rest
 }) {
   const ref = (0, import_react15.useRef)(null);
-  const baseSize = (0, import_react15.useRef)(null);
   (0, import_react15.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
@@ -3902,21 +3906,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;
     }
@@ -3934,7 +3930,6 @@ function OverlayBadge({
     return () => {
       if (rafId) cancelAnimationFrame(rafId);
       observer.disconnect();
-      baseSize.current = null;
     };
   }, [maxScale, minScale, circular]);
   const positionSx = circular ? (() => {