GoogleChromeLabs/squoosh

Add a button to reset position (move to center)

Open

#292 geöffnet am 15. Nov. 2018

Auf GitHub ansehen
 (7 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)TypeScript (20.335 Stars) (1.431 Forks)batch import
UIfeature requestgood first issue

Beschreibung

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
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 hours
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
stale
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
mostly clear
Voraussetzungen
Familiarity with TypeScriptUnderstanding of zoom/pan logicExperience with React components
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
60
Research-Richtung
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.