{
diff --git a/src/components/taskbar/Taskbar.module.css b/src/components/taskbar/Taskbar.module.css
index 58f5031..0fb49f3 100644
--- a/src/components/taskbar/Taskbar.module.css
+++ b/src/components/taskbar/Taskbar.module.css
@@ -14,7 +14,6 @@
height: var(--taskbar-height);
background-color: var(--taskbar-color);
backdrop-filter: var(--taskbar-filter);
- z-index: 10;
}
.Taskbar button {
diff --git a/src/components/windows/WindowView.jsx b/src/components/windows/WindowView.jsx
index 05f358b..abdf169 100644
--- a/src/components/windows/WindowView.jsx
+++ b/src/components/windows/WindowView.jsx
@@ -18,6 +18,8 @@ import { Actions } from "../actions/Actions.jsx";
import { useScreenDimensions } from "../../hooks/_utils/screen.js";
import { NAME } from "../../config/branding.config.js";
import { setViewportIcon, setViewportTitle } from "../../features/_utils/browser.utils.js";
+import { ZIndexManager } from "../../features/z-index/zIndexManager.js";
+import { useZIndex } from "../../hooks/z-index/zIndex.js";
/**
* @typedef {object} windowProps
@@ -43,7 +45,7 @@ import { setViewportIcon, setViewportTitle } from "../../features/_utils/browser
* @param {boolean} props.minimized
* @param {Function} props.toggleMinimized
*/
-export const WindowView = memo(({ id, app, size, position, onInteract, options, active, minimized, toggleMinimized }) => {
+export const WindowView = memo(({ id, app, size, position, onInteract, options, active, minimized, toggleMinimized, index }) => {
const windowsManager = useWindowsManager();
const nodeRef = useRef(null);
const [modalsManager, modals] = useModals();
@@ -54,6 +56,7 @@ export const WindowView = memo(({ id, app, size, position, onInteract, options,
const [screenWidth, screenHeight] = useScreenDimensions();
const [title, setTitle] = useState(app.name);
const [iconUrl, setIconUrl] = useState(AppsManager.getAppIconUrl(app.id));
+ const zIndex = useZIndex({ groupIndex: ZIndexManager.GROUPS.WINDOWS, index });
const { onContextMenu, ShortcutsListener } = useContextMenu({ modalsManager, Actions: (props) =>
@@ -123,7 +126,7 @@ export const WindowView = memo(({ id, app, size, position, onInteract, options,
if (minimized)
classNames.push(styles.Minimized);
- return (<>
+ return (
- );
+
- {sortedWindows.map(({ id, app, size, position, options, minimized }, index) =>
- {
+ const { id, app, size, position, options, minimized } = window;
+ const index = sortedWindows.indexOf(window);
+ return { windowsManager.focus(id); }}
active={index === sortedWindows.length - 1}
id={id}
app={app}
size={size}
+ index={index}
position={position}
options={options}
minimized={minimized}
@@ -64,7 +67,7 @@ export const WindowsView = memo(() => {
event.stopPropagation();
windowsManager.setMinimized(id, !minimized);
}}
- />
- )}
+ />;
+ })}
);
});
\ No newline at end of file
diff --git a/src/features/z-index/zIndexGroup.js b/src/features/z-index/zIndexGroup.js
new file mode 100644
index 0000000..19cddb1
--- /dev/null
+++ b/src/features/z-index/zIndexGroup.js
@@ -0,0 +1,67 @@
+import { ZIndexManager } from "./zIndexManager.js";
+
+export class ZIndexGroup {
+ /** @type {number} */
+ length = 0;
+
+ /** @type {number} */
+ offset = 0;
+
+ /** @type {number} */
+ groupIndex = 0;
+
+ /** @type {ZIndexManager} */
+ zIndexManager = null;
+
+ /**
+ * @param {ZIndexManager} zIndexManager
+ * @param {number} initialLength
+ */
+ constructor(zIndexManager, initialLength) {
+ this.setManager(zIndexManager);
+ this.setLength(initialLength ?? 0);
+ }
+
+ /**
+ * @param {ZIndexManager} zIndexManager
+ * @returns {ZIndexGroup}
+ */
+ setManager(zIndexManager) {
+ this.zIndexManager = zIndexManager;
+ return this;
+ }
+
+ /**
+ * @param {number} offset
+ * @returns {ZIndexGroup}
+ */
+ setOffset(offset) {
+ this.offset = offset;
+ return this;
+ }
+
+ /**
+ * @param {number} length
+ * @returns {ZIndexGroup}
+ */
+ setLength(length) {
+ if (this.length === length)
+ return;
+
+ this.length = length;
+ this.zIndexManager.update();
+ return this;
+ }
+
+ /**
+ * @param {number} index
+ * @returns {number}
+ */
+ getIndex(index) {
+ if (this.length < index + 1) {
+ this.setLength(index + 1);
+ }
+
+ return this.offset + index;
+ }
+}
\ No newline at end of file
diff --git a/src/features/z-index/zIndexManager.js b/src/features/z-index/zIndexManager.js
new file mode 100644
index 0000000..2c7cd82
--- /dev/null
+++ b/src/features/z-index/zIndexManager.js
@@ -0,0 +1,45 @@
+import { EventEmitter } from "../_utils/event.utils.js";
+import { ZIndexGroup } from "./zIndexGroup.js";
+
+export class ZIndexManager extends EventEmitter {
+ static GROUPS = {
+ WINDOWS: 0,
+ TASKBAR: 1,
+ MODALS: 2,
+ };
+
+ static EVENT_NAMES = {
+ INDEX_CHANGE: "indexchange"
+ };
+
+ /** @type {ZIndexGroup[]} */
+ groups = [];
+
+ constructor() {
+ super();
+ for (let i = 0; i < Object.keys(ZIndexManager.GROUPS).length; i++) {
+ const group = new ZIndexGroup(this);
+ this.groups.push(group);
+ }
+ }
+
+ update() {
+ let offset = 0;
+ let changed = false;
+ for (let i = 0; i < this.groups.length; i++) {
+ const group = this.groups[i];
+ if (group.offset !== offset) {
+ changed = true;
+ group.setOffset(offset);
+ }
+ offset += group.length;
+ }
+ if (changed) {
+ this.emit(ZIndexManager.EVENT_NAMES.INDEX_CHANGE);
+ }
+ }
+
+ getIndex(groupIndex, index) {
+ return this.groups[groupIndex].getIndex(index);
+ }
+}
\ No newline at end of file
diff --git a/src/hooks/z-index/zIndex.js b/src/hooks/z-index/zIndex.js
new file mode 100644
index 0000000..6e3d94a
--- /dev/null
+++ b/src/hooks/z-index/zIndex.js
@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { useZIndexManager } from "./zIndexManagerContext.js";
+import { ZIndexManager } from "../../features/z-index/zIndexManager.js";
+
+export function useZIndex({ groupIndex, index }) {
+ const initialIndex = (groupIndex * 10) + index;
+ const [zIndex, setZIndex] = useState(initialIndex);
+ const zIndexManager = useZIndexManager();
+
+ useEffect(() => {
+ const updateIndex = () => {
+ const newZIndex = zIndexManager.getIndex(groupIndex, index);
+
+ if (zIndex !== newZIndex)
+ setZIndex(newZIndex);
+ };
+
+ updateIndex();
+ zIndexManager.on(ZIndexManager.EVENT_NAMES.INDEX_CHANGE, updateIndex);
+
+ return () => {
+ zIndexManager.off(ZIndexManager.EVENT_NAMES.INDEX_CHANGE, updateIndex);
+ };
+ }, [groupIndex, index, zIndex, zIndexManager]);
+
+ return zIndex;
+}
\ No newline at end of file
diff --git a/src/hooks/z-index/zIndexManagerContext.js b/src/hooks/z-index/zIndexManagerContext.js
new file mode 100644
index 0000000..723b9d2
--- /dev/null
+++ b/src/hooks/z-index/zIndexManagerContext.js
@@ -0,0 +1,24 @@
+import { createContext, useContext } from "react";
+import { ZIndexManager } from "../../features/z-index/zIndexManager.js";
+
+const ZIndexManagerContext = createContext();
+
+/**
+ * @param {object} props
+ * @param {import("react").ElementType} props.children
+ * @returns {import("react").Provider