leif/lexys-labyrinth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add mouse3 panning to the editor

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2020-09-10 20:31:01 -06:00
parent 7c9bc92627
commit 6bfb5f7896
1 changed files with 43 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
js/main.js
View File

@ -761,9 +761,14 @@ class Editor extends PrimaryView {
// Level canvas and mouse handling // Level canvas and mouse handling
this.root.querySelector('.level').append(this.renderer.canvas); this.root.querySelector('.level').append(this.renderer.canvas);
this.mouse_mode = null; this.mouse_mode = null;
this.mouse_button = null;
this.mouse_cell = null; this.mouse_cell = null;
this.renderer.canvas.addEventListener('mousedown', ev => { this.renderer.canvas.addEventListener('mousedown', ev => {
if (ev.button === 0) {
// Left button: draw
this.mouse_mode = 'draw'; this.mouse_mode = 'draw';
this.mouse_button = ev.button;
this.mouse_coords = [ev.clientX, ev.clientY];
let [x, y] = this.renderer.cell_coords_from_event(ev); let [x, y] = this.renderer.cell_coords_from_event(ev);
this.mouse_cell = [x, y]; this.mouse_cell = [x, y];
@ -791,12 +796,20 @@ class Editor extends PrimaryView {
} }
} }
this.renderer.draw(); this.renderer.draw();
}
else if (ev.button === 1) {
// Middle button: pan
this.mouse_mode = 'pan';
this.mouse_button = ev.button;
this.mouse_coords = [ev.clientX, ev.clientY];
ev.preventDefault();
}
}); });
this.renderer.canvas.addEventListener('mousemove', ev => { this.renderer.canvas.addEventListener('mousemove', ev => {
if (this.mouse_mode === null) if (this.mouse_mode === null)
return; return;
// TODO check for the specific button we're holding // TODO check for the specific button we're holding
if (ev.buttons === 0) { if ((ev.buttons & (2 << this.mouse_button)) === 0) {
this.mouse_mode = null; this.mouse_mode = null;
return; return;
} }
@ -871,6 +884,13 @@ class Editor extends PrimaryView {
this.mouse_cell = [x, y]; this.mouse_cell = [x, y];
} }
else if (this.mouse_mode === 'pan') {
let dx = ev.clientX - this.mouse_coords[0];
let dy = ev.clientY - this.mouse_coords[1];
this.renderer.canvas.parentNode.scrollLeft -= dx;
this.renderer.canvas.parentNode.scrollTop -= dy;
this.mouse_coords = [ev.clientX, ev.clientY];
}
}); });
this.renderer.canvas.addEventListener('mouseup', ev => { this.renderer.canvas.addEventListener('mouseup', ev => {
this.mouse_mode = null; this.mouse_mode = null;