mikael-lovqvists-claude-agent/electronics-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move canvas pan to middle mouse button; left button handles only

Browse Source 
Left click now exclusively drags corner/edge handles.
Middle click pans the view. preventDefault on mousedown
suppresses the browser's autoscroll activation on middle click.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-04-03 03:27:12 +00:00
parent 5e2a348b9d
commit 0319ff7099
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/views/grid-setup.mjs
View File

@@ -29,7 +29,7 @@ export class Grid_Setup {
this.#canvas = canvas_el; this.#canvas = canvas_el;
this.#ctx = canvas_el.getContext('2d'); this.#ctx = canvas_el.getContext('2d');
canvas_el.addEventListener('mousedown', e => this.#on_down(e)); canvas_el.addEventListener('mousedown', e => { e.preventDefault(); this.#on_down(e); });
canvas_el.addEventListener('mousemove', e => this.#on_move(e)); canvas_el.addEventListener('mousemove', e => this.#on_move(e));
canvas_el.addEventListener('mouseup', e => this.#on_up(e)); canvas_el.addEventListener('mouseup', e => this.#on_up(e));
canvas_el.addEventListener('mouseleave', () => { this.#drag_idx = -1; this.#panning = false; }); canvas_el.addEventListener('mouseleave', () => { this.#drag_idx = -1; this.#panning = false; });
@@ -161,14 +161,19 @@ export class Grid_Setup {
#on_down(e, is_touch = false) { #on_down(e, is_touch = false) {
if (!this.#corners) return; if (!this.#corners) return;
const sp = this.#screen_pos(e); const sp = this.#screen_pos(e);
if (!is_touch && e.button === 1) {
// Middle button: pan
e.preventDefault();
this.#panning = true;
this.#pan_last = sp;
this.#canvas.style.cursor = 'grabbing';
return;
}
if (!is_touch && e.button !== 0) { return; }
const hit = this.#find_handle(sp); const hit = this.#find_handle(sp);
if (hit !== -1) { if (hit !== -1) {
this.#drag_idx = hit; this.#drag_idx = hit;
this.#drag_prev_img = this.#world_to_img(this.#to_world(sp)); this.#drag_prev_img = this.#world_to_img(this.#to_world(sp));
} else {
this.#panning = true;
this.#pan_last = sp;
if (!is_touch) { this.#canvas.style.cursor = 'grabbing'; }
} }
} }