From 0ce02af75fa8da4a9cbafceab966f5852edaffd2 Mon Sep 17 00:00:00 2001 From: trinkey Date: Thu, 13 Feb 2025 19:31:05 -0500 Subject: [PATCH] bugfix with fullscreen and resizing --- js/index.js | 83 ++++++++++++++++++++++++++++++----------------------- ts/index.ts | 81 ++++++++++++++++++++++++++++----------------------- 2 files changed, 92 insertions(+), 72 deletions(-) diff --git a/js/index.js b/js/index.js index 750aabc..7dd5d4f 100644 --- a/js/index.js +++ b/js/index.js @@ -16,6 +16,9 @@ function incrementZIndex(windowID, focus = false) { } function edgeMoveEvent(x, y, pos, windowID) { let w = WINDOWS[windowID]; + if (w.fullscreen) { + return; + } if (pos == "top" || pos.startsWith("top-")) { w.height = Math.max(-(y - w.vars.mouseOffsetY - w.vars.startingPosY) + w.vars.startingHeight, w.minHeight); w.posY = Math.max(w.vars.startingHeight - w.height + w.vars.startingPosY, 0); @@ -211,37 +214,38 @@ function createWindow(config) { } }); wH.querySelector(".fullscreen").addEventListener("click", function () { - if (WINDOWS[config.id].fullscreen) { - WINDOWS[config.id].posX = WINDOWS[config.id].vars.oldPosX; - WINDOWS[config.id].posY = WINDOWS[config.id].vars.oldPosY; - WINDOWS[config.id].width = WINDOWS[config.id].vars.oldWidth; - WINDOWS[config.id].height = WINDOWS[config.id].vars.oldHeight; - WINDOWS[config.id].fullscreen = false; - delete WINDOWS[config.id].vars.oldPosX; - delete WINDOWS[config.id].vars.oldPosY; - delete WINDOWS[config.id].vars.oldWidth; - delete WINDOWS[config.id].vars.oldHeight; - wC.style.left = `${WINDOWS[config.id].posX}px`; - wC.style.top = `${WINDOWS[config.id].posY}px`; - wC.style.width = `${WINDOWS[config.id].width + _windowPaddingX - 2}px`; - w.style.width = `${WINDOWS[config.id].width}px`; - w.style.height = `${WINDOWS[config.id].height}px`; + let window = WINDOWS[config.id]; + if (window.fullscreen) { + window.posX = Math.max(0, Math.min(innerWidth - window.vars.oldWidth - _windowPaddingX, window.vars.oldPosX)); + window.posY = Math.max(0, Math.min(innerHeight - window.vars.oldHeight - _windowPaddingY, window.vars.oldPosY)); + window.width = Math.max(window.minWidth, Math.min(window.vars.oldWidth, innerWidth - _windowPaddingX)); + window.height = Math.max(window.minHeight, Math.min(window.vars.oldHeight, innerHeight - _windowPaddingY)); + window.fullscreen = false; + delete window.vars.oldPosX; + delete window.vars.oldPosY; + delete window.vars.oldWidth; + delete window.vars.oldHeight; + wC.style.left = `${window.posX}px`; + wC.style.top = `${window.posY}px`; + wC.style.width = `${window.width + _windowPaddingX - 2}px`; + w.style.width = `${window.width}px`; + w.style.height = `${window.height}px`; } else { - WINDOWS[config.id].vars.oldPosX = WINDOWS[config.id].posX; - WINDOWS[config.id].vars.oldPosY = WINDOWS[config.id].posY; - WINDOWS[config.id].vars.oldWidth = WINDOWS[config.id].width; - WINDOWS[config.id].vars.oldHeight = WINDOWS[config.id].height; - WINDOWS[config.id].fullscreen = true; - WINDOWS[config.id].posX = 0; - WINDOWS[config.id].posY = 0; - WINDOWS[config.id].width = innerWidth; - WINDOWS[config.id].height = innerHeight; + window.vars.oldPosX = window.posX; + window.vars.oldPosY = window.posY; + window.vars.oldWidth = window.width; + window.vars.oldHeight = window.height; + window.fullscreen = true; + window.posX = 0; + window.posY = 0; + window.width = innerWidth; + window.height = innerHeight; wC.style.left = "0px"; wC.style.top = "0px"; - wC.style.width = `${WINDOWS[config.id].width}px`; - w.style.width = `${WINDOWS[config.id].width - _windowPaddingX}px`; - w.style.height = `${WINDOWS[config.id].height - _windowPaddingY}px`; + wC.style.width = `${window.width}px`; + w.style.width = `${window.width - _windowPaddingX}px`; + w.style.height = `${window.height - _windowPaddingY}px`; } }); globalIncrement++; @@ -288,14 +292,21 @@ onmouseup = function () { }; onresize = function () { for (const window of Object.keys(WINDOWS)) { - WINDOWS[window].posX = Math.max(0, Math.min(innerWidth - WINDOWS[window].width - _windowPaddingX, WINDOWS[window].posX)); - WINDOWS[window].posY = Math.max(0, Math.min(innerHeight - WINDOWS[window].height - _windowPaddingY, WINDOWS[window].posY)); - WINDOWS[window].width = Math.max(WINDOWS[window].minWidth, Math.min(WINDOWS[window].width, innerWidth - _windowPaddingX)); - WINDOWS[window].height = Math.max(WINDOWS[window].minHeight, Math.min(WINDOWS[window].height, innerHeight - _windowPaddingY)); - WINDOWS[window].element.style.left = `${WINDOWS[window].posX}px`; - WINDOWS[window].element.style.top = `${WINDOWS[window].posY}px`; - WINDOWS[window].element.style.width = `${WINDOWS[window].width + _windowPaddingX - 2}px`; - WINDOWS[window].element.querySelector(".window").style.width = `${WINDOWS[window].width}px`; - WINDOWS[window].element.querySelector(".window").style.height = `${WINDOWS[window].height}px`; + let w = WINDOWS[window]; + if (w.fullscreen) { + w.width = innerWidth - _windowPaddingX + 2; + w.height = innerHeight - _windowPaddingY + 2; + } + else { + w.posX = Math.max(0, Math.min(innerWidth - w.width - _windowPaddingX, w.posX)); + w.posY = Math.max(0, Math.min(innerHeight - w.height - _windowPaddingY, w.posY)); + w.width = Math.max(w.minWidth, Math.min(w.width, innerWidth - _windowPaddingX)); + w.height = Math.max(w.minHeight, Math.min(w.height, innerHeight - _windowPaddingY)); + } + w.element.style.left = `${w.posX}px`; + w.element.style.top = `${w.posY}px`; + w.element.style.width = `${w.width + _windowPaddingX - 2}px`; + w.element.querySelector(".window").style.width = `${w.width}px`; + w.element.querySelector(".window").style.height = `${w.height}px`; } }; diff --git a/ts/index.ts b/ts/index.ts index 77901a1..fa13aa1 100644 --- a/ts/index.ts +++ b/ts/index.ts @@ -31,6 +31,8 @@ function incrementZIndex(windowID: string, focus: boolean=false): void { function edgeMoveEvent(x: number, y: number, pos: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | string, windowID: string): void { let w: _winConf = WINDOWS[windowID]; + if (w.fullscreen) { return; } + if (pos == "top" || pos.startsWith("top-")) { w.height = Math.max(-(y - w.vars.mouseOffsetY - w.vars.startingPosY) + w.vars.startingHeight, w.minHeight); w.posY = Math.max(w.vars.startingHeight - w.height + w.vars.startingPosY, 0); @@ -253,36 +255,37 @@ function createWindow(config: _winInitConf): void { }); wH.querySelector(".fullscreen").addEventListener("click", function(): void { - if (WINDOWS[config.id].fullscreen) { - WINDOWS[config.id].posX = WINDOWS[config.id].vars.oldPosX; - WINDOWS[config.id].posY = WINDOWS[config.id].vars.oldPosY; - WINDOWS[config.id].width = WINDOWS[config.id].vars.oldWidth; - WINDOWS[config.id].height = WINDOWS[config.id].vars.oldHeight; - WINDOWS[config.id].fullscreen = false; - delete WINDOWS[config.id].vars.oldPosX; - delete WINDOWS[config.id].vars.oldPosY; - delete WINDOWS[config.id].vars.oldWidth; - delete WINDOWS[config.id].vars.oldHeight; - wC.style.left = `${WINDOWS[config.id].posX}px`; - wC.style.top = `${WINDOWS[config.id].posY}px`; - wC.style.width = `${WINDOWS[config.id].width + _windowPaddingX - 2}px`; - w.style.width = `${WINDOWS[config.id].width}px`; - w.style.height = `${WINDOWS[config.id].height}px`; + let window: _winConf = WINDOWS[config.id]; + if (window.fullscreen) { + window.posX = Math.max(0, Math.min(innerWidth - window.vars.oldWidth - _windowPaddingX, window.vars.oldPosX)); // window.vars.oldPosX; + window.posY = Math.max(0, Math.min(innerHeight - window.vars.oldHeight - _windowPaddingY, window.vars.oldPosY)); // window.vars.oldPosY; + window.width = Math.max(window.minWidth, Math.min(window.vars.oldWidth, innerWidth - _windowPaddingX)); // window.vars.oldWidth; + window.height = Math.max(window.minHeight, Math.min(window.vars.oldHeight, innerHeight - _windowPaddingY)); // window.vars.oldHeight; + window.fullscreen = false; + delete window.vars.oldPosX; + delete window.vars.oldPosY; + delete window.vars.oldWidth; + delete window.vars.oldHeight; + wC.style.left = `${window.posX}px`; + wC.style.top = `${window.posY}px`; + wC.style.width = `${window.width + _windowPaddingX - 2}px`; + w.style.width = `${window.width}px`; + w.style.height = `${window.height}px`; } else { - WINDOWS[config.id].vars.oldPosX = WINDOWS[config.id].posX; - WINDOWS[config.id].vars.oldPosY = WINDOWS[config.id].posY; - WINDOWS[config.id].vars.oldWidth = WINDOWS[config.id].width; - WINDOWS[config.id].vars.oldHeight = WINDOWS[config.id].height; - WINDOWS[config.id].fullscreen = true; - WINDOWS[config.id].posX = 0; - WINDOWS[config.id].posY = 0; - WINDOWS[config.id].width = innerWidth; - WINDOWS[config.id].height = innerHeight; + window.vars.oldPosX = window.posX; + window.vars.oldPosY = window.posY; + window.vars.oldWidth = window.width; + window.vars.oldHeight = window.height; + window.fullscreen = true; + window.posX = 0; + window.posY = 0; + window.width = innerWidth; + window.height = innerHeight; wC.style.left = "0px"; wC.style.top = "0px"; - wC.style.width = `${WINDOWS[config.id].width}px`; - w.style.width = `${WINDOWS[config.id].width - _windowPaddingX}px`; - w.style.height = `${WINDOWS[config.id].height - _windowPaddingY}px`; + wC.style.width = `${window.width}px`; + w.style.width = `${window.width - _windowPaddingX}px`; + w.style.height = `${window.height - _windowPaddingY}px`; } }); @@ -339,17 +342,23 @@ onmouseup = function(): void { onresize = function(): void { for (const window of Object.keys(WINDOWS)) { - WINDOWS[window].posX = Math.max(0, Math.min(innerWidth - WINDOWS[window].width - _windowPaddingX, WINDOWS[window].posX)); - WINDOWS[window].posY = Math.max(0, Math.min(innerHeight - WINDOWS[window].height - _windowPaddingY, WINDOWS[window].posY)); + let w: _winConf = WINDOWS[window]; - WINDOWS[window].width = Math.max(WINDOWS[window].minWidth, Math.min(WINDOWS[window].width, innerWidth - _windowPaddingX)); - WINDOWS[window].height = Math.max(WINDOWS[window].minHeight, Math.min(WINDOWS[window].height, innerHeight - _windowPaddingY)); + if (w.fullscreen) { + w.width = innerWidth - _windowPaddingX + 2; + w.height = innerHeight - _windowPaddingY + 2; + } else { + w.posX = Math.max(0, Math.min(innerWidth - w.width - _windowPaddingX, w.posX)); + w.posY = Math.max(0, Math.min(innerHeight - w.height - _windowPaddingY, w.posY)); - WINDOWS[window].element.style.left = `${WINDOWS[window].posX}px`; - WINDOWS[window].element.style.top = `${WINDOWS[window].posY}px`; + w.width = Math.max(w.minWidth, Math.min(w.width, innerWidth - _windowPaddingX)); + w.height = Math.max(w.minHeight, Math.min(w.height, innerHeight - _windowPaddingY)); + } - WINDOWS[window].element.style.width = `${WINDOWS[window].width + _windowPaddingX - 2}px`; - (WINDOWS[window].element.querySelector(".window") as HTMLElement).style.width = `${WINDOWS[window].width }px`; - (WINDOWS[window].element.querySelector(".window") as HTMLElement).style.height = `${WINDOWS[window].height}px`; + w.element.style.left = `${w.posX}px`; + w.element.style.top = `${w.posY}px`; + w.element.style.width = `${w.width + _windowPaddingX - 2}px`; + (w.element.querySelector(".window") as HTMLElement).style.width = `${w.width }px`; + (w.element.querySelector(".window") as HTMLElement).style.height = `${w.height}px`; } }