Added window draw order

docs/features/windows/README.md

@@ -8,6 +8,6 @@ The windows components are used to view and interact with running applications.
 
 - [x] Maximize (fullscreen)
 - [ ] Minimize
-- [x] Resize
+- [ ] Resize
 - [x] Multiple windows of the same app
-- [ ] Draw order
+- [x] Draw order

src/components/windows/Window.jsx

@@ -7,7 +7,7 @@ import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js"
 import Draggable from "react-draggable";
 import { useEffect, useRef, useState } from "react";
 
-export function Window({ id, app, size, position, focused = false }) {
+export function Window({ id, app, size, position, focused = false, onInteract }) {
 	const windowsManager = useWindowsManager();
 	const nodeRef = useRef(null);
 	const [maximized, setMaximized] = useState(false);
@@ -47,6 +47,7 @@ export function Window({ id, app, size, position, focused = false }) {
 			cancel="button"
 			nodeRef={nodeRef}
 			disabled={maximized}
+			onMouseDown={onInteract}
 		>
 			<div
 				className={classNames.join(" ")}
@@ -55,6 +56,7 @@ export function Window({ id, app, size, position, focused = false }) {
 					width: maximized ? screenWidth : size.x,
 					height: maximized ? screenHeight : size.y,
 				}}
+				onClick={onInteract}
 			>
 				<div className={`${styles.Header} Handle`}>
 					<ReactSVG className={styles["Window-icon"]} src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>

src/components/windows/Window.module.css

@@ -8,7 +8,7 @@
 	display: flex;
 	flex-direction: column;
 	background-color: var(--background-color-c);
-	animation: pop-in 200ms ease-in-out;
+	/* animation: pop-in 200ms ease-in-out; */
 }
 
 @keyframes pop-in {

src/components/windows/WindowsView.jsx

@@ -1,12 +1,17 @@
 import { Window } from "./Window.jsx";
 import { useWindows } from "../../hooks/windows/WindowsContext.js";
+import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js";
 
 export function WindowsView() {
 	const windows = useWindows();
+	const windowsManager = useWindowsManager();
 
 	return (<div>
-		{windows.map(({ id, app, size, position}) => 
+		{windows.sort((windowA, windowB) =>
+			windowA.lastInteraction - windowB.lastInteraction
+		).map(({ id, app, size, position }, index) => 
 			<Window
+				onInteract={() => { windowsManager.focus(windows[index]); }}
 				id={id}
 				key={id}
 				app={app}

src/features/windows/windows.js

@@ -25,7 +25,8 @@ export default class WindowsManager {
 			id,
 			app,
 			size,
-			position
+			position,
+			lastInteraction: 0
 		};
 
 		this.updateWindows(this.windows);
@@ -47,6 +48,11 @@ export default class WindowsManager {
 		// console.log(this);
 	}
 
+	focus(window) {
+		window.lastInteraction = new Date().valueOf();
+		this.updateWindows(this.windows);
+	}
+
 	isAppActive(appId) {
 		let active = false;
 

src/hooks/windows/WindowsContext.js

@@ -9,6 +9,7 @@ export function WindowsProvider({ children, windowsManager }) {
 	const [windows, setWindows] = useState([]);
 
 	const updateWindows = useCallback((updatedWindows) => {
+		// console.log(updatedWindows);
 		setWindows(Object.values(updatedWindows));
 	}, []);