From 09cb078f636e4f218481fdb3bfd33d2a4f005c90 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Sat, 27 Jan 2024 17:12:58 -0700
Subject: [PATCH] Fix structure box errors (#82)

Closes: #80

Closes: #81

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

Reviewed-on: https://gitea.azgeorgis.net/Georgi_Lab/ALVINN_f7/pulls/82
---
 src/pages/detect.vue | 68 +++++++++++++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index bda3929..2defbd6 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -357,23 +357,13 @@
         }
         xhr.send()
       }
+      window.onresize = (e) => { this.selectChip('redraw') }
     },
     computed: {
       showResults () {
         var filteredResults = this.resultData.detections
         if (!filteredResults) return []
-        const imCanvas = this.$refs.image_cvs
-        var imgWidth
-        var imgHeight
-        const imgAspect = this.imageView.width / this.imageView.height
-        const rendAspect = imCanvas.width / imCanvas.height
-        if (imgAspect >= rendAspect) {
-          imgWidth = imCanvas.width
-          imgHeight = imCanvas.width / imgAspect
-        } else {
-          imgWidth = imCanvas.height * imgAspect
-          imgHeight = imCanvas.height
-        }
+
         var allSelect = this.detectorLabels.every( s => { return s.detect } )
         var selectedLabels = this.detectorLabels
             .filter( l => { return l.detect })
@@ -382,10 +372,6 @@
           filteredResults[i].resultIndex = i
           filteredResults[i].aboveThreshold = d.confidence >= this.detectorLevel
           filteredResults[i].isSearched = allSelect || selectedLabels.includes(d.label)
-          filteredResults[i].cvsLeft = (imCanvas.width - imgWidth) / 2 + filteredResults[i].left * imgWidth
-          filteredResults[i].cvsRight = (imCanvas.width - imgWidth) / 2 + filteredResults[i].right * imgWidth
-          filteredResults[i].cvsTop = (imCanvas.height - imgHeight) / 2 + filteredResults[i].top * imgHeight
-          filteredResults[i].cvsBottom = (imCanvas.height - imgHeight) / 2 + filteredResults[i].bottom * imgHeight
         })
         return filteredResults
       },
@@ -470,10 +456,17 @@
           return
         }
 
-        var boxLeft = this.resultData.detections[iChip].cvsLeft
-        var boxTop = this.resultData.detections[iChip].cvsTop
-        var boxWidth = this.resultData.detections[iChip].cvsRight - this.resultData.detections[iChip].cvsLeft
-        var boxHeight = this.resultData.detections[iChip].cvsBottom - this.resultData.detections[iChip].cvsTop
+        if (iChip == 'redraw') {
+          if (this.selectedChip == -1) return
+          iChip = this.selectedChip
+        }
+
+        const boxCoords = this.box2cvs(this.resultData.detections[iChip])[0]
+
+        var boxLeft = boxCoords.cvsLeft
+        var boxTop = boxCoords.cvsTop
+        var boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft
+        var boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop
         imageCtx.strokeRect(boxLeft,boxTop,boxWidth,boxHeight)
         this.selectedChip = iChip
         this.resultData.detections[iChip].beenViewed = true
@@ -540,13 +533,42 @@
         this.detectorLevel = value
       },
       structureClick(e) {
-        var findBox = this.showResults.find( r => { return r.cvsLeft <= e.offsetX &&
+        const boxCoords = this.box2cvs(this.showResults)
+        var findBox = boxCoords.findIndex( (r, i) => { return r.cvsLeft <= e.offsetX &&
             r.cvsRight >= e.offsetX &&
             r.cvsTop <= e.offsetY &&
             r.cvsBottom >= e.offsetY &&
-            r.resultIndex > this.selectedChip
+            this.resultData.detections[i].resultIndex > this.selectedChip &&
+            this.resultData.detections[i].aboveThreshold &&
+            this.resultData.detections[i].isSearched &&
+            !this.resultData.detections[i].isDeleted
         })
-        this.selectChip(findBox ? findBox.resultIndex : this.selectedChip)
+        this.selectChip(findBox >= 0 ? this.resultData.detections[findBox].resultIndex : this.selectedChip)
+      },
+      box2cvs(boxInput) {
+        if (!boxInput) return []
+        const boxList = boxInput.length ? boxInput : [boxInput]
+        const [imCanvas, imageCtx] = this.resetView()
+        var imgWidth
+        var imgHeight
+        const imgAspect = this.imageView.width / this.imageView.height
+        const rendAspect = imCanvas.width / imCanvas.height
+        if (imgAspect >= rendAspect) {
+          imgWidth = imCanvas.width
+          imgHeight = imCanvas.width / imgAspect
+        } else {
+          imgWidth = imCanvas.height * imgAspect
+          imgHeight = imCanvas.height
+        }
+        const cvsCoords = boxList.map( (d, i) => {
+          return {
+            "cvsLeft": (imCanvas.width - imgWidth) / 2 + d.left * imgWidth,
+            "cvsRight": (imCanvas.width - imgWidth) / 2 + d.right * imgWidth,
+            "cvsTop": (imCanvas.height - imgHeight) / 2 + d.top * imgHeight,
+            "cvsBottom": (imCanvas.height - imgHeight) / 2 + d.bottom * imgHeight
+          }
+        })
+        return cvsCoords
       }
     }
   }