refac: half circle methods

setaman · Dec 15, 2020 · c5a3311 · c5a3311
1 parent fae4904
commit c5a3311
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 22 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -42,8 +42,8 @@
           :size="600"
           half
           :angle="0"
-          line-position="out 50"
-          empty-line-position="out 0"
+          line-position="out 40"
+          empty-line-position="out 20"
           empty-color-fill="red"
           color-fill="green"
           empty-color="transparent"

diff --git a/src/components/Circle/HalfCircle.vue b/src/components/Circle/HalfCircle.vue
@@ -66,34 +66,24 @@ export default {
       return (this.radius * 2 * Math.PI) / 2;
     },
     path() {
-      return ` M ${this.position}, ${this.options.size / 2} a ${this.radius},${this.radius} 0 1,1 ${this.radius * 2},0`;
+      return this.getPath(this.radius);
     },
     fillPath() {
-      return ` M ${this.fillPosition}, ${this.options.size / 2} a ${this.fillRadius},${this.fillRadius} 0 1,1 ${
-        this.fillRadius * 2
-      },0`;
+      return this.getPath(this.fillRadius);
     },
     emptyPath() {
-      return ` M ${this.emptyPosition}, ${this.options.size / 2} a ${this.emptyRadius},${this.emptyRadius} 0 1,1 ${
-        this.emptyRadius * 2
-      },0`;
+      return this.getPath(this.emptyRadius);
     },
     emptyFillPath() {
-      return ` M ${this.emptyFillPosition}, ${this.options.size / 2} a ${this.emptyFillRadius},${
-        this.emptyFillRadius
-      } 0 1,1 ${this.emptyFillRadius * 2},0`;
+      return this.getPath(this.emptyFillRadius);
     },
-    position() {
-      return this.options.size / 2 - this.radius;
-    },
-    fillPosition() {
-      return this.options.size / 2 - this.fillRadius;
-    },
-    emptyPosition() {
-      return this.options.size / 2 - this.emptyRadius;
+  },
+  methods: {
+    getPosition(radius) {
+      return this.options.size / 2 - radius;
     },
-    emptyFillPosition() {
-      return this.options.size / 2 - this.emptyFillRadius;
+    getPath(radius) {
+      return ` M ${this.getPosition(radius)}, ${this.options.size / 2} a ${radius},${radius} 0 1,1 ${radius * 2},0`;
     },
   },
 };