Add pan and zoom

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

src/pages/detect.vue

@@ -15,7 +15,7 @@
           <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" @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)" @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;`" />
         <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"
@@ -182,7 +182,10 @@
         cameraStream: null,
         infoLinkPos: {},
         detectWorker: null,
-        vidWorker: null
+        vidWorker: null,
+        canvasMoving: false,
+        canvasOffset: {x: 0, y: 0},
+        canvasZoom: 1
       }
     },
     setup() {
@@ -480,6 +483,8 @@
         imCanvas.width = imCanvas.clientWidth
         imCanvas.height = imCanvas.clientHeight
         imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height)
+        imageCtx.translate(this.canvasOffset.x,this.canvasOffset.y)
+        imageCtx.scale(this.canvasZoom,this.canvasZoom)
         imageCtx.globalAlpha = 1
         imageCtx.strokeStyle = 'yellow'
         imageCtx.lineWidth = 3
@@ -531,6 +536,8 @@
           this.imageView.src = imgData
           return(this.imageView.decode())
         }).then( () => {
+          this.canvasOffset = {x: 0, y: 0}
+          this.canvasZoom = 1
           const imCanvas = this.$refs.image_cvs
           imCanvas.width = imCanvas.clientWidth
           imCanvas.height = imCanvas.clientHeight
@@ -602,6 +609,34 @@
         f7.utils.nextFrame(() => {
           this.selectChip("redraw")
         })
+      },
+      startMove() {
+        this.canvasMoving = true
+      },
+      endMove() {
+        this.canvasMoving = false
+      },
+      makeMove(event) {
+        if (this.canvasMoving) {
+          this.canvasOffset.x += event.movementX
+          this.canvasOffset.y += event.movementY
+          this.selectChip("redraw")
+        }
+      },
+      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
+          this.canvasOffset.y = (((1.05 ** -1) - 1)*event.clientY + this.canvasOffset.y)*1.05
+        } else if (event.wheelDelta < 0) {
+          this.canvasZoom /= 1.05
+          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")
       }
     }
   }