make progress

index.css

@@ -26,7 +26,7 @@ body {
   left: -1;
   width: 101vw;
   height: 101vh;
-  background-image: url("./assets/wallpaper7.png");
+  background-image: url("./assets/wallpaper.png");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;

src/os/cursor.ts

@@ -4,6 +4,6 @@ export default class Cursor {
   }
 
   start(e: MouseEvent) {
-    //console.log(e);
+    //console.log(e.clientX, e.clientY);
   }
 }

src/ui/component.ts

@@ -1,11 +1,13 @@
+import { el } from "../util/element";
+
 export default class Component {
-  element: HTMLDivElement = document.createElement("div");
+  element: HTMLDivElement = el("div");
 
   constructor(id: string) {
     this.element.id = id
   }
 
-  addChild(child: HTMLDivElement) {
+  addChild(child: HTMLElement) {
     this.element.appendChild(child);
   }
 

src/ui/desktop.ts

@@ -27,7 +27,6 @@ export default class Desktop extends Component {
 
   updateDesktop() {
     const windows = this.os.applications.getApplications()
-    console.log(windows)
     this.shortcuts_container.element.replaceChildren(...this.shortcuts.map(s => s.start()));
     this.windows_container.element.replaceChildren(...windows.map(w => w.run()));
   }

src/ui/topbar.ts

@@ -2,16 +2,16 @@ import Component from "./component"
 import { format } from "date-fns"
 
 export default class TopBar extends Component {
-  time: HTMLDivElement;
+  time: Component;
 
   constructor() {
-    super()
+    super('topbar')
     this.element.classList.add("w-full", "bg-black", "py-1", 'flex', 'justify-center', 'z-[11]', 'relative')
+    this.time = new Component('time')
   }
 
   add_time(){
     const date = new Date()
-    this.time = new Component()
     this.time.element.classList.add( "text-white", "text-center", "cursor-default", "text-xs")
     this.time.element.innerText = format(date, "MMM dd H:mm aa") 
 

src/ui/window.ts

@@ -1,27 +1,27 @@
+import Application from "../os/applications/application";
 import Component from "./component";
 
 export default class Window {
   element: HTMLDivElement = document.createElement("div");
   initial_size = { w: 500, h: 500 } as const;
   dragging = false;
-  header: HTMLDivElement;
+  header: Component;
   /** the os application that this window is for */
   application: Application;
-  resize_start_pos: { x: number, y: number } = { x: 0, y: 0 };
 
   constructor(application: Application) {
-    this.element.classList.add("bg-[#333]", "absolute", "rounded-xl", "shadow-sm");
+    this.header = new Component('window-header')
+    this.application = application;
+    this.element.classList.add("bg-[#333]", "absolute", "rounded-xl", "shadow-sm", "select-none");
     this.element.style.width = `${this.initial_size.w}px`;
     this.element.style.height = `${this.initial_size.h}px`;
-    this.application = application;
 
     this._add_header();
     this._add_resize_handles();
-    this._handle_drag()
+    this._handle_drag(this.header.element)
   }
 
-  private _add_header(): HTMLDivElement {
+  private _add_header(): void{
-    this.header = new Component()
     this.header.element.id = "header";
     this.header.element.classList.add(
       "bg-[#333]", "py-1","px-4", "text-sm", "text-[#eee]", "rounded-t-xl", "text-center", "cursor-move", "flex", "justify-between",
@@ -51,9 +51,9 @@ export default class Window {
     this.header.addChild(close_btn_container.start())
   }
 
-  private _handle_drag(e: MouseEvent): void {
+  private _handle_drag(el: HTMLDivElement): void {
     let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-    const dragMouseDown = (e) => {
+    const dragMouseDown = (e: MouseEvent) => {
       e.preventDefault();
       // get the mouse cursor position at startup:
       pos3 = e.clientX;
@@ -63,12 +63,9 @@ export default class Window {
       document.onmousemove = elementDrag;
     }
 
-    if (this.header) {
+    el.onmousedown = dragMouseDown;
-      // if present, the header is where you move the DIV from:
-      this.header.element.onmousedown = dragMouseDown;
-    } 
 
-    const elementDrag = (e) => {
+    const elementDrag = (e: MouseEvent) => {
       e.preventDefault();
       // calculate the new cursor position:
       pos1 = pos3 - e.clientX;
@@ -88,7 +85,7 @@ export default class Window {
   }
 
   private _handle_close(): void {
-    this.application.remove_window(this);
+    this.application.remove_window();
   }
 
   add_content(content: string): HTMLDivElement {
@@ -107,8 +104,9 @@ export default class Window {
       "absolute", `w-1`, "h-full", "cursor-w-resize", "top-0", "left-0", 
       ...color_classes
     );
+    resize_handle_left.setAttribute("draggable", "false");
     resize_handle_left.addEventListener("mousedown", (e) => {
-      this._resize_start(e, 'l');
+      this._resize_start(resize_handle_left, e, 'l');
     });
     this.element.appendChild(resize_handle_left);
 
@@ -118,8 +116,9 @@ export default class Window {
       "absolute", `w-1`, "h-full", "cursor-e-resize", "top-0", "right-0",
       ...color_classes
     );
+    resize_handle_right.setAttribute("draggable", "false");
     resize_handle_right.addEventListener("mousedown", (e) => {
-      this._resize_start(e, 'r');
+      this._resize_start(resize_handle_right, e, 'r');
     });
     this.element.appendChild(resize_handle_right);
 
@@ -129,8 +128,9 @@ export default class Window {
       "absolute", `w-full`, `h-1`, "cursor-s-resize", "bottom-0", "left-0",
       ...color_classes
     );
+    resize_handle_bottom.setAttribute("draggable", "false");
     resize_handle_bottom.addEventListener("mousedown", (e) => {
-      this._resize_start(e, 'b');
+      this._resize_start(resize_handle_bottom, e, 'b');
     });
     this.element.appendChild(resize_handle_bottom);
 
@@ -140,43 +140,53 @@ export default class Window {
       "absolute", `w-full`, `h-1`, "cursor-n-resize", "top-0", "left-0",
       ...color_classes
     );
+    resize_handle_top.setAttribute("draggable", "false");
     resize_handle_top.addEventListener("mousedown", (e) => {
-      this._resize_start(e, 't');
+      this._resize_start(resize_handle_top, e, 't');
     });
     this.element.appendChild(resize_handle_top);
   }
 
   
 
-  private _resize_start(e: MouseEvent, dir: 'l' | 'r' | 't' | 'b') {
+  private _resize_start(_el: HTMLDivElement, _e: MouseEvent, dir: 'l' | 'r' | 't' | 'b') {
-    console.log(e)
-    const { x, y } = this._get_mouse_position(e);
-    const { width: w, height: h } = this.element.getBoundingClientRect();
-    
-    const new_size = { w, h };
-    if (dir === 'l') {
-      new_size.w -= x - this.resize_start_pos.x;
-    } else if (dir === 'r') {
-      new_size.w += x - this.resize_start_pos.x;
-    } else if (dir === 't') {
-      new_size.h -= y - this.resize_start_pos.y;
-    } else if (dir === 'b') {
-      new_size.h += y - this.resize_start_pos.y;
-    }
-    this.element.style.width = `${new_size.w}px`;
-    this.element.style.height = `${new_size.h}px`;
-    this.resize_start_pos = { x, y };
-  }
-
-  private _get_mouse_position(e: MouseEvent): { x: number, y: number } {
     const rect = this.element.getBoundingClientRect();
-    return {
+    const mouse = _e
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top
-    }
-  }
 
- 
+    const __handle_drag_handle = (e: MouseEvent) => {
+      if (dir === 'l') {
+        const width = rect.width - (e.pageX - mouse.pageX)
+        if (width >= 450){
+          this.element.style.width = `${width}px`;
+          this.element.style.left = `${rect.left + (e.pageX - mouse.pageX)}px`;
+        } 
+      } else if (dir === 'r') {
+        const width = rect.width + (e.pageX - mouse.pageX)
+        if (width >= 450){
+          this.element.style.width = `${width}px`
+        }
+      } else if (dir === 't') {
+        const height = rect.height - (e.pageY - mouse.pageY)
+        if (height >= 450){
+          this.element.style.height = `${height}px`;
+          this.element.style.top = `${rect.top + (e.pageY - mouse.pageY)}px`;
+        }
+      } else if (dir === 'b') {
+        const height = rect.height + (e.pageY - mouse.pageY)
+        if (height >= 450){
+          this.element.style.height = `${height}px`
+        }
+      }
+    }
+
+    function __handle_end(_e: MouseEvent) {
+      document .removeEventListener("mousemove", __handle_drag_handle);
+      document.removeEventListener("mouseup", __handle_end);
+    }
+
+    document.addEventListener("mousemove", __handle_drag_handle);
+    document.addEventListener("mouseup", __handle_end);
+  }
 
   start(): HTMLDivElement {
     return this.element;

src/util/element.ts

@@ -0,0 +1,4 @@
+export const el = <T extends keyof HTMLElementTagNameMap>(tag: T, props?: Partial<HTMLElementTagNameMap[T]>) => {
+  return document.createElement(tag, props as ElementCreationOptions);
+}
+