(v0.1.4.6-alpha) Bug Fix (#3) + QOL changes

drag the window, even outside the bounding box, or the window keeping padding of like 2.5rem
Clicking on the windows icon when the start menu is active causes a jittering effect and doesn't close it.

Author: rupnil-codes

README.md

@@ -22,7 +22,7 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [X] Make ~~opaque and~~ high zIndex when dragging desktop apps, to overlay the bottom objects. (Done in v0.1.4.3)
 - [X] BUG: In fullscreen clicking the app in taskbar toggles fullscreen, and it becomes not fullscreen. (Fixed in v0.1.4.3)
 - [X] BUG: Closing on fullscreen saves the state. On the opening again it starts in fullscreen. (Fixed in v0.1.4.3(1))
-- [ ] QOL: drag the window, even outside the bounding box, or the window keeping padding of like 1rem.
-- [ ] BUG: Clicking on the windows icon when the start menu is active causes a jittering effect and doesn't close it.
+- [X] QOL: drag the window, even outside the bounding box, or the window keeping padding of like 2.5rem.(Fixed in v0.1.4.6)
+- [X] BUG (Issue #3): Clicking on the windows icon when the start menu is active causes a jittering effect and doesn't close it. (Fixed in v0.1.4.6)
 - [X] OPTIMIZATION: Have ONLY App.js with all the necessary variables so that we do not need to manually add apps to each part. (Done in v0.1.4.5)
 - [X] OPTIMIZATION: (TruthEntity) thinks it is better to use React component than Iframes, as they are quite a memory hogger and a can degrade performance. (Done in v0.1.4.5)

src/core/WindowManager.jsx

@@ -20,6 +20,7 @@ export default function AppWindow({
     const DEFAULT_WIDTH = 600;
     const DEFAULT_HEIGHT = 400;
     const TASKBAR_HEIGHT = 48;
+    const PADDING = 36;
 
     const [state, setState] = useState({
         x: posX,
@@ -35,21 +36,47 @@ export default function AppWindow({
         requestAnimationFrame(() => setOpening(false));
     }, []);
 
+    const handleDrag = (e, d) => {
+        setState(prev => ({ ...prev, x: d.x, y: d.y }));
+        setIsInteracting(true);
+    };
+
+    const handleDragStop = (e, d) => {
+        let newX = d.x;
+        let newY = d.y;
+
+        if (newX > window.innerWidth - PADDING) {
+            newX = window.innerWidth - PADDING;
+        }
+        if (newX < -state.width + PADDING) {
+            newX = -state.width + PADDING;
+        }
+        if (newY > window.innerHeight - TASKBAR_HEIGHT - PADDING) {
+            newY = window.innerHeight - TASKBAR_HEIGHT - PADDING;
+        }
+
+        if (newY < 0) {
+            newY = 0;
+        }
+
+        setState(prev => ({ ...prev, x: newX, y: newY }));
+        setIsInteracting(false);
+    };
+
 
     return (
         <Rnd
-            bounds="parent"
+            bounds=""
             dragGrid={[1, 1]}
             size={fullscreen ? { width: "100vw", height: window.innerHeight - 48 } : { width: state.width, height: state.height }}
             position={fullscreen ? { x: 0, y: 0 } : { x: state.x, y: state.y }}
 
             disableDragging={fullscreen}
             enableResizing={!fullscreen}
 
-            onDragStop={(e, d) => {
-                setState(prev => ({ ...prev, x: d.x, y: d.y }));
-                setIsInteracting(false);
-            }}
+            onDrag={handleDrag}
+            onDragStop={handleDragStop}
+
             onResizeStop={(e, direction, ref, delta, position) => {
                 setState({
                     width: ref.offsetWidth,
@@ -60,7 +87,6 @@ export default function AppWindow({
             }}
             onDragStart={() => { onFocus(); setIsInteracting(true); }}
             onResizeStart={() => setIsInteracting(true)}
-            onDrag={() => setIsInteracting(true)}
 
             dragHandleClassName="titlebar"
             style={
@@ -71,6 +97,7 @@ export default function AppWindow({
         }
             minWidth={300}
             minHeight={200}
+
             maxHeight={window.innerHeight - TASKBAR_HEIGHT}
             maxWidth={window.innerWidth}
         >

src/routes/desktop.jsx

@@ -12,6 +12,11 @@ function Desktop() {
     const [isStartMenuActive, setIsStartMenuActive] = useState(false);
 
     const startMenuRef = useRef(null);
+    const menuActiveRef = useRef(isStartMenuActive);
+    useEffect(() => {
+        menuActiveRef.current = isStartMenuActive;
+    }, [isStartMenuActive]);
+
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (isStartMenuActive && startMenuRef.current && !startMenuRef.current.contains(event.target)) {
@@ -20,10 +25,22 @@ function Desktop() {
                 }
             }
         };
+
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [isStartMenuActive]);
 
+    useEffect(() => {
+        const handleKey = (e) => {
+            if (e.metaKey) {
+                e.preventDefault();
+                setIsStartMenuActive(prev => !prev);
+            }
+        };
+        window.addEventListener("keydown", handleKey);
+        return () => window.removeEventListener("keydown", handleKey);
+    }, []);
+
     const [iconPositions, setIconPositions] = useState({
         explorer: { col: 1, row: 1 },
         vscode: { col: 1, row: 2 },
@@ -168,29 +185,13 @@ function Desktop() {
         }));
     }
 
-    useEffect(() => {
-        const handleKey = (e) => {
-            if (e.metaKey) {
-                e.preventDefault();
-
-                setIsStartMenuActive(!isStartMenuActive);
-            }
-        };
-
-        window.addEventListener("keydown", handleKey);
-        return () => window.removeEventListener("keydown", handleKey);
-    });
-
     return (
         <div className="desktop" onMouseDown={() => {
             setSelectedIcon(null);
         }}>
             <div
                 className="desktop-grid"
                 style={{ position: 'absolute', inset: 0, display: 'grid', zIndex: 1 }}
-                onClick={() => {
-                    setIsStartMenuActive(false);
-                }}
             >
                 {Object.keys(iconPositions).map((id) => (
                     <Draggable
@@ -263,7 +264,7 @@ function Desktop() {
                 </div>
             </div>
 
-            <div className={`taskbar ${ isAnyFullScreen ? 'is-fullscreen' : ''}`} onClick={(e) => e.stopPropagation()}>
+            <div className={`taskbar ${ isAnyFullScreen ? 'is-fullscreen' : ''}`}>
                 <div className="apps">
                     <AnimatePresence mode="popLayout">
                         <motion.div
@@ -273,7 +274,10 @@ function Desktop() {
                             exit={{ opacity: 0, width: 0, scale: 0.5 }}
                             transition={{ type: "spring", stiffness: 300, damping: 30 }}
                             className="app-item"
-                            onClick={() => setIsStartMenuActive(!isStartMenuActive)}
+                            onMouseDown={(e) => {
+                                e.stopPropagation();
+                                setIsStartMenuActive(prev => !prev);
+                            }}
                         >
                             <div className="taskbar-app" id="start-menu-icon">
                                 <img className={"taskbar-app-icon"} src={"/assets/icons/Windows.svg"} draggable="false" alt="icon" />