updated the moving of bounding boxes

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

@@ -106,6 +106,7 @@ export default {
 
     return {
       interval: false,
+      resize_interval: 200,
       container: {
         top: 0,
         left: 0,
@@ -139,10 +140,30 @@ export default {
       labels: []
     }
   },
+  watch: {
+    current: {
+      immediate: true,
+      handler: function (newVal) {
+        this.infoBox = false;
+
+        this.video.play = false;
+        this.video.frame = 0;
+
+        this.$root.socket.get(`/data/${newVal.identifier}/results`)
+          .then(response => response.json())
+          .then(results => {
+            this.results = results;
+          });
+      }
+    },
+    infoBox: function () {
+      setTimeout(this.resize, 1);
+    }
+  },
   mounted: function () {
     // add resize listener
     window.addEventListener('resize', this.resize);
-    this.interval = setInterval(this.resize, 1000);
+    this.interval = setInterval(this.resize, this.resize_interval);
     this.resize();
 
     // add result listener
@@ -431,24 +452,6 @@ export default {
       }
     }
   },
-  watch: {
-    current: {
-      immediate: true,
-      handler: function (newVal) {
-        this.video.play = false;
-        this.video.frame = 0;
-
-        this.$root.socket.get(`/data/${newVal.identifier}/results`)
-          .then(response => response.json())
-          .then(results => {
-            this.results = results;
-          });
-      }
-    },
-    infoBox: function () {
-      setTimeout(this.resize, 1);
-    }
-  }
 }
 </script>
 

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

@@ -9,7 +9,16 @@
           croppable,
         }"
        @contextmenu.prevent
-       @mousedown.prevent="click" @touchstart.prevent="click">
+       @mousedown.prevent="click"
+       @mouseup.prevent="mousedown=false"
+
+       @touchstart.prevent="click"
+       @touchend.prevent="mousedown=false"
+
+       @touchmove.prevent="move"
+       @mousemove.left.prevent="move"
+
+       >
     <template v-if="draggable">
       <div class="nw" @mousedown.prevent.stop="resize('nw')" @touchstart.prevent.stop="resize('nw')"/>
       <div class="nn" @mousedown.prevent.stop="resize('nn')" @touchstart.prevent.stop="resize('nn')"/>
@@ -33,7 +42,9 @@ export default {
   data: function(){
     return {
       clickCounter: 0,
-      dblClickInterval: 200, // in ms
+      mousedown: false,
+      timer: null,
+      dblClickInterval: 500, // in ms
 
       colors: {
         default: '255, 255, 255',
@@ -119,7 +130,6 @@ export default {
   },
   methods: {
 
-
     doubleLeftClick(event) {
       console.debug("double left click", event);
       this.$emit('interaction', "move-box");
@@ -134,26 +144,21 @@ export default {
     singleLeftClick(event) {
       console.debug("single left click", event);
 
-      if (this.deletable) {
-        // TODO then / error
+      if (this.deletable)
         this.$emit("remove", this.box.identifier)
-      }
-      else if (this.draggable) {
-        // TODO then / error
+
+      else if (this.draggable && this.mousedown)
         this.$emit('move', event, this.position, this.update);
-      }
+
       else if (this.taggable) {
-        // TODO then / error
         this.$emit("labelBox", this.box.identifier, this.taggable.identifier)
         this.selectMe();
       }
-      else if (this.confirmable) {
-        // TODO then / error
+      else if (this.confirmable)
         this.$emit("confirm", this.box.identifier)
-      }
-      else if (this.croppable) {
+
+      else if (this.croppable)
         this.selectMe();
-      }
 
       event.stopPropagation();
     },
@@ -191,26 +196,49 @@ export default {
       this.$emit('crop', this.box);
     },
 
+    setClickTimer(event) {
+      this.timer = setTimeout( () => {
+        this.singleClick(event);
+        this.resetClickTimer();
+      }, this.dblClickInterval);
+    },
+
+    resetClickTimer() {
+      clearTimeout(this.timer);
+      this.timer = null;
+      this.clickCounter = 0;
+    },
+
     click: function (event) {
+      this.mousedown = true;
       this.clickCounter++;
 
       event.stopPropagation();
 
       if (this.clickCounter == 1) {
-        this.timer = setTimeout( () => {
-          this.clickCounter = 0;
-          this.singleClick(event);
-        }, this.dblClickInterval);
+        this.setClickTimer(event);
         return;
       }
 
-      clearTimeout(this.timer);
-      this.clickCounter = 0;
+      this.resetClickTimer();
       this.doubleClick(event);
     },
+
+    move(event) {
+      if(this.draggable && this.mousedown){
+        this.mousedown = false;
+        if(this.timer !== null)
+          this.resetClickTimer();
+
+        this.$emit('move', event, this.position, this.update);
+
+      }
+    },
+
     resize: function (mode) {
       this.$emit('resize', mode, this.position, this.update);
     },
+
     update: function (value) {
       this.$emit("updateBox", this.box.identifier, value)
     }

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

@@ -77,7 +77,11 @@
 <script>
 export default {
   name: "cropped-image",
-  props: ['labels', 'file', 'box'],
+  props: [
+    'labels',
+    'file',
+    'box'
+  ],
   created: function () {
     // get data
     this.getJobs();