Klectr/KDesktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

start making window sizable

Browse Source
This commit is contained in:
Triston Armstrong 2024-06-20 14:32:14 -05:00
parent a56e1d253e
commit 91be4dcc63
1 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/ui/window.ts
View File

@ -7,6 +7,7 @@ export default class Window {
header: HTMLDivElement; header: HTMLDivElement;
/** the os application that this window is for */ /** the os application that this window is for */
application: Application; application: Application;
resize_start_pos: { x: number, y: number } = { x: 0, y: 0 };
constructor(application: Application) { constructor(application: Application) {
this.element.classList.add("bg-[#ccc]", "absolute", "rounded-lg", "shadow-xl"); this.element.classList.add("bg-[#ccc]", "absolute", "rounded-lg", "shadow-xl");
@ -143,8 +144,31 @@ export default class Window {
private _resize_start(e: MouseEvent, dir: 'l' | 'r' | 't' | 'b') { private _resize_start(e: MouseEvent, dir: 'l' | 'r' | 't' | 'b') {
// TODO finish console.log(e)
console.log({e, dir}) 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 {
x: e.clientX - rect.left,
y: e.clientY - rect.top
}
} }