GoogleChromeLabs/squoosh

Add a button to reset position (move to center)

Open

#292 opened on 2018年11月15日

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

説明

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

コントリビューターガイド

技術スタック
typescripthtmlcssreact
領域
frontend
Issue 種別
feature
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
2
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-3 hours
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
stale
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
mostly clear
前提条件
Familiarity with TypeScriptUnderstanding of zoom/pan logicExperience with React components
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
60
調査方針
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.