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

View file

@ -46,33 +46,16 @@ const MediaModal = {
},
type () {
return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : 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})`
}
},
data () {
return {
swipeDirection: GestureService.DIRECTION_LEFT,
swipeThreshold: 50
swipeThreshold: 50,
pinchZoomMinScale: 1,
pinchZoomScaleResetLimit: 1.2
}
},
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: {
hide () {
this.$store.dispatch('closeMediaViewer')

View file

@ -16,12 +16,11 @@
ref="pinchZoom"
class="modal-image-container-inner"
selector=".modal-image"
allow-pan-min-scale="1"
min-scale="1"
reset-to-min-scale-limit="1.2"
reach-min-scale-strategy="reset"
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
v-if="type === 'image'"

View file

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