fix #49

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

@@ -1,6 +1,6 @@
 <template>
   <div class="annotated-image" v-on="events">
-    <img alt="media" ref="image"
+    <img alt="media" ref="image" draggable="false"
          :src="mediaUrl" :srcset="mediaUrlSet" :sizes="mediaUrlSizes"/>
 
     <div style="position: absolute; top: 0.5rem; left: 0.5rem">{{ data }}</div>
@@ -69,8 +69,8 @@ export default {
         'touchmove': this.track,
         'touchend': this.release,
         'mousedown': this.press,
-        'drag': this.track,
-        'dragend': this.release,
+        'mousemove': this.track,
+        'mouseup': this.release,
         'dragstart': e => e.stopPropagation()
       }
     }
@@ -88,17 +88,17 @@ export default {
     get: function(event) {
       if ('clientX' in event)
         return event;
-      else if ('touches' in event && event.touches.length > 0)
+      if ('touches' in event && event.touches.length > 0)
         return event.touches[0];
-      else if ('changedTouches' in event && event.changedTouches.length > 0)
+      if ('changedTouches' in event && event.changedTouches.length > 0)
         return event.changedTouches[0];
     },
     getX: function(event) {
-      const bcr = event.target.getBoundingClientRect();
+      const bcr = this.$refs.image.getBoundingClientRect();
       return (this.get(event).clientX - bcr.left) / bcr.width;
     },
     getY: function(event) {
-      const bcr = event.target.getBoundingClientRect();
+      const bcr = this.$refs.image.getBoundingClientRect();
       return (this.get(event).clientY - bcr.top) / bcr.height;
     },
     buildRectangle: function(x1, y1, x2, y2) {
@@ -121,15 +121,17 @@ export default {
       };
     },
     track: function(event) {
-      const x = this.getX(event);
-      const y = this.getY(event);
+      if (this.start) {
+        const x = this.getX(event);
+        const y = this.getY(event);
 
-      // Chrome 88 fires a drag event with negative coordinates on mouseup.
-      if (x >= 0 && y >= 0)
         this.current = this.buildRectangle(this.start.x, this.start.y, x, y);
+      }
+
     },
     release: function(event) {
       console.log('release', event);
+
       // TODO send to server
       this.start = false;
       // this.current = this.buildRectangle(this.start.x, this.start.y, this.getX(event), this.getY(event));