@bwp-web/canvas 1.1.0 → 1.1.1

package/dist/index.js

@@ -3522,7 +3522,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 +3553,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 +3577,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 +3803,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 +3825,6 @@ function OverlayBadge({
   ...rest
 }) {
   const ref = useRef11(null);
-  const baseSize = useRef11(null);
   useEffect11(() => {
     const el = ref.current;
     if (!el) return;
@@ -3829,21 +3833,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 +3857,6 @@ function OverlayBadge({
     return () => {
       if (rafId) cancelAnimationFrame(rafId);
       observer.disconnect();
-      baseSize.current = null;
     };
   }, [maxScale, minScale, circular]);
   const positionSx = circular ? (() => {