ALVINN_f7/src/pages/touch-mixin.js

export default {
  data () {
    return {
      touchPrevious: {}
    }
  },
  methods: {
    startTouch(event) {
      if (event.touches.length == 1) {
        this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
      }
      if (event.touches.length == 2) {
        let midX = (event.touches.item(0).clientX + event.touches.item(1).clientX) / 2
        let midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2
        this.touchPrevious = {distance: this.touchDistance(event.touches), x: midX, y: midY}
      }
    },
    endTouch(event) {
      if (event.touches.length == 1) {
        this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
      } else {
        //this.debugInfo = null
      }
    },
    moveTouch(event) {
      switch (event.touches.length) {
        case 1:
          this.canvasOffset.x += event.touches[0].clientX - this.touchPrevious.x
          this.canvasOffset.y += event.touches[0].clientY - this.touchPrevious.y
          this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
          break;
        case 2:
          let newDistance = this.touchDistance(event.touches)
          let midX = (event.touches.item(0).clientX + event.touches.item(1).clientX) / 2
          let midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2
          let zoomFactor = newDistance / this.touchPrevious.distance
          this.canvasZoom *= zoomFactor
          this.canvasOffset.x = (midX - 16) * (1 - zoomFactor) + this.canvasOffset.x * zoomFactor + (midX - this.touchPrevious.x)
          this.canvasOffset.y = (midY - 96) * (1 - zoomFactor) + this.canvasOffset.y * zoomFactor + (midY - this.touchPrevious.y)
          this.touchPrevious = {distance: newDistance, x: midX, y: midY}
          break;
      }
      this.selectChip("redraw")
    },
    touchDistance(touches) {
      let touch1 = touches.item(0)
      let touch2 = touches.item(1)
      return Math.sqrt((touch1.clientX - touch2.clientX) ** 2 + (touch1.clientY - touch2.clientY) ** 2)
    }
  }
}