Handle pinch action

This commit is contained in:
Tusooa Zhu 2021-08-01 21:39:07 -04:00
parent a7570f5eb2
commit d9030b4fdd
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
4 changed files with 57 additions and 16 deletions

View file

@ -61,7 +61,7 @@ const MediaModal = {
return this.$store.state.mediaViewer.swipeScaler.offsets
},
transform () {
return `scale(${this.scaling}, ${this.scaling}) translate(${this.offsets[0]}px, ${this.offsets[1]}px)`
return `translate(${this.offsets[0]}px, ${this.offsets[1]}px) scale(${this.scaling}, ${this.scaling})`
}
},
created () {
@ -71,6 +71,8 @@ const MediaModal = {
callbackNegative: this.goPrev,
swipePreviewCallback: this.handleSwipePreview,
swipeEndCallback: this.handleSwipeEnd,
pinchPreviewCallback: this.handlePinchPreview,
pinchEndCallback: this.handlePinchEnd,
threshold: 50
})
},
@ -125,6 +127,13 @@ const MediaModal = {
this.goPrev()
}
},
handlePinchPreview (offsets, scaling) {
console.log('handle pinch preview:', offsets, scaling)
this.$store.dispatch('swipeScaler/apply', { offsets, scaling })
},
handlePinchEnd () {
this.$store.dispatch('swipeScaler/finish')
},
handleKeyupEvent (e) {
if (this.showing && e.keyCode === 27) { // escape
this.hide()