fix(workbench/dialog): consider minimum size in resizing constraints

Ensure proper handling of minimum and maximum size constraints during dialog resizing, preventing unintended behavior when the minimum size exceeds the maximum size.
SchweizerischeBundesbahnen · Jan 23, 2024 · 408676c · 408676c
1 parent cd8f800
commit 408676c
Show file tree

Hide file tree

Showing 2 changed files with 178 additions and 0 deletions.
diff --git a/projects/scion/e2e-testing/src/workbench/dialog.e2e-spec.ts b/projects/scion/e2e-testing/src/workbench/dialog.e2e-spec.ts
@@ -872,6 +872,178 @@ test.describe('Workbench Dialog', () => {
       await expect(dialog.resizeHandles).toHaveCount(0);
     });
 
+    test('should prefer minimal size over maximal size ', async ({appPO, workbenchNavigator}) => {
+      await appPO.navigateTo({microfrontendSupport: false});
+
+      // Open the dialog.
+      const dialogOpenerPage = await workbenchNavigator.openInNewTab(DialogOpenerPagePO);
+      await dialogOpenerPage.open('dialog-page', {cssClass: 'testee'});
+
+      const dialog = appPO.dialog({cssClass: 'testee'});
+
+      const dialogPage = new DialogPagePO(dialog);
+      await dialogPage.enterDialogSize({
+        minWidth: '500px',
+        maxWidth: '400px',
+        minHeight: '500px',
+        maxHeight: '400px',
+      });
+
+      const dialogBounds = await dialog.getDialogBoundingBox();
+
+      await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+        x: dialogBounds.x,
+        y: dialogBounds.y,
+        height: 500,
+        width: 500,
+      }));
+
+      // Trying to resize the dialog ...
+      await test.step('resizing dialog via top handle', async () => {
+        await dialog.resizeTop(-10);
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+
+        await dialog.resizeTop(10);
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+      });
+
+      await test.step('resizing dialog via right handle', async () => {
+        await dialog.resizeRight(-10);
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+
+        await dialog.resizeRight(10);
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+      });
+
+      await test.step('resizing dialog via bottom handle', async () => {
+        await dialog.resizeBottom(-10);
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+
+        await dialog.resizeBottom(10);
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+      });
+
+      await test.step('resizing dialog via left handle', async () => {
+        await dialog.resizeLeft(-10);
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+
+        await dialog.resizeLeft(10);
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+      });
+
+      await test.step('resizing dialog via top-right handle', async () => {
+        await dialog.resizeTopRight({x: -10, y: -10});
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+
+        await dialog.resizeTopRight({x: 10, y: 10});
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+      });
+
+      await test.step('resizing dialog via bottom-right handle', async () => {
+        await dialog.resizeBottomRight({x: -10, y: -10});
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+
+        await dialog.resizeBottomRight({x: 10, y: 10});
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+      });
+
+      await test.step('resizing dialog via bottom-left handle', async () => {
+        await dialog.resizeBottomLeft({x: -10, y: -10});
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+
+        await dialog.resizeBottomLeft({x: 10, y: 10});
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+      });
+
+      await test.step('resizing dialog via top-left handle', async () => {
+        await dialog.resizeTopLeft({x: -10, y: -10});
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+
+        await dialog.resizeTopLeft({x: 10, y: 10});
+        await expect.poll(() => dialog.getDialogBoundingBox()).toEqual(expect.objectContaining({
+          x: dialogBounds.x,
+          y: dialogBounds.y,
+          height: 500,
+          width: 500,
+        }));
+      });
+    });
+
     test.describe('top handle', () => {
 
       test('should resize the dialog when dragging the top handle', async ({appPO, workbenchNavigator}) => {

diff --git a/projects/scion/workbench/src/lib/dialog/resizable.directive.ts b/projects/scion/workbench/src/lib/dialog/resizable.directive.ts
@@ -174,6 +174,12 @@ export class ResizableDirective implements OnInit, OnChanges, OnDestroy {
     this.maxHeight = toPixel(maxHeight, {parentSize: parent.clientHeight});
     this.minWidth = toPixel(minWidth, {parentSize: parent.clientWidth});
     this.maxWidth = toPixel(maxWidth, {parentSize: parent.clientWidth});
+    if (this.maxWidth !== undefined && this.minWidth !== undefined && this.minWidth > this.maxWidth) {
+      this.maxWidth = this.minWidth; // prefer min-width over max-width (as in CSS)
+    }
+    if (this.maxHeight !== undefined && this.minHeight !== undefined && this.minHeight > this.maxHeight) {
+      this.maxHeight = this.minHeight; // prefer min-height over max-height (as in CSS)
+    }
     this._workbenchLayoutService.notifyDragStarting();
   }