added remove button to the crop view

webui/src/components/media/annotated-image.vue

@@ -72,6 +72,7 @@
                      :file="current"
                      :box="infoBox"
                      @predictBox="predictBox"
+                     @removeBox="remove"
                      @removeLabel="labelBox($event, null)"
                      @setLabel="openLabelSelector($event)"
                      @close="

webui/src/components/media/cropped-image.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="cropped-image">
     <div class="close-button"
-         @mousedown.prevent="$emit('close', true)"
-         @touchstart.prevent="$emit('close', true)">
+         @mousedown.prevent="closeMe"
+         @touchstart.prevent="closeMe">
       <img alt="close button" src="@/assets/icons/cross.svg">
     </div>
 
@@ -28,13 +28,19 @@
              @click="removeLabel">
           <img alt="remove label" src="@/assets/icons/untag.svg">
         </div>
-        <div v-if="!hasLabel"
-             ref="add_label"
+        <div v-else ref="add_label"
              class="icon"
              title="set label"
              @click="setLabel">
           <img alt="set label" src="@/assets/icons/tag.svg">
         </div>
+        <div ref="remove_box"
+             class="icon"
+             title="remove this bounding box"
+             @click="removeBox"
+             >
+          <img alt="set label" src="@/assets/icons/trash.svg">
+        </div>
       </div>
 
       <div v-if="hasAnnotator" class="annotation-info">
@@ -189,6 +195,17 @@ export default {
       }
     },
 
+    closeMe: function (){
+      this.$emit("close");
+    },
+
+    removeBox: function () {
+      if (!this.box)
+        return;
+      this.$emit("removeBox", this.box.identifier);
+      this.closeMe();
+    },
+
     removeLabel: function () {
       if (!this.box)
         return;