@innovastudio/contentbuilder 1.5.193 → 1.5.194

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.193",
+  "version": "1.5.194",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.esm.js

@@ -46991,11 +46991,17 @@ class Image$1 {
       }
       const newPos = util.getElementPosition(elm);
       let scaleX = newPos.scaleX;
+      let extraScaleX = this.getScale(elm).scaleX;
+      let extraScaleY = this.getScale(elm).scaleX;
       imageTool.style.display = 'flex';
       let _toolwidth = imageTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
 
-      let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
-      let top = newPos.top + window.pageYOffset;
+      let w = elm.offsetWidth * extraScaleX * scaleX * this.builder.opts.zoom;
+      let h = elm.offsetHeight * extraScaleY * scaleX * this.builder.opts.zoom;
+
+      // Compensate for the vertical shift caused by scaling
+      let scaleShiftY = (h - elm.offsetHeight * scaleX * this.builder.opts.zoom) / 2;
+      let top = newPos.top + window.pageYOffset + scaleShiftY;
       let left = newPos.left + window.pageXOffset;
       let toolLeft = left + (w / 2 - _toolwidth / 2);
 
@@ -47009,7 +47015,10 @@ class Image$1 {
       }
       imageTool.style.top = top + 'px';
       imageTool.style.left = toolLeft + 'px';
-      if (!this.builder.activeImage.hasAttribute('data-noresize') && (this.builder.imageResizeOnBlock || !this.builder.activeImage.closest('.is-block'))) {
+      const parent = elm.parentNode;
+      const grandparent = parent && parent.parentNode;
+      const hasWrapper = parent && parent.classList.contains('overflow-hidden') || grandparent && grandparent.classList.contains('overflow-hidden');
+      if (!hasWrapper && !this.builder.activeImage.hasAttribute('data-noresize') && (this.builder.imageResizeOnBlock || !this.builder.activeImage.closest('.is-block'))) {
         let imageResizer = this.imageResizer;
         imageResizer.style.top = top + 'px';
         imageResizer.style.left = left + 'px';
@@ -47045,6 +47054,21 @@ class Image$1 {
     if (imageTool) imageTool.style.display = '';
     this.hideImageResizer();
   }
+  getScale(element) {
+    const computedStyle = window.getComputedStyle(element);
+    const transform = computedStyle.transform;
+    if (!transform || transform === 'none') {
+      return {
+        scaleX: 1,
+        scaleY: 1
+      };
+    }
+    const matrix = new DOMMatrix(transform);
+    return {
+      scaleX: matrix.a,
+      scaleY: matrix.d
+    };
+  }
   click(e) {
     const util = this.builder.util;
     const dom = this.builder.dom;
@@ -47070,13 +47094,19 @@ class Image$1 {
         }
         const newPos = util.getElementPosition(elm);
         let scaleX = newPos.scaleX;
+        let extraScaleX = this.getScale(elm).scaleX;
+        let extraScaleY = this.getScale(elm).scaleX;
         this.renderTool();
         let imageTool = this.imageTool;
         imageTool.style.display = 'flex';
         let _toolwidth = imageTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
 
-        let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
-        let top = newPos.top + window.pageYOffset;
+        let w = elm.offsetWidth * extraScaleX * scaleX * this.builder.opts.zoom;
+        let h = elm.offsetHeight * extraScaleY * scaleX * this.builder.opts.zoom;
+
+        // Compensate for the vertical shift caused by scaling
+        let scaleShiftY = (h - elm.offsetHeight * scaleX * this.builder.opts.zoom) / 2;
+        let top = newPos.top + window.pageYOffset + scaleShiftY;
         let left = newPos.left + window.pageXOffset;
         let toolLeft = left + (w / 2 - _toolwidth / 2);
 
@@ -47090,9 +47120,12 @@ class Image$1 {
         }
         imageTool.style.top = top + 'px';
         imageTool.style.left = toolLeft + 'px';
+        const parent = elm.parentNode;
+        const grandparent = parent && parent.parentNode;
+        const hasWrapper = parent && parent.classList.contains('overflow-hidden') || grandparent && grandparent.classList.contains('overflow-hidden');
 
         // Image Resizer
-        if (!elm.hasAttribute('data-noresize') && (this.builder.imageResizeOnBlock || !elm.closest('.is-block'))) {
+        if (!hasWrapper && !elm.hasAttribute('data-noresize') && (this.builder.imageResizeOnBlock || !elm.closest('.is-block'))) {
           let imageResizer = this.imageResizer;
           const newPos = util.getElementPosition(elm);
           let top = newPos.top + window.pageYOffset;
@@ -47121,33 +47154,6 @@ class Image$1 {
           if (this.builder.moveable) this.builder.moveable.updateRect();
           const movControlBox = document.querySelector('.moveable-control-box');
           if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
-
-          /*
-          const handleImageToolClickOut = e =>{
-              let elm = e.target;
-              if(!elm) return;
-              if(!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') && 
-                  !elm.closest('.is-modal') && !elm.closest('.keep-selection') &&
-                  !elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') &&
-                  !elm.closest('img')) { // click outside
-                  
-                  // hide
-                  this.hideImageTool();
-                   document.removeEventListener('click', handleImageToolClickOut);
-                  if(this.builder.iframeDocument) {
-                      this.builder.doc.removeEventListener('click', handleImageToolClickOut);
-                  }
-                  this.builder.handleImageToolClickOut_=false;
-              }
-          };
-          if(!this.builder.handleImageToolClickOut_) {
-              document.addEventListener('click', handleImageToolClickOut);
-              if(this.builder.iframeDocument) {
-                  this.builder.doc.addEventListener('click', handleImageToolClickOut);
-              }
-              this.builder.handleImageToolClickOut_=true;
-          }
-          */
         } else {
           let imageResizer = this.imageResizer;
           imageResizer.style.display = 'none';