removed zoomBox implementations that are not used anymore

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

@@ -8,14 +8,8 @@
                    @filter="filter = $event"
                    :labelsEnabled="labelsEnabled"
                    @labelSelector="openLabelSelector()"
-                   :zoomBox="zoomBox"
-                   :infoBox="infoBox !== false"
-                   @infoBox="infoBox = $event; interaction=false"
-                   @unzoom="zoomBox=false; interaction=false"
                    @predict="predictImage"
-                   @confirmAll="confirmAll"
-                   @prevzoom="$refs.overlay.prevZoom()"
-                   @nextzoom="$refs.overlay.nextZoom()"/>
+                   @confirmAll="confirmAll"/>
 
       <label-selector v-if="labelSelector"
                       :labels="labels"
@@ -30,7 +24,6 @@
         <!-- image -->
         <img v-if="current.type === 'image'"
              ref="media" :src="src" alt="media"
-             :style="cropPosition"
              @load="change"
              @loadedmetadata="change"
              @loadeddata="change"
@@ -71,9 +64,7 @@
                             @confirm="confirm"
                             @updateBox="updateBox"
                             @estimateBox="estimateBox"
-                            @crop="infoBox = $event"
-                            :zoom="zoomBox"
-                            @zoom="zoomBox = $event"/>
+                            @crop="infoBox = $event"/>
       </div>
 
       <cropped-image v-if="infoBox !== false"
@@ -132,7 +123,6 @@ export default {
         play: false
       },
       infoBox: false,
-      zoomBox: false,
       supported: {
         labeledImages: false,
         boundingBoxes: false,
@@ -211,21 +201,7 @@ export default {
         height: this.image.height + 'px'
       }
     },
-    cropPosition: function () {
-      if (!this.zoomBox)
-        return {
-          transform: ``,
-        };
 
-      const posX = 0.5 - (this.zoomBox.x + this.zoomBox.w / 2);
-      const posY = 0.5 - (this.zoomBox.y + this.zoomBox.h / 2);
-      const factor = 0.75 / Math.max(this.zoomBox.w, this.zoomBox.h);
-
-      // use a transition to use the transitionend event to recalculate box positions
-      return {
-        transform: `scale(${factor}) translateX(${posX * 100}%) translateY(${posY * 100}%)`
-      };
-    },
     labelsEnabled: function() {
 
       return this.model
@@ -462,8 +438,6 @@ export default {
         this.video.play = false;
         this.video.frame = 0;
 
-        this.zoomBox = false;
-
         this.$root.socket.get(`/data/${newVal.identifier}/results`)
           .then(response => response.json())
           .then(results => {

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

@@ -52,7 +52,6 @@ export default {
     'deletable',
     'taggable',
     'confirmable',
-    'zoomable',
     'croppable',
     'labels',
     'shine'
@@ -152,9 +151,6 @@ export default {
         // TODO then / error
         this.$emit("confirm", this.box.identifier)
       }
-      else if (this.zoomable) {
-        this.$emit('zoom', this.position);
-      }
       else if (this.croppable) {
         this.selectMe();
       }

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

@@ -9,7 +9,7 @@
        @mouseup.left="release"
        @dragstart.stop>
 
-    <annotation-box v-for="(box, index) in boundingBoxes"
+    <annotation-box v-for="box in boundingBoxes"
                     v-bind:key="box.identifier"
                     ref="box"
                     :box="box"
@@ -18,7 +18,6 @@
                     :deletable="interaction === 'remove-box'"
                     :taggable="interaction === 'label-box' ? label : false"
                     :confirmable="interaction === 'confirm-box'"
-                    :zoomable="interaction === 'zoom-box'"
                     :croppable="interaction === 'info-box'"
                     :labels="labels"
                     :shine="crop && box.identifier === crop.identifier"
@@ -30,8 +29,7 @@
                     @labelBox="labelBox"
                     @remove="$emit('remove', $event)"
                     @confirm="$emit('confirm', $event)"
-                    @updateBox="updateBox"
-                    @zoom="zoomBox(index, $event)"/>
+                    @updateBox="updateBox"/>
 
     <annotation-box v-if="current"
                     :position="current"/>
@@ -65,7 +63,6 @@ export default {
     'results',
     'labels',
     'crop',
-    'zoom'
   ],
   data: function () {
     return {
@@ -74,7 +71,6 @@ export default {
       fixed: false,
       current: false,
       mousedown: false,
-      zoomed: false
     }
   },
   computed: {
@@ -284,28 +280,6 @@ export default {
           break;
       }
     },
-    zoomBox: function (index) {
-      if (this.boundingBoxes.length === 0) {
-        this.zoomed = false;
-        return;
-      }
-      if (index < 0) {
-        index = this.boundingBoxes.length - 1;
-      } else if (index >= this.boundingBoxes.length) {
-        index = 0;
-      }
-
-      this.zoomed = index;
-      this.$emit('zoom', this.boundingBoxes[index].data);
-    },
-
-    prevZoom: function () {
-      this.zoomBox(this.zoomed - 1);
-    },
-
-    nextZoom: function () {
-      this.zoomBox(this.zoomed + 1);
-    },
 
     labelBox: function (box_id, label_id) {
       this.$emit('labelBox', box_id, label_id);

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

@@ -77,33 +77,9 @@
          title="Show info of a bounding box (I)"
          :class="{active: interaction === 'info-box'}"
          @click="$emit('interaction', 'info-box')">
-      <img alt="zoom bounding box" src="@/assets/icons/info.svg">
+      <img alt="magnify bounding box" src="@/assets/icons/info.svg">
     </div>
 
-    <!--
-    <div ref="zoom_annotation"
-         class="icon"
-         title="zoom bounding box (X)"
-         :class="{active: interaction === 'zoom-box' || zoomBox}"
-         @click="$emit(zoomBox ? 'unzoom' : 'interaction', 'zoom-box')">
-      <img alt="zoom bounding box" src="@/assets/icons/codescan.svg">
-    </div>
-
-    <div ref="zoom_prev_annotation"
-         class="icon"
-         title="zoom previous bounding box (C)"
-         @click="$emit('prevzoom', true)">
-      <img alt="zoom previous bounding box" src="@/assets/icons/chevron-left.svg">
-    </div>
-
-    <div ref="zoom_next_annotation"
-         class="icon"
-         title="zoom next bounding box (V)"
-         @click="$emit('nextzoom', true)">
-      <img alt="zoom next bounding box" src="@/assets/icons/chevron-right.svg">
-    </div>
-    -->
-
     <div class="spacer"/>
 
     <div ref="show_user_annotations"