@innovastudio/contentbuilder 1.5.34 → 1.5.36

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.34",
+  "version": "1.5.36",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -81534,10 +81534,14 @@ class Common {
   applyPercentage(block) {
     const zoom = this.zoom;
     const rect = this.getRect(block);
-    const container = block.closest('.box-canvas');
+    let container = block.closest('.box-canvas');
+    if (block.parentNode.closest(this.selector)) {
+      // block is in  group
+      container = block.parentNode.closest(this.selector);
+    }
     const containerRect = this.getRect(container); // if container has top/left
 
-    this.horizontalRulerTop = container.querySelector('.h-ruler-top');
+    this.horizontalRulerTop = container.querySelector('.h-ruler-top'); // no rulers in group
     this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
     this.horizontalRulerMiddle = container.querySelector('.h-ruler-middle');
     this.verticalRulerLeft = container.querySelector('.v-ruler-left');
@@ -81549,10 +81553,10 @@ class Common {
     let bottomTouched = false;
     let leftTouched = false;
     let rightTouched = false;
-    if (this.horizontalRulerTop.hasAttribute('data-topTouched')) topTouched = true;
-    if (this.horizontalRulerBottom.hasAttribute('data-bottomTouched')) bottomTouched = true;
-    if (this.verticalRulerLeft.hasAttribute('data-leftTouched')) leftTouched = true;
-    if (this.verticalRulerRight.hasAttribute('data-rightTouched')) rightTouched = true;
+    if (this.horizontalRulerTop && this.horizontalRulerTop.hasAttribute('data-topTouched')) topTouched = true;
+    if (this.horizontalRulerBottom && this.horizontalRulerBottom.hasAttribute('data-bottomTouched')) bottomTouched = true;
+    if (this.verticalRulerLeft && this.verticalRulerLeft.hasAttribute('data-leftTouched')) leftTouched = true;
+    if (this.verticalRulerRight && this.verticalRulerRight.hasAttribute('data-rightTouched')) rightTouched = true;
     let isChildBlock = false;
     if (block.parentNode.matches(this.selector)) {
       // child block
@@ -81631,10 +81635,10 @@ class Common {
 
     // reset
     setTimeout(() => {
-      this.horizontalRulerTop.removeAttribute('data-topTouched');
-      this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
-      this.verticalRulerLeft.removeAttribute('data-leftTouched');
-      this.verticalRulerRight.removeAttribute('data-rightTouched');
+      if (this.horizontalRulerTop) this.horizontalRulerTop.removeAttribute('data-topTouched');
+      if (this.horizontalRulerBottom) this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
+      if (this.verticalRulerLeft) this.verticalRulerLeft.removeAttribute('data-leftTouched');
+      if (this.verticalRulerRight) this.verticalRulerRight.removeAttribute('data-rightTouched');
     }, 10);
   }
   applyPixels(block) {
@@ -82132,6 +82136,8 @@ class Ruler {
     this.rulerRight = null;
   }
   updateRulers(block) {
+    if (block.parentNode.closest(this.selector)) return; // block is in  group
+
     const container = block.closest('.box-canvas');
     this.horizontalRulerTop = container.querySelector('.h-ruler-top');
     this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
@@ -82156,6 +82162,8 @@ class Ruler {
     this.rulerRight = null;
     this.elements = container.querySelectorAll(this.selector);
     this.elements.forEach(element => {
+      if (element.parentNode.closest(this.selector)) return; // block is in  group
+
       if (!this.doc.body.contains(element)) return; // in case element removed (eg. unGroup, block deleted)
 
       if (block.contains(element)) return; // In case of group moving
@@ -82834,7 +82842,6 @@ class Resizable {
     }
 
     this.target = event.target.parentNode; // block
-
     this.clonedTarget = this.doc.querySelector(this.selector + '.cloned');
     event.preventDefault();
     event.stopPropagation();
@@ -82853,6 +82860,8 @@ class Resizable {
         this.startX = touch.clientX;
         this.startY = touch.clientY;
       }
+      this.target.style.transition = ''; // prevent anim/delay while dragging (in case a block has animation transition)
+      if (this.clonedTarget) this.clonedTarget.style.transition = '';
 
       //Initial
       this.initialWidth = parseFloat(getComputedStyle(this.target).width);
@@ -83339,6 +83348,7 @@ class Draggable {
       const y = startY - rect.top + containerRect.top;
       target.setAttribute('data-startx', x);
       target.setAttribute('data-starty', y);
+      target.style.transition = ''; // prevent anim/delay while dragging (in case a block has animation transition)
 
       // reset (from applyPercentage bottomTouched)
       if (target.style.bottom) {
@@ -83415,33 +83425,35 @@ class Draggable {
   updateBlockStyle(target) {
     // Block placement should must not 50% outside the container
     const container = target.closest('.box-canvas');
-    let containerHeight = container.offsetHeight;
-    let containerWidth = container.offsetWidth;
-    /*
-    if(target.offsetTop + target.offsetHeight>=containerHeight) {
-        target.style.top = containerHeight-target.offsetHeight +'px';
-    }
-    if(target.offsetTop<=0) {
+    if (!target.parentNode.closest('.is-group')) {
+      let containerHeight = container.offsetHeight;
+      let containerWidth = container.offsetWidth;
+      /*
+      if(target.offsetTop + target.offsetHeight>=containerHeight) {
+          target.style.top = containerHeight-target.offsetHeight +'px';
+      }
+      if(target.offsetTop<=0) {
+          target.style.top = '0px';
+      }
+      if(target.offsetLeft + target.offsetWidth>=åcontainerWidth) {
+          target.style.left = (containerWidth-target.offsetWidth) +'px';
+      }
+      if(target.offsetLeft<=0) {
+          target.style.left = '0px';
+      }
+      */
+      if (target.offsetTop + target.offsetHeight <= target.offsetHeight / 2) {
         target.style.top = '0px';
-    }
-    if(target.offsetLeft + target.offsetWidth>=åcontainerWidth) {
-        target.style.left = (containerWidth-target.offsetWidth) +'px';
-    }
-    if(target.offsetLeft<=0) {
+      }
+      if (containerHeight - target.offsetTop <= target.offsetHeight / 2) {
+        target.style.top = containerHeight - target.offsetHeight + 'px';
+      }
+      if (target.offsetLeft + target.offsetWidth <= target.offsetWidth / 2) {
         target.style.left = '0px';
-    }
-    */
-    if (target.offsetTop + target.offsetHeight <= target.offsetHeight / 2) {
-      target.style.top = '0px';
-    }
-    if (containerHeight - target.offsetTop <= target.offsetHeight / 2) {
-      target.style.top = containerHeight - target.offsetHeight + 'px';
-    }
-    if (target.offsetLeft + target.offsetWidth <= target.offsetWidth / 2) {
-      target.style.left = '0px';
-    }
-    if (containerWidth - target.offsetLeft <= target.offsetWidth / 2) {
-      target.style.left = containerWidth - target.offsetWidth + 'px';
+      }
+      if (containerWidth - target.offsetLeft <= target.offsetWidth / 2) {
+        target.style.left = containerWidth - target.offsetWidth + 'px';
+      }
     }
 
     // Replace with ruler's alignment
@@ -87813,6 +87825,9 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           let clonedDiv = block.cloneNode(true);
           clonedDiv.style.top = '20%';
           clonedDiv.style.left = '20%';
+          clonedDiv.style.transform = ''; // clear anim
+          clonedDiv.style.transition = '';
+          clonedDiv.style.opacity = '';
           if (builder) {
             const cloneBuilder = clonedDiv.querySelector(this.container);
             cloneBuilder.innerHTML = '';
@@ -87822,7 +87837,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             this.applyBehaviorOn(cloneBuilder);
             cloneBuilder.click();
           } else {
-            block.parentNode.appendChild(clonedDiv);
+            box.appendChild(clonedDiv);
           }
           block.classList.remove('active');
           this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));