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 return this.$store.state.mediaViewer.swipeScaler.offsets
}, },
transform () { 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 () { created () {
@ -71,6 +71,8 @@ const MediaModal = {
callbackNegative: this.goPrev, callbackNegative: this.goPrev,
swipePreviewCallback: this.handleSwipePreview, swipePreviewCallback: this.handleSwipePreview,
swipeEndCallback: this.handleSwipeEnd, swipeEndCallback: this.handleSwipeEnd,
pinchPreviewCallback: this.handlePinchPreview,
pinchEndCallback: this.handlePinchEnd,
threshold: 50 threshold: 50
}) })
}, },
@ -125,6 +127,13 @@ const MediaModal = {
this.goPrev() 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) { handleKeyupEvent (e) {
if (this.showing && e.keyCode === 27) { // escape if (this.showing && e.keyCode === 27) { // escape
this.hide() this.hide()

View file

@ -12,9 +12,9 @@
:alt="currentMedia.description" :alt="currentMedia.description"
:title="currentMedia.description" :title="currentMedia.description"
:style="{ transform }" :style="{ transform }"
@touchstart.stop="mediaTouchStart" @touchstart.stop.prevent="mediaTouchStart"
@touchmove.stop="mediaTouchMove" @touchmove.stop.prevent="mediaTouchMove"
@touchend.stop="mediaTouchEnd" @touchend.stop.prevent="mediaTouchEnd"
@click="hide" @click="hide"
@load="onImageLoaded" @load="onImageLoaded"
> >

View file

@ -62,16 +62,12 @@ const mediaViewer = {
applyScaling (state, { scaling }) { applyScaling (state, { scaling }) {
state.scaling = state.origScaling * scaling state.scaling = state.origScaling * scaling
}, },
finishOffsets (state) { finish (state) {
state.origOffsets = [...state.offsets] state.origOffsets = [...state.offsets]
},
finishScaling (state) {
state.origScaling = state.scaling state.origScaling = state.scaling
}, },
revertOffsets (state) { revert (state) {
state.offsets = [...state.origOffsets] state.offsets = [...state.origOffsets]
},
revertScaling (state) {
state.scaling = state.origScaling state.scaling = state.origScaling
} }
}, },
@ -85,12 +81,10 @@ const mediaViewer = {
commit('applyScaling', { scaling }) commit('applyScaling', { scaling })
}, },
finish ({ commit }) { finish ({ commit }) {
commit('finishOffsets') commit('finish')
commit('finishScaling')
}, },
revert ({ commit }) { revert ({ commit }) {
commit('revertOffsets') commit('revert')
commit('revertScaling')
} }
} }
} }

View file

@ -4,14 +4,21 @@ const DIRECTION_RIGHT = [1, 0]
const DIRECTION_UP = [0, -1] const DIRECTION_UP = [0, -1]
const DIRECTION_DOWN = [0, 1] const DIRECTION_DOWN = [0, 1]
const DISTANCE_MIN = 1
const isSwipeEvent = e => (e.touches.length === 1) const isSwipeEvent = e => (e.touches.length === 1)
const isSwipeEventEnd = e => (e.changedTouches.length === 1) const isSwipeEventEnd = e => (e.changedTouches.length === 1)
const isScaleEvent = e => (e.targetTouches.length === 2) const isScaleEvent = e => (e.targetTouches.length === 2)
// const isScaleEventEnd = e => (e.changedTouches.length === 2) const isScaleEventEnd = e => (e.targetTouches.length === 1)
const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]] const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]
const vectorMinus = (a, b) => a.map((k, n) => k - b[n])
const vectorAdd = (a, b) => a.map((k, n) => k + b[n])
const avgCoord = (coords) => [...coords].reduce(vectorAdd, [0, 0]).map(d => d / coords.length)
const touchCoord = touch => [touch.screenX, touch.screenY] const touchCoord = touch => [touch.screenX, touch.screenY]
const touchEventCoord = e => touchCoord(e.touches[0]) const touchEventCoord = e => touchCoord(e.touches[0])
@ -22,6 +29,8 @@ const perpendicular = v => [v[1], -v[0]]
const dotProduct = (v1, v2) => v1[0] * v2[0] + v1[1] * v2[1] const dotProduct = (v1, v2) => v1[0] * v2[0] + v1[1] * v2[1]
// const numProduct = (num, v) => v.map(k => num * k)
const project = (v1, v2) => { const project = (v1, v2) => {
const scalar = (dotProduct(v1, v2) / dotProduct(v2, v2)) const scalar = (dotProduct(v1, v2) / dotProduct(v2, v2))
return [scalar * v2[0], scalar * v2[1]] return [scalar * v2[0], scalar * v2[1]]
@ -86,7 +95,7 @@ class SwipeAndScaleGesture {
swipeEndCallback, pinchEndCallback, swipeEndCallback, pinchEndCallback,
threshold = 30, perpendicularTolerance = 1.0 threshold = 30, perpendicularTolerance = 1.0
}) { }) {
const nop = () => {} const nop = () => { console.log('Warning: Not implemented') }
this.direction = direction this.direction = direction
this.swipePreviewCallback = swipePreviewCallback || nop this.swipePreviewCallback = swipePreviewCallback || nop
this.pinchPreviewCallback = pinchPreviewCallback || nop this.pinchPreviewCallback = pinchPreviewCallback || nop
@ -95,6 +104,7 @@ class SwipeAndScaleGesture {
this.threshold = threshold this.threshold = threshold
this.perpendicularTolerance = perpendicularTolerance this.perpendicularTolerance = perpendicularTolerance
this._startPos = [0, 0] this._startPos = [0, 0]
this._startDistance = DISTANCE_MIN
this._swiping = false this._swiping = false
} }
@ -105,23 +115,51 @@ class SwipeAndScaleGesture {
console.log('start pos:', this._startPos) console.log('start pos:', this._startPos)
this._swiping = true this._swiping = true
} else if (isScaleEvent(event)) { } else if (isScaleEvent(event)) {
const coords = [...event.targetTouches].map(touchCoord)
this._startPos = avgCoord(coords)
this._startDistance = vectorLength(deltaCoord(coords[0], coords[1]))
if (this._startDistance < DISTANCE_MIN) {
this._startDistance = DISTANCE_MIN
}
this._scalePoints = [...event.targetTouches] this._scalePoints = [...event.targetTouches]
this._swiping = false this._swiping = false
console.log(
'is scale event, start =', this._startPos,
'dist =', this._startDistance)
} }
} }
move (event) { move (event) {
// console.log('move called', event)
if (isSwipeEvent(event)) { if (isSwipeEvent(event)) {
const touch = event.changedTouches[0] const touch = event.changedTouches[0]
const delta = deltaCoord(this._startPos, touchCoord(touch)) const delta = deltaCoord(this._startPos, touchCoord(touch))
this.swipePreviewCallback(delta) this.swipePreviewCallback(delta)
} else if (isScaleEvent(event)) { } else if (isScaleEvent(event)) {
console.log('is scale event')
const coords = [...event.targetTouches].map(touchCoord)
const curPos = avgCoord(coords)
const curDistance = vectorLength(deltaCoord(coords[0], coords[1]))
const scaling = curDistance / this._startDistance
const posDiff = vectorMinus(curPos, this._startPos)
// const delta = vectorAdd(numProduct((1 - scaling), this._startPos), posDiff)
const delta = posDiff
// console.log(
// 'is scale event, cur =', curPos,
// 'dist =', curDistance,
// 'scale =', scaling,
// 'delta =', delta)
this.pinchPreviewCallback(delta, scaling)
} }
} }
end (event) { end (event) {
console.log('end() called', event) console.log('end() called', event)
if (isScaleEventEnd(event)) {
this.pinchEndCallback()
}
if (!isSwipeEventEnd(event)) { if (!isSwipeEventEnd(event)) {
console.log('not swipe event') console.log('not swipe event')
return return