Merge pull request #89 from setaman/v2-circle-mixin-refactoring

V2 circle mixin refactoring

.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
     "no-restricted-syntax": "off",
     "guard-for-in": "off",
     "no-case-declarations": "off",
+    "no-use-before-define": "off",
   },
   parserOptions: {
     parser: "babel-eslint",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",

src/App.vue

@@ -44,12 +44,12 @@
           :legendValue="1315.56"
           animation="rs 2000 500"
           :loading="loading"
-          dot="30 red"
+          dot="20 red"
           :reverse="true"
-          line-mode="out 10"
+          line-mode="normal"
           :no-data="noData"
-          :determinate="determinate"
           :data="circles"
+          :determinate="determinate"
         >
           <template v-slot:default="{ counterTick }">
             <span
@@ -90,8 +90,8 @@ export default {
     line: "round",
     price: "",
     circles: [
-      { progress: 50, color: "red", dot: "20 yellow" },
-      { progress: 50, color: "red", half: true, angle: -90, dot: "10 green" },
+      { progress: 50, color: "red" },
+      { progress: 50, color: "yellow" /* half: true, angle: -90, dot: "10 green" */ },
       { progress: 50, color: "blue", reverse: false },
     ],
     determinate: false,

src/components/Circle/circleMixin.js

@@ -1,3 +1,4 @@
+import { emptyRadius, radius } from "@/components/Circle/radiusCalculation";
 import { isValidNumber } from "../../utils";
 
 const wait = (ms = 400) => new Promise((resolve) => setTimeout(() => resolve(), ms));
@@ -29,80 +30,10 @@ export default {
     },
 
     radius() {
-      const { offset } = this.lineMode;
-
-      if (this.options.multiple) {
-        return this.baseRadius - this.previousCirclesThickness;
-      }
-
-      switch (this.lineMode.mode) {
-        case "normal":
-          return this.normalLineModeRadius;
-        case "in":
-          return this.emptyRadius - (this.emptyThickness / 2 + this.thickness / 2 + offset);
-        case "out-over":
-          if (this.emptyThickness <= this.thickness) {
-            return this.baseRadius;
-          }
-          return this.emptyRadius - this.emptyThickness / 2 + this.thickness / 2;
-        case "bottom":
-          return this.emptyRadius - this.emptyThickness / 2;
-        case "top":
-          return this.emptyRadius + this.emptyThickness / 2;
-        default:
-          return this.baseRadius;
-      }
+      return radius(this.options);
     },
     emptyRadius() {
-      const { offset } = this.lineMode;
-
-      if (this.options.multiple) {
-        return this.baseRadius - this.previousCirclesThickness;
-      }
-
-      switch (this.lineMode.mode) {
-        case "normal":
-          return this.normalLineModeRadius;
-        case "in":
-          const dotSizeLimit = this.thickness / 2 + this.emptyThickness + offset;
-          if (this.dotSize / 2 > dotSizeLimit) {
-            return this.emptyBaseRadius - (this.dotSize / 2 - dotSizeLimit);
-          }
-          return this.emptyBaseRadius;
-        case "in-over":
-          if (this.dotToThicknessDifference > 0) {
-            return this.emptyBaseRadius - this.dotToThicknessDifference / 2;
-          }
-          return this.emptyBaseRadius;
-        case "out":
-          return this.baseRadius - (this.thickness / 2 + this.emptyThickness / 2 + offset);
-        case "out-over":
-          if (this.emptyThickness <= this.thickness) {
-            return this.baseRadius - this.thickness / 2 + this.emptyThickness / 2;
-          }
-          return this.emptyBaseRadius;
-        case "bottom":
-          if (this.emptyThickness < this.thicknessWithDot / 2) {
-            return this.emptyBaseRadius - (this.thicknessWithDot / 2 - this.emptyThickness);
-          }
-          return this.emptyBaseRadius;
-        case "top":
-          return this.emptyBaseRadius - this.thicknessWithDot / 2;
-        default:
-          return this.emptyBaseRadius;
-      }
-    },
-    baseRadius() {
-      return this.options.size / 2 - this.thicknessWithDot / 2;
-    },
-    emptyBaseRadius() {
-      return this.options.size / 2 - this.emptyThickness / 2;
-    },
-    normalLineModeRadius() {
-      if (this.thicknessWithDot < this.emptyThickness) {
-        return this.emptyBaseRadius;
-      }
-      return this.baseRadius;
+      return emptyRadius(this.options);
     },
 
     dataIsAvailable() {
@@ -148,10 +79,6 @@ export default {
       return this.options.thickness;
     },
 
-    thicknessWithDot() {
-      return this.thickness < this.dotSize ? this.dotSize : this.thickness;
-    },
-
     globalThickness() {
       return this.options.globalThickness;
     },
@@ -192,29 +119,12 @@ export default {
       return this.options.globalGap;
     },
 
-    previousCirclesThickness() {
-      if (this.options.index === 0) return 0;
-      const currentCircleGap = isValidNumber(this.gap) ? this.gap : this.globalGap;
-      const previousCirclesThickness = [];
-      for (let i = 0; i < this.options.index; i++) {
-        const data = this.options.previousCircles[i];
-        const dot = data.dot ? data.dot.size : this.globalDotSize;
-        const thickness = isValidNumber(data.thickness) ? data.thickness : this.globalThickness;
-        const gap = isValidNumber(data.gap) ? data.gap : this.globalGap;
-        const completeThickness = Math.max(dot, thickness);
-        previousCirclesThickness.push(i > 0 ? completeThickness + gap : completeThickness);
-      }
-      return previousCirclesThickness.reduce((acc, current) => acc + current) + currentCircleGap;
-    },
     dotSize() {
       return this.options.dot.size;
     },
     dotColor() {
       return this.options.dot.color;
     },
-    dotToThicknessDifference() {
-      return this.dotSize - this.thickness;
-    },
     globalDotSize() {
       return this.globalDot.size;
     },