feat(marker): add MarkerCircle2, same as Circle but default refX to mid point instead of zero. fixes #1756

packages/visx-demo/src/sandboxes/visx-curve/Example.tsx

@@ -4,7 +4,7 @@ import * as allCurves from '@visx/curve';
 import { Group } from '@visx/group';
 import { LinePath } from '@visx/shape';
 import { scaleTime, scaleLinear } from '@visx/scale';
-import { MarkerArrow, MarkerCross, MarkerX, MarkerCircle, MarkerLine } from '@visx/marker';
+import { MarkerArrow, MarkerCross, MarkerX, MarkerCircle2, MarkerLine } from '@visx/marker';
 import generateDateValue, { DateValue } from '@visx/mock-data/lib/generators/genDateValue';
 
 type CurveType = keyof typeof allCurves;
@@ -89,7 +89,7 @@ export default function Example({ width, height, showControls = true }: CurvePro
           strokeOpacity={0.6}
           markerUnits="userSpaceOnUse"
         />
-        <MarkerCircle id="marker-circle" fill="#333" size={2} refX={2} />
+        <MarkerCircle2 id="marker-circle" fill="#333" size={2} />
         <MarkerArrow id="marker-arrow-odd" stroke="#333" size={8} strokeWidth={1} />
         <MarkerLine id="marker-line" fill="#333" size={16} strokeWidth={1} />
         <MarkerArrow id="marker-arrow" fill="#333" refX={2} size={6} />

packages/visx-marker/src/index.ts

@@ -3,4 +3,5 @@ export { default as MarkerArrow } from './markers/Arrow';
 export { default as MarkerCross } from './markers/Cross';
 export { default as MarkerX } from './markers/X';
 export { default as MarkerCircle } from './markers/Circle';
+export { default as MarkerCircle2 } from './markers/Circle2';
 export { default as MarkerLine } from './markers/Line';

packages/visx-marker/src/markers/Circle2.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Marker, { MarkerComponentProps } from './Marker';
+
+export default function MarkerCircle2({
+  id,
+  size = 9,
+  strokeWidth = 1,
+  ...restProps
+}: MarkerComponentProps) {
+  const diameter = size * 2;
+  const bounds = diameter + strokeWidth;
+  const mid = bounds / 2;
+  return (
+    <Marker
+      id={id}
+      markerWidth={bounds}
+      markerHeight={bounds}
+      refX={mid}
+      refY={mid}
+      orient="auto-start-reverse"
+      markerUnits="strokeWidth"
+      strokeWidth={strokeWidth}
+      {...restProps}
+    >
+      <circle r={size} cx={mid} cy={mid} />
+    </Marker>
+  );
+}

packages/visx-marker/test/Circle2.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { MarkerCircle2, Marker } from '../src';
+
+const Wrapper = (restProps = {}) =>
+  shallow(<MarkerCircle2 id="marker-circle-test" {...restProps} />);
+
+describe('<MarkerCircle />', () => {
+  test('it should be defined', () => {
+    expect(MarkerCircle2).toBeDefined();
+  });
+
+  test('it should render a <Marker> containing a <circle>', () => {
+    const marker = Wrapper().find(Marker);
+    const circle = marker.dive().find('circle');
+    expect(marker).toHaveLength(1);
+    expect(circle).toHaveLength(1);
+  });
+
+  test('it should size correctly', () => {
+    const size = 8;
+    const strokeWidth = 1;
+    const marker = Wrapper({ size, strokeWidth }).find(Marker);
+    const circle = marker.dive().find('circle');
+    const diameter = size * 2;
+    const bounds = diameter + strokeWidth;
+    const mid = bounds / 2;
+    expect(marker.prop('markerWidth')).toEqual(bounds);
+    expect(marker.prop('markerHeight')).toEqual(bounds);
+    expect(marker.prop('refX')).toEqual(mid);
+    expect(marker.prop('refY')).toEqual(mid);
+    expect(circle.prop('r')).toEqual(size);
+    expect(circle.prop('cx')).toEqual(mid);
+    expect(circle.prop('cy')).toEqual(mid);
+  });
+});