Make info link and selection click zoom aware

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

src/pages/detect.vue

@@ -30,7 +30,7 @@
           :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));`"
+          :style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px; transform: translate(-50%,-50%);`"
           class="structure-info"
           :icon-only="true"
           icon-f7="info"
@@ -453,7 +453,7 @@
         alert(`Camera fail: ${message}`)
       },
       selectChip ( iChip ) {
-        const [_, imageCtx] = this.resetView()
+        const [imCanvas, imageCtx] = this.resetView()
 
         if (this.selectedChip == iChip) {
           this.selectedChip = -1
@@ -471,10 +471,8 @@
         let boxTop = boxCoords.cvsTop
         let boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft
         let boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop
-        this.infoLinkPos.x = boxCoords.cvsLeft
+        this.infoLinkPos.x = Math.min(Math.max(boxCoords.cvsLeft * this.canvasZoom + this.canvasOffset.x, 0),imCanvas.width)
-        this.infoLinkPos.y = boxCoords.cvsTop
+        this.infoLinkPos.y = Math.min(Math.max(boxCoords.cvsTop * this.canvasZoom + this.canvasOffset.y, 0), imCanvas.height)
-        let boxMin = Math.min(boxHeight, boxWidth)
-        this.infoLinkPos.adj = (boxMin >= 50) ? 0 : Math.min(10, 50 - boxMin)
 
         imageCtx.strokeRect(boxLeft, boxTop, boxWidth, boxHeight)
         this.selectedChip = iChip
@@ -502,7 +500,7 @@
         imageCtx.scale(this.canvasZoom,this.canvasZoom)
         imageCtx.globalAlpha = 1
         imageCtx.strokeStyle = 'yellow'
-        imageCtx.lineWidth = 3
+        imageCtx.lineWidth = 3 / this.canvasZoom
         if (this.imageLoaded) {
           let imageLoc = this.box2cvs({top: 0,left: 0,right: 1,bottom: 1})
           this.imCvsLocation.top = imageLoc[0].cvsTop
@@ -583,10 +581,12 @@
       },
       structureClick(e) {
         const boxCoords = this.box2cvs(this.showResults)
-        var findBox = boxCoords.findIndex( (r, i) => { return r.cvsLeft <= e.offsetX &&
+        let clickX = (e.offsetX - this.canvasOffset.x) / this.canvasZoom
-            r.cvsRight >= e.offsetX &&
+        let clickY = (e.offsetY - this.canvasOffset.y) / this.canvasZoom
-            r.cvsTop <= e.offsetY &&
+        var findBox = boxCoords.findIndex( (r, i) => { return r.cvsLeft <= clickX &&
-            r.cvsBottom >= e.offsetY &&
+            r.cvsRight >= clickX &&
+            r.cvsTop <= clickY &&
+            r.cvsBottom >= clickY &&
             this.resultData.detections[i].resultIndex > this.selectedChip &&
             this.resultData.detections[i].aboveThreshold &&
             this.resultData.detections[i].isSearched &&
@@ -639,7 +639,6 @@
         }
       },
       spinWheel(event) {
-        console.log(event)
         if (event.wheelDelta > 0) {
           let scaleChange = this.canvasZoom * .05
           this.canvasZoom *= 1.05