@bwp-web/canvas 1.1.0 → 1.1.2

package/dist/hooks/useEditCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEditCanvas.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditCanvas.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAW,MAAM,QAAQ,CAAC;AAC5E,OAAO,EAEL,KAAK,iBAAiB,EAEtB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAC;AAMrB,OAAO,EAEL,KAAK,sBAAsB,EAE3B,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EAIL,KAAK,kBAAkB,EAExB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,cAAc,EAEpB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,WAAW,oBAAoB;IACnC,kGAAkG;IAClG,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,mIAAmI;IACnI,SAAS,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAC;IAC7C;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAChD;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IACnC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,OAAO,CAAC;IACxC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IAmYtD,8CAA8C;sBAjTvC,YAAY;IAmTnB,oDAAoD;;IAEpD,qCAAqC;;IAErC,mIAAmI;;IAEnI,qDAAqD;;IAErD,6CAA6C;;IAE7C,yBAAyB;;QAtFzB,wCAAwC;;QAExC,wDAAwD;wBAbjB,YAAY;QAenD,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;QAEvD,6DAA6D;;;IA4E7D,+DAA+D;;IAE/D;;;;;;;;;;;;;;OAcG;qBAxX6B,SAAS,GAAG,IAAI;IA0XhD;;;;;;;OAOG;yBAnEO,MAAM,WAAW;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE;IAqEzD,uIAAuI;;IAEvI,4DAA4D;;IAE5D,oGAAoG;;IAEpG,sDAAsD;;IAEtD,iEAAiE;;IAEjE,mFAAmF;;IAEnF,kFAAkF;;IAElF,gFAAgF;;IAEhF,wEAAwE;8BAtJ/B,OAAO;EAwKrD"}
+{"version":3,"file":"useEditCanvas.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditCanvas.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAW,MAAM,QAAQ,CAAC;AAC5E,OAAO,EAEL,KAAK,iBAAiB,EAEtB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAC;AAMrB,OAAO,EAEL,KAAK,sBAAsB,EAE3B,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EAIL,KAAK,kBAAkB,EAExB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,cAAc,EAEpB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,WAAW,oBAAoB;IACnC,kGAAkG;IAClG,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,mIAAmI;IACnI,SAAS,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAC;IAC7C;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAChD;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IACnC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,OAAO,CAAC;IACxC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IAsYtD,8CAA8C;sBApTvC,YAAY;IAsTnB,oDAAoD;;IAEpD,qCAAqC;;IAErC,mIAAmI;;IAEnI,qDAAqD;;IAErD,6CAA6C;;IAE7C,yBAAyB;;QAtFzB,wCAAwC;;QAExC,wDAAwD;wBAbjB,YAAY;QAenD,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;QAEvD,6DAA6D;;;IA4E7D,+DAA+D;;IAE/D;;;;;;;;;;;;;;OAcG;qBA3X6B,SAAS,GAAG,IAAI;IA6XhD;;;;;;;OAOG;yBAnEO,MAAM,WAAW;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE;IAqEzD,uIAAuI;;IAEvI,4DAA4D;;IAE5D,oGAAoG;;IAEpG,sDAAsD;;IAEtD,iEAAiE;;IAEjE,mFAAmF;;IAEnF,kFAAkF;;IAElF,gFAAgF;;IAEhF,wEAAwE;8BAtJ/B,OAAO;EAwKrD"}

package/dist/index.cjs

@@ -2834,14 +2834,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);
           }
@@ -3595,7 +3598,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 +3629,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 +3653,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 +3879,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 +3901,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 +3909,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 +3933,6 @@ function OverlayBadge({
     return () => {
       if (rafId) cancelAnimationFrame(rafId);
       observer.disconnect();
-      baseSize.current = null;
     };
   }, [maxScale, minScale, circular]);
   const positionSx = circular ? (() => {