GoogleChromeLabs/squoosh

Add a button to reset position (move to center)

Open

#292 opened on Nov 15, 2018

View on GitHub
 (7 comments) (0 reactions) (0 assignees)TypeScript (20,335 stars) (1,431 forks)batch import
UIfeature requestgood first issue

Description

I find it a bit annoying that zooming out can put the image in some awkward corner.

Perhaps it's a good idea to prevent the image from going too far, e.g. ensure it's (1) always visible (so you can't scroll in a way which puts it off-screen) and (2) image edges snap to splitter if taken too much to the left or right.

So if the zoom or pan results in something like this:

image

...it would just snap to this:

image

Contributor guide

Tech stack
typescripthtmlcssreact
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.
mostly clear
Prerequisites
Familiarity with TypeScriptUnderstanding of zoom/pan logicExperience with React components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the current zoom/pan implementation in the image viewer component (likely in src/components/ImageViewer.tsx). Understand how the viewport transform is managed and how to add a reset button that sets the transform to center. Also examine the snapping behavior to ensure the image remains visible.