Merge branch '54-move-bounding-boxes' into 'master'

Resolve "move bounding boxes"

Closes #54

See merge request troebs/pycs!50

pycs/frontend/WebServer.py

@@ -195,7 +195,8 @@ class WebServer:
 
             # add result
             result = request.get_json(force=True)
-            target_object.add_result(result)
+            if result:
+                target_object.add_result(result)
 
             # return default success response
             return response()
@@ -216,14 +217,14 @@ class WebServer:
 
             # parse post data
             result = request.get_json(force=True)
-
-            # remove result
-            if 'delete' in result.keys():
-                target_object.remove_result(result_identifier)
-
-            # update result
-            else:
-                target_object.update_result(result_identifier, result)
+            if result:
+                # remove result
+                if 'delete' in result.keys():
+                    target_object.remove_result(result_identifier)
+
+                # update result
+                else:
+                    target_object.update_result(result_identifier, result)
 
             # return default success response
             return response()

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

@@ -17,6 +17,7 @@
                     :position="result"
                     :socket="socket"
                     :box-url="mediaUrl + '/' + result.id"
+                    @move="move"
                     @resize="resize"/>
   </div>
 </template>
@@ -112,17 +113,26 @@ export default {
       return (this.get(event).clientY - bcr.top) / bcr.height;
     },
     buildRectangle: function (x1, y1, x2, y2) {
-      const lx = this.fixed && 'lx' in this.fixed ? this.fixed.lx : Math.max(Math.min(x1, x2), 0);
-      const hx = this.fixed && 'hx' in this.fixed ? this.fixed.hx : Math.min(Math.max(x1, x2), 1);
-      const ly = this.fixed && 'ly' in this.fixed ? this.fixed.ly : Math.max(Math.min(y1, y2), 0);
-      const hy = this.fixed && 'hy' in this.fixed ? this.fixed.hy : Math.min(Math.max(y1, y2), 1);
+      let lx, hx, ly, hy;
+
+      if (this.fixed && 'offsetX' in this.fixed && 'offsetY' in this.fixed) {
+        lx = Math.max(x2 + this.fixed.offsetX, 0);
+        hx = Math.min(x2 + this.fixed.offsetX + this.fixed.w, 1);
+        ly = Math.max(y2 + this.fixed.offsetY, 0);
+        hy = Math.min(y2 + this.fixed.offsetY + this.fixed.h, 1);
+      } else {
+        lx = this.fixed && 'lx' in this.fixed ? this.fixed.lx : Math.max(Math.min(x1, x2), 0);
+        hx = this.fixed && 'hx' in this.fixed ? this.fixed.hx : Math.min(Math.max(x1, x2), 1);
+        ly = this.fixed && 'ly' in this.fixed ? this.fixed.ly : Math.max(Math.min(y1, y2), 0);
+        hy = this.fixed && 'hy' in this.fixed ? this.fixed.hy : Math.min(Math.max(y1, y2), 1);
+      }
 
       return {
         x: lx,
         y: ly,
         w: hx - lx,
         h: hy - ly
-      }
+      };
     },
     press: function (event) {
       this.start = {
@@ -151,6 +161,15 @@ export default {
         this.callback = false;
       }
     },
+    move: function (event, position, callback) {
+      this.callback = callback;
+
+      const x = this.getX(event);
+      const y = this.getY(event);
+
+      this.start = {x: position.x, y: position.y};
+      this.fixed = {w: position.w, h: position.h, offsetX: position.x - x, offsetY: position.y - y};
+    },
     resize: function (position, mode, callback) {
       this.callback = callback;
       switch (mode) {

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

@@ -1,9 +1,9 @@
 <template>
-  <div class="annotation-box" :style="style" @mousedown.stop.prevent @touchstart.stop.prevent>
-    <div class="nw" @mousedown="resizeSelf('nw')" @touchstart="resizeSelf('nw')"></div>
-    <div class="nn" @mousedown="resizeSelf('nn')" @touchstart="resizeSelf('nn')"></div>
-    <div class="ne" @mousedown="resizeSelf('ne')" @touchstart="resizeSelf('ne')"></div>
-    <div class="ww" @mousedown="resizeSelf('ww')" @touchstart="resizeSelf('ww')"></div>
+  <div class="annotation-box" :style="style" @mousedown.stop.prevent="moveSelf" @touchstart.stop.prevent="moveSelf">
+    <div class="nw" @mousedown.stop.prevent="resizeSelf('nw')" @touchstart.stop.prevent="resizeSelf('nw')"></div>
+    <div class="nn" @mousedown.stop.prevent="resizeSelf('nn')" @touchstart.stop.prevent="resizeSelf('nn')"></div>
+    <div class="ne" @mousedown.stop.prevent="resizeSelf('ne')" @touchstart.stop.prevent="resizeSelf('ne')"></div>
+    <div class="ww" @mousedown.stop.prevent="resizeSelf('ww')" @touchstart.stop.prevent="resizeSelf('ww')"></div>
 
     <div class="buttons">
       <template v-if="!immutable">
@@ -12,10 +12,10 @@
       </template>
     </div>
 
-    <div class="ee" @mousedown="resizeSelf('ee')" @touchstart="resizeSelf('ee')"></div>
-    <div class="sw" @mousedown="resizeSelf('sw')" @touchstart="resizeSelf('sw')"></div>
-    <div class="ss" @mousedown="resizeSelf('ss')" @touchstart="resizeSelf('ss')"></div>
-    <div class="se" @mousedown="resizeSelf('se')" @touchstart="resizeSelf('se')"></div>
+    <div class="ee" @mousedown.stop.prevent="resizeSelf('ee')" @touchstart.stop.prevent="resizeSelf('ee')"></div>
+    <div class="sw" @mousedown.stop.prevent="resizeSelf('sw')" @touchstart.stop.prevent="resizeSelf('sw')"></div>
+    <div class="ss" @mousedown.stop.prevent="resizeSelf('ss')" @touchstart.stop.prevent="resizeSelf('ss')"></div>
+    <div class="se" @mousedown.stop.prevent="resizeSelf('se')" @touchstart.stop.prevent="resizeSelf('se')"></div>
   </div>
 </template>
 
@@ -62,6 +62,9 @@ export default {
     deleteSelf: function () {
       this.socket.post(this.boxUrl, {delete: true, id: this.id});
     },
+    moveSelf: function (event) {
+      this.$emit('move', event, this.position, this.updateSelf);
+    },
     resizeSelf: function (mode) {
       this.$emit('resize', this.position, mode, this.updateSelf);
     },