From 0b69be1334f54664f2be5ad9420639d6a9772aed Mon Sep 17 00:00:00 2001
From: Quang Phan <vnphanquang@gmail.com>
Date: Fri, 23 Sep 2022 09:01:35 +0700
Subject: [PATCH] feat(movable): variant 'screen' for limit.parent - limit to
 screen

---
 .changeset/curly-oranges-listen.md          |  5 +++++
 packages/actions/movable/src/movable.ts     | 16 +++++++++++++---
 packages/actions/movable/src/types/index.ts |  4 ++--
 3 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/curly-oranges-listen.md

diff --git a/.changeset/curly-oranges-listen.md b/.changeset/curly-oranges-listen.md
new file mode 100644
index 000000000..927a833fa
--- /dev/null
+++ b/.changeset/curly-oranges-listen.md
@@ -0,0 +1,5 @@
+---
+"@svelte-put/movable": minor
+---
+
+Add 'screen' variant for limit parent
diff --git a/packages/actions/movable/src/movable.ts b/packages/actions/movable/src/movable.ts
index fc38d7a06..525a4f4b1 100644
--- a/packages/actions/movable/src/movable.ts
+++ b/packages/actions/movable/src/movable.ts
@@ -84,7 +84,7 @@ import { input } from './utils';
  *
  * Be aware of side effects:
  *
- * - element.style.position is set to `relative` (if not already 'absolute' / 'relative') the first time mousedown is triggered
+ * - element.style.position is set to `relative` (if not already 'absolute', 'relative', or 'fixed) the first time mousedown is triggered
  *
  * - document.body.userSelect is set to `none` after `mousedown` and restored on `mouseup`
  *
@@ -143,7 +143,17 @@ export function movable(node: HTMLElement, parameters: MovableParameters = { ena
     }
 
     if (parent) {
-      const insideBoundingRect = parent.getBoundingClientRect();
+      let insideBoundingRect: Record<'top' | 'bottom' | 'left' | 'right', number>;
+      if (parent === 'screen') {
+        insideBoundingRect = {
+          top: 0,
+          bottom: window.innerHeight,
+          left: 0,
+          right: window.innerWidth,
+        };
+      } else {
+        insideBoundingRect = parent.getBoundingClientRect();
+      }
 
       const newAbsTop = nodeBoundingRect.top + Δy + boundY;
       if (newAbsTop < insideBoundingRect.top) {
@@ -216,7 +226,7 @@ export function movable(node: HTMLElement, parameters: MovableParameters = { ena
 
     // init position style
     const position = computedStyles.getPropertyValue('position');
-    if (position !== 'relative' && position !== 'absolute') {
+    if (position !== 'relative' && position !== 'absolute' && position !== 'fixed') {
       node.style.position = 'relative';
     }
 
diff --git a/packages/actions/movable/src/types/index.ts b/packages/actions/movable/src/types/index.ts
index b4d4a645e..c29110ab9 100644
--- a/packages/actions/movable/src/types/index.ts
+++ b/packages/actions/movable/src/types/index.ts
@@ -46,9 +46,9 @@ export type MovableLimitDelta = `${number}px` | `${number}%`;
  */
 export interface MovableLimit {
   /**
-   * Move node within this parent node
+   * Move node within this parent node or within screen
    */
-  parent?: HTMLElement;
+  parent?: HTMLElement | 'screen';
   /**
    * Bounding box limit in both axes
    */