GoogleChromeLabs/squoosh

Allow using the middle mouse button to pan the image in addition to the left mouse button

Open

#824 opened on Sep 11, 2020

View on GitHub
 (3 comments) (0 reactions) (0 assignees)TypeScript (20,335 stars) (1,431 forks)batch import
UIgood first issuehelp wanted

Description

Is your feature request related to a problem? Please describe.

I can only pan with by holding down the left mouse button, but I'm used to the middle mouse button in other applications.

Describe the solution you'd like

Allow using the middle mouse button to pan the image in addition to the left mouse button. In addition, it would be nice to allow using the right mouse button as well (which is friendlier towards trackpad users), but the Web browser might not always allow this. Still, it's worth implementing if possible :slightly_smiling_face:

I can look at implementing this feature if it's desired.

Does other service/app have this feature?

Most graphic-related applications have this feature. Here are some examples:

Contributor guide

Tech stack
typescripthtmlcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
TypeScript basicsBrowser event handling
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Look at the existing image viewer code, likely in a component file such as 'image preview.ts', to find the current panning logic triggered by left mouse button. Add event listeners for middle button (and optionally right button) to reuse the same panning behavior. Test in major browsers. The issue comments mention that right button may not be allowed by browsers, so consider limiting to middle button if needed.