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

add option to pan with right mouse button instead of left mouse button

Browse source 
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
This commit is contained in:
liquidex 2024-08-25 14:05:51 +02:00
parent 0d831698e2
commit b1ee244eaa
1 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
static/canvas-renderer.js
View file

@ -16,9 +16,11 @@ class CanvasRenderer extends HTMLElement {
resizeObserver.observe(this); resizeObserver.observe(this);
this.#cursorReportingBehaviour(); this.#cursorReportingBehaviour();
this.#draggingBehaviour(); this.#panningBehaviour();
this.#zoomingBehaviour(); this.#zoomingBehaviour();
this.#paintingBehaviour(); this.#paintingBehaviour();
this.addEventListener("contextmenu", (event) => event.preventDefault());
} }
initialize(wall, painter) { initialize(wall, painter) {
@ -113,17 +115,17 @@ class CanvasRenderer extends HTMLElement {
} }
} }
async #draggingBehaviour() { async #panningBehaviour() {
while (true) { while (true) {
let mouseDown = await listen([this, "mousedown"]); let mouseDown = await listen([this, "mousedown"]);
if (mouseDown.button == 1) { if (mouseDown.button == 1 || mouseDown.button == 2) {
mouseDown.preventDefault(); mouseDown.preventDefault();
while (true) { while (true) {
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.dispatchEvent(new Event(".viewportUpdate"));
} else if (event.type == "mouseup") { } else if (event.type == "mouseup" && event.button == mouseDown.button) {
this.dispatchEvent(new Event(".viewportUpdateEnd")); this.dispatchEvent(new Event(".viewportUpdateEnd"));
break; break;
} }