Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

画像モーダルの挙動の変更 #4071

Merged
merged 32 commits into from Oct 10, 2023

Conversation

n-kegra
Copy link
Contributor

@n-kegra n-kegra commented Sep 15, 2023

#4063

  • ピンチ時に連続的に拡縮するよう変更
  • ピンチ時にタッチ2点間の中点が維持される形でスクロールされるよう変更
  • ピンチ時回転不可(alt+onwheel時の回転はそのまま)
  • 2本指でのピンチ状態から1本指を離したときにもう片方も離すまでスクロールしなくなる問題を解消
  • モーダル中, 画像の中と画像の外を同時にタッチしてピンチ動作をすると挙動がおかしくなる問題を解消
  • onwheel時, トラックパッドの挙動を考慮してスクロールと拡縮両方に対応 (参考資料)
  • onwheel時, deltaX/deltaYの値を考慮した挙動に変更
  • onwheelによる拡大時, モーダルの画像だけでなくページ全体も拡大される問題を解消

@codecov
Copy link

codecov bot commented Sep 15, 2023

Codecov Report

Patch has no changes to coverable lines.

📢 Thoughts on this report? Let us know!.

@motoki317
Copy link
Member

Preview

Comment on lines 291 to 294
const afterScale = Math.max(
ZOOM_RATIO_MIN,
state.zoomRatio - e.deltaY * WHEEL_ZOOM_SCALE
)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SPの方はいい感じになってたけど、PCでのctrl+マウスホイールでのズームインがすごく急になってる
前までは ZOOM_STEP ** zoomLevel でexpで(離散的に)計算してたけど、今ここがlinearになってるからかな

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

とりあえず試しに指数関数の挙動に変えてみました
あとFirefoxなら一応e.deltaModeでトラックパッドの場合とマウスホイールの場合を見分けられそうなので係数を別で設定してみました

Copy link
Member

@mehm8128 mehm8128 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

コードは追えてないのですが、PCのタッチパッド&スマホはよさそうです!ありがとうございます(マウスホイールは僕のが物理的に壊れてるため未確認)
一応approveはしないのですが、PCのマウスホイールで確認してapproveしてくれる人がいたら僕の分もapproveカウントしてしまってOKです

Copy link
Member

@zer0-star zer0-star left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

コードはちゃんと見れてないですが(大丈夫そうだと思っています)、挙動はかなり良いです!ありがとうございます!
一応コードをちゃんと見てくれる人がいれば歓迎です

@mehm8128 mehm8128 merged commit bc92c73 into traPtitech:master Oct 10, 2023
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants