Add swipe-click handler to media modal

Now swiping will correctly change the current media, and with a good
preview. Clicking without swiping closes the overlay.

src/components/media_modal/media_modal.js

@@ -2,10 +2,11 @@ import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import Modal from '../modal/modal.vue'
 import PinchZoom from '../pinch_zoom/pinch_zoom.vue'
-import fileTypeService from '../../services/file_type/file_type.service.js'
+import SwipeClick from '../swipe_click/swipe_click.vue'
 import GestureService from '../../services/gesture_service/gesture_service'
 import Flash from 'src/components/flash/flash.vue'
 import Vuex from 'vuex'
+import fileTypeService from '../../services/file_type/file_type.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronLeft,
@@ -28,13 +29,15 @@ const MediaModal = {
     StillImage,
     VideoAttachment,
     PinchZoom,
+    SwipeClick,
     Modal,
     Flash
   },
   data () {
     return {
       loading: false,
-      pinchZoomOptions: {}
+      swipeDirection: GestureService.DIRECTION_LEFT,
+      swipeThreshold: 50
     }
   },
   computed: {
@@ -70,30 +73,19 @@ const MediaModal = {
     }
   },
   created () {
-    this.mediaGesture = new GestureService.SwipeAndScaleGesture({
+    // this.mediaGesture = new GestureService.SwipeAndScaleGesture({
-      direction: GestureService.DIRECTION_LEFT,
+    //   callbackPositive: this.goNext,
-      callbackPositive: this.goNext,
+    //   callbackNegative: this.goPrev,
-      callbackNegative: this.goPrev,
+    //   swipePreviewCallback: this.handleSwipePreview,
-      swipePreviewCallback: this.handleSwipePreview,
+    //   swipeEndCallback: this.handleSwipeEnd,
-      swipeEndCallback: this.handleSwipeEnd,
+    //   pinchPreviewCallback: this.handlePinchPreview,
-      pinchPreviewCallback: this.handlePinchPreview,
+    //   pinchEndCallback: this.handlePinchEnd
-      pinchEndCallback: this.handlePinchEnd,
+    // })
-      threshold: 50
-    })
   },
   methods: {
     getType (media) {
       return fileTypeService.fileType(media.mimetype)
     },
-    mediaTouchStart (e) {
-      this.mediaGesture.start(e)
-    },
-    mediaTouchMove (e) {
-      this.mediaGesture.move(e)
-    },
-    mediaTouchEnd (e) {
-      this.mediaGesture.end(e)
-    },
     hide () {
       this.$store.dispatch('closeMediaViewer')
     },
@@ -105,6 +97,7 @@ const MediaModal = {
           this.loading = true
         }
         this.$store.dispatch('setCurrentMedia', newMedia)
+        this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 })
       }
     },
     goNext () {
@@ -115,40 +108,25 @@ const MediaModal = {
           this.loading = true
         }
         this.$store.dispatch('setCurrentMedia', newMedia)
+        this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 })
       }
     },
     onImageLoaded () {
       this.loading = false
     },
     handleSwipePreview (offsets) {
-      this.$store.dispatch('swipeScaler/apply', {
+      this.$refs.pinchZoom.setTransform({ scale: 1, x: offsets[0], y: 0 })
-        offsets: this.scaling > SCALING_ENABLE_MOVE_THRESHOLD ? offsets : onlyXAxis(offsets)
-      })
     },
     handleSwipeEnd (sign) {
-      if (this.scaling > SCALING_ENABLE_MOVE_THRESHOLD) {
+      console.log('handleSwipeEnd:', sign)
-        this.$store.dispatch('swipeScaler/finish')
-        return
-      }
       if (sign === 0) {
-        this.$store.dispatch('swipeScaler/reset')
+        this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 })
       } else if (sign > 0) {
         this.goNext()
       } else {
         this.goPrev()
       }
     },
-    handlePinchPreview (offsets, scaling) {
-      console.log('handle pinch preview:', offsets, scaling)
-      this.$store.dispatch('swipeScaler/apply', { offsets, scaling })
-    },
-    handlePinchEnd () {
-      if (this.scaling > SCALING_RESET_MIN) {
-        this.$store.dispatch('swipeScaler/finish')
-      } else {
-        this.$store.dispatch('swipeScaler/reset')
-      }
-    },
     handleKeyupEvent (e) {
       if (this.showing && e.keyCode === 27) { // escape
         this.hide()

src/components/media_modal/media_modal.vue

@@ -4,9 +4,16 @@
     class="media-modal-view"
     @backdropClicked="hide"
   >
-    <div class="modal-image-container">
+    <SwipeClick
+      class="modal-image-container"
+      :direction="swipeDirection"
+      :threshold="swipeThreshold"
+      @preview-requested="handleSwipePreview"
+      @swipe-finished="handleSwipeEnd"
+      @swipeless-clicked="hide"
+    >
       <PinchZoom
-        options="pinchZoomOptions"
+        ref="pinchZoom"
         class="modal-image-container-inner"
         selector=".modal-image"
         allow-pan-min-scale="1"
@@ -26,7 +33,7 @@
           @load="onImageLoaded"
         >
       </PinchZoom>
-    </div>
+    </SwipeClick>
     <VideoAttachment
       v-if="type === 'video'"
       class="modal-image"

src/components/pinch_zoom/pinch_zoom.js

@@ -2,5 +2,10 @@ import PinchZoom from '@kazvmoe-infra/pinch-zoom-element'
 
 export default {
   props: {
+  },
+  methods: {
+    setTransform ({ scale, x, y }) {
+      this.$el.setTransform({ scale, x, y })
+    }
   }
 }

src/modules/media_viewer.js

@@ -26,67 +26,13 @@ const mediaViewer = {
         return supportedTypes.has(type)
       })
       commit('setMedia', media)
-      dispatch('swipeScaler/reset')
     },
-    setCurrentMedia ({ commit, state, dispatch }, current) {
+    setCurrentMedia ({ commit, state }, current) {
       const index = state.media.indexOf(current)
       commit('setCurrentMedia', index || 0)
-      dispatch('swipeScaler/reset')
     },
     closeMediaViewer ({ commit, dispatch }) {
       commit('close')
-      dispatch('swipeScaler/reset')
-    }
-  },
-  modules: {
-    swipeScaler: {
-      namespaced: true,
-
-      state: {
-        origOffsets: [0, 0],
-        offsets: [0, 0],
-        origScaling: 1,
-        scaling: 1
-      },
-
-      mutations: {
-        reset (state) {
-          state.origOffsets = [0, 0]
-          state.offsets = [0, 0]
-          state.origScaling = 1
-          state.scaling = 1
-        },
-        applyOffsets (state, { offsets }) {
-          state.offsets = state.origOffsets.map((k, n) => k + offsets[n])
-        },
-        applyScaling (state, { scaling }) {
-          state.scaling = state.origScaling * scaling
-        },
-        finish (state) {
-          state.origOffsets = [...state.offsets]
-          state.origScaling = state.scaling
-        },
-        revert (state) {
-          state.offsets = [...state.origOffsets]
-          state.scaling = state.origScaling
-        }
-      },
-
-      actions: {
-        reset ({ commit }) {
-          commit('reset')
-        },
-        apply ({ commit }, { offsets, scaling = 1 }) {
-          commit('applyOffsets', { offsets })
-          commit('applyScaling', { scaling })
-        },
-        finish ({ commit }) {
-          commit('finish')
-        },
-        revert ({ commit }) {
-          commit('revert')
-        }
-      }
     }
   }
 }

src/services/gesture_service/gesture_service.js

@@ -4,25 +4,27 @@ const DIRECTION_RIGHT = [1, 0]
 const DIRECTION_UP = [0, -1]
 const DIRECTION_DOWN = [0, 1]
 
-const DISTANCE_MIN = 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.targetTouches.length === 1)
+// 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 vectorMinus = (a, b) => a.map((k, n) => k - b[n])
-const vectorAdd = (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 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])
 
+const pointerEventCoord = e => [e.clientX, e.clientY]
+
 const vectorLength = v => Math.sqrt(v[0] * v[0] + v[1] * v[1])
 
 const perpendicular = v => [v[1], -v[0]]
@@ -78,104 +80,87 @@ const updateSwipe = (event, gesture) => {
   gesture._swiping = false
 }
 
-class SwipeAndScaleGesture {
+class SwipeAndClickGesture {
   // swipePreviewCallback(offsets: Array[Number])
   //   offsets: the offset vector which the underlying component should move, from the starting position
-  // pinchPreviewCallback(offsets: Array[Number], scaling: Number)
+  // swipeEndCallback(sign: 0|-1|1)
-  //   offsets: the offset vector which the underlying component should move, from the starting position
-  //   scaling: the scaling factor we should apply to the underlying component, from the starting position
-  // swipeEndcallback(sign: 0|-1|1)
   //   sign: if the swipe does not meet the threshold, 0
   //         if the swipe meets the threshold in the positive direction, 1
   //         if the swipe meets the threshold in the negative direction, -1
   constructor ({
     direction,
-    // swipeStartCallback, pinchStartCallback,
+    // swipeStartCallback
-    swipePreviewCallback, pinchPreviewCallback,
+    swipePreviewCallback,
-    swipeEndCallback, pinchEndCallback,
+    swipeEndCallback,
+    swipeCancelCallback,
+    swipelessClickCallback,
     threshold = 30, perpendicularTolerance = 1.0
   }) {
     const nop = () => { console.log('Warning: Not implemented') }
     this.direction = direction
     this.swipePreviewCallback = swipePreviewCallback || nop
-    this.pinchPreviewCallback = pinchPreviewCallback || nop
     this.swipeEndCallback = swipeEndCallback || nop
-    this.pinchEndCallback = pinchEndCallback || nop
+    this.swipeCancelCallback = swipeCancelCallback || nop
+    this.swipelessClickCallback = swipelessClickCallback || nop
     this.threshold = threshold
     this.perpendicularTolerance = perpendicularTolerance
+    this._reset()
+  }
+
+  _reset () {
     this._startPos = [0, 0]
-    this._startDistance = DISTANCE_MIN
+    this._pointerId = -1
     this._swiping = false
+    this._swiped = false
   }
 
   start (event) {
     console.log('start() called', event)
-    if (isSwipeEvent(event)) {
+
-      this._startPos = touchEventCoord(event)
+    this._startPos = pointerEventCoord(event)
-      console.log('start pos:', this._startPos)
+    this._pointerId = event.pointerId
-      this._swiping = true
+    console.log('start pos:', this._startPos)
-    } else if (isScaleEvent(event)) {
+    this._swiping = true
-      const coords = [...event.targetTouches].map(touchCoord)
+    this._swiped = false
-      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._swiping = false
-      console.log(
-        'is scale event, start =', this._startPos,
-        'dist =', this._startDistance)
-    }
   }
 
   move (event) {
-    // console.log('move called', event)
+    if (this._swiping && this._pointerId === event.pointerId) {
-    if (isSwipeEvent(event)) {
+      this._swiped = true
-      const touch = event.changedTouches[0]
+
-      const delta = deltaCoord(this._startPos, touchCoord(touch))
+      const coord = pointerEventCoord(event)
+      const delta = deltaCoord(this._startPos, coord)
 
       this.swipePreviewCallback(delta)
-    } 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) {
+  cancel (event) {
-    console.log('end() called', event)
+    if (!this._swiping || this._pointerId !== event.pointerId) {
-    if (isScaleEventEnd(event)) {
-      this.pinchEndCallback()
-    }
-
-    if (!isSwipeEventEnd(event)) {
-      console.log('not swipe event')
       return
     }
+
+    this.swipeCancelCallback()
+  }
+
+  end (event) {
     if (!this._swiping) {
       console.log('not swiping')
       return
     }
-    this.swiping = false
 
-    console.log('is swipe event')
+    if (this._pointerId !== event.pointerId) {
+      console.log('pointer id does not match')
+      return
+    }
+
+    this._swiping = false
+
+    console.log('end: is swipe event')
 
     // movement too small
-    const touch = event.changedTouches[0]
+    const coord = pointerEventCoord(event)
-    const delta = deltaCoord(this._startPos, touchCoord(touch))
+    const delta = deltaCoord(this._startPos, coord)
-    this.swipePreviewCallback(delta)
 
     const sign = (() => {
       if (vectorLength(delta) < this.threshold) {
@@ -198,7 +183,12 @@ class SwipeAndScaleGesture {
       return isPositive ? 1 : -1
     })()
 
-    this.swipeEndCallback(sign)
+    if (this._swiped) {
+      this.swipeEndCallback(sign)
+    } else {
+      this.swipelessClickCallback()
+    }
+    this._reset()
   }
 }
 
@@ -210,7 +200,7 @@ const GestureService = {
   swipeGesture,
   beginSwipe,
   updateSwipe,
-  SwipeAndScaleGesture
+  SwipeAndClickGesture
 }
 
 export default GestureService