Set Line shapeRendering to crisp edges if rectilinear (#840)

airbnb · Oct 6, 2020 · 806fb59 · 806fb59
1 parent 1dce7ae
commit 806fb59
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/packages/visx-shape/src/shapes/Line.tsx b/packages/visx-shape/src/shapes/Line.tsx
@@ -28,6 +28,7 @@ export default function Line({
   innerRef,
   ...restProps
 }: AddSVGProps<LineProps, SVGLineElement>) {
+  const isRectilinear = from.x === to.x || from.y === to.y;
   return (
     <line
       ref={innerRef}
@@ -37,6 +38,7 @@ export default function Line({
       x2={to.x}
       y2={to.y}
       fill={fill}
+      shapeRendering={isRectilinear ? 'crispEdges' : 'auto'}
       {...restProps}
     />
   );

diff --git a/packages/visx-shape/test/Line.test.tsx b/packages/visx-shape/test/Line.test.tsx
@@ -32,4 +32,35 @@ describe('<Line />', () => {
       );
     });
   });
+
+  test('it should set shapeRendering to auto if not rectilinear', () => {
+    expect(
+      LineWrapper({
+        to: {
+          x: 50,
+          y: 100,
+        },
+      }).prop('shapeRendering'),
+    ).toBe('auto');
+  });
+
+  test('it should set shapeRendering to crispEdges if rectilinear', () => {
+    expect(
+      LineWrapper({
+        to: {
+          x: 0,
+          y: 100,
+        },
+      }).prop('shapeRendering'),
+    ).toBe('crispEdges');
+
+    expect(
+      LineWrapper({
+        to: {
+          x: 100,
+          y: 0,
+        },
+      }).prop('shapeRendering'),
+    ).toBe('crispEdges');
+  });
 });