feat: add option to keep dialog within viewport when dragging (#11030) (#11076)

* feat: add option to keep dialog within viewport when dragging

* add delta for assertions in Firefox

* clarify that the property only affects dragging

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>

Author: vaadin-bot

packages/dialog/src/vaadin-dialog-draggable-mixin.d.ts

@@ -21,4 +21,12 @@ export declare class DialogDraggableMixinClass {
    * "`draggable-leaf-only`" class name.
    */
   draggable: boolean;
+
+  /**
+   * Set to true to prevent dragging the dialog outside the viewport bounds.
+   * When enabled, all four edges of the dialog will remain visible during dragging.
+   * The dialog may still become partially hidden when the viewport is resized.
+   * @attr {boolean} keep-in-viewport
+   */
+  keepInViewport: boolean;
 }

packages/dialog/src/vaadin-dialog-draggable-mixin.js

@@ -31,6 +31,19 @@ export const DialogDraggableMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
+        /**
+         * Set to true to prevent dragging the dialog outside the viewport bounds.
+         * When enabled, all four edges of the dialog will remain visible during dragging.
+         * The dialog may still become partially hidden when the viewport is resized.
+         * @attr {boolean} keep-in-viewport
+         * @type {boolean}
+         */
+        keepInViewport: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
         /** @private */
         _touchDevice: {
           type: Boolean,
@@ -106,8 +119,22 @@ export const DialogDraggableMixin = (superClass) =>
     _drag(e) {
       const event = getMouseOrFirstTouchEvent(e);
       if (eventInWindow(event)) {
-        const top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top);
-        const left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left);
+        let top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top);
+        let left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left);
+
+        if (this.keepInViewport) {
+          const { width, height } = this._originalBounds;
+          // Get the overlay container's position to account for its offset from the viewport
+          const containerBounds = this.$.overlay.getBoundingClientRect();
+          // Calculate bounds so the dialog's visual edges stay within the viewport
+          const minLeft = -containerBounds.left;
+          const maxLeft = window.innerWidth - containerBounds.left - width;
+          const minTop = -containerBounds.top;
+          const maxTop = window.innerHeight - containerBounds.top - height;
+          left = Math.max(minLeft, Math.min(left, maxLeft));
+          top = Math.max(minTop, Math.min(top, maxTop));
+        }
+
         this.top = top;
         this.left = left;
       }

packages/dialog/test/draggable-resizable.test.js

@@ -658,6 +658,87 @@ describe('draggable', () => {
     await nextUpdate(dialog);
     expect(dialog.$.overlay.hasAttribute('draggable')).to.be.false;
   });
+
+  describe('keepInViewport', () => {
+    // Helper to drag to absolute coordinates within the viewport
+    function dragTo(target, toX, toY) {
+      const targetBounds = target.getBoundingClientRect();
+      const fromXY = {
+        x: Math.floor(targetBounds.left + targetBounds.width / 2),
+        y: Math.floor(targetBounds.top + targetBounds.height / 2),
+      };
+      const toXY = { x: toX, y: toY };
+      dispatchMouseEvent(target, 'mousedown', fromXY);
+      dispatchMouseEvent(target, 'mousemove', fromXY);
+      dispatchMouseEvent(target, 'mousemove', toXY);
+      dispatchMouseEvent(target, 'mouseup', toXY);
+    }
+
+    beforeEach(async () => {
+      dialog.keepInViewport = true;
+      await nextUpdate(dialog);
+    });
+
+    it('should not drag dialog past left viewport edge', async () => {
+      dragTo(container, 0, bounds.top + bounds.height / 2);
+      await nextRender();
+
+      const draggedBounds = container.getBoundingClientRect();
+      expect(Math.floor(draggedBounds.left)).to.be.closeTo(0, 1);
+    });
+
+    it('should not drag dialog past top viewport edge', async () => {
+      dragTo(container, bounds.left + bounds.width / 2, 0);
+      await nextRender();
+
+      const draggedBounds = container.getBoundingClientRect();
+      expect(Math.floor(draggedBounds.top)).to.closeTo(0, 1);
+    });
+
+    it('should not drag dialog past right viewport edge', async () => {
+      dragTo(container, window.innerWidth, bounds.top + bounds.height / 2);
+      await nextRender();
+
+      const draggedBounds = container.getBoundingClientRect();
+      expect(Math.floor(draggedBounds.right)).to.closeTo(window.innerWidth, 1);
+    });
+
+    it('should not drag dialog past bottom viewport edge', async () => {
+      dragTo(container, bounds.left + bounds.width / 2, window.innerHeight);
+      await nextRender();
+
+      const draggedBounds = container.getBoundingClientRect();
+      expect(Math.floor(draggedBounds.bottom)).to.closeTo(window.innerHeight, 1);
+    });
+
+    it('should allow normal dragging within viewport', async () => {
+      const initialBounds = container.getBoundingClientRect();
+      dx = 50;
+      drag(container);
+      await nextRender();
+      const draggedBounds = container.getBoundingClientRect();
+      expect(Math.floor(draggedBounds.top)).to.be.eql(Math.floor(initialBounds.top + 50));
+      expect(Math.floor(draggedBounds.left)).to.be.eql(Math.floor(initialBounds.left + 50));
+    });
+
+    it('should allow dragging outside of viewport with keepInViewport disabled', async () => {
+      dialog.keepInViewport = false;
+      await nextUpdate(dialog);
+
+      dragTo(container, 0, bounds.top + bounds.height / 2);
+      await nextRender();
+
+      const draggedBounds = container.getBoundingClientRect();
+      expect(Math.floor(draggedBounds.left)).to.lessThan(0);
+    });
+
+    it('should reflect keepInViewport attribute', async () => {
+      expect(dialog.hasAttribute('keep-in-viewport')).to.be.true;
+      dialog.keepInViewport = false;
+      await nextUpdate(dialog);
+      expect(dialog.hasAttribute('keep-in-viewport')).to.be.false;
+    });
+  });
 });
 
 describe('touch', () => {

packages/dialog/test/typings/dialog.types.ts

@@ -50,6 +50,7 @@ dialog.addEventListener('closed', (event) => {
 assertType<boolean>(dialog.opened);
 assertType<boolean>(dialog.modeless);
 assertType<boolean>(dialog.draggable);
+assertType<boolean>(dialog.keepInViewport);
 assertType<boolean>(dialog.resizable);
 assertType<boolean>(dialog.noCloseOnEsc);
 assertType<boolean>(dialog.noCloseOnOutsideClick);