From 0319ff7099be270618c625172f26e5b9e16a993c Mon Sep 17 00:00:00 2001 From: mikael-lovqvists-claude-agent Date: Fri, 3 Apr 2026 03:27:12 +0000 Subject: [PATCH] Move canvas pan to middle mouse button; left button handles only 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 --- public/views/grid-setup.mjs | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/public/views/grid-setup.mjs b/public/views/grid-setup.mjs index 9c39817..3eb0078 100644 --- a/public/views/grid-setup.mjs +++ b/public/views/grid-setup.mjs @@ -29,7 +29,7 @@ export class Grid_Setup { this.#canvas = canvas_el; 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('mouseup', e => this.#on_up(e)); 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) { if (!this.#corners) return; 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); if (hit !== -1) { this.#drag_idx = hit; 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'; } } }