From 7465913944810b960ddbb84f3d4517d172703ef9 Mon Sep 17 00:00:00 2001
From: liquidev <liquidev@tutanota.com>
Date: Sun, 25 Aug 2024 14:14:55 +0200
Subject: [PATCH] make the app listen to hashchange and move the viewport
 accordingly, or reload the page when the wall changes

---
 static/canvas-renderer.js |  8 ++++++--
 static/index.js           | 19 ++++++++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/static/canvas-renderer.js b/static/canvas-renderer.js
index 103651b..db9ace2 100644
--- a/static/canvas-renderer.js
+++ b/static/canvas-renderer.js
@@ -115,6 +115,10 @@ class CanvasRenderer extends HTMLElement {
         }
     }
 
+    sendViewportUpdate() {
+        this.dispatchEvent(new Event(".viewportUpdate"));
+    }
+
     async #panningBehaviour() {
         while (true) {
             let mouseDown = await listen([this, "mousedown"]);
@@ -124,7 +128,7 @@ class CanvasRenderer extends HTMLElement {
                     let event = await listen([window, "mousemove"], [window, "mouseup"]);
                     if (event.type == "mousemove") {
                         this.viewport.panAround(event.movementX, event.movementY);
-                        this.dispatchEvent(new Event(".viewportUpdate"));
+                        this.sendViewportUpdate();
                     } else if (event.type == "mouseup" && event.button == mouseDown.button) {
                         this.dispatchEvent(new Event(".viewportUpdateEnd"));
                         break;
@@ -140,7 +144,7 @@ class CanvasRenderer extends HTMLElement {
 
             // TODO: Touchpad zoom
             this.viewport.zoomIn(event.deltaY > 0 ? -1 : 1);
-            this.dispatchEvent(new Event(".viewportUpdate"));
+            this.sendViewportUpdate();
             this.dispatchEvent(new Event(".viewportUpdateEnd"));
         }
     }
diff --git a/static/index.js b/static/index.js
index 3072c29..4d79bb9 100644
--- a/static/index.js
+++ b/static/index.js
@@ -28,8 +28,8 @@ function updateUrl(session, viewport) {
     history.replaceState(null, "", url);
 }
 
-function readUrl() {
-    let url = new URL(window.location);
+function readUrl(urlString) {
+    let url = new URL(urlString);
     let fragments = url.hash.substring(1).split("&");
 
     let wallId = null;
@@ -72,7 +72,7 @@ function readUrl() {
     await waitForLogin();
     console.info("login ready! starting session");
 
-    let urlData = readUrl();
+    let urlData = readUrl(window.location);
     canvasRenderer.viewport.panX = urlData.viewport.x;
     canvasRenderer.viewport.panY = urlData.viewport.y;
     canvasRenderer.viewport.zoomLevel = urlData.viewport.zoom;
@@ -112,6 +112,19 @@ function readUrl() {
 
     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);
     canvasRenderer.initialize(wall);