Add the ability to override pointerEvents on Annotations

airbnb · Sep 24, 2024 · 8f682b5 · 8f682b5
1 parent d920798
commit 8f682b5
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 6 deletions.
diff --git a/packages/visx-annotation/src/components/CircleSubject.tsx b/packages/visx-annotation/src/components/CircleSubject.tsx
@@ -6,6 +6,10 @@ import AnnotationContext from '../context/AnnotationContext';
 export type CircleSubjectProps = Pick<AnnotationContextType, 'x' | 'y'> & {
   /** Optional className to apply to CircleSubject in addition to 'visx-annotation-subject'. */
   className?: string;
+  /** Allows you to customize the pointerEvents attribute on the `<circle>` element.
+   * 
+   * Default: `"none"` */
+  pointerEvents?: React.SVGAttributes<SVGCircleElement>['pointerEvents'];
   /** Color of CircleSubject. */
   stroke?: string;
   /** Radius of CircleSubject. */
@@ -16,6 +20,7 @@ export default function CircleSubject({
   className,
   x: propsX,
   y: propsY,
+  pointerEvents = 'none',
   stroke = '#222',
   radius = 16,
   ...restProps
@@ -30,7 +35,7 @@ export default function CircleSubject({
       cy={propsY || annotationContext.y}
       r={radius}
       fill="transparent"
-      pointerEvents="none"
+      pointerEvents={pointerEvents}
       stroke={stroke}
       {...restProps}
     />

diff --git a/packages/visx-annotation/src/components/Connector.tsx b/packages/visx-annotation/src/components/Connector.tsx
@@ -14,7 +14,11 @@ export type ConnectorProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'
   /** Color of the connector line. */
   stroke?: string;
   /** Optional additional props. */
-  pathProps?: React.SVGProps<SVGPathElement>;
+  pathProps?: Omit<React.SVGProps<SVGPathElement>, 'pointerEvents'>;
+  /** Allows you to customize the pointerEvents attribute on the `<path>` element.
+   * 
+   * Default: `"none"` */
+  pointerEvents?: React.SVGAttributes<SVGPathElement>['pointerEvents'];
 };
 
 export default function Connector({
@@ -26,6 +30,7 @@ export default function Connector({
   type = 'elbow',
   stroke = '#222',
   pathProps,
+  pointerEvents = 'none',
 }: ConnectorProps) {
   // if props are provided, they take precedence over context
   const annotationContext = useContext(AnnotationContext);
@@ -63,7 +68,7 @@ export default function Connector({
       strokeWidth={1}
       stroke={stroke}
       fill="transparent"
-      pointerEvents="none"
+      pointerEvents={pointerEvents}
       d={`M${x0},${y0}${type === 'elbow' ? `L${x1},${y1}` : ''}L${x2},${y2}`}
       {...pathProps}
     />

diff --git a/packages/visx-annotation/src/components/HtmlLabel.tsx b/packages/visx-annotation/src/components/HtmlLabel.tsx
@@ -13,6 +13,7 @@ export type HtmlLabelProps = Pick<
   | 'anchorLineStroke'
   | 'className'
   | 'horizontalAnchor'
+  | 'pointerEvents'
   | 'resizeObserverPolyfill'
   | 'showAnchorLine'
   | 'verticalAnchor'
@@ -30,6 +31,7 @@ export default function HtmlLabel({
   className,
   containerStyle,
   horizontalAnchor: propsHorizontalAnchor,
+  pointerEvents = 'none',
   resizeObserverPolyfill,
   showAnchorLine = true,
   verticalAnchor: propsVerticalAnchor,
@@ -67,7 +69,7 @@ export default function HtmlLabel({
     <Group
       top={containerCoords.y}
       left={containerCoords.x}
-      pointerEvents="none"
+      pointerEvents={pointerEvents}
       className={cx('visx-annotationlabel', className)}
     >
       <foreignObject width={width} height={height} overflow="visible">

diff --git a/packages/visx-annotation/src/components/Label.tsx b/packages/visx-annotation/src/components/Label.tsx
@@ -21,6 +21,10 @@ export type LabelProps = {
   fontColor?: string;
   /** Whether the label is horizontally anchored to the start, middle, or end of its x position. */
   horizontalAnchor?: TextProps['textAnchor'];
+  /** Allows you to customize the pointerEvents attribute on the Group (`<g>`) wrapper of the Annotation.
+   * 
+   * Default: `"none"` */
+  pointerEvents?: React.SVGAttributes<SVGElement>['pointerEvents'];
   /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */
   resizeObserverPolyfill?: UseMeasureOptions['polyfill'];
   /** Whether to render a line indicating label text anchor. */
@@ -75,6 +79,7 @@ export default function Label({
   className,
   fontColor = '#222',
   horizontalAnchor: propsHorizontalAnchor,
+  pointerEvents = 'none',
   resizeObserverPolyfill,
   showAnchorLine = true,
   showBackground = true,
@@ -190,7 +195,7 @@ export default function Label({
     <Group
       top={containerCoords.y}
       left={containerCoords.x}
-      pointerEvents="none"
+      pointerEvents={pointerEvents}
       className={cx('visx-annotationlabel', className)}
       opacity={titleBounds.height === 0 && subtitleBounds.height === 0 ? 0 : 1}
     >

diff --git a/packages/visx-annotation/src/components/LineSubject.tsx b/packages/visx-annotation/src/components/LineSubject.tsx
@@ -11,6 +11,10 @@ export type LineSubjectProps = {
   strokeWidth?: number;
   /** Orientation of line. */
   orientation?: 'vertical' | 'horizontal';
+  /** Allows you to customize the pointerEvents attribute on the `<line>` element.
+   * 
+   * Default: `"none"` */
+  pointerEvents?: React.SVGAttributes<SVGLineElement>['pointerEvents'];
   /** x position of LineSubject (for vertical LineSubjects). */
   x?: number;
   /** y position of LineSubject (for horizontal LineSubjects). */
@@ -26,6 +30,7 @@ export default function LineSubject({
   x: propsX,
   y: propsY,
   orientation = 'vertical',
+  pointerEvents = 'none',
   min,
   max,
   stroke = '#222',
@@ -43,7 +48,7 @@ export default function LineSubject({
       y1={lineIsVertical ? min : propsY || annotationContext.y}
       y2={lineIsVertical ? max : propsY || annotationContext.y}
       fill="transparent"
-      pointerEvents="none"
+      pointerEvents={pointerEvents}
       stroke={stroke}
       {...restProps}
     />