Scaling keypoints

client/src/components/annotator/Annotation.vue

@@ -307,10 +307,10 @@ export default {
 
       // Create new compoundpath
       this.compoundPath = new paper.CompoundPath();
-      this.compoundPath.onDoubleClick = event => {
+      this.compoundPath.onDoubleClick = () => {
         if (this.activeTool !== "Select") return;
         $(`#annotationSettings${this.annotation.id}`).modal("show");
-      } 
+      };
       this.keypoints = new Keypoints(this.keypointEdges);
 
       let keypoints = this.annotation.keypoints;
@@ -659,6 +659,14 @@ export default {
     },
     keypointEdges(newEdges) {
       newEdges.forEach(e => this.keypoints.addEdge(e));
+    },
+    scale: {
+      immediate: true,
+      handler(scale) {
+        if (!this.keypoints) return;
+        this.keypoints.radius = scale * 6;
+        this.keypoints.lineWidth = scale * 2;
+      }
     }
   },
   computed: {

client/src/components/annotator/Category.vue

@@ -74,6 +74,7 @@
         ref="annotation"
         :hover="hover.annotation"
         :active-tool="activeTool"
+        :scale="scale"
         @deleted="annotationDeleted"
       />
 

client/src/libs/keypoints.js

@@ -354,9 +354,9 @@ export class Keypoint extends paper.Point {
   }
 
   _draw() {
-    let storkeWidth = 1;
+    let strokeColor = this.color;
     if (this.path !== null) {
-      storkeWidth = this.path.strokeWidth;
+      strokeColor = this.path.strokeColor;
       this.path.remove();
     }
 
@@ -369,8 +369,8 @@ export class Keypoint extends paper.Point {
     this.path.onClick = this.onClick;
 
     this.path.indicator = true;
-    this.path.strokeColor = this.color;
-    this.path.strokeWidth = storkeWidth;
+    this.path.strokeColor = strokeColor;
+    this.path.strokeWidth = this.radius * 0.4;
     this.path.visible = this.visible;
     this.path.keypoint = this;
     this.path.keypoints = this.keypoints;

client/src/views/Annotator.vue

@@ -122,6 +122,7 @@
             @click="onCategoryClick"
             :current="current"
             :active-tool="activeTool"
+            :scale="image.scale"
             ref="category"
           />
         </div>