commit: 23a6b86ef3c976509bad4fb4f9a223a5724ec7e5
parent 29cd8fbd3bd9f936d2639a2edd773e1245b0b5a5
Author: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 2 Aug 2021 19:21:18 -0400
Clean up
Diffstat:
3 files changed, 15 insertions(+), 45 deletions(-)
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
@@ -37,7 +37,9 @@ const MediaModal = {
return {
loading: false,
swipeDirection: GestureService.DIRECTION_LEFT,
- swipeThreshold: 50
+ swipeThreshold: 50,
+ pinchZoomMinScale: 1,
+ pinchZoomScaleResetLimit: 1.2
}
},
computed: {
@@ -62,25 +64,6 @@ const MediaModal = {
type () {
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: {
getType (media) {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
@@ -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'"
diff --git a/src/services/gesture_service/gesture_service.js b/src/services/gesture_service/gesture_service.js
@@ -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)
