Add touch events

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

src/pages/detect.vue

@@ -9,13 +9,26 @@
       </f7-nav-right>
     </f7-navbar>
     <f7-block class="detect-grid">
+      <!--<div style="position: absolute;">{{ debugInfo ? JSON.stringify(debugInfo) : "No Info Available" }}</div>-->
       <div class="image-container" ref="image_container">
         <SvgIcon v-if="!imageView.src && !videoAvailable" :icon="f7route.params.region" fill-color="var(--avn-theme-color)"/>
         <div class="vid-container" :style="`display: ${videoAvailable ? 'block' : 'none'}; position: absolute; width: 100%; height: 100%;`">
           <video id="vid-view" ref="vid_viewer" :srcObject="cameraStream" :autoPlay="true" style="width: 100%; height: 100%"></video>
           <f7-button @click="captureVidFrame()" style="position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 3;" fill large>Capture</f7-button>
         </div>
-        <canvas id="im-draw" ref="image_cvs" @wheel="spinWheel($event)" @mousedown.middle="startMove($event)" @mousemove="makeMove($event)" @mouseup.middle="endMove($event)" @click="structureClick" :style="`display: ${(imageLoaded || videoAvailable) ? 'block' : 'none'}; flex: 1 1 0%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 2;`" />
+        <canvas
+          id="im-draw"
+          ref="image_cvs"
+          @wheel="spinWheel($event)"
+          @mousedown.middle="startMove($event)"
+          @mousemove="makeMove($event)"
+          @mouseup.middle="endMove($event)"
+          @touchstart="startTouch($event)"
+          @touchend="endTouch($event)"
+          @touchmove="moveTouch($event)"
+          @click="structureClick"
+          :style="`display: ${(imageLoaded || videoAvailable) ? 'block' : 'none'}; flex: 1 1 0%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 2;`"
+        ></canvas>
         <f7-link v-if="getInfoUrl && (selectedChip > -1)"
           :style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px; transform: translate(calc(-50% - ${infoLinkPos.adj}px),calc(-50% - ${infoLinkPos.adj}px));`"
           class="structure-info"
@@ -139,11 +152,12 @@
   import submitMixin from './submit-mixin'
   import detectionMixin from './detection-mixin'
   import cameraMixin from './camera-mixin'
+  import touchMixin from './touch-mixin'
 
   import detectionWorker from '@/assets/detect-worker.js?worker&inline'
 
   export default {
-    mixins: [submitMixin, detectionMixin, cameraMixin],
+    mixins: [submitMixin, detectionMixin, cameraMixin, touchMixin],
     props: {
       f7route: Object,
     },
@@ -185,7 +199,8 @@
         vidWorker: null,
         canvasMoving: false,
         canvasOffset: {x: 0, y: 0},
-        canvasZoom: 1
+        canvasZoom: 1,
+        debugInfo: null
       }
     },
     setup() {
@@ -624,8 +639,6 @@
         }
       },
       spinWheel(event) {
-        console.log(this.canvasOffset)
-        console.log({x: event.clientX, y: event.clientY})
         if (event.wheelDelta > 0) {
           this.canvasZoom *= 1.05
           this.canvasOffset.x = (((1.05 ** -1) - 1)*event.clientX + this.canvasOffset.x)*1.05
@@ -635,7 +648,6 @@
           this.canvasOffset.x = ((.05)*event.clientX + this.canvasOffset.x)/1.05
           this.canvasOffset.y = ((.05)*event.clientY + this.canvasOffset.y)/1.05
         }
-        console.log(this.canvasOffset)
         this.selectChip("redraw")
       }
     }

src/pages/touch-mixin.js

@@ -0,0 +1,49 @@
+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) {
+        this.touchPrevious = {distance: this.touchDistance(event.touches)}
+      }
+    },
+    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 scale = newDistance / this.touchPrevious.distance
+          this.canvasZoom *= scale
+          this.canvasOffset.x = (((scale ** -1) - 1) * midX + this.canvasOffset.x) * scale
+          this.canvasOffset.y = (((scale ** -1) - 1) * midY + this.canvasOffset.y) * scale
+          this.touchPrevious = {distance: newDistance}
+          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)
+    }
+  }
+}