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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 32 commits into from
Oct 10, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
295162b
onwheelでの拡大時に周囲まで拡大される問題の対処
n-kegra Sep 13, 2023
84826cf
2本指タッチ→1本離す をした場合に1本指スクロールできない問題の対処
n-kegra Sep 13, 2023
96dbf9f
タッチ時に基準状態を保存する実装に変更
n-kegra Sep 15, 2023
37fa4b5
proxyはcloneできないようなので手動でディープコピー
n-kegra Sep 15, 2023
41dc706
移動の実装
n-kegra Sep 15, 2023
fccf3f4
zoomLevelの廃止
n-kegra Sep 15, 2023
e387e1d
eslint-disable-next-line がずれていたので修正
n-kegra Sep 15, 2023
5973bc2
拡大の実装
n-kegra Sep 15, 2023
5d1c7ad
top:50%;left:50%;translate(-50%,-50%)を消した
n-kegra Sep 15, 2023
e59ea63
translateとscaleの入れ替え
n-kegra Sep 15, 2023
ef3be34
ピンチ時移動の実装
n-kegra Sep 15, 2023
b75a9f4
座標系の違いによる拡大時の挙動を修正
n-kegra Sep 15, 2023
3e00689
トラックパッド対応の準備
n-kegra Sep 15, 2023
c53b77a
トラックパッドによるスクロール対応
n-kegra Sep 15, 2023
25d73da
トラックパッドによるズームジェスチャの実装
n-kegra Sep 15, 2023
a7ac237
縮小限界を実装
n-kegra Sep 15, 2023
1a3a4c6
onwheel時のズーム速度の調整
n-kegra Sep 15, 2023
b110c95
imgの内側と外側両方を触ったときに挙動がおかしくなる問題の解消
n-kegra Sep 15, 2023
0acb82a
画像モーダルが画面いっぱいでない場合に挙動がおかしい問題を解消
n-kegra Sep 15, 2023
11a63d8
コメントの修正
n-kegra Sep 15, 2023
ca37b7b
Merge branch 'master' into feat/ui-image-viewer
motoki317 Sep 18, 2023
229a014
onwheelによる拡縮について指数関数を適用
n-kegra Sep 19, 2023
8fa77f3
deltaModeを考慮した挙動の実装
n-kegra Sep 19, 2023
09decdc
Merge branch 'feat/ui-image-viewer' of github.com:n-kegra/traQ_S-UI i…
n-kegra Sep 19, 2023
03bbae0
限界以上に縮小した際に挙動がびくびくする問題を修正
n-kegra Sep 20, 2023
f2d3b09
等倍に制限
n-kegra Sep 20, 2023
67c328e
移動限界の実装(タッチ時)
n-kegra Sep 20, 2023
1095c4d
移動範囲制限に画像のサイズを使用
n-kegra Sep 20, 2023
0f4b825
位置更新処理の共通化
n-kegra Sep 20, 2023
48eeef6
不要な引数の削除
n-kegra Sep 20, 2023
3fad88e
移動範囲制限を全ての移動動作に適用
n-kegra Sep 20, 2023
5bef282
隅の方を拡縮する際にがくつく問題を解消
n-kegra Sep 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 3 additions & 4 deletions src/components/UI/ImageViewer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<div ref="containerEle" :class="$style.container">
<div :class="$style.imgContainer" :style="styles.imgContainer">
<img
ref="imgEle"
:src="src"
:alt="alt"
:class="$style.img"
Expand All @@ -22,8 +23,9 @@ defineProps<{
}>()

const containerEle = ref<HTMLDivElement>()
const imgEle = ref<HTMLImageElement>()

const { styles } = useImageViewer(containerEle)
const { styles } = useImageViewer(containerEle, imgEle)
</script>

<style lang="scss" module>
Expand All @@ -32,9 +34,6 @@ const { styles } = useImageViewer(containerEle)
overflow: hidden;
}
.imgContainer {
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
user-select: none;
Expand Down