@magic-xpa/angular 4.1200.0-dev4120.142 → 4.1200.0-dev4120.144

package/fesm2022/magic-xpa-angular.mjs

@@ -1101,6 +1101,8 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
     originalMouseX = 0;
     originalMouseY = 0;
     isCenteredToWindow = true;
+    static minAllowedWidth = 30;
+    static minAllowedHeight = 30;
     /**
      *
      */
@@ -1223,6 +1225,13 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         this.originalHeight = element.offsetHeight;
         this.originalMouseX = event.clientX;
         this.originalMouseY = event.clientY;
+        // Removes auto margin and set left and top style
+        if (this.isCenteredToWindow) {
+            element.style.left = element.offsetLeft + 'px';
+            element.style.top = element.offsetTop + 'px';
+            element.style.margin = '';
+            this.isCenteredToWindow = false;
+        }
         event.preventDefault();
         event.stopPropagation();
     }
@@ -1236,18 +1245,32 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         if (!this.resizing)
             return;
         const element = this.foregroundElementRef.nativeElement;
+        const parentElement = element.parentNode;
+        const parentWidth = parentElement.offsetWidth;
+        const parentHeight = parentElement.offsetHeight;
+        const rect = element.getBoundingClientRect();
+        const left = rect.left;
+        const top = rect.top;
+        // When the user extends the overlay window to its edge, it becomes hard to grab the border for resizing.
+        // To improve this, 2px are subtracted from maxAllowedWidth and maxAllowedHeight, making it easier to grab the overlay's border for resizing.
+        const maxAllowedWidth = parentWidth - left - 2;
+        const maxAllowedHeight = parentHeight - top - 2;
+        let dx = (event.clientX - this.originalMouseX);
+        let dy = (event.clientY - this.originalMouseY);
         if (this.resizeDirection === 'right' || this.resizeDirection === 'corner') {
-            let dx = (event.clientX - this.originalMouseX);
             let newWidth = this.originalWidth + dx;
-            if (this.isCenteredToWindow)
-                newWidth = this.originalWidth + (2 * dx);
+            if (newWidth > maxAllowedWidth)
+                newWidth = maxAllowedWidth;
+            else if (newWidth < MagicOverlayContainer.minAllowedWidth)
+                newWidth = MagicOverlayContainer.minAllowedWidth;
             element.style.width = `${newWidth}px`;
         }
         if (this.resizeDirection === 'bottom' || this.resizeDirection === 'corner') {
-            let dy = (event.clientY - this.originalMouseY);
             let newHeight = this.originalHeight + dy;
-            if (this.isCenteredToWindow)
-                newHeight = this.originalHeight + (2 * dy);
+            if (newHeight > maxAllowedHeight)
+                newHeight = maxAllowedHeight;
+            else if (newHeight < MagicOverlayContainer.minAllowedHeight)
+                newHeight = MagicOverlayContainer.minAllowedHeight;
             element.style.height = `${newHeight}px`;
         }
     }