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

make canvas dragging a bit snappier by calculating the drag delta ourselves

Browse source 
I'm really thankful for `listen` here.
it makes this sort of logic super easy without having to add class fields.
This commit is contained in:
liquidex 2024-09-03 22:52:12 +02:00
parent bfbde0dee3
commit 740a62447e
2 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
static/canvas-renderer.js
View file

@ -394,12 +394,19 @@ class CanvasRenderer extends HTMLElement {
async #panningBehaviour() { async #panningBehaviour() {
while (true) { while (true) {
let mouseDown = await listen([this, "mousedown"]); let mouseDown = await listen([this, "mousedown"]);
let startingPanX = this.viewport.panX;
let startingPanY = this.viewport.panY;
if (mouseDown.button == 1 || mouseDown.button == 2) { 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); let deltaX = mouseDown.clientX - event.clientX;
let deltaY = mouseDown.clientY - event.clientY;
this.viewport.panX = startingPanX + deltaX / this.viewport.zoom;
this.viewport.panY = startingPanY + deltaY / this.viewport.zoom;
this.sendViewportUpdate(); 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"));

5
static/viewport.js
View file

@ -9,11 +9,6 @@ export class Viewport {
return Math.pow(2, this.zoomLevel * 0.25); return Math.pow(2, this.zoomLevel * 0.25);
} }
panAround(x, y) {
this.panX -= x / this.zoom;
this.panY -= y / this.zoom;
}
zoomIn(delta) { zoomIn(delta) {
this.zoomLevel += delta; this.zoomLevel += delta;
this.zoomLevel = Math.max(-16, Math.min(20, this.zoomLevel)); this.zoomLevel = Math.max(-16, Math.min(20, this.zoomLevel));