diff --git a/src/ui/Desktop/Apps/File Manager/components/DraggableWindow.tsx b/src/ui/Desktop/Apps/File Manager/components/DraggableWindow.tsx index 4e9d5d34..b80b0f01 100644 --- a/src/ui/Desktop/Apps/File Manager/components/DraggableWindow.tsx +++ b/src/ui/Desktop/Apps/File Manager/components/DraggableWindow.tsx @@ -47,9 +47,10 @@ export function DraggableWindow({ const [isResizing, setIsResizing] = useState(false); const [resizeDirection, setResizeDirection] = useState(""); - // Drag start position + // Drag and resize start positions const [dragStart, setDragStart] = useState({ x: 0, y: 0 }); const [windowStart, setWindowStart] = useState({ x: 0, y: 0 }); + const [sizeStart, setSizeStart] = useState({ width: 0, height: 0 }); const windowRef = useRef(null); const titleBarRef = useRef(null); @@ -95,32 +96,45 @@ export function DraggableWindow({ const deltaX = e.clientX - dragStart.x; const deltaY = e.clientY - dragStart.y; - let newWidth = size.width; - let newHeight = size.height; - let newX = position.x; - let newY = position.y; + let newWidth = sizeStart.width; + let newHeight = sizeStart.height; + let newX = windowStart.x; + let newY = windowStart.y; + // Handle horizontal resizing if (resizeDirection.includes("right")) { - newWidth = Math.max(minWidth, windowStart.x + deltaX); + newWidth = Math.max(minWidth, sizeStart.width + deltaX); } if (resizeDirection.includes("left")) { - newWidth = Math.max(minWidth, size.width - deltaX); - newX = Math.min( - windowStart.x + deltaX, - position.x + size.width - minWidth, - ); + const widthChange = -deltaX; + newWidth = Math.max(minWidth, sizeStart.width + widthChange); + // Only move position if we're actually changing size + if (newWidth > minWidth || widthChange > 0) { + newX = windowStart.x - (newWidth - sizeStart.width); + } else { + newX = windowStart.x - (minWidth - sizeStart.width); + } } + + // Handle vertical resizing if (resizeDirection.includes("bottom")) { - newHeight = Math.max(minHeight, windowStart.y + deltaY); + newHeight = Math.max(minHeight, sizeStart.height + deltaY); } if (resizeDirection.includes("top")) { - newHeight = Math.max(minHeight, size.height - deltaY); - newY = Math.min( - windowStart.y + deltaY, - position.y + size.height - minHeight, - ); + const heightChange = -deltaY; + newHeight = Math.max(minHeight, sizeStart.height + heightChange); + // Only move position if we're actually changing size + if (newHeight > minHeight || heightChange > 0) { + newY = windowStart.y - (newHeight - sizeStart.height); + } else { + newY = windowStart.y - (minHeight - sizeStart.height); + } } + // Ensure window stays within viewport + newX = Math.max(0, Math.min(window.innerWidth - newWidth, newX)); + newY = Math.max(0, Math.min(window.innerHeight - newHeight, newY)); + setSize({ width: newWidth, height: newHeight }); setPosition({ x: newX, y: newY }); } @@ -131,6 +145,7 @@ export function DraggableWindow({ isMaximized, dragStart, windowStart, + sizeStart, size, position, minWidth, @@ -155,10 +170,11 @@ export function DraggableWindow({ setIsResizing(true); setResizeDirection(direction); setDragStart({ x: e.clientX, y: e.clientY }); - setWindowStart({ x: size.width, y: size.height }); + setWindowStart({ x: position.x, y: position.y }); + setSizeStart({ width: size.width, height: size.height }); onFocus?.(); }, - [isMaximized, size, onFocus], + [isMaximized, position, size, onFocus], ); // Global event listeners