This commit is contained in:
Tusooa Zhu 2021-08-02 19:21:18 -04:00
parent 29cd8fbd3b
commit 23a6b86ef3
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
3 changed files with 15 additions and 45 deletions

View file

@ -37,7 +37,9 @@ const MediaModal = {
return { return {
loading: false, loading: false,
swipeDirection: GestureService.DIRECTION_LEFT, swipeDirection: GestureService.DIRECTION_LEFT,
swipeThreshold: 50 swipeThreshold: 50,
pinchZoomMinScale: 1,
pinchZoomScaleResetLimit: 1.2
} }
}, },
computed: { computed: {
@ -62,25 +64,6 @@ const MediaModal = {
type () { type () {
return this.currentMedia ? this.getType(this.currentMedia) : null return this.currentMedia ? this.getType(this.currentMedia) : null
}, },
scaling () {
return this.$store.state.mediaViewer.swipeScaler.scaling
},
offsets () {
return this.$store.state.mediaViewer.swipeScaler.offsets
},
transform () {
return `translate(${this.offsets[0]}px, ${this.offsets[1]}px) scale(${this.scaling}, ${this.scaling})`
}
},
created () {
// this.mediaGesture = new GestureService.SwipeAndScaleGesture({
// callbackPositive: this.goNext,
// callbackNegative: this.goPrev,
// swipePreviewCallback: this.handleSwipePreview,
// swipeEndCallback: this.handleSwipeEnd,
// pinchPreviewCallback: this.handlePinchPreview,
// pinchEndCallback: this.handlePinchEnd
// })
}, },
methods: { methods: {
getType (media) { getType (media) {

View file

@ -16,12 +16,11 @@
ref="pinchZoom" ref="pinchZoom"
class="modal-image-container-inner" class="modal-image-container-inner"
selector=".modal-image" selector=".modal-image"
allow-pan-min-scale="1"
min-scale="1"
reset-to-min-scale-limit="1.2"
reach-min-scale-strategy="reset" reach-min-scale-strategy="reset"
stop-propagate-handled="stop-propgate-handled" stop-propagate-handled="stop-propgate-handled"
:inner-class="'modal-image-container-inner'" :allow-pan-min-scale="pinchZoomMinScale"
:min-scale="pinchZoomMinScale"
:reset-to-min-scale-limit="pinchZoomScaleResetLimit"
> >
<img <img
v-if="type === 'image'" v-if="type === 'image'"

View file

@ -4,21 +4,8 @@ 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 isSwipeEventEnd = e => (e.changedTouches.length === 1)
// const isScaleEvent = e => (e.targetTouches.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])
@ -31,13 +18,14 @@ 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]]
} }
// const debug = console.log
const debug = () => {}
// direction: either use the constants above or an arbitrary 2d vector. // direction: either use the constants above or an arbitrary 2d vector.
// threshold: how many Px to move from touch origin before checking if the // threshold: how many Px to move from touch origin before checking if the
// callback should be called. // callback should be called.
@ -96,7 +84,7 @@ class SwipeAndClickGesture {
swipelessClickCallback, swipelessClickCallback,
threshold = 30, perpendicularTolerance = 1.0 threshold = 30, perpendicularTolerance = 1.0
}) { }) {
const nop = () => { console.log('Warning: Not implemented') } const nop = () => { debug('Warning: Not implemented') }
this.direction = direction this.direction = direction
this.swipePreviewCallback = swipePreviewCallback || nop this.swipePreviewCallback = swipePreviewCallback || nop
this.swipeEndCallback = swipeEndCallback || nop this.swipeEndCallback = swipeEndCallback || nop
@ -115,11 +103,11 @@ class SwipeAndClickGesture {
} }
start (event) { start (event) {
console.log('start() called', event) debug('start() called', event)
this._startPos = pointerEventCoord(event) this._startPos = pointerEventCoord(event)
this._pointerId = event.pointerId this._pointerId = event.pointerId
console.log('start pos:', this._startPos) debug('start pos:', this._startPos)
this._swiping = true this._swiping = true
this._swiped = false this._swiped = false
} }
@ -145,18 +133,18 @@ class SwipeAndClickGesture {
end (event) { end (event) {
if (!this._swiping) { if (!this._swiping) {
console.log('not swiping') debug('not swiping')
return return
} }
if (this._pointerId !== event.pointerId) { if (this._pointerId !== event.pointerId) {
console.log('pointer id does not match') debug('pointer id does not match')
return return
} }
this._swiping = false this._swiping = false
console.log('end: is swipe event') debug('end: is swipe event')
// movement too small // movement too small
const coord = pointerEventCoord(event) const coord = pointerEventCoord(event)