Fix minimize/reveal windows

Author: devklick

src/components/BorderedApp/BorderedApp.tsx

@@ -52,14 +52,14 @@ function BorderedApp({
   } = usePositionableElement({
     elementRef: appRef,
     minDimensions,
+    windowType: type,
+    windowId: id,
   });
 
   function onClickClose() {
     winMan.closeWindow(type, id);
   }
 
-  console.log("Hidden", hidden);
-
   return (
     <div
       className="bordered-app"
@@ -71,7 +71,6 @@ function BorderedApp({
         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

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

src/hooks/useDetectMouseDownOutside.ts

@@ -37,8 +37,6 @@ function useDetectMouseDownOutside<Element extends HTMLElement>({
         return;
       }
 
-      console.log(elementRef.current);
-
       let call = true;
       function process(children: HTMLCollection) {
         for (const child of children) {

src/hooks/usePositionableElement.ts

@@ -6,6 +6,8 @@ import useWindowMinMax from "./useWindowMinMax";
 interface UsePositionableElementProps {
   elementRef: React.RefObject<HTMLElement>;
   minDimensions: Dimensions;
+  windowType: string;
+  windowId: string;
 }
 
 /**
@@ -17,6 +19,8 @@ interface UsePositionableElementProps {
 function usePositionableElement({
   elementRef,
   minDimensions,
+  windowType,
+  windowId,
 }: UsePositionableElementProps) {
   // Hold a single ref for the elements rect,
   // so we dont have to call getBoundingClientRect every
@@ -65,6 +69,8 @@ function usePositionableElement({
   const { maximize, minimize } = useWindowMinMax({
     windowRef: elementRef,
     windowRect: elementRect,
+    windowType,
+    windowId,
   });
 
   return {

src/hooks/useWindowMinMax.ts

@@ -9,8 +9,15 @@ function toPx(value: number) {
 interface UseWindowMinMaxProps {
   windowRef: React.RefObject<HTMLElement>;
   windowRect: MutableRefObject<Partial<Rect>>;
+  windowType: string;
+  windowId: string;
 }
-function useWindowMinMax({ windowRect, windowRef }: UseWindowMinMaxProps) {
+function useWindowMinMax({
+  windowRect,
+  windowRef,
+  windowId,
+  windowType,
+}: UseWindowMinMaxProps) {
   const winMan = useWindowManagerStore();
   const oldTransition = useRef<string>("");
   const oldTransform = useRef<string>("");
@@ -49,16 +56,14 @@ function useWindowMinMax({ windowRect, windowRef }: UseWindowMinMaxProps) {
 
   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;
-      }
-    }
+    if (!window?.style) return;
+    if (e.target !== window) return;
+
+    window.style.display = "none";
+    window.style.transition = oldTransition.current;
+    window.style.transform = oldTransform.current;
+    window.style.opacity = oldOpacity.current;
+    winMan.hideWindow(windowType, windowId);
   }
 
   useEffect(() => {

src/stores/windowManagerStore.ts

@@ -28,6 +28,7 @@ interface WindowManagerStoreState {
   focusWindowsOfType: (windowType: string) => void;
   focusWindow: (windowType: string, windowId: string) => void;
   windowsOfTypeExist: (windowType: string) => boolean;
+  hideWindow: (windowType: string, windowId: string) => void;
 }
 
 const useWindowManagerStore = create<WindowManagerStoreState>()((set, get) => ({
@@ -122,6 +123,14 @@ const useWindowManagerStore = create<WindowManagerStoreState>()((set, get) => ({
   windowsOfTypeExist(windowType) {
     return (get().windowsMap.get(windowType)?.size ?? 0) > 0;
   },
+  hideWindow(windowType, windowId) {
+    const windowsMap = get().windowsMap;
+    const windowsOfType = windowsMap.get(windowType);
+    const window = windowsOfType?.get(windowId);
+    if (!windowsOfType || !window) return;
+    window.props.hidden = true;
+    set({ windowsMap });
+  },
 }));
 
 export default useWindowManagerStore;