window zindexes

Author: devklick

src/components/BorderedApp/BorderedApp.tsx

@@ -1,13 +1,15 @@
 import React, { useRef } from "react";
-import useWindowManagerStore from "../../stores/windowManagerStore";
+import useWindowManagerStore, {
+  BaseProps,
+} from "../../stores/windowManagerStore";
 import { Dimensions } from "../../hooks/useDragToResize";
 import BorderedAppMenu, {
   BorderedAppMenuItemProps,
 } from "./BorderedAppMenu/BorderedAppMenu";
 import usePositionableElement from "../../hooks/usePositionableElement";
 
 import "./BorderedApp.scss";
-interface BorderedAppProps {
+interface BorderedAppProps extends BaseProps {
   title: string;
   type: string;
   id: string;
@@ -25,6 +27,7 @@ function BorderedApp({
   initialDimensions,
   minDimensions = { height: 350, width: 350 },
   menus,
+  zIndex,
 }: React.PropsWithChildren<BorderedAppProps>) {
   const winMan = useWindowManagerStore();
 
@@ -56,9 +59,11 @@ function BorderedApp({
     <div
       className="bordered-app"
       ref={appRef}
+      onMouseDown={() => winMan.focusWindow(type, id)}
       style={{
         width: initialDimensions.width,
         height: initialDimensions.height,
+        zIndex,
       }}
     >
       <div className="bordered-app__corner-nw" ref={resizeHandleNW} />

src/components/BottomBar/Launcher/Launcher.tsx

@@ -29,24 +29,37 @@ function Launcher({
   const winMan = useWindowManagerStore();
   const ref = useRef<HTMLDivElement>(null);
 
-  function onLeftClick() {
+  function addWindow() {
     const id = windowId ?? uuid();
-    winMan.addWindow(
-      windowType,
-      id,
-      <BorderedApp
-        id={id}
-        title={WindowTitle}
-        type={windowType}
-        initialDimensions={initialDimensions}
-        menus={menus}
-        key={id}
-      >
-        {appContent}
-      </BorderedApp>
-    );
+    winMan.addWindow(windowType, id, {
+      component: BorderedApp,
+      props: {
+        id,
+        title: WindowTitle,
+        type: windowType,
+        initialDimensions,
+        menus,
+      },
+      key: id,
+      children: appContent,
+    });
+  }
+  function onLeftClick() {
+    // If there are one or more windows of this type open,
+    // we want to focus them. This means revealing them if they
+    // are minimized and bring them to the top of the window stack.
+    if (winMan.windowsOfTypeExist(windowType)) {
+      winMan.focusWindowsOfType(windowType);
+      return;
+    }
+
+    // If there are no windows of this type, we want to add one.
+    addWindow();
   }
   function onRightClick() {
+    // TODO: Display a context menu with various options that are
+    // specified by the program-specific launcher and passed via props.
+    // This will include things like "open new window", "close windows", etc.
     console.log("right clicked");
   }
 

src/components/Content/Content.tsx

@@ -6,10 +6,15 @@ interface ContentProps {}
 // eslint-disable-next-line no-empty-pattern
 function Content({}: ContentProps) {
   const winMan = useWindowManagerStore();
+
   return (
     <div id="content__container">
       <div id="content" ref={winMan.contentRef}>
-        {winMan.getWindows()}
+        {winMan.getWindowDefinitions().map((definition) => (
+          <definition.component {...definition.props} key={definition.key}>
+            {definition.children}
+          </definition.component>
+        ))}
       </div>
     </div>
   );

src/components/TopBar/ClockMenu/ClockMenu.tsx

@@ -19,18 +19,16 @@ function ClockMenu({}: ClockMenuProps) {
 
   function handleClick() {
     const id = uuid();
-    winMan.addWindow(
-      windowType,
-      id,
-      <BorderedApp
-        title="Calendar"
-        initialDimensions={{ height: 500, width: 500 }}
-        type={windowType}
-        id={id}
-        children={<div></div>}
-        key={id}
-      />
-    );
+    winMan.addWindow(windowType, id, {
+      component: BorderedApp,
+      props: {
+        title: "Calendar",
+        initialDimensions: { height: 500, width: 500 },
+        type: windowType,
+        id: id,
+      },
+      key: id,
+    });
   }
   return (
     <div id="clock-menu" onClick={() => handleClick()}>

src/stores/windowManagerStore.ts

@@ -1,47 +1,122 @@
 import React, { ReactNode, createRef } from "react";
 import { create } from "zustand";
 
+export interface BaseProps {
+  zIndex?: number;
+  children?: ReactNode;
+}
+
+interface ComponentDefinition<Props extends BaseProps = BaseProps> {
+  component: React.FC<Props>;
+  props: Props;
+  children?: ReactNode;
+  key: string | number;
+}
+
 interface WindowManagerStoreState {
   contentRef: React.RefObject<HTMLDivElement>;
-  /**
-   * A map of all windows.
-   * The key is the type of window, and the value is another map.
-   * The key of the nested map is the ID of the window, and the value
-   * is the window JSX element.
-   */
-  windowsMap: Map<string, Map<string, ReactNode>>;
-  getWindows: () => Array<ReactNode>;
-  addWindow: (windowType: string, windowId: string, window: ReactNode) => void;
+  windowsMap: Map<string, Map<string, ComponentDefinition>>;
+  highestZIndex: number;
+  getWindowDefinitions: () => Array<ComponentDefinition>;
+  addWindow: <Props extends BaseProps = BaseProps>(
+    windowType: string,
+    windowId: string,
+    definition: ComponentDefinition<Props>
+  ) => void;
   closeWindow: (windowType: string, windowId: string) => void;
+  focusWindowsOfType: (windowType: string) => void;
+  focusWindow: (windowType: string, windowId: string) => void;
+  windowsOfTypeExist: (windowType: string) => boolean;
 }
+
 const useWindowManagerStore = create<WindowManagerStoreState>()((set, get) => ({
   contentRef: createRef<HTMLDivElement>(),
   windowsMap: new Map(),
-  getWindows() {
+  highestZIndex: 0,
+  getWindowDefinitions() {
     return Array.from(get().windowsMap.values()).flatMap((map) =>
       Array.from(map.values())
     );
   },
-  addWindow(windowType, windowId, window) {
+  addWindow<Props extends BaseProps = BaseProps>(
+    windowType: string,
+    windowId: string,
+    definition: ComponentDefinition<Props>
+  ) {
     const windowsMap = get().windowsMap;
     const windowsOfType = windowsMap.get(windowType);
+    const highestZIndex = get().highestZIndex + 1;
+    definition.props.zIndex = highestZIndex;
 
+    // TODO: Need to find a better way of dealing with this rather than risky casting
     if (!windowsOfType) {
-      windowsMap.set(windowType, new Map([[windowId, window]]));
+      windowsMap.set(
+        windowType,
+        new Map([[windowId, definition as unknown as ComponentDefinition]])
+      );
     } else {
-      windowsOfType.set(windowId, window);
+      windowsOfType.set(windowId, definition as unknown as ComponentDefinition);
     }
 
-    set({ windowsMap });
+    set({ windowsMap, highestZIndex });
   },
   closeWindow(windowType, windowId) {
     const windowsMap = get().windowsMap;
     const windowsOfType = windowsMap.get(windowType);
-    if (windowsOfType) {
-      windowsOfType.delete(windowId);
+
+    // Delete the window, and if there are no windows left of this type,
+    // remove the window type map from the master window map
+    windowsOfType?.delete(windowId);
+
+    if (windowsOfType?.size === 0) {
+      windowsMap.delete(windowType);
     }
+
+    // If there are no windows left open, reset the zIndex counter
+    let highestZIndex = get().highestZIndex;
+    if (!windowsMap.size) highestZIndex = 1;
+
+    set({ windowsMap, highestZIndex });
+  },
+  focusWindowsOfType(windowType) {
+    const windowsMap = get().windowsMap;
+    const windowsOfType = windowsMap.get(windowType);
+
+    // If no windows of this type exist, nothing to do
+    if (!windowsOfType?.size) return;
+
+    let highestZIndex = get().highestZIndex;
+
+    // There may be multiple instances of this window type open,
+    // so we want to preserve the zindex order they have relative to each other.
+    // To do this, we sort them so we're processing the one with the lowest zindex first
+    Array.from(windowsOfType.values())
+      .sort((a, b) => (a.props.zIndex ?? 0) - (b.props.zIndex ?? 0))
+      .forEach((window) => (window.props.zIndex = ++highestZIndex));
+
     set({ windowsMap });
   },
+  focusWindow(windowType, windowId) {
+    let highestZIndex = get().highestZIndex;
+    const windowsMap = get().windowsMap;
+    const windowsOfType = windowsMap.get(windowType);
+    const window = windowsOfType?.get(windowId);
+
+    // If the window doesnt exist, nothing to do
+    if (!windowsOfType || !window) return;
+
+    // If the window is already top most, nothing to do
+    if (window.props.zIndex === highestZIndex) return;
+
+    // Increase the zindex counter and set the window to have this zindex
+    highestZIndex++;
+    window.props.zIndex = highestZIndex;
+
+    set({ windowsMap, highestZIndex });
+  },
+  windowsOfTypeExist(windowType) {
+    return (get().windowsMap.get(windowType)?.size ?? 0) > 0;
+  },
 }));
 
 export default useWindowManagerStore;