make progress

This commit is contained in:
Triston Armstrong 2024-06-21 23:15:45 -05:00
parent 0fa8c3ec56
commit 0f4e13f6b0
8 changed files with 69 additions and 54 deletions

View File

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

View File

@ -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;

View File

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

View File

@ -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);
}

View File

@ -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()));
}

View File

@ -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")

View File

@ -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;

4
src/util/element.ts Normal file
View File

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