@innovastudio/contentbuilder 1.4.112 → 1.4.114

package/public/contentbuilder/contentbuilder.esm.js

@@ -5493,16 +5493,25 @@ class Util {
         // let top = emptyinfo.getBoundingClientRect().top;
         // const left = emptyinfo.getBoundingClientRect().left + (emptyinfo.offsetWidth * this.builder.opts.zoom)/2 - 11;
 
+        /*
         let top, left;
-        if (!this.builder.iframe) {
-          top = emptyinfo.getBoundingClientRect().top;
-          left = emptyinfo.getBoundingClientRect().left + emptyinfo.offsetWidth * this.builder.opts.zoom / 2 - 11;
+        if(!this.builder.iframe) {
+            top = emptyinfo.getBoundingClientRect().top;
+            left = emptyinfo.getBoundingClientRect().left + (emptyinfo.offsetWidth * this.builder.opts.zoom)/2 - 11;
         } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top;
-          let adjX = this.builder.iframe.getBoundingClientRect().left;
-          top = emptyinfo.getBoundingClientRect().top + adjY;
-          left = emptyinfo.getBoundingClientRect().left + (emptyinfo.offsetWidth * this.builder.opts.zoom / 2 - 11) + adjX;
+            let adjY = this.builder.iframe.getBoundingClientRect().top;
+            let adjX = this.builder.iframe.getBoundingClientRect().left;
+             top = emptyinfo.getBoundingClientRect().top + adjY;
+            left = emptyinfo.getBoundingClientRect().left  + ((emptyinfo.offsetWidth * this.builder.opts.zoom)/2 - 11) + adjX;
         }
+        */
+        const newPos = this.getElementPosition(emptyinfo);
+        let top = newPos.top;
+        let left = newPos.left;
+        let scaleX = newPos.scaleX;
+        let scaleY = newPos.scaleY;
+        left = left + (emptyinfo.offsetWidth * (scaleX * this.builder.opts.zoom) / 2 - 11);
+        top = top - (emptyinfo.offsetHeight - emptyinfo.offsetHeight * scaleY);
         quickadd.style.display = 'flex';
         this.showPop(quickadd, false, emptyinfo);
         const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
@@ -5673,16 +5682,9 @@ class Util {
       const btnCellMore = this.colTool.querySelector('.cell-more');
       columnMore.classList.add('transition1');
       setTimeout(() => {
-        let top, left;
-        if (!this.builder.iframe) {
-          top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
-          left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
-        } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-          top = btnCellMore.getBoundingClientRect().top + adjY;
-          left = btnCellMore.getBoundingClientRect().left + adjX;
-        }
+        const newPos = this.getElementPosition(btnCellMore);
+        let top = newPos.top;
+        let left = newPos.left;
         columnMore.style.top = top + 35 + 'px';
         columnMore.style.left = left - 7 + 'px';
         setTimeout(() => {
@@ -7258,6 +7260,39 @@ class Util {
     }
     return pageTemplate;
   }
+  getElementPosition(element) {
+    const iframe = this.builder.iframe;
+    let top, left;
+    let scaleX, scaleY;
+    if (this.builder.iframe) {
+      let divContentView = document.querySelector('.is-content-view');
+      if (!divContentView) divContentView = iframe.parentNode;
+      const divContentViewStyles = window.getComputedStyle(divContentView);
+      const transform = divContentViewStyles.transform;
+      if (transform !== 'none') {
+        const matrixValues = transform.match(/matrix\(([0-9., -]+)\)/)[1].split(',');
+        scaleX = parseFloat(matrixValues[0]);
+        scaleY = parseFloat(matrixValues[3]);
+      } else {
+        scaleX = 1;
+        scaleY = 1;
+      }
+      const iframeRect = iframe.getBoundingClientRect();
+      top = element.getBoundingClientRect().top * scaleY + iframeRect.top;
+      left = element.getBoundingClientRect().left * scaleX + iframeRect.left;
+    } else {
+      top = element.getBoundingClientRect().top;
+      left = element.getBoundingClientRect().left;
+      scaleX = 1;
+      scaleY = 1;
+    }
+    return {
+      top,
+      left,
+      scaleX,
+      scaleY
+    };
+  }
 }
 class Dom {
   constructor(builder) {
@@ -18529,18 +18564,24 @@ class RowTool$1 {
     let rowMore = builderStuff.querySelector('.rowmore');
     dom.addClass(rowMore, 'transition1');
     const elm = rowTool.querySelector('.row-more');
+
+    /*
     let top, left;
-    if (!this.builder.iframe) {
-      top = elm.getBoundingClientRect().top + window.pageYOffset;
-      left = elm.getBoundingClientRect().left + window.pageXOffset;
+    if(!this.builder.iframe) {
+        top = elm.getBoundingClientRect().top + window.pageYOffset;
+        left = elm.getBoundingClientRect().left + window.pageXOffset;
     } else {
-      let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-      let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-      top = elm.getBoundingClientRect().top;
-      left = elm.getBoundingClientRect().left;
-      top = top + adjY;
-      left = left + adjX;
+        let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+        let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+         top = elm.getBoundingClientRect().top;
+        left = elm.getBoundingClientRect().left;
+        top = top + adjY;
+        left = left + adjX;
     }
+    */
+    const newPos = this.builder.util.getElementPosition(elm);
+    let top = newPos.top;
+    let left = newPos.left;
 
     // const w = rowMore.offsetWidth; 
     rowMore.style.top = top - 8 + 'px';
@@ -49731,6 +49772,13 @@ class Image$1 {
 
         // get active image
         let activeImage = this.builder.activeImage;
+        let newPos = this.builder.util.getElementPosition(activeImage);
+        if (this.builder.iframe) {
+          let scaleX = newPos.scaleX;
+          let scaleY = newPos.scaleY;
+          width = width / scaleX;
+          height = height / scaleY;
+        }
         let bCircular = false;
         if (dom.hasClass(activeImage.parentNode, 'img-circular')) {
           activeImage = activeImage.parentNode;
@@ -49758,17 +49806,21 @@ class Image$1 {
         }
 
         // sync (target = imageResizer)
-
+        /*
         let top, left;
-        if (!this.builder.iframe) {
-          top = activeImage.getBoundingClientRect().top + window.pageYOffset;
-          left = activeImage.getBoundingClientRect().left + window.pageXOffset;
+        if(!this.builder.iframe) {
+            top = activeImage.getBoundingClientRect().top + window.pageYOffset;
+            left = activeImage.getBoundingClientRect().left + window.pageXOffset;
         } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-          top = activeImage.getBoundingClientRect().top + adjY;
-          left = activeImage.getBoundingClientRect().left + adjX;
+            let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+            let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+             top = activeImage.getBoundingClientRect().top + adjY;
+            left = activeImage.getBoundingClientRect().left+ adjX;
         }
+        */
+        newPos = this.builder.util.getElementPosition(activeImage);
+        let top = newPos.top;
+        let left = newPos.left;
         target.style.top = top + 'px';
         target.style.left = left + 'px';
         target.style.width = activeImage.offsetWidth + 'px';
@@ -49841,7 +49893,8 @@ class Image$1 {
         //Trigger Change event
         this.builder.opts.onChange();
       });
-      document.querySelector('.moveable-control-box').style.display = 'none';
+      const movControlBox = document.querySelector('.moveable-control-box');
+      if (movControlBox) movControlBox.style.display = 'none';
       imageResizer.addEventListener('click', () => {
         if (!this.builder.activeImage) return;
         this.builder.activeImage.click();
@@ -49881,16 +49934,22 @@ class Image$1 {
         imageProgress.style.display = 'table';
         imageProgress.style.width = img.offsetWidth * this.builder.opts.zoom + 'px';
         imageProgress.style.height = img.offsetHeight * this.builder.opts.zoom + 'px';
+
+        /*
         let top, left;
-        if (!this.builder.iframe) {
-          top = img.getBoundingClientRect().top + window.pageYOffset;
-          left = img.getBoundingClientRect().left + window.pageXOffset;
+        if(!this.builder.iframe) {
+            top = img.getBoundingClientRect().top + window.pageYOffset;
+            left = img.getBoundingClientRect().left + window.pageXOffset;
         } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-          top = img.getBoundingClientRect().top + adjY;
-          left = img.getBoundingClientRect().left + adjX;
+            let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+            let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+                 top = img.getBoundingClientRect().top + adjY;
+            left = img.getBoundingClientRect().left+ adjX;
         }
+        */
+        const newPos = this.builder.util.getElementPosition(img);
+        let top = newPos.top + window.pageYOffset;
+        let left = newPos.left + window.pageXOffset;
         imageProgress.style.top = top + 'px';
         imageProgress.style.left = left + 'px';
 
@@ -49973,7 +50032,8 @@ class Image$1 {
       dom.addEventListener(btnImageLink, 'click', () => {
         //imageTool.style.display = 'none';
 
-        document.querySelector('.moveable-control-box').style.display = 'none'; //needed by Safari (prevent z-index problem)
+        const movControlBox = document.querySelector('.moveable-control-box');
+        if (movControlBox) movControlBox.style.display = 'none'; //needed by Safari (prevent z-index problem)
 
         if (this.builder.opts.onImageSettingClick) {
           this.builder.opts.onImageSettingClick();
@@ -50032,7 +50092,8 @@ class Image$1 {
       elm = modalImageLink.querySelector('.input-cancel');
       dom.addEventListener(elm, 'click', () => {
         util.hideModal(modalImageLink);
-        document.querySelector('.moveable-control-box').style.display = 'block'; //needed by Safari (prevent z-index problem)
+        const movControlBox = document.querySelector('.moveable-control-box');
+        if (movControlBox) movControlBox.style.display = 'none'; //needed by Safari (prevent z-index problem)
       });
 
       // Apply link to image
@@ -50347,7 +50408,8 @@ class Image$1 {
             zoomable: false
           });
         }
-        document.querySelector('.moveable-control-box').style.display = 'none'; //needed by Safari (prevent z-index problem)
+        const movControlBox = document.querySelector('.moveable-control-box');
+        if (movControlBox) movControlBox.style.display = 'none'; //needed by Safari (prevent z-index problem)
       });
 
       // Set crop proportion
@@ -50364,7 +50426,8 @@ class Image$1 {
       let btnCancel = modalImageEdit.querySelector('.input-cancel');
       dom.addEventListener(btnCancel, 'click', () => {
         util.hideModal(modalImageEdit);
-        document.querySelector('.moveable-control-box').style.display = 'block'; //needed by Safari (prevent z-index problem)
+        const movControlBox = document.querySelector('.moveable-control-box');
+        if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block'; //needed by Safari (prevent z-index problem)
       });
 
       // Apply (crop) image
@@ -50470,23 +50533,29 @@ class Image$1 {
         if (dom.hasClass(elm.parentNode, 'img-circular')) {
           elm = elm.parentNode;
         }
+        const newPos = this.builder.util.getElementPosition(elm);
+        let scaleX = newPos.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 * this.builder.opts.zoom;
+        let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
         // let top = elm.getBoundingClientRect().top + window.pageYOffset;
         // let left = elm.getBoundingClientRect().left+ window.pageXOffset;
 
+        /*
         let top, left;
-        if (!this.builder.iframe) {
-          top = elm.getBoundingClientRect().top + window.pageYOffset;
-          left = elm.getBoundingClientRect().left + window.pageXOffset;
+        if(!this.builder.iframe) {
+            top = elm.getBoundingClientRect().top + window.pageYOffset;
+            left = elm.getBoundingClientRect().left + window.pageXOffset;
         } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-          top = elm.getBoundingClientRect().top + adjY;
-          left = elm.getBoundingClientRect().left + adjX;
+            let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+            let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+                 top = elm.getBoundingClientRect().top + adjY;
+            left = elm.getBoundingClientRect().left+ adjX;
         }
+        */
+        let top = newPos.top + window.pageYOffset;
+        let left = newPos.left + window.pageXOffset;
         let toolLeft = left + (w / 2 - _toolwidth / 2);
 
         //Adjust left in case an element is outside the screen
@@ -50504,12 +50573,13 @@ class Image$1 {
         imageResizer.style.left = left + 'px';
         imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom + 'px';
         imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom + 'px';
-        imageResizer.style.display = 'block';
+        if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
         this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
 
         // moveable
-        this.builder.moveable.updateRect();
-        document.querySelector('.moveable-control-box').style.display = 'block';
+        if (this.builder.moveable) this.builder.moveable.updateRect();
+        const movControlBox = document.querySelector('.moveable-control-box');
+        if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
         if (elm.offsetWidth === 0) {
           // when there is image link applied
 
@@ -50525,8 +50595,9 @@ class Image$1 {
           imageResizer.style.left = '-10px';
           imageResizer.style.width = '1px';
           imageResizer.style.height = '1px';
-          this.builder.moveable.updateRect();
-          document.querySelector('.moveable-control-box').style.display = 'none';
+          if (this.builder.moveable) this.builder.moveable.updateRect();
+          const movControlBox = document.querySelector('.moveable-control-box');
+          if (movControlBox) movControlBox.style.display = 'none';
         }
         this.util.repositionColumnTool();
       }, 0); // refesh() is called after img onload, so no need to have a delay.
@@ -50542,23 +50613,29 @@ class Image$1 {
       if (dom.hasClass(elm.parentNode, 'img-circular')) {
         elm = elm.parentNode;
       }
+      const newPos = this.builder.util.getElementPosition(elm);
+      let scaleX = newPos.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 * this.builder.opts.zoom;
+      let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
       // let top = elm.getBoundingClientRect().top + window.pageYOffset;
       // let left = elm.getBoundingClientRect().left+ window.pageXOffset;
 
+      /*
       let top, left;
-      if (!this.builder.iframe) {
-        top = elm.getBoundingClientRect().top + window.pageYOffset;
-        left = elm.getBoundingClientRect().left + window.pageXOffset;
+      if(!this.builder.iframe) {
+          top = elm.getBoundingClientRect().top + window.pageYOffset;
+          left = elm.getBoundingClientRect().left + window.pageXOffset;
       } else {
-        let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-        let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-        top = elm.getBoundingClientRect().top + adjY;
-        left = elm.getBoundingClientRect().left + adjX;
+          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+           top = elm.getBoundingClientRect().top + adjY;
+          left = elm.getBoundingClientRect().left+ adjX;
       }
+      */
+      let top = newPos.top + window.pageYOffset;
+      let left = newPos.left + window.pageXOffset;
       let toolLeft = left + (w / 2 - _toolwidth / 2);
 
       //Adjust left in case an element is outside the screen
@@ -50576,12 +50653,13 @@ class Image$1 {
       imageResizer.style.left = left + 'px';
       imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom + 'px';
       imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom + 'px';
-      imageResizer.style.display = 'block';
+      if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
       this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
 
       // moveable
-      this.builder.moveable.updateRect();
-      document.querySelector('.moveable-control-box').style.display = 'block';
+      if (this.builder.moveable) this.builder.moveable.updateRect();
+      const movControlBox = document.querySelector('.moveable-control-box');
+      if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
     }
   }
   click(e) {
@@ -50600,21 +50678,28 @@ class Image$1 {
         if (dom.hasClass(elm.parentNode, 'img-circular')) {
           elm = elm.parentNode;
         }
+        const newPos = this.builder.util.getElementPosition(elm);
+        let scaleX = newPos.scaleX;
         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 * this.builder.opts.zoom;
+        let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
+
+        /*
         let top, left;
-        if (!this.builder.iframe) {
-          top = elm.getBoundingClientRect().top + window.pageYOffset;
-          left = elm.getBoundingClientRect().left + window.pageXOffset;
+        if(!this.builder.iframe) {
+            top = elm.getBoundingClientRect().top + window.pageYOffset;
+            left = elm.getBoundingClientRect().left + window.pageXOffset;
         } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-          top = elm.getBoundingClientRect().top + adjY;
-          left = elm.getBoundingClientRect().left + adjX;
+            let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+            let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+                 top = elm.getBoundingClientRect().top + adjY;
+            left = elm.getBoundingClientRect().left+ adjX;
         }
+        */
+        let top = newPos.top + window.pageYOffset;
+        let left = newPos.left + window.pageXOffset;
         let toolLeft = left + (w / 2 - _toolwidth / 2);
 
         //Adjust left in case an element is outside the screen
@@ -50631,21 +50716,29 @@ class Image$1 {
         // Image Resizer
         if (!elm.hasAttribute('data-noresize')) {
           let imageResizer = this.imageResizer;
+
+          /*
           let top, left;
-          if (!this.builder.iframe) {
-            top = elm.getBoundingClientRect().top + window.pageYOffset;
-            left = elm.getBoundingClientRect().left + window.pageXOffset;
+          if(!this.builder.iframe) {
+              top = elm.getBoundingClientRect().top + window.pageYOffset;
+              left = elm.getBoundingClientRect().left + window.pageXOffset;
           } else {
-            let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-            let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-            top = elm.getBoundingClientRect().top + adjY;
-            left = elm.getBoundingClientRect().left + adjX;
+              let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+              let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+               top = elm.getBoundingClientRect().top + adjY;
+              left = elm.getBoundingClientRect().left+ adjX;
           }
+          */
+          const newPos = this.builder.util.getElementPosition(elm);
+          let top = newPos.top + window.pageYOffset;
+          let left = newPos.left + window.pageXOffset;
+          let scaleX = newPos.scaleX;
+          let scaleY = newPos.scaleY;
           imageResizer.style.top = top + 'px';
           imageResizer.style.left = left + 'px';
-          imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom + 'px';
-          imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom + 'px';
-          imageResizer.style.display = 'block';
+          imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom * scaleX + 'px';
+          imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom * scaleY + 'px';
+          if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
           this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
 
           //Get & save original image width
@@ -50660,8 +50753,9 @@ class Image$1 {
           imageResizer.setAttribute('data-width', Math.round(imgwidthpx));
 
           // moveable
-          this.builder.moveable.updateRect();
-          document.querySelector('.moveable-control-box').style.display = 'block';
+          if (this.builder.moveable) this.builder.moveable.updateRect();
+          const movControlBox = document.querySelector('.moveable-control-box');
+          if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
 
           /*
           if(elm.getAttribute('data-mov')!=='1'){
@@ -50773,8 +50867,9 @@ class Image$1 {
           imageResizer.style.left = '-10px';
           imageResizer.style.width = '1px';
           imageResizer.style.height = '1px';
-          this.builder.moveable.updateRect();
-          document.querySelector('.moveable-control-box').style.display = 'none';
+          if (this.builder.moveable) this.builder.moveable.updateRect();
+          const movControlBox = document.querySelector('.moveable-control-box');
+          if (movControlBox) movControlBox.style.display = 'none';
         }
         let prog = false;
         if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) ; else {
@@ -50791,8 +50886,9 @@ class Image$1 {
           imageResizer.style.left = '-10px';
           imageResizer.style.width = '1px';
           imageResizer.style.height = '1px';
-          this.builder.moveable.updateRect();
-          document.querySelector('.moveable-control-box').style.display = 'none';
+          if (this.builder.moveable) this.builder.moveable.updateRect();
+          const movControlBox = document.querySelector('.moveable-control-box');
+          if (movControlBox) movControlBox.style.display = 'none';
         }
 
         // NOTE:
@@ -50817,8 +50913,9 @@ class Image$1 {
         imageResizer.style.left = '-10px';
         imageResizer.style.width = '1px';
         imageResizer.style.height = '1px';
-        this.builder.moveable.updateRect();
-        document.querySelector('.moveable-control-box').style.display = 'none';
+        if (this.builder.moveable) this.builder.moveable.updateRect();
+        const movControlBox = document.querySelector('.moveable-control-box');
+        if (movControlBox) movControlBox.style.display = 'none';
       }
     } else {
       let imageTool = this.imageTool;
@@ -50832,8 +50929,9 @@ class Image$1 {
       imageResizer.style.left = '-10px';
       imageResizer.style.width = '1px';
       imageResizer.style.height = '1px';
-      this.builder.moveable.updateRect();
-      document.querySelector('.moveable-control-box').style.display = 'none';
+      if (this.builder.moveable) this.builder.moveable.updateRect();
+      const movControlBox = document.querySelector('.moveable-control-box');
+      if (movControlBox) movControlBox.style.display = 'none';
     }
   }
 
@@ -50861,6 +50959,11 @@ class Image$1 {
     let imageResizer = document.querySelector('#divImageResizer');
     imageResizer.style.width = width * this.builder.opts.zoom + 'px';
     imageResizer.style.height = height * this.builder.opts.zoom + 'px';
+    const newPos = this.builder.util.getElementPosition(imageResizer);
+    let scaleX = newPos.scaleX;
+    let scaleY = newPos.scaleY;
+    imageResizer.style.width = width * this.builder.opts.zoom * scaleX + 'px';
+    imageResizer.style.height = height * this.builder.opts.zoom * scaleY + 'px';
   }
   processImage(file, targetImg, processImageDone) {
     //file can also be an URL (from the same host), ex. file = "/assets/image.jpg";
@@ -58065,15 +58168,25 @@ class RowTool {
         let quickadd = this.builder.builderStuff.querySelector('.is-pop.quickadd');
         let tabs = quickadd.querySelector('.is-pop-tabs');
         tabs.style.display = 'flex';
+
+        /*
         let top, left;
-        if (!this.builder.iframe) {
-          top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
-          left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
+        if(!this.builder.iframe) {
+            top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
+            left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
         } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-          top = btnCellAdd.getBoundingClientRect().top + adjY + 10;
-          left = btnCellAdd.getBoundingClientRect().left + adjX + 5;
+            let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+            let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+             top = btnCellAdd.getBoundingClientRect().top + adjY + 10;
+            left = btnCellAdd.getBoundingClientRect().left + adjX + 5;
+        }
+        */
+        const newPos = this.util.getElementPosition(btnCellAdd);
+        let top = newPos.top + window.pageYOffset;
+        let left = newPos.left + window.pageXOffset;
+        if (this.builder.iframe) {
+          // top = top;
+          left = left + 3;
         }
 
         // quickadd.style.display = 'flex';
@@ -58100,16 +58213,22 @@ class RowTool {
       if (btnCellMore) dom.addEventListener(btnCellMore, 'click', () => {
         let cell = util.cellSelected();
         if (!cell) return;
+
+        /*
         let top, left;
-        if (!this.builder.iframe) {
-          top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
-          left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
+        if(!this.builder.iframe) {
+            top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
+            left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
         } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-          top = btnCellMore.getBoundingClientRect().top + adjY;
-          left = btnCellMore.getBoundingClientRect().left + adjX;
+            let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+            let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+             top = btnCellMore.getBoundingClientRect().top + adjY;
+            left = btnCellMore.getBoundingClientRect().left + adjX;
         }
+        */
+        const newPos = this.util.getElementPosition(btnCellMore);
+        let top = newPos.top + window.pageYOffset;
+        let left = newPos.left + window.pageXOffset;
         const columnMore = builderStuff.querySelector('.columnmore');
 
         // columnMore.style.display = 'flex';
@@ -58165,7 +58284,7 @@ class RowTool {
           // Grid Editor Status
           // On/off outline button
           const btnGridOutline = grideditor.querySelector('.grid-outline');
-          const container = document.querySelector(this.builder.opts.container); // get one
+          const container = this.builder.doc.querySelector(this.builder.opts.container); // get one
           if (container.hasAttribute('gridoutline')) {
             dom.addClass(btnGridOutline, 'on');
           } else {
@@ -58205,16 +58324,21 @@ class RowTool {
         // const top = btnMore.getBoundingClientRect().top + window.pageYOffset;
         // const left = btnMore.getBoundingClientRect().left + window.pageXOffset;
 
+        /*
         let top, left;
-        if (!this.builder.iframe) {
-          top = btnMore.getBoundingClientRect().top + window.pageYOffset;
-          left = btnMore.getBoundingClientRect().left + window.pageXOffset;
+        if(!this.builder.iframe) {
+            top = btnMore.getBoundingClientRect().top + window.pageYOffset;
+            left = btnMore.getBoundingClientRect().left + window.pageXOffset;
         } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-          top = btnMore.getBoundingClientRect().top + adjY;
-          left = btnMore.getBoundingClientRect().left + adjX;
+            let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+            let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+             top = btnMore.getBoundingClientRect().top + adjY;
+            left = btnMore.getBoundingClientRect().left + adjX;
         }
+        */
+        const newPos = this.util.getElementPosition(btnMore);
+        let top = newPos.top + window.pageYOffset;
+        let left = newPos.left + window.pageXOffset;
 
         // rowMore.style.display = 'flex';
         util.showPop(rowMore, false, btnMore);
@@ -58391,16 +58515,22 @@ class RowAddTool {
       let tabs = quickadd.querySelector('.is-pop-tabs');
       tabs.style.display = 'none';
       const viewportHeight = window.innerHeight;
+
+      /*
       let top, left;
-      if (!this.builder.iframe) {
-        top = btnRowAdd.getBoundingClientRect().top;
-        left = btnRowAdd.getBoundingClientRect().left;
+      if(!this.builder.iframe) {
+          top = btnRowAdd.getBoundingClientRect().top;
+          left = btnRowAdd.getBoundingClientRect().left;
       } else {
-        let adjY = this.builder.iframe.getBoundingClientRect().top;
-        let adjX = this.builder.iframe.getBoundingClientRect().left;
-        top = btnRowAdd.getBoundingClientRect().top + adjY;
-        left = btnRowAdd.getBoundingClientRect().left + adjX;
+          let adjY = this.builder.iframe.getBoundingClientRect().top;
+          let adjX = this.builder.iframe.getBoundingClientRect().left;
+           top = btnRowAdd.getBoundingClientRect().top + adjY;
+          left = btnRowAdd.getBoundingClientRect().left + adjX;
       }
+      */
+      const newPos = util.getElementPosition(btnRowAdd);
+      let top = newPos.top;
+      let left = newPos.left;
 
       // quickadd.style.display = 'flex';
       util.showPop(quickadd, false, btnRowAdd);
@@ -66242,17 +66372,22 @@ class ElementTool {
       let tabs = quickadd.querySelector('.is-pop-tabs');
       tabs.style.display = 'none';
       const viewportHeight = window.innerHeight;
+
+      /*
       let top, left;
-      if (!this.builder.iframe) {
-        top = elmAdd.getBoundingClientRect().top;
-        left = elmAdd.getBoundingClientRect().left;
+      if(!this.builder.iframe) {
+          top = elmAdd.getBoundingClientRect().top;
+          left = elmAdd.getBoundingClientRect().left;
       } else {
-        let adjY = this.builder.iframe.getBoundingClientRect().top; // + window.pageYOffset;
-        let adjX = this.builder.iframe.getBoundingClientRect().left; // + window.pageXOffset;
-
-        top = elmAdd.getBoundingClientRect().top + adjY;
-        left = elmAdd.getBoundingClientRect().left + adjX;
+          let adjY = this.builder.iframe.getBoundingClientRect().top;// + window.pageYOffset;
+          let adjX = this.builder.iframe.getBoundingClientRect().left;// + window.pageXOffset;
+           top = elmAdd.getBoundingClientRect().top + adjY ;
+          left = elmAdd.getBoundingClientRect().left + adjX;
       }
+      */
+      const newPos = this.builder.util.getElementPosition(elmAdd);
+      let top = newPos.top;
+      let left = newPos.left;
 
       // quickadd.style.display = 'flex';
       util.showPop(quickadd, false, elmAdd);
@@ -66365,17 +66500,22 @@ class ElementTool {
     const btnMore = elementTool.querySelector('.elm-more');
     dom.addEventListener(btnMore, 'click', () => {
       const viewportHeight = window.innerHeight;
+
+      /*
       let top, left;
-      if (!this.builder.iframe) {
-        top = btnMore.getBoundingClientRect().top;
-        left = btnMore.getBoundingClientRect().left;
+      if(!this.builder.iframe) {
+          top = btnMore.getBoundingClientRect().top;
+          left = btnMore.getBoundingClientRect().left;
       } else {
-        let adjY = this.builder.iframe.getBoundingClientRect().top; // + window.pageYOffset;
-        let adjX = this.builder.iframe.getBoundingClientRect().left; // + window.pageXOffset;
-
-        top = btnMore.getBoundingClientRect().top + adjY;
-        left = btnMore.getBoundingClientRect().left + adjX;
+          let adjY = this.builder.iframe.getBoundingClientRect().top;// + window.pageYOffset;
+          let adjX = this.builder.iframe.getBoundingClientRect().left;// + window.pageXOffset;
+           top = btnMore.getBoundingClientRect().top + adjY;
+          left = btnMore.getBoundingClientRect().left + adjX;
       }
+      */
+      const newPos = this.builder.util.getElementPosition(btnMore);
+      let top = newPos.top;
+      let left = newPos.left;
 
       // elementMore.style.display = 'flex';
       util.showPop(elementMore, false, btnMore);
@@ -66541,18 +66681,24 @@ class ElementTool {
     dom.addClass(elementMore, 'transition1');
     let elmMore = elementTool.querySelector('.elm-more');
     const viewportHeight = window.innerHeight;
+
+    /*
     let top, left;
-    if (!this.builder.iframe) {
-      top = elmMore.getBoundingClientRect().top;
-      left = elmMore.getBoundingClientRect().left;
+    if(!this.builder.iframe) {
+        top = elmMore.getBoundingClientRect().top;
+        left = elmMore.getBoundingClientRect().left;
     } else {
-      let adjY = this.builder.iframe.getBoundingClientRect().top;
-      let adjX = this.builder.iframe.getBoundingClientRect().left;
-      top = elmMore.getBoundingClientRect().top;
-      left = elmMore.getBoundingClientRect().left;
-      top = top + adjY;
-      left = left + adjX;
+        let adjY = this.builder.iframe.getBoundingClientRect().top;
+        let adjX = this.builder.iframe.getBoundingClientRect().left;
+         top = elmMore.getBoundingClientRect().top;
+        left = elmMore.getBoundingClientRect().left;
+        top = top + adjY;
+        left = left + adjX;
     }
+    */
+    const newPos = this.builder.util.getElementPosition(elmMore);
+    let top = newPos.top;
+    let left = newPos.left;
 
     // elementMore.style.display = 'flex';
     const btnMore = elementTool.querySelector('.elm-more');
@@ -73203,11 +73349,20 @@ class Tooltip {
       let top, left;
       top = elm.getBoundingClientRect().top + window.pageYOffset;
       left = elm.getBoundingClientRect().left + window.pageXOffset;
+
+      /*
+      if(iframe) {
+          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+           top = elm.getBoundingClientRect().top + adjY;
+          left = elm.getBoundingClientRect().left + adjX;
+      }
+      */
+
       if (iframe) {
-        let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-        let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-        top = elm.getBoundingClientRect().top + adjY;
-        left = elm.getBoundingClientRect().left + adjX;
+        const newPos = this.util.getElementPosition(elm);
+        top = newPos.top;
+        left = newPos.left;
       }
 
       //console.log(top + ' - ' + left);
@@ -75327,6 +75482,8 @@ class ContentStuff {
 
         .is-tool.is-element-tool {
             background: rgba(243, 243, 243, 0.9);
+            border-radius: 3px;
+            overflow: hidden;
         } 
         .is-tool.is-element-tool button {
             width: 25px; 
@@ -75373,8 +75530,11 @@ class ContentStuff {
             flex-direction: column;
             width: auto;
             left: auto;
-            right: -40px;
+            right: -30px;
+            border-radius: 2px;
+            overflow: hidden;
         }
+
         .is-tool.is-row-tool button {
             width: 25px; 
             height: 25px;
@@ -75507,6 +75667,9 @@ class ContentStuff {
             flex-direction: row;
             margin-top: 0px;
             margin-left: -1px;
+            box-shadow: none;
+            border-radius: 2px;
+            overflow: hidden;
         }
         .is-tool.is-col-tool button {
             width: 25px;
@@ -78968,6 +79131,9 @@ class ContentBuilder {
       toolbar: 'top',
       toolbarDisplay: 'auto',
       shortenHTML: true,
+      simpleEditingBreakpoint: '970px',
+      // iframe only
+
       resizeHeight: false,
       snippetsSidebarDisplay: 'auto',
       // snippetDisplay: 'auto', // values: auto, visible (a new alternative). If used, will set the snippetsSidebarDisplay
@@ -79848,6 +80014,12 @@ class ContentBuilder {
     this.win = win;
     this.doc = doc;
     this.doc.body.classList.add('data-editor');
+
+    // Disable on mobile
+    const viewportWidth = this.doc.body.clientWidth;
+    if (viewportWidth <= 768) {
+      this.hideImageResizer = true;
+    }
     const dom = new Dom(this);
     this.dom = dom;
     const util = new Util(this); // General utilities
@@ -80005,6 +80177,12 @@ class ContentBuilder {
       this.win.addEventListener('resize', this.doWindowResize = () => {
         this.util.clearActiveCell();
         this.util.clearControls();
+
+        // Disable on mobile
+        const viewportWidth = this.doc.body.clientWidth;
+        if (viewportWidth <= 768) {
+          this.hideImageResizer = true;
+        }
       });
     }
 
@@ -82397,8 +82575,12 @@ class ContentBuilder {
 
       // Enable resizable on click
       if (!col.classList.contains('noresize')) {
-        this.resize = new Resize(col, this);
-        this.resize.enable();
+        // Disable on mobile
+        const viewportWidth = this.doc.body.clientWidth;
+        if (viewportWidth > 768) {
+          this.resize = new Resize(col, this);
+          this.resize.enable();
+        }
       }
     }
     if (this.settings.onSelectionChange) this.settings.onSelectionChange(e);