GoogleChromeLabs/squoosh

Add a button to reset position (move to center)

Open

#292 ouverte le 15 nov. 2018

Voir sur GitHub
 (7 commentaires) (0 réactions) (0 assignés)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

Guide contributeur

Stack technique
typescripthtmlcssreact
Domaine
frontend
Type d'issue
feature
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 hours
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
stale
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
mostly clear
Prérequis
Familiarity with TypeScriptUnderstanding of zoom/pan logicExperience with React components
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
60
Direction de recherche
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.