From 6d768c92b1255e9b4be76b8866cdab029bbfd21a Mon Sep 17 00:00:00 2001 From: duckietm Date: Wed, 18 Mar 2026 14:25:45 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=86=99=20Allow=20windows=20to=20be=20drag?= =?UTF-8?q?ged=20outside=20the=20view=20for=2080%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/draggable-window/DraggableWindow.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/common/draggable-window/DraggableWindow.tsx b/src/common/draggable-window/DraggableWindow.tsx index 15c7fd0..7400a5f 100644 --- a/src/common/draggable-window/DraggableWindow.tsx +++ b/src/common/draggable-window/DraggableWindow.tsx @@ -8,6 +8,7 @@ const CURRENT_WINDOWS: HTMLElement[] = []; const POS_MEMORY: Map = new Map(); const BOUNDS_THRESHOLD_TOP: number = 0; const BOUNDS_THRESHOLD_LEFT: number = 0; +const DRAG_OUTSIDE_PERCENT: number = 0.80; export interface DraggableWindowProps { uniqueKey?: Key; @@ -80,8 +81,11 @@ export const DraggableWindow: FC = props => { const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; - const clampedX = Math.max(BOUNDS_THRESHOLD_LEFT, Math.min(newX, viewportWidth - windowWidth)); - const clampedY = Math.max(BOUNDS_THRESHOLD_TOP, Math.min(newY, viewportHeight - windowHeight)); + const maxOutX = windowWidth * DRAG_OUTSIDE_PERCENT; + const maxOutY = windowHeight * DRAG_OUTSIDE_PERCENT; + + const clampedX = Math.max(-maxOutX, Math.min(newX, viewportWidth - windowWidth + maxOutX)); + const clampedY = Math.max(-maxOutY, Math.min(newY, viewportHeight - windowHeight + maxOutY)); return { x: clampedX, y: clampedY }; }, []);