MeowcaTheoRange/abtmtr-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix image display, add window shortcuts

Browse source
This commit is contained in:
MeowcaTheoRange 2023-11-23 17:30:36 -06:00
parent 5b752df28e
commit 7f689d5817
4 changed files with 60 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
views/projects/hex/scripts/index.js
View file

@ -55,7 +55,7 @@ function initDocument(hx, w, h, t) {
<head> <head>
<title>Result</title> <title>Result</title>
</head> </head>
<body style="display:flex;margin:0;height:100vh;align-items:center;justify-content:center;"> <body style="display:flex;margin:0;height:100vh;align-items:safe center;justify-content:safe center;">
<canvas id="canvas" width="300" height="200"></canvas> <canvas id="canvas" width="300" height="200"></canvas>
</body> </body>
</html>`, </html>`,
@ -81,6 +81,7 @@ function createFlag(hex, w, h, type, canvas) {
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
canvas.width = w; canvas.width = w;
canvas.height = h; canvas.height = h;
canvas.style.aspectRatio = `${w / h}`;
// Initialize stuff // Initialize stuff

2
views/projects/woz/scripts/index.js
View file

@ -24,7 +24,7 @@ function initDocument(hx, w, h, t) {
<head> <head>
<title>Result</title> <title>Result</title>
</head> </head>
<body style="display:flex;margin:0;height:100vh;align-items:center;justify-content:center;"> <body style="display:flex;margin:0;height:100vh;align-items:safe center;justify-content:safe center;">
<canvas id="canvas" width="1280" height="720"></canvas> <canvas id="canvas" width="1280" height="720"></canvas>
</body> </body>
</html>`, </html>`,

53
views/scripts/windows.js
View file

@ -55,6 +55,9 @@ class WindowObject {
this.windowManager.addEventListener("touchend", (e) => this.windowManager.addEventListener("touchend", (e) =>
this.event__dragMouseUp(e, true) this.event__dragMouseUp(e, true)
); );
this.windowObject.addEventListener("keydown", (e) =>
this.event__responseKeyDown(e)
);
this.windowObject.addEventListener("mousedown", (e) => this.windowObject.addEventListener("mousedown", (e) =>
WindowObject.raiseWindow(this.windowObject) WindowObject.raiseWindow(this.windowObject)
@ -167,6 +170,49 @@ class WindowObject {
} }
} }
event__responseKeyDown(e) {
e.preventDefault();
switch (e.code) {
case "Backspace":
this.destroy();
break;
case "Space":
this.maximizeWindow();
break;
case "ArrowUp":
if (e.shiftKey)
this.windowObject.style.height =
this.windowObject.offsetHeight - 10 + "px";
else
this.windowObject.style.top = this.windowObject.offsetTop - 10 + "px";
break;
case "ArrowDown":
if (e.shiftKey)
this.windowObject.style.height =
this.windowObject.offsetHeight + 10 + "px";
else
this.windowObject.style.top = this.windowObject.offsetTop + 10 + "px";
break;
case "ArrowLeft":
if (e.shiftKey)
this.windowObject.style.width =
this.windowObject.offsetWidth - 10 + "px";
else
this.windowObject.style.left =
this.windowObject.offsetLeft - 10 + "px";
break;
case "ArrowRight":
if (e.shiftKey)
this.windowObject.style.width =
this.windowObject.offsetWidth + 10 + "px";
else
this.windowObject.style.left =
this.windowObject.offsetLeft + 10 + "px";
break;
}
}
static raiseWindow(windowObj) { static raiseWindow(windowObj) {
windowObj.parentElement.querySelectorAll(".window-object").forEach((x) => { windowObj.parentElement.querySelectorAll(".window-object").forEach((x) => {
if (x.style.zIndex > 50) x.style.zIndex -= 1; if (x.style.zIndex > 50) x.style.zIndex -= 1;
@ -180,8 +226,11 @@ class WindowObject {
static createWindow(windowRef, content, srcdoc, w, h) { static createWindow(windowRef, content, srcdoc, w, h) {
const windowObject = document.createElement("div"); const windowObject = document.createElement("div");
windowObject.classList.add("window-object"); windowObject.classList.add("window-object");
windowObject.style.width = `calc(${w}px + 1.5em)`; windowObject.style.width = `calc(${w}px + 2.75em)`;
windowObject.style.height = `calc(${h}px + 3.5em)`; windowObject.style.height = `calc(${h}px + 4.5em)`;
windowObject.style.left = `calc(50vw - ${w / 2}px)`;
windowObject.style.top = `calc(50vh - ${h / 2}px)`;
windowObject.tabIndex = "0";
{ {
const windowManager = document.createElement("div"); const windowManager = document.createElement("div");

10
views/styles/windows.css
View file

@ -16,10 +16,10 @@ div.window-object {
grid-template-rows: max-content auto; grid-template-rows: max-content auto;
grid-gap: 0.25em; grid-gap: 0.25em;
position: fixed; position: fixed;
top: calc(50vh - 150px); width: 600px;
left: calc(50vw - 200px); height: 500px;
width: 400px; left: calc(50vw - 300px);
height: 300px; top: calc(50vh - 250px);
min-width: 10em; min-width: 10em;
min-height: 2em; min-height: 2em;
@ -145,4 +145,6 @@ div.window-object > iframe.window-content {
height: 100%; height: 100%;
width: 100%; width: 100%;
border: var(--border-style); border: var(--border-style);
min-height: 0;
min-width: 0;
} }