From b1ee244eaa35c347c972a0983c9ba0f021eca5b8 Mon Sep 17 00:00:00 2001
From: liquidev <liquidev@tutanota.com>
Date: Sun, 25 Aug 2024 14:05:51 +0200
Subject: [PATCH] add option to pan with right mouse button instead of left
 mouse button

this is quite common in other apps with an infinite canvas - such as Miro
also on laptops middle-clicking is a pain in the ass, though we should add more proper touchpad support for that case
---
 static/canvas-renderer.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/static/canvas-renderer.js b/static/canvas-renderer.js
index 46970dd..103651b 100644
--- a/static/canvas-renderer.js
+++ b/static/canvas-renderer.js
@@ -16,9 +16,11 @@ class CanvasRenderer extends HTMLElement {
         resizeObserver.observe(this);
 
         this.#cursorReportingBehaviour();
-        this.#draggingBehaviour();
+        this.#panningBehaviour();
         this.#zoomingBehaviour();
         this.#paintingBehaviour();
+
+        this.addEventListener("contextmenu", (event) => event.preventDefault());
     }
 
     initialize(wall, painter) {
@@ -113,17 +115,17 @@ class CanvasRenderer extends HTMLElement {
         }
     }
 
-    async #draggingBehaviour() {
+    async #panningBehaviour() {
         while (true) {
             let mouseDown = await listen([this, "mousedown"]);
-            if (mouseDown.button == 1) {
+            if (mouseDown.button == 1 || mouseDown.button == 2) {
                 mouseDown.preventDefault();
                 while (true) {
                     let event = await listen([window, "mousemove"], [window, "mouseup"]);
                     if (event.type == "mousemove") {
                         this.viewport.panAround(event.movementX, event.movementY);
                         this.dispatchEvent(new Event(".viewportUpdate"));
-                    } else if (event.type == "mouseup") {
+                    } else if (event.type == "mouseup" && event.button == mouseDown.button) {
                         this.dispatchEvent(new Event(".viewportUpdateEnd"));
                         break;
                     }