Merge pull request #300 from cbranch101/bug-path-helpers-round

Make path helpers work correctly with decimal values
FormidableLabs · Sep 25, 2017 · e5afed1 · e5afed1
2 parents 62384ed + ea339a4
commit e5afed1
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 47 deletions.
diff --git a/src/victory-primitives/path-helpers.js b/src/victory-primitives/path-helpers.js
@@ -3,74 +3,80 @@ import { range } from "lodash";
 
 export default {
   circle(x, y, size) {
-    const s = Math.round(size);
-    return `M ${Math.round(x)}, ${Math.round(y)} m ${-s}, 0
-      a ${s}, ${s} 0 1,0 ${s * 2},0
-      a ${s}, ${s} 0 1,0 ${-s * 2},0`;
+    const s = Math.floor(size);
+    return `
+        M ${Math.floor(x)}, ${Math.floor(y)}
+        m ${-s}, 0
+        a ${s}, ${s} 0 1,0 ${s * 2},0
+        a ${s}, ${s} 0 1,0 ${-s * 2},0
+    `;
   },
 
   square(x, y, size) {
     const baseSize = 0.87 * size; // eslint-disable-line no-magic-numbers
-    const x0 = Math.round(x - baseSize);
-    const x1 = Math.round(x + baseSize);
-    const y0 = Math.round(y - baseSize);
-    const y1 = Math.round(y + baseSize);
+    const x0 = Math.floor(x - baseSize);
+    const y1 = Math.floor(y + baseSize);
+    const distance = Math.abs(x0 - y1);
     return `M ${x0}, ${y1}
-      L ${x1}, ${y1}
-      L ${x1}, ${y0}
-      L ${x0}, ${y0}
-      z`;
+            h${distance}
+            v-${distance}
+            h-${distance}
+            z`;
   },
 
   diamond(x, y, size) {
     const baseSize = 0.87 * size; // eslint-disable-line no-magic-numbers
     const length = Math.sqrt(2 * (baseSize * baseSize));
-    return `M ${Math.round(x)}, ${Math.round(y + length)}
-      L ${Math.round(x + length)}, ${Math.round(y)}
-      L ${Math.round(x)}, ${Math.round(y - length)}
-      L ${Math.round(x - length)}, ${Math.round(y)}
+    const distance = Math.floor(length);
+    return `M ${Math.floor(x)}, ${Math.floor(y + length)}
+      l ${distance}, -${distance}
+      l -${distance}, -${distance}
+      l -${distance}, ${distance}
+      l ${distance}, ${distance}
       z`;
   },
 
   triangleDown(x, y, size) {
-    const height = (size / 2 * Math.sqrt(3));
-    const x0 = Math.round(x - size);
-    const x1 = Math.round(x + size);
-    const y0 = Math.round(y - size);
-    const y1 = Math.round(y + height);
+    const height = size / 2 * Math.sqrt(3);
+    const x0 = Math.floor(x - size);
+    const x1 = Math.floor(x + size);
+    const y0 = Math.floor(y - size);
+    const y1 = Math.floor(y + height);
     return `M ${x0}, ${y0}
-      L ${x1}, ${y0}
-      L ${Math.round(x)}, ${y1}
-      z`;
+            L ${x1}, ${y0}
+            L ${Math.floor(x)}, ${y1}
+            z`;
   },
 
   triangleUp(x, y, size) {
-    const height = (size / 2 * Math.sqrt(3));
-    const x0 = Math.round(x - size);
-    const x1 = Math.round(x + size);
-    const y0 = Math.round(y - height);
-    const y1 = Math.round(y + size);
+    const height = size / 2 * Math.sqrt(3);
+    const x0 = Math.floor(x - size);
+    const x1 = Math.floor(x + size);
+    const y0 = Math.floor(y - height);
+    const y1 = Math.floor(y + size);
     return `M ${x0}, ${y1}
-      L ${x1}, ${y1}
-      L ${Math.round(x)}, ${y0}
-      z`;
+          L ${x1}, ${y1}
+          L ${Math.floor(x)}, ${y0}
+          z`;
   },
 
   plus(x, y, size) {
     const baseSize = 1.1 * size; // eslint-disable-line no-magic-numbers
-    return `M ${Math.round(x - baseSize / 2.5)}, ${Math.round(y + baseSize)}
-      L ${Math.round(x + baseSize / 2.5)}, ${Math.round(y + baseSize)}
-      L ${Math.round(x + baseSize / 2.5)}, ${Math.round(y + baseSize / 2.5)}
-      L ${Math.round(x + baseSize)}, ${Math.round(y + baseSize / 2.5)}
-      L ${Math.round(x + baseSize)}, ${Math.round(y - baseSize / 2.5)}
-      L ${Math.round(x + baseSize / 2.5)}, ${Math.round(y - baseSize / 2.5)}
-      L ${Math.round(x + baseSize / 2.5)}, ${Math.round(y - baseSize)}
-      L ${Math.round(x - baseSize / 2.5)}, ${Math.round(y - baseSize)}
-      L ${Math.round(x - baseSize / 2.5)}, ${Math.round(y - baseSize / 2.5)}
-      L ${Math.round(x - baseSize)}, ${Math.round(y - baseSize / 2.5)}
-      L ${Math.round(x - baseSize)}, ${Math.round(y + baseSize / 2.5)}
-      L ${Math.round(x - baseSize / 2.5)}, ${Math.round(y + baseSize / 2.5)}
-      z`;
+    const distance = Math.floor(baseSize / 2.5) * 2 || 1;
+    return `
+        M ${Math.floor(x - baseSize / 2.5)}, ${Math.floor(y + baseSize)}
+        v-${distance}
+        h-${distance}
+        v-${distance}
+        h${distance}
+        v-${distance}
+        h${distance}
+        v${distance}
+        h${distance}
+        v${distance}
+        h-${distance}
+        v${distance}
+        z`;
   },
 
   star(x, y, size) {

diff --git a/test/client/spec/victory-primitives/path-helper.spec.js b/test/client/spec/victory-primitives/path-helper.spec.js
@@ -16,7 +16,7 @@ describe("path-helpers", () => {
     it("draws a path for a square at the correct location", () => {
       const pathResult = PathHelpers.square(x, y, size);
       const baseSize = 0.87 * size;
-      expect(pathResult).to.contain(`M ${Math.round(x - baseSize)}, ${Math.round(y + baseSize)}`);
+      expect(pathResult).to.contain(`M ${Math.floor(x - baseSize)}, ${Math.floor(y + baseSize)}`);
     });
   });
 
@@ -48,7 +48,7 @@ describe("path-helpers", () => {
       const pathResult = PathHelpers.plus(0, 0, 1);
       const baseSize = 1.1 * size;
       expect(pathResult).to.contain(
-        `M ${Math.round(x - baseSize / 2.5)}, ${Math.round(y + baseSize)}`
+        `M ${Math.floor(x - baseSize / 2.5)}, ${Math.floor(y + baseSize)}`
       );
     });
   });