From 655c36067bb93ad718cca552bca2d484fbd053e6 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Sat, 20 Apr 2024 20:25:45 -0700
Subject: [PATCH] Move info link for small structure boxes

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 src/css/detect.css   |  1 -
 src/pages/detect.vue | 13 ++++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/css/detect.css b/src/css/detect.css
index 3070cd9..650a347 100644
--- a/src/css/detect.css
+++ b/src/css/detect.css
@@ -129,7 +129,6 @@
 
 .structure-info {
   position: absolute;
-  transform: translate(-50%,-50%);
   z-index: 3;
   color: rgb(15, 32, 108);
   background: yellow;
diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index 8761971..699b3c3 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -17,7 +17,7 @@
         </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;`" />
         <f7-link v-if="getInfoUrl && (selectedChip > -1)"
-          :style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px;`"
+          :style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px; transform: translate(calc(-50% - ${infoLinkPos.adj}px),calc(-50% - ${infoLinkPos.adj}px));`"
           class="structure-info"
           :icon-only="true"
           icon-f7="info"
@@ -358,14 +358,17 @@
         }
 
         const boxCoords = this.box2cvs(this.resultData.detections[iChip])[0]
-        this.infoLinkPos.x = boxCoords.cvsLeft
-        this.infoLinkPos.y = boxCoords.cvsTop
 
         let boxLeft = boxCoords.cvsLeft
         let boxTop = boxCoords.cvsTop
         let boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft
-        var boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop
-        imageCtx.strokeRect(boxLeft,boxTop,boxWidth,boxHeight)
+        let boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop
+        this.infoLinkPos.x = boxCoords.cvsLeft
+        this.infoLinkPos.y = boxCoords.cvsTop
+        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
         this.resultData.detections[iChip].beenViewed = true
       },