Merge pull request #85 from setaman/#82-fix-dot-for-ios

#82 fix dot for ios

src/App.vue

@@ -30,7 +30,8 @@
         </label>
         <label for="determinate">
           Determinate
-          <input id="determinate" type="checkbox" v-model="circles[0].determinate" />
+          <input id="determinate" type="checkbox" v-model="determinate" />
+          <input id="determinate1" type="checkbox" v-model="circles[0].determinate" />
           <input id="determinate2" type="checkbox" v-model="determinate" />
         </label>
       </div>
@@ -42,11 +43,15 @@
       </div>-->
       <div style="border: 1px solid red; display: inline-block;">
         <vue-ellipse-progress
-          :size="600"
+          :size="200"
           :progress="progress"
           :legendValue="1315.56"
-          animation="rs 5000 500"
+          animation="rs 2000 500"
           :loading="loading"
+          dot="50 red"
+          :reverse="true"
+          line-mode="out"
+          :determinate="determinate"
         >
           <template v-slot:default="{ counterTick }">
             <span
@@ -59,7 +64,7 @@
           </template>
         </vue-ellipse-progress>
       </div>
-      <vue-ellipse-progress :size="600" :progress="progress" :legend-value="125.1">
+      <vue-ellipse-progress dot="20 green" :loading="loading" :size="200" :progress="progress" :legend-value="125.1">
         <template v-slot:legend-caption>
           <p slot="legend-caption">TASKS DONE</p>
         </template>
@@ -77,9 +82,9 @@ export default {
     line: "round",
     price: "",
     circles: [
-      { progress: 50, color: "red" },
-      { progress: 50, color: "red", half: true, angle: -90 },
-      { progress: -50, color: "blue", reverse: false },
+      { progress: 50, color: "red", dot: "20 yellow" },
+      { progress: 50, color: "red", half: true, angle: -90, dot: "10 green" },
+      { progress: 50, color: "blue", reverse: false },
     ],
     determinate: false,
     loading: false,

src/components/Circle/CircleContainer.vue

@@ -1,14 +1,18 @@
 <template>
-  <g class="ep-circle--container" :class="{ 'ep-reverse': reverse }">
-    <defs>
-      <gradient v-if="isColorGradient" :color="color" type="progress" :id="_uid" />
-      <gradient v-if="isColorFillGradient" :color="colorFill" type="progress-fill" :id="_uid" />
-      <gradient v-if="isEmptyColorGradient" :color="emptyColor" type="empty" :id="_uid" />
-      <gradient v-if="isEmptyColorFillGradient" :color="emptyColorFill" type="empty-fill" :id="_uid" />
-    </defs>
-    <component :is="circleType" v-bind="$props" :id="_uid" />
-    <circle-dot v-if="dot" v-bind="$props" :id="_uid" :index="index" :multiple="multiple" />
-  </g>
+  <div class="ep-svg-container" :class="{ 'ep-reverse': reverse }">
+    <svg class="ep-svg" :height="size" :width="size" xmlns="http://www.w3.org/2000/svg">
+      <g class="ep-circle--container">
+        <defs>
+          <gradient v-if="isColorGradient" :color="color" type="progress" :id="_uid" />
+          <gradient v-if="isColorFillGradient" :color="colorFill" type="progress-fill" :id="_uid" />
+          <gradient v-if="isEmptyColorGradient" :color="emptyColor" type="empty" :id="_uid" />
+          <gradient v-if="isEmptyColorFillGradient" :color="emptyColorFill" type="empty-fill" :id="_uid" />
+        </defs>
+        <component :is="circleType" v-bind="$props" :id="_uid" />
+      </g>
+    </svg>
+    <circle-dot v-if="dot" v-bind="$props" :id="_uid" />
+  </div>
 </template>
 
 <script>
@@ -67,11 +71,17 @@ export default {
 <style lang="scss">
 @import "~@/styles/animations.scss";
 @import "~@/styles/animationsUsage.scss";
-g.ep-circle--container {
-  transition: inherit;
-  transform-origin: 50% 50%;
+.ep-svg-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
   &.ep-reverse {
     transform: scaleX(-1);
   }
 }
+g.ep-circle--container {
+  transition: inherit;
+  transform-origin: 50% 50%;
+}
 </style>

src/components/Circle/CircleDot.vue

@@ -1,15 +1,9 @@
 <template>
-  <foreignObject
-    :x="dotContainerPosition"
-    :y="dotContainerPosition"
-    class="ep-circle--progress__dot-container"
-    :class="dotContainerClasses"
-    :width="dotContainerSize"
-    :height="dotContainerSize"
-    :style="dotContainerStyle"
-  >
-    <span class="ep-circle--progress__dot" :class="{ 'ep-hidden': isHidden }" :style="dotStyle"> </span>
-  </foreignObject>
+  <div class="ep-circle--progress__dot-container" :class="dotContainerClasses" :style="dotContainerStyle">
+    <div>
+      <span class="ep-circle--progress__dot" :class="{ 'ep-hidden': isHidden }" :style="dotStyle"> </span>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -21,9 +15,6 @@ export default {
   name: "CircleDot",
   mixins: [CircleMixin],
   computed: {
-    dotContainerPosition() {
-      return (this.size - this.radius * 2 - this.dotSize) / 2;
-    },
     dotContainerSize() {
       return this.radius * 2 + this.dotSize;
     },
@@ -38,6 +29,8 @@ export default {
     },
     dotContainerStyle() {
       return {
+        width: `${this.dotContainerSize}px`,
+        height: `${this.dotContainerSize}px`,
         transform: `rotate(${this.dotContainerRotation}deg)`,
         transitionDuration: this.loading ? "0s" : this.animationDuration,
         transitionTimingFunction: "ease-in-out",
@@ -98,10 +91,14 @@ export default {
 
 <style scoped lang="scss">
 .ep-circle--progress__dot-container {
+  position: absolute;
   transform-origin: center center;
   &.hidden {
     transition-duration: 0s;
   }
+  & > div {
+    position: relative;
+  }
 }
 .ep-circle--progress__dot {
   transition-duration: 0.2s;

src/components/VueEllipseProgress.vue

@@ -2,24 +2,21 @@
   <div
     class="ep-container"
     :style="{
-      maxWidth: `${size}px`,
-      maxHeight: `${size}px`,
+      width: `${size}px`,
+      height: `${size}px`,
     }"
   >
     <div class="ep-content">
-      <svg class="ep-svg-container" :height="size" :width="size" xmlns="http://www.w3.org/2000/svg">
-        <circle-container
-          v-for="(options, i) in circlesData"
-          :key="i"
-          v-bind="options"
-          :multiple="isMultiple"
-          :index="i"
-          :globalThickness="thickness"
-          :globalGap="gap"
-          :globalDot="dot"
-        />
-      </svg>
-
+      <circle-container
+        v-for="(options, i) in circlesData"
+        :key="i"
+        v-bind="options"
+        :multiple="isMultiple"
+        :index="i"
+        :globalThickness="thickness"
+        :globalGap="gap"
+        :globalDot="dot"
+      />
       <div class="ep-legend--container" :style="{ maxWidth: `${size}px` }">
         <div
           class="ep-legend--value"
@@ -110,6 +107,8 @@ export default {
   justify-content: center;
   align-items: center;
   position: relative;
+  height: 100%;
+  width: 100%;
 }
 
 .ep-legend--container {
@@ -125,7 +124,7 @@ export default {
 .ep-hidden {
   opacity: 0;
 }
-svg.ep-svg-container {
+svg.ep-svg {
   transition: inherit;
   transform-origin: 50% 50%;
 }

tests/unit/circle/circle-dot.spec.js

@@ -86,6 +86,23 @@ describe("#dot", () => {
     expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${halfRotationStart}deg)`);
   });
 
+  it(`applies custom style to dot`, async () => {
+    const wrapper = factory(
+      { progress, dot: { size: 10, background: "red", border: "2px solid green" }, animation: "default 0 1000" },
+      CircleDot
+    ).find("span.ep-circle--progress__dot");
+    expect(wrapper.element.style.background).to.equal("red");
+    expect(wrapper.element.style.border).to.equal("2px solid green");
+  });
+
+  it(`do not apply custom height to dot`, async () => {
+    const wrapper = factory(
+      { progress, dot: { size: 10, height: "20px" }, animation: "default 0 1000" },
+      CircleDot
+    ).find("span.ep-circle--progress__dot");
+    expect(wrapper.element.style.height).to.equal("10px");
+  });
+
   const data = [
     { progress, thickness, dot: 5 },
     { progress, thickness, dot: "5" },
@@ -112,7 +129,11 @@ describe("#dot", () => {
       expect(wrapper.findComponent(CircleDot).exists()).to.be.true;
     });
 
-    it(`applies the size of the dot correctly | #dot = ${circleData.dot}`, () => {
+    it(`applies the height of the dot correctly | #dot = ${circleData.dot}`, () => {
+      expect(circleDotSpanWrapper.element.style.height).to.equal(`${parsedDotSize}px`);
+    });
+
+    it(`applies the width of the dot correctly | #dot = ${circleData.dot}`, () => {
       expect(circleDotSpanWrapper.element.style.width).to.equal(`${parsedDotSize}px`);
     });
 
@@ -125,18 +146,11 @@ describe("#dot", () => {
       }
     });
 
-    it(`calculates and applies the position of the dot container correctly | #dot = ${circleData.dot}`, () => {
-      const circleRadius = circleWrapper.vm.radius;
-      const xAndYPosition = (size - circleRadius * 2) / 2 - parsedDotSize / 2;
-      expect(circleDotWrapper.element.getAttribute("y")).to.equal(`${xAndYPosition}`);
-      expect(circleDotWrapper.element.getAttribute("x")).to.equal(`${xAndYPosition}`);
-    });
-
     it(`calculates and applies the size of the dot container correctly | #dot = ${circleData.dot}`, () => {
       const circleRadius = circleWrapper.vm.radius;
       const containerSize = circleRadius * 2 + parsedDotSize;
-      expect(circleDotWrapper.element.getAttribute("width")).to.equal(`${containerSize}`);
-      expect(circleDotWrapper.element.getAttribute("height")).to.equal(`${containerSize}`);
+      expect(circleDotWrapper.element.style.width).to.equal(`${containerSize}px`);
+      expect(circleDotWrapper.element.style.height).to.equal(`${containerSize}px`);
     });
   }
 });

tests/unit/container.spec.js

@@ -34,8 +34,8 @@ describe("[ EllipseProgressContainer.vue ]", () => {
     const size = 250;
     const wrapper = factory({ size });
     it("sets the size of the container correctly", () => {
-      expect(wrapper.element.style.maxWidth).to.equal(`${size}px`);
-      expect(wrapper.element.style.maxHeight).to.equal(`${size}px`);
+      expect(wrapper.element.style.width).to.equal(`${size}px`);
+      expect(wrapper.element.style.height).to.equal(`${size}px`);
     });
 
     it("sets the size of the svg container correctly", () => {