Attempt issues 120 103 (#125)

* #120 Done * #120 improved * Multiselect closed box offset bug fixed Co-authored-by: Max <[email protected]>
surfriderfoundationeurope · Apr 1, 2022 · 089fb4c · 089fb4c
1 parent ebdd85f
commit 089fb4c
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 65 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/annotate/BoundingBox.vue b/src/components/annotate/BoundingBox.vue
@@ -9,7 +9,7 @@
         }"
         :style="{
             left: `${x}px`, //-2 // # TODO : understand those magic numbers 2 and 5 ? (Probably the cross-cursor size )
-            top: `${y}px`, //-5     # EDIT : Deleted it because it was missleading for users to have a shifted box. The numbers are still available in case they were useful for somenot explicit reason.
+            top: `${y}px`, //-5     # EDIT : Deleted it because it was missleading for users to have a shifted box. The numbers are still available in case they were useful for some not explicit reason.
             width: `${width}px`,
             height: `${height}px`
         }"
@@ -65,6 +65,9 @@
                             :show-labels="false"
                             :allow-empty="false"
                             :searchable="false"
+                            :style="DEVstyle"
+                            :open-direction="openDirection"
+                            :max-height="optionMaxHeight"
                         ></multiselect>
                     </div>
                 </template>
@@ -95,7 +98,31 @@ export default class BoundingBox extends Vue {
             selected: false
         };
     }
-
+    get optionMaxHeight(): number {
+        if (this.openDirection == "top") {
+            return this.y + this.height;
+        } else {
+            return (
+                this.$store.state.boxOffset.y +
+                this.$store.state.actualImageHeight -
+                (this.y + this.height + 43) // 43 corresponds to the closed multiselect box height
+            );
+        }
+    }
+    get openDirection(): string {
+        if (
+            this.y + this.height >=
+            this.$store.state.actualImageHeight / 2 +
+                this.$store.state.boxOffset.y
+        ) {
+            return "top";
+        } else {
+            return "bottom";
+        }
+    }
+    get DEVstyle(): Record<string, string> {
+        return { "min-width": this.width + "px" };
+    }
     get box(): Box {
         const id = this.$props.id;
         if (id === "raw") {
@@ -191,7 +218,9 @@ export default class BoundingBox extends Vue {
 .custom-multi .multiselect__content-wrapper {
     width: fit-content;
 }
-
+.custom-multi .multiselect__option {
+    width: 100%;
+}
 .bounding-box {
     position: absolute;
     cursor: pointer;

diff --git a/src/store/store.ts b/src/store/store.ts
@@ -27,7 +27,17 @@ const pickRandom = (array: string[]) =>
 const developmentAnnotationLabels: AnnotationLabel[] = [
     { id: 1, name: "bottle" },
     { id: 2, name: "paper" },
-    { id: 3, name: "some super long trash name" }
+    { id: 3, name: "some super long trash name" },
+    { id: 4, name: "bad trash name" },
+    { id: 5, name: "fragments" },
+    { id: 6, name: "tire" },
+    { id: 7, name: "unclear" },
+    { id: 8, name: "insulating material" },
+    { id: 9, name: "drum" },
+    { id: 10, name: "trash #10" },
+    { id: 11, name: "trash #11" },
+    { id: 12, name: "trash #12" },
+    { id: 13, name: "trash #13" }
 ]; // TODO : Should be fetch from API
 const savedAuth = localStorage.getItem("auth");