domlink / src / windowing_mod.ts

import { string } from "../out/main.js";
import { Button, Container, Label, Node } from "./domlink.ts";


class TitleBar extends Container {
	label: Label;
	closeButton: Button;
	constructor(title: string, closeCallback: EventListener) {
		super();
		this.class("LWindowHandle");
		this.label = new Label(title);
		this.closeButton = new Button("x", closeCallback);
		this.with(this.label,this.closeButton);
	}
	get closable(): boolean {
		return this.closeButton.wraps.style.display != "none";
	}
	set closable(x: boolean) {
		this.closeButton.wraps.style.display = x ? "inline-block" : "none";
	}
}
export class Window extends Container {
	private static currentlyDragged: Window | null = null;
	private static mouseRelX = 0;
	private static mouseRelY = 0;
	private static zIndexCounter = 100;
	titleBar: TitleBar;
	content = new Container().class("LWindowContent");

	constructor(title: string = "New Window", height: number = 300, width: number = 400) {
		super();
		this.class("LWindow");
		this.titleBar = new TitleBar(title, ()=>{this.wraps.remove();});
		this.add(this.titleBar);
		this.titleBar.wraps.addEventListener("mousedown", this.titleGrabHandler.bind(this));
		this.wraps.addEventListener("mousedown", ()=>{this.wraps.style.zIndex = `${Window.zIndexCounter++}`;});
		this.add(this.content);
		this.style((s)=>{
			s.width = `${width}px`;
			s.height = `${height}px`;
			s.top = "0px";
			s.left = "0px";
		});
	}
	override with(...nodes: (Node | string)[]): this {
		const w = this.wraps.style.width;
		const h = this.wraps.style.height;
		this.content.with(...nodes);
		this.wraps.style.width = w;
		this.wraps.style.height = h;
		return this;
	}

	get title() {
		return (this.titleBar.children[0] as Label).text;
	}
	set title(newTitle: string) {
		(this.titleBar.children[0] as Label).text = newTitle;
	}
	public closable(can: boolean = true) {
		this.titleBar.closable = can;
		return this;
	}

	private titleGrabHandler(ev: MouseEvent) {
		if (ev.button !== 0) return;

		Window.currentlyDragged = this;
		this.titleBar.wraps.style.cursor = 'grabbing';

		const rect = this.wraps.getBoundingClientRect();
		Window.mouseRelX = ev.clientX - rect.left;
		Window.mouseRelY = ev.clientY - rect.top;

		ev.preventDefault();
	}

	private static onMouseMove(ev: MouseEvent) {
		const draggedWindow = Window.currentlyDragged;
		if (draggedWindow) {
			const viewportWidth = document.documentElement.clientWidth;
			const viewportHeight = document.documentElement.clientHeight;

			const newLeft = ev.clientX - Window.mouseRelX;
			const newTop = ev.clientY - Window.mouseRelY;

			const clampedLeft = Math.min(Math.max(0, newLeft), viewportWidth - draggedWindow.wraps.offsetWidth);
			const clampedTop = Math.min(Math.max(0, newTop), viewportHeight - draggedWindow.wraps.offsetHeight);

			draggedWindow.wraps.style.left = `${clampedLeft}px`;
			draggedWindow.wraps.style.top = `${clampedTop}px`;
		}
	}

	private static onMouseUp(_ev: MouseEvent) {
		if (Window.currentlyDragged) {
			Window.currentlyDragged.titleBar.wraps.style.cursor = 'grab';
			Window.currentlyDragged = null;
		}
	}

	// A single place to initialize global listeners
	private static _initialized = false;
	private static initializeGlobalListeners() {
		if (this._initialized) return;
		globalThis.addEventListener("mousemove", this.onMouseMove);
		globalThis.addEventListener("mouseup", this.onMouseUp);
		this._initialized = true;
	}

	// Static initializer block to set up listeners once
	static {
		this.initializeGlobalListeners();
	}
}