fix: move entire radius calculation logic to dedicated module

Author: setaman

package-lock.json

@@ -30,23 +30,11 @@ export default {
     },
 
     radius() {
-      if (this.options.multiple) {
-        return this.baseRadius - this.previousCirclesThickness;
-      }
       return radius(this.options);
     },
     emptyRadius() {
-      if (this.options.multiple) {
-        return this.baseRadius - this.previousCirclesThickness;
-      }
       return emptyRadius(this.options);
     },
-    baseRadius() {
-      return this.options.size / 2 - this.thicknessWithDot / 2;
-    },
-    emptyBaseRadius() {
-      return this.options.size / 2 - this.emptyThickness / 2;
-    },
 
     dataIsAvailable() {
       return isValidNumber(this.computedProgress) && !this.options.noData;
@@ -130,21 +118,6 @@ export default {
     globalGap() {
       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;
     },

src/components/Circle/circleMixin.js

@@ -1,3 +1,5 @@
+import { isValidNumber } from "../../utils";
+
 const half = (val) => val / 2;
 
 const thicknessWithDot = (options) => {
@@ -17,6 +19,21 @@ const normalLineModeRadius = (options) => {
   return baseRadius(options);
 };
 
+const previousCirclesThickness = (options) => {
+  if (options.index === 0) return 0;
+  const currentCircleGap = isValidNumber(options.gap) ? options.gap : options.globalGap;
+  const preCirclesThickness = [];
+  for (let i = 0; i < options.options.previousCircles.length; i++) {
+    const data = options.options.previousCircles[i];
+    const dot = data.dot ? data.dot.size : options.globalDot.size;
+    const thickness = isValidNumber(data.thickness) ? data.thickness : options.globalThickness;
+    const gap = isValidNumber(data.gap) ? data.gap : options.globalGap;
+    const completeThickness = Math.max(dot, thickness);
+    preCirclesThickness.push(i > 0 ? completeThickness + gap : completeThickness);
+  }
+  return preCirclesThickness.reduce((acc, current) => acc + current) + currentCircleGap;
+};
+
 const radiusNormalMode = (options) => normalLineModeRadius(options);
 const radiusInMode = (options) =>
   emptyRadius(options) - half(options.emptyThickness + half(options.thickness) + options.lineMode.offset);
@@ -62,6 +79,7 @@ const emptyRadiusTopMode = (options) => emptyBaseRadius(options) - half(thicknes
 
 export const radius = (options) => {
   const modes = {
+    multiple: () => baseRadius(options) - previousCirclesThickness(options),
     normal: () => radiusNormalMode(options),
     in: () => radiusInMode(options),
     "out-over": () => radiusOutOverMode(options),
@@ -74,6 +92,7 @@ export const radius = (options) => {
 
 export const emptyRadius = (options) => {
   const modes = {
+    multiple: () => baseRadius(options) - previousCirclesThickness(options),
     normal: () => emptyRadiusNormalMode(options),
     in: () => emptyRadiusInMode(options),
     "in-over": () => emptyRadiusInOverMode(options),