wip reveal minimized windows

Author: devklick

src/components/BorderedApp/BorderedApp.tsx

@@ -29,6 +29,7 @@ function BorderedApp({
   minDimensions = { height: 350, width: 350 },
   menus,
   zIndex,
+  hidden,
 }: React.PropsWithChildren<BorderedAppProps>) {
   const winMan = useWindowManagerStore();
   const settings = useSystemSettings();
@@ -57,6 +58,8 @@ function BorderedApp({
     winMan.closeWindow(type, id);
   }
 
+  console.log("Hidden", hidden);
+
   return (
     <div
       className="bordered-app"
@@ -67,6 +70,8 @@ function BorderedApp({
         height: initialDimensions.height,
         zIndex,
         backgroundColor: settings.mainColor,
+        display: hidden === true ? "none" : "grid",
+        color: hidden === true ? "black" : "green",
       }}
     >
       <div className="bordered-app__corner-nw" ref={resizeHandleNW} />

src/components/Content/Content.tsx

@@ -11,11 +11,14 @@ function Content({}: ContentProps) {
   return (
     <div id="content__container">
       <div id="content" ref={winMan.contentRef}>
-        {winMan.getWindowDefinitions().map((definition) => (
-          <definition.component {...definition.props} key={definition.key}>
-            {definition.children}
-          </definition.component>
-        ))}
+        {winMan.getWindowDefinitions().map((definition) => {
+          console.log(definition);
+          return (
+            <definition.component {...definition.props} key={definition.key}>
+              {definition.children}
+            </definition.component>
+          );
+        })}
       </div>
     </div>
   );

src/hooks/useWindowMinMax.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from "react";
+import { MutableRefObject, useEffect, useRef } from "react";
 import useWindowManagerStore from "../stores/windowManagerStore";
 import { Rect } from "./useDragToResize";
 
@@ -12,6 +12,9 @@ interface UseWindowMinMaxProps {
 }
 function useWindowMinMax({ windowRect, windowRef }: UseWindowMinMaxProps) {
   const winMan = useWindowManagerStore();
+  const oldTransition = useRef<string>("");
+  const oldTransform = useRef<string>("");
+  const oldOpacity = useRef<string>("");
 
   function maximize() {
     const boundary = winMan.contentRef.current?.getBoundingClientRect();
@@ -33,24 +36,37 @@ function useWindowMinMax({ windowRect, windowRef }: UseWindowMinMaxProps) {
     const window = windowRef.current;
     if (!window) return;
 
-    const oldTransition = window.style.transition;
-    const oldTransform = window.style.transform;
-    const oldOpacity = window.style.opacity;
+    oldTransition.current = window.style.transition;
+    oldTransform.current = window.style.transform;
+    oldOpacity.current = window.style.opacity;
 
     window.style.transition = "all 0.2s linear";
     window.style.opacity = "0";
     window.style.transform = "scale(0.5) translate(0, 500%)";
 
-    window.addEventListener("transitionend", (e) => {
-      if (e.target === window) {
-        window.style.display = "none";
-        window.style.transition = oldTransition;
-        window.style.transform = oldTransform;
-        window.style.opacity = oldOpacity;
+    window.addEventListener("transitionend", handleTransitionEnd);
+  }
+
+  function handleTransitionEnd(e: TransitionEvent) {
+    const window = windowRef.current;
+    if (!window) return;
+    if (e.target === window) {
+      console.log("Setting no display");
+      if (window.style) {
+        window.style.display = "inline";
+        window.style.transition = oldTransition.current;
+        window.style.transform = oldTransform.current;
+        window.style.opacity = oldOpacity.current;
       }
-    });
+    }
   }
 
+  useEffect(() => {
+    return () => {
+      window.removeEventListener("transitionend", handleTransitionEnd);
+    };
+  });
+
   return {
     maximize,
     minimize,

src/stores/windowManagerStore.ts

@@ -3,6 +3,7 @@ import { create } from "zustand";
 
 export interface BaseProps {
   zIndex?: number;
+  hidden?: boolean;
   children?: React.ReactNode;
 }
 
@@ -92,7 +93,10 @@ const useWindowManagerStore = create<WindowManagerStoreState>()((set, get) => ({
     // 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));
+      .forEach((window) => {
+        window.props.zIndex = ++highestZIndex;
+        window.props.hidden = false;
+      });
 
     set({ windowsMap });
   },
@@ -111,6 +115,7 @@ const useWindowManagerStore = create<WindowManagerStoreState>()((set, get) => ({
     // Increase the zindex counter and set the window to have this zindex
     highestZIndex++;
     window.props.zIndex = highestZIndex;
+    window.props.hidden = false;
 
     set({ windowsMap, highestZIndex });
   },