From 0f4e13f6b04a83c8717990f019415987716329c8 Mon Sep 17 00:00:00 2001 From: Triston Armstrong Date: Fri, 21 Jun 2024 23:15:45 -0500 Subject: [PATCH] make progress --- assets/{wallpaper3.png => wallpaper.png} | Bin index.css | 2 +- src/os/cursor.ts | 2 +- src/ui/component.ts | 6 +- src/ui/desktop.ts | 1 - src/ui/topbar.ts | 6 +- src/ui/window.ts | 102 +++++++++++++---------- src/util/element.ts | 4 + 8 files changed, 69 insertions(+), 54 deletions(-) rename assets/{wallpaper3.png => wallpaper.png} (100%) create mode 100644 src/util/element.ts diff --git a/assets/wallpaper3.png b/assets/wallpaper.png similarity index 100% rename from assets/wallpaper3.png rename to assets/wallpaper.png diff --git a/index.css b/index.css index c53d687..4a1c851 100644 --- a/index.css +++ b/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; diff --git a/src/os/cursor.ts b/src/os/cursor.ts index e749526..569ebf8 100644 --- a/src/os/cursor.ts +++ b/src/os/cursor.ts @@ -4,6 +4,6 @@ export default class Cursor { } start(e: MouseEvent) { - //console.log(e); + //console.log(e.clientX, e.clientY); } } diff --git a/src/ui/component.ts b/src/ui/component.ts index 94fefad..ffae41f 100644 --- a/src/ui/component.ts +++ b/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); } diff --git a/src/ui/desktop.ts b/src/ui/desktop.ts index 899d5c2..d38496e 100644 --- a/src/ui/desktop.ts +++ b/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())); } diff --git a/src/ui/topbar.ts b/src/ui/topbar.ts index 8f2ef2b..de08a8b 100644 --- a/src/ui/topbar.ts +++ b/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") diff --git a/src/ui/window.ts b/src/ui/window.ts index 4b5f59c..9568135 100644 --- a/src/ui/window.ts +++ b/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 { - this.header = new Component() + private _add_header(): void{ 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) { - // if present, the header is where you move the DIV from: - this.header.element.onmousedown = dragMouseDown; - } + el.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') { - 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 } { + private _resize_start(_el: HTMLDivElement, _e: MouseEvent, dir: 'l' | 'r' | 't' | 'b') { const rect = this.element.getBoundingClientRect(); - return { - x: e.clientX - rect.left, - y: e.clientY - rect.top - } - } + const mouse = _e - + 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; diff --git a/src/util/element.ts b/src/util/element.ts new file mode 100644 index 0000000..86d5667 --- /dev/null +++ b/src/util/element.ts @@ -0,0 +1,4 @@ +export const el = (tag: T, props?: Partial) => { + return document.createElement(tag, props as ElementCreationOptions); +} +