liquidex/rkgk
liquidex/rkgk
1
Fork 0
Code Issues 66 Pull requests Projects 1 Wiki Activity

make the app listen to hashchange and move the viewport accordingly, or reload the page when the wall changes

Browse source
This commit is contained in:
liquidex 2024-08-25 14:14:55 +02:00
parent b1ee244eaa
commit 7465913944
2 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
static/canvas-renderer.js
View file

@ -115,6 +115,10 @@ class CanvasRenderer extends HTMLElement {
} }
} }
sendViewportUpdate() {
this.dispatchEvent(new Event(".viewportUpdate"));
}
async #panningBehaviour() { async #panningBehaviour() {
while (true) { while (true) {
let mouseDown = await listen([this, "mousedown"]); let mouseDown = await listen([this, "mousedown"]);
@ -124,7 +128,7 @@ class CanvasRenderer extends HTMLElement {
let event = await listen([window, "mousemove"], [window, "mouseup"]); let event = await listen([window, "mousemove"], [window, "mouseup"]);
if (event.type == "mousemove") { if (event.type == "mousemove") {
this.viewport.panAround(event.movementX, event.movementY); this.viewport.panAround(event.movementX, event.movementY);
this.dispatchEvent(new Event(".viewportUpdate")); this.sendViewportUpdate();
} else if (event.type == "mouseup" && event.button == mouseDown.button) { } else if (event.type == "mouseup" && event.button == mouseDown.button) {
this.dispatchEvent(new Event(".viewportUpdateEnd")); this.dispatchEvent(new Event(".viewportUpdateEnd"));
break; break;
@ -140,7 +144,7 @@ class CanvasRenderer extends HTMLElement {
// TODO: Touchpad zoom // TODO: Touchpad zoom
this.viewport.zoomIn(event.deltaY > 0 ? -1 : 1); this.viewport.zoomIn(event.deltaY > 0 ? -1 : 1);
this.dispatchEvent(new Event(".viewportUpdate")); this.sendViewportUpdate();
this.dispatchEvent(new Event(".viewportUpdateEnd")); this.dispatchEvent(new Event(".viewportUpdateEnd"));
} }
} }

19
static/index.js
View file

@ -28,8 +28,8 @@ function updateUrl(session, viewport) {
history.replaceState(null, "", url); history.replaceState(null, "", url);
} }
function readUrl() { function readUrl(urlString) {
let url = new URL(window.location); let url = new URL(urlString);
let fragments = url.hash.substring(1).split("&"); let fragments = url.hash.substring(1).split("&");
let wallId = null; let wallId = null;
@ -72,7 +72,7 @@ function readUrl() {
await waitForLogin(); await waitForLogin();
console.info("login ready! starting session"); console.info("login ready! starting session");
let urlData = readUrl(); let urlData = readUrl(window.location);
canvasRenderer.viewport.panX = urlData.viewport.x; canvasRenderer.viewport.panX = urlData.viewport.x;
canvasRenderer.viewport.panY = urlData.viewport.y; canvasRenderer.viewport.panY = urlData.viewport.y;
canvasRenderer.viewport.zoomLevel = urlData.viewport.zoom; canvasRenderer.viewport.zoomLevel = urlData.viewport.zoom;
@ -112,6 +112,19 @@ function readUrl() {
updateUrl(session, canvasRenderer.viewport); updateUrl(session, canvasRenderer.viewport);
addEventListener("hashchange", (event) => {
let newUrlData = readUrl(event.newURL);
if (newUrlData.wallId != urlData.wallId) {
// Different wall, reload the app.
window.location.reload();
} else {
canvasRenderer.viewport.panX = newUrlData.viewport.x;
canvasRenderer.viewport.panY = newUrlData.viewport.y;
canvasRenderer.viewport.zoomLevel = newUrlData.viewport.zoom;
canvasRenderer.sendViewportUpdate();
}
});
let wall = new Wall(session.wallInfo); let wall = new Wall(session.wallInfo);
canvasRenderer.initialize(wall); canvasRenderer.initialize(wall);