From 74d1ad73206eece9af7c1e1c217eea2eb26e6a9f Mon Sep 17 00:00:00 2001
From: Justin Brooks <jsbroks@gmail.com>
Date: Sun, 24 Feb 2019 16:50:12 -0500
Subject: [PATCH] Scaling keypoints

---
 client/src/components/annotator/Annotation.vue | 12 ++++++++++--
 client/src/components/annotator/Category.vue   |  1 +
 client/src/libs/keypoints.js                   |  8 ++++----
 client/src/views/Annotator.vue                 |  1 +
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/src/components/annotator/Annotation.vue b/client/src/components/annotator/Annotation.vue
index 64eb93c9..004f1e33 100755
--- a/client/src/components/annotator/Annotation.vue
+++ b/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: {
diff --git a/client/src/components/annotator/Category.vue b/client/src/components/annotator/Category.vue
index 39921ff6..52eab680 100755
--- a/client/src/components/annotator/Category.vue
+++ b/client/src/components/annotator/Category.vue
@@ -74,6 +74,7 @@
         ref="annotation"
         :hover="hover.annotation"
         :active-tool="activeTool"
+        :scale="scale"
         @deleted="annotationDeleted"
       />
       
diff --git a/client/src/libs/keypoints.js b/client/src/libs/keypoints.js
index c347c93f..699cea0d 100644
--- a/client/src/libs/keypoints.js
+++ b/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;
diff --git a/client/src/views/Annotator.vue b/client/src/views/Annotator.vue
index 120f5555..1eee7f1e 100755
--- a/client/src/views/Annotator.vue
+++ b/client/src/views/Annotator.vue
@@ -122,6 +122,7 @@
             @click="onCategoryClick"
             :current="current"
             :active-tool="activeTool"
+            :scale="image.scale"
             ref="category"
           />
         </div>