holy shit i'm finally done

1 files changed, 203 insertions, 46 deletions

diff --git a/src/desktop/window.tsx b/src/desktop/window.tsx
index b2deaec..ef5cdab 100644
--- a/src/desktop/window.tsx
+++ b/src/desktop/window.tsx
@@ -1,63 +1,213 @@
+import { Signal, useSignal, useSignalEffect } from "@preact/signals";
+import { useLiveSignal } from "@preact/signals/utils";
 import { ComponentChildren, Ref, RefObject } from "preact";
-import { useCallback, useRef, useState } from "preact/hooks";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
+import { Task } from ".";
+import { flushSync } from "preact/compat";
+
+
+type UseDragFunction = (onStartDrag: (e: MouseEvent) => void, onUpdatePosition: (e: MouseEvent) => void) => [Signal<Boolean>, (e: MouseEvent) => void]
 
 export function Window(props: Window.Props) {
+    const useDrag = useCallback<UseDragFunction>((onStartDrag, onUpdatePosition) => {
+        const dragTimeout: Ref<ReturnType<typeof setTimeout>> = useRef(null);
+        const dragging = useSignal(false);
+
+        const stopDrag = useCallback((e: MouseEvent) => {
+            if (e.button === 0 && dragging.value && !dragTimeout.current) {
+                dragTimeout.current = setTimeout(() => {
+                    dragging.value = false
+                    dragTimeout.current = null;
+                    props.desktop.current?.removeEventListener("mousemove", onUpdatePosition)
+                    props.desktop.current?.removeEventListener("mouseup", stopDrag)
+                }, 50) // intrdouce a small delay where the user can still drag the window without actually pressing down lmb to prevent accidental drops
+            }
+        }, [onUpdatePosition]);
+
+        const startDrag = useCallback((e: MouseEvent) => {
+            if (e.button === 0 && !maximized.value.value) {
+                if (dragTimeout.current !== null) {
+                    clearTimeout(dragTimeout.current);
+                    dragTimeout.current = null;
+                } else {
+
+                    onStartDrag(e);
+                    dragging.value = true
+                    props.desktop.current?.addEventListener("mousemove", onUpdatePosition)
+                    props.desktop.current?.addEventListener("mouseleave", stopDrag, { once: true })
+                    props.desktop.current?.addEventListener("mouseup", stopDrag, { once: true })
+                }
+            }
+        }, [onUpdatePosition, onStartDrag, stopDrag]);
+
+        return [dragging, startDrag]
+    }, [props])
+
     const windowRef: Ref<HTMLDivElement> = useRef(null);
-    const dragTimeout: Ref<ReturnType<typeof setTimeout>> = useRef(null);
-    
-    const [x, setX] = useState(props.x ?? 0);
-    const [y, setY] = useState(props.y ?? 0);
+
+    const source = useLiveSignal(props.task.source);
+    const title = useLiveSignal(props.task.title);
+    const contentReady = useLiveSignal(props.task.contentReady);
+    const sizingFinished = useLiveSignal(props.task.sizingFinished);
+    const [titleReady, setTitleReady] = useState(false);
+    const [titleRendered, setTitleRendered] = useState(false);
+
+    const maximized = useLiveSignal(props.task.window.maximized);
+    const minimized = useLiveSignal(props.task.window.minimized);
+    const position = props.task.window.position;
+    const z = useLiveSignal(props.task.window.z);
+
+    const x = useSignal(position?.x ?? "50%");
+    const y = useSignal(position?.y ?? "50%");
 
     const initialOffsetX = useRef(0);
     const initialOffsetY = useRef(0);
 
-    const updatePosition = useCallback((e: MouseEvent) => {
-        setX(e.clientX - initialOffsetX.current)
-        setY(e.clientY - initialOffsetY.current)
+    const onWindowUpdatePosition = useCallback((e: MouseEvent) => {
+        x.value = e.clientX - initialOffsetX.current
+        y.value = e.clientY - initialOffsetY.current
+    }, [])
+
+    const onStartWindowMove = useCallback((e: MouseEvent) => {
+        const BORDER_WIDTH = 1;
+        // Naturally, I have to add the border width here, because offset* uses padding-edge for the calculations
+        initialOffsetX.current = e.offsetX + BORDER_WIDTH + (e.target as HTMLDivElement).offsetLeft
+        initialOffsetY.current = e.offsetY + BORDER_WIDTH + (e.target as HTMLDivElement).offsetTop
+        document.getSelection()?.empty()
+    }, [])
+
+    const [dragging, startWindowMove] = useDrag(onStartWindowMove, onWindowUpdatePosition);
+
+    const height = useSignal(props.task.window.height);
+    const width = useSignal(props.task.window.width);
+
+    const onStartResize = useCallback((e: MouseEvent) => {
+        initialOffsetX.current = e.offsetX
+        initialOffsetY.current = e.offsetY
+    }, [])
+
+    const onNorthResize = useCallback((e: MouseEvent) => {
+        const oldY = y.value as number;
+        y.value = e.clientY - initialOffsetY.current;
+        height.value = (height.value as number) - (y.value - oldY)
+    }, [])
+
+    const [, startNorthResize] = useDrag(onStartResize, onNorthResize)
+
+
+    const onEastResize = useCallback((e: MouseEvent) => {
+        width.value = (e.clientX - (x.value as number) - initialOffsetX.current)
+    }, [])
+
+    const [, startEastResize] = useDrag(onStartResize, onEastResize)
+
+
+    const onSouthResize = useCallback((e: MouseEvent) => {
+        height.value = (e.clientY - (y.value as number) - initialOffsetY.current)
+    }, [])
+
+    const [, startSouthResize] = useDrag(onStartResize, onSouthResize)
+
+    const onWestResize = useCallback((e: MouseEvent) => {
+        const oldX = x.value as number;
+        x.value = e.clientX - initialOffsetX.current;
+        width.value = (width.value as number) - (x.value - oldX)
+    }, [])
+
+    const [, startWestResize] = useDrag(onStartResize, onWestResize)
+
+    const startNEResize = useCallback((e: MouseEvent) => {
+        startNorthResize(e)
+        startEastResize(e)
+    }, [])
+
+    const startNWResize = useCallback((e: MouseEvent) => {
+        startNorthResize(e)
+        startWestResize(e)
+    }, [])
+
+    const startSEResize = useCallback((e: MouseEvent) => {
+        startSouthResize(e)
+        startEastResize(e)
     }, [])
 
-    const startDrag = useCallback((e: MouseEvent) => {
-        if (e.button === 0) {
+    const startSWResize = useCallback((e: MouseEvent) => {
+        startSouthResize(e)
+        startWestResize(e)
+    }, [])
+
+    // tldr: wait until the title signal is ready, 
+    // rerender so that the new title is rendered, calculate the position, 
+    // and then rerender *again*, this time to reposition and show the window
 
-            const BORDER_WIDTH = 1;
-            console.log(e);
-            // Naturally, I have to add the border width here, because offset* uses padding-edge for the calculations
-            initialOffsetX.current = e.offsetX + BORDER_WIDTH
-            initialOffsetY.current = e.offsetY + BORDER_WIDTH
-            windowRef.current?.classList.add("dragging")
+    useSignalEffect(() => {
+        if (title.value.value !== undefined && !titleReady) {
+            setTitleReady(true)
+        }
+    })
 
-            if (dragTimeout.current !== null) {
-                clearTimeout(dragTimeout.current);
-                dragTimeout.current = null;
+    useLayoutEffect(() => {
+        if (titleReady && contentReady.value.value) {
+            setTitleRendered(true);
+            // normalize position and dimensions from css values to pixels
+            const { height: bounding_height, width: bounding_width } = windowRef.current!.getBoundingClientRect();
+            height.value = bounding_height
+            width.value = bounding_width
+            
+            if (position === undefined) {
+                // center
+                x.value = windowRef.current!.offsetLeft - (bounding_width / 2);
+                y.value = windowRef.current!.offsetTop - (bounding_height / 2);
             } else {
-                props.desktop.current?.addEventListener("mousemove", updatePosition)
-                props.desktop.current?.addEventListener("mouseleave", stopDrag)
+                x.value = windowRef.current!.offsetLeft;
+                y.value = windowRef.current!.offsetTop;
             }
+            sizingFinished.value.value = true
         }
-    }, []);
+    }, [titleReady, contentReady.value.value])
 
-    const stopDrag = useCallback((e: MouseEvent) => {
-        if (e.button === 0) {
-            dragTimeout.current = setTimeout(() => {
-                dragTimeout.current = null;
-                windowRef.current?.classList.remove("dragging")
-                props.desktop.current?.removeEventListener("mousemove", updatePosition)
-                props.desktop.current?.removeEventListener("mouseleave", stopDrag)
-            }, 50) // intrdouce a small delay where the user can still drag the window without actually pressing down lmb to prevent accidental drops
-        }
-    }, []);
+    const handleMinimize = useCallback(() => {
+        minimized.value.value = !minimized.value.value
+    }, [])
+
+    const handleMaximize = useCallback(() => {
+        maximized.value.value = !maximized.value.value
+    }, [])
 
-    return <div class="window" ref={windowRef} style={{ width: props.width, height: props.height, left: x, top: y}}>
-        <div class="titlebar" onPointerDown={startDrag} onPointerUp={stopDrag}>
-            <div class="title">{props.title}</div>
-            <div class="buttons" onPointerDown={e => e.stopPropagation()}>
-                <button>
+    const onClose = useCallback(() => {
+        props.onClose(props.task)
+    }, [props])
+    
+    const onFocus = useCallback(() => {
+        props.onFocus(props.task);
+    }, [props])
+
+    const onPointerDownButton = useCallback((e: MouseEvent) => {
+        onFocus();
+        e.stopPropagation();
+    }, [])
+
+    return <div
+        class={`window ${(titleRendered && !props.task.window.minimized.value) ? "" : " hidden"}${dragging.value ? "dragging" : ""}${maximized.value.value ? " maximized" : ""}` }
+        ref={windowRef}
+        style={
+            maximized.value.value
+                ? { width: "100%", height: "100%", left: 0, top: 0, "z-index": z.value.value }
+                : { width: width.value, height: height.value, left: x.value, top: y.value, "z-index": z.value.value }
+        }
+        onPointerDown={onFocus}
+    >
+        <div class="titlebar" onPointerDown={startWindowMove}>
+            <img src={`/assets/${source.value.value.type}.png`} />
+            <div class="title">{title.value.value ?? "[404 Title Not Found]"}</div>
+            <div class="buttons" onPointerDown={onPointerDownButton}>
+                <button onClick={handleMinimize}>
                     <img src="/assets/minimize.png" />
                 </button>
-                <button>
+                <button onClick={handleMaximize}>
                     <img src="/assets/maximize.png" />
                 </button>
-                <button>
+                <button onClick={onClose}>
                     <img src="/assets/close.png" />
                 </button>
             </div>
@@ -65,17 +215,24 @@ export function Window(props: Window.Props) {
         <div class="content">
             {props.children}
         </div>
+        <div class="corner n w" onPointerDown={startNWResize}></div>
+        <div class="corner n e" onPointerDown={startNEResize}></div>
+        <div class="corner s e" onPointerDown={startSEResize}></div>
+        <div class="corner s w" onPointerDown={startSWResize}></div>
+        <div class="side_v n" onPointerDown={startNorthResize}></div>
+        <div class="side_h e" onPointerDown={startEastResize}></div>
+        <div class="side_v s" onPointerDown={startSouthResize}></div>
+        <div class="side_h w" onPointerDown={startWestResize}></div>
     </div>
 }
 
-namespace Window {
+export namespace Window {
     export type Props = {
-        title: string;
-        width?: string | number;
-        height?: string | number;
-        x?: string | number;
-        y?: string | number;
         desktop: RefObject<HTMLDivElement>;
-        children: ComponentChildren
+        task: Task;
+        children: ComponentChildren;
+
+        onClose: (task: Task) => void;
+        onFocus: (task: Task) => void;
     }
 }