working on an alternative crop view

.editorconfig

@@ -7,6 +7,10 @@ end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[*.{py,sh,js,vue}]
+[*.{py,sh}]
 indent_style = space
 indent_size = 4
+
+[*.{js,vue}]
+indent_style = space
+indent_size = 2

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

@@ -9,6 +9,7 @@
                    :label="label"
                    @label="label = $event"
                    :labels="labels"
+                   @infoBox="toggleInfoBox()"
                    :zoomBox="zoomBox"
                    @unzoom="zoomBox=false; interaction=false"
                    @prevzoom="$refs.overlay.prevZoom()"
@@ -47,9 +48,14 @@
                             :video="video"
                             :results="results"
                             :labels="labels"
+                            @crop="selectCrop($event)"
                             :zoom="zoomBox"
                             @zoom="zoomBox = $event"/>
       </div>
+
+      <cropped-image ref="info"
+                     :file="current"
+      />
     </template>
   </div>
 </template>
@@ -58,15 +64,16 @@
 import AnnotationOverlay from "@/components/media/annotation-overlay";
 import VideoControl from "@/components/media/video-control";
 import OptionsBar from "@/components/media/options-bar";
+import CroppedImage from "@/components/media/cropped-image";
 
 export default {
   name: "annotated-image",
-  components: {OptionsBar, VideoControl, AnnotationOverlay},
+  components: {OptionsBar, VideoControl, AnnotationOverlay, CroppedImage},
   props: ['current'],
   mounted: function () {
     // add resize listener
     window.addEventListener('resize', this.resize);
-    this.interval = setInterval(this.resize, 1000);
+    this.interval = setInterval(this.resize, 100);
     this.resize();
 
     // add result listener
@@ -123,6 +130,7 @@ export default {
         frame: 0,
         play: false
       },
+      selectedCrop: null,
       zoomBox: false,
       supported: {
         labeledImages: false,
@@ -173,6 +181,16 @@ export default {
     }
   },
   methods: {
+
+    toggleInfoBox: function() {
+        this.$refs.info.toggle();
+        this.interaction = this.$refs.info.visible ? 'info-box' : false;
+    },
+
+    selectCrop: function(event) {
+        this.$refs.info.show(event);
+    },
+
     resize: function () {
       const rect = this.$refs.root.getBoundingClientRect();
 

webui/src/components/media/annotation-box.vue

@@ -23,7 +23,18 @@
 <script>
 export default {
   name: "annotation-box",
-  props: ['box', 'position', 'draggable', 'deletable', 'taggable', 'confirmable', 'zoomable', 'labels', 'shine'],
+  props: [
+    'box',
+    'position',
+    'draggable',
+    'deletable',
+    'taggable',
+    'confirmable',
+    'zoomable',
+    'croppable',
+    'labels',
+    'shine'
+  ],
   computed: {
     labelName: function () {
       if (!this.box || !this.box.label_id)
@@ -90,6 +101,10 @@ export default {
         this.$emit('zoom', this.position);
         event.stopPropagation();
       }
+      if (this.croppable) {
+        this.$emit('crop', this);
+        event.stopPropagation();
+      }
     },
     resize: function (mode) {
       this.$emit('resize', mode, this.position, this.update);

webui/src/components/media/annotation-overlay.vue

@@ -13,10 +13,12 @@
                     :taggable="interaction === 'label-box' ? label : false"
                     :confirmable="interaction === 'confirm-box'"
                     :zoomable="interaction === 'zoom-box'"
+                    :croppable="interaction === 'info-box'"
                     :labels="labels"
                     :shine="zoom"
                     @move="move"
                     @resize="resize"
+                    @crop="crop($event)"
                     @zoom="zoomBox(index, $event)"/>
 
     <annotation-box v-if="current"
@@ -255,6 +257,10 @@ export default {
           break;
       }
     },
+    crop: function (box) {
+        this.$emit('crop', box);
+    },
+
     zoomBox: function (index) {
       if (this.boundingBoxes.length === 0) {
         this.zoomed = false;

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

@@ -0,0 +1,50 @@
+<template>
+    <div v-if="visible" class="cropped-image">
+        <div v-if="crop">{{crop}}</div>
+        <div v-else>Select a crop to show</div>
+    </div>
+
+
+</template>
+
+<script>
+    export default {
+        name: "cropped-image",
+        props: [
+            'file',
+            'crop',
+        ],
+
+
+        // mounted: function() {}
+        // destroyed: function() {}
+
+        data: function() {
+            return {
+                visible: false,
+            }
+        },
+
+        methods: {
+            toggle: function () {
+                this.visible = !this.visible;
+            },
+
+            show: function (box_element) {
+                console.log(box_element.position);
+            },
+        },
+
+    }
+</script>
+
+<style scoped>
+
+.cropped-image {
+    height: 100%;
+
+    background-color: rgba(133, 133, 133, 0.7);
+    padding: 10px;
+}
+
+</style>

webui/src/components/media/options-bar.vue

@@ -61,6 +61,14 @@
 
     <div class="spacer"/>
 
+    <div ref="crop_info"
+         class="image"
+         title="Show info of a bounding box (I)"
+         :class="{active: interaction === 'info-box'}"
+         @click="$emit('infoBox')">
+      <img alt="zoom bounding box" src="@/assets/icons/info.svg">
+    </div>
+
     <div ref="zoom_annotation"
          class="image"
          title="zoom bounding box (X)"