fix(brush): use PointerEvents instead of MouseEvents

packages/visx-brush/src/BaseBrush.tsx

@@ -10,9 +10,10 @@ import { MarginShape, Point, BrushShape, ResizeTriggerAreas, PartialBrushStartEn
 
 const BRUSH_OVERLAY_STYLES = { cursor: 'crosshair' };
 
-type MouseHandlerEvent =
+type PointerHandlerEvent =
   | React.MouseEvent<SVGRectElement, MouseEvent>
-  | React.TouchEvent<SVGRectElement>;
+  | React.TouchEvent<SVGRectElement>
+  | React.PointerEvent<SVGRectElement>;
 
 export type BaseBrushProps = {
   brushDirection?: 'horizontal' | 'vertical' | 'both';
@@ -28,10 +29,10 @@ export type BaseBrushProps = {
   onBrushStart?: (start: BaseBrushState['start']) => void;
   onBrushEnd?: (state: BaseBrushState) => void;
   selectedBoxStyle: React.SVGProps<SVGRectElement>;
-  onMouseLeave?: (event: MouseHandlerEvent) => void;
-  onMouseUp?: (event: MouseHandlerEvent) => void;
-  onMouseMove?: (event: MouseHandlerEvent) => void;
-  onClick?: (event: MouseHandlerEvent) => void;
+  onMouseLeave?: (event: PointerHandlerEvent) => void;
+  onMouseUp?: (event: PointerHandlerEvent) => void;
+  onMouseMove?: (event: PointerHandlerEvent) => void;
+  onClick?: (event: PointerHandlerEvent) => void;
   clickSensitivity: number;
   disableDraggingSelection: boolean;
   resetOnEnd?: boolean;
@@ -385,22 +386,22 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
               width={stageWidth}
               height={stageHeight}
               onDoubleClick={() => this.reset()}
-              onClick={(event: MouseHandlerEvent) => {
+              onClick={(event: PointerHandlerEvent) => {
                 const duration = this.mouseUpTime - this.mouseDownTime;
                 if (onClick && duration < clickSensitivity) onClick(event);
               }}
-              onMouseDown={(event: MouseHandlerEvent) => {
+              onPointerDown={(event: PointerHandlerEvent) => {
                 this.mouseDownTime = Date.now();
                 dragStart(event);
               }}
-              onMouseLeave={(event: MouseHandlerEvent) => {
+              onPointerLeave={(event: PointerHandlerEvent) => {
                 if (onMouseLeave) onMouseLeave(event);
               }}
-              onMouseMove={(event: MouseHandlerEvent) => {
+              onPointerMove={(event: PointerHandlerEvent) => {
                 if (!isDragging && onMouseMove) onMouseMove(event);
                 if (isDragging) dragMove(event);
               }}
-              onMouseUp={(event: MouseHandlerEvent) => {
+              onPointerUp={(event: PointerHandlerEvent) => {
                 this.mouseUpTime = Date.now();
                 if (onMouseUp) onMouseUp(event);
                 dragEnd(event);

packages/visx-brush/src/BrushHandle.tsx

@@ -141,9 +141,9 @@ export default class BrushHandle extends React.Component<BrushHandleProps> {
               height={height}
               fill="transparent"
               className={`visx-brush-handle-${type}`}
-              onMouseDown={dragStart}
-              onMouseMove={dragMove}
-              onMouseUp={dragEnd}
+              onPointerDown={dragStart}
+              onPointerMove={dragMove}
+              onPointerUp={dragEnd}
               style={{
                 cursor,
                 pointerEvents: !!brush.activeHandle || !!brush.isBrushing ? 'none' : 'all',

packages/visx-brush/src/BrushSelection.tsx

@@ -5,8 +5,8 @@ import { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush';
 
 const DRAGGING_OVERLAY_STYLES = { cursor: 'move' };
 
-type MouseHandler = (
-  event: React.MouseEvent<SVGRectElement, MouseEvent> | React.TouchEvent<SVGRectElement>,
+type PointerHandler = (
+  event: React.MouseEvent<SVGRectElement, MouseEvent> | React.TouchEvent<SVGRectElement> | React.PointerEvent<SVGRectElement>,
 ) => void;
 
 export type BrushSelectionProps = {
@@ -18,10 +18,10 @@ export type BrushSelectionProps = {
   updateBrush: (update: UpdateBrush) => void;
   onBrushEnd?: (brush: BrushState) => void;
   disableDraggingSelection: boolean;
-  onMouseLeave: MouseHandler;
-  onMouseMove: MouseHandler;
-  onMouseUp: MouseHandler;
-  onClick: MouseHandler;
+  onMouseLeave: PointerHandler;
+  onMouseMove: PointerHandler;
+  onMouseUp: PointerHandler;
+  onClick: PointerHandler;
   selectedBoxStyle: React.SVGProps<SVGRectElement>;
 };
 
@@ -119,9 +119,9 @@ export default class BrushSelection extends React.Component<
                 width={stageWidth}
                 height={stageHeight}
                 fill="transparent"
-                onMouseUp={dragEnd}
-                onMouseMove={dragMove}
-                onMouseLeave={dragEnd}
+                onPointerUp={dragEnd}
+                onPointerMove={dragMove}
+                onPointerLeave={dragEnd}
                 style={DRAGGING_OVERLAY_STYLES}
               />
             )}
@@ -131,15 +131,15 @@ export default class BrushSelection extends React.Component<
               width={width}
               height={height}
               className="visx-brush-selection"
-              onMouseDown={disableDraggingSelection ? undefined : dragStart}
-              onMouseLeave={event => {
+              onPointerDown={disableDraggingSelection ? undefined : dragStart}
+              onPointerLeave={event => {
                 if (onMouseLeave) onMouseLeave(event);
               }}
-              onMouseMove={event => {
+              onPointerMove={event => {
                 dragMove(event);
                 if (onMouseMove) onMouseMove(event);
               }}
-              onMouseUp={event => {
+              onPointerUp={event => {
                 dragEnd(event);
                 if (onMouseUp) onMouseUp(event);
               }}

packages/visx-drag/src/Drag.tsx

@@ -37,8 +37,8 @@ export default function Drag({
         <rect
           width={width}
           height={height}
-          onMouseMove={drag.dragMove}
-          onMouseUp={drag.dragEnd}
+          onPointerMove={drag.dragMove}
+          onPointerUp={drag.dragEnd}
           fill="transparent"
         />
       )}