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"
@@ -70,7 +70,7 @@
         <f7-button v-if="videoAvailable" @click="closeCamera()">
           <SvgIcon icon="no_photography"/>
         </f7-button>
-        <f7-button @click="() => showDetectSettings = !showDetectSettings" :class="(imageLoaded) ? '' : 'disabled'">
+        <f7-button @click="toggleSettings()" :class="(imageLoaded) ? '' : 'disabled'">
           <SvgIcon icon="visibility"/>
           <f7-badge v-if="numResults && (showResults.length != numResults)" color="red" style="position: absolute; right: 15%; top: 15%;">{{ showResults.length - numResults }}</f7-badge>
         </f7-button>
@@ -160,6 +160,7 @@
         classesList: [],
         imageLoaded: false,
         imageView: new Image(),
+        imCvsLocation: {},
         imageLoadMode: "environment",
         detecting: false,
         detectPanel: false,
@@ -181,7 +182,10 @@
         cameraStream: null,
         infoLinkPos: {},
         detectWorker: null,
-        vidWorker: null
+        vidWorker: null,
+        canvasMoving: false,
+        canvasOffset: {x: 0, y: 0},
+        canvasZoom: 1
       }
     },
     setup() {
@@ -334,6 +338,9 @@
               self.reloadModel = false
               loadSuccess()
             }
+            f7.utils.nextFrame(() => {
+              this.selectChip("redraw")
+            })
           }
         }
 
@@ -375,6 +382,9 @@
             f7.dialog.alert(`ALVINN structure finding error: ${e.message}`)
           })
         }
+        f7.utils.nextFrame(() => {
+          this.selectChip("redraw")
+        })
       },
       selectAll (ev) {
         if (ev.target.checked) {
@@ -428,7 +438,7 @@
         alert(`Camera fail: ${message}`)
       },
       selectChip ( iChip ) {
-        const [imCanvas, imageCtx] = this.resetView()
+        const [_, imageCtx] = this.resetView()
 
         if (this.selectedChip == iChip) {
           this.selectedChip = -1
@@ -473,9 +483,19 @@
         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
+        if (this.imageLoaded) {
+          let imageLoc = this.box2cvs({top: 0,left: 0,right: 1,bottom: 1})
+          this.imCvsLocation.top = imageLoc[0].cvsTop
+          this.imCvsLocation.left = imageLoc[0].cvsLeft
+          this.imCvsLocation.width = imageLoc[0].cvsRight - imageLoc[0].cvsLeft
+          this.imCvsLocation.height = imageLoc[0].cvsBottom - imageLoc[0].cvsTop
+          imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, this.imCvsLocation.left, this.imCvsLocation.top, this.imCvsLocation.width, this.imCvsLocation.height)
+        }
         return [imCanvas, imageCtx]
       },
       getImage (searchImage) {
@@ -516,8 +536,18 @@
           this.imageView.src = imgData
           return(this.imageView.decode())
         }).then( () => {
-          const [imCanvas, _]  = this.resetView()
-          imCanvas.style['background-image'] = `url(${this.imageView.src})`
+          this.canvasOffset = {x: 0, y: 0}
+          this.canvasZoom = 1
+          const imCanvas = this.$refs.image_cvs
+          imCanvas.width = imCanvas.clientWidth
+          imCanvas.height = imCanvas.clientHeight
+          const imageCtx = imCanvas.getContext("2d")
+          let imageLoc = this.box2cvs({top: 0,left: 0,right: 1,bottom: 1})
+          this.imCvsLocation.top = imageLoc[0].cvsTop
+          this.imCvsLocation.left = imageLoc[0].cvsLeft
+          this.imCvsLocation.width = imageLoc[0].cvsRight - imageLoc[0].cvsLeft
+          this.imCvsLocation.height = imageLoc[0].cvsBottom - imageLoc[0].cvsTop
+          imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, this.imCvsLocation.left, this.imCvsLocation.top, this.imCvsLocation.width, this.imCvsLocation.height)
           f7.utils.nextFrame(() => {
             this.setData()
           })
@@ -552,7 +582,7 @@
       box2cvs(boxInput) {
         if (!boxInput || boxInput.length == 0) return []
         const boxList = boxInput.length ? boxInput : [boxInput]
-        const [imCanvas, imageCtx] = this.resetView()
+        const imCanvas = this.$refs.image_cvs
         var imgWidth
         var imgHeight
         const imgAspect = this.imageView.width / this.imageView.height
@@ -573,6 +603,40 @@
           }
         })
         return cvsCoords
+      },
+      toggleSettings() {
+        this.showDetectSettings = !this.showDetectSettings
+        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")
       }
     }
   }