fix: #845 when brush is not responding to touch on mobile

packages/visx-brush/src/BaseBrush.tsx

@@ -33,9 +33,9 @@ export type BaseBrushProps = {
   onBrushStart?: (start: BaseBrushState['start']) => void;
   onBrushEnd?: (state: BaseBrushState) => void;
   selectedBoxStyle: React.SVGProps<SVGRectElement>;
-  onMouseLeave?: (event: PointerHandlerEvent) => void;
-  onMouseUp?: (event: PointerHandlerEvent) => void;
-  onMouseMove?: (event: PointerHandlerEvent) => void;
+  onPointerLeave?: (event: PointerHandlerEvent) => void;
+  onPointerUp?: (event: PointerHandlerEvent) => void;
+  onPointerMove?: (event: PointerHandlerEvent) => void;
   onClick?: (event: PointerHandlerEvent) => void;
   clickSensitivity: number;
   disableDraggingSelection: boolean;
@@ -100,9 +100,9 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
     resizeTriggerAreas: ['left', 'right'],
     onBrushStart: null,
     onBrushEnd: null,
-    onMouseLeave: null,
-    onMouseUp: null,
-    onMouseMove: null,
+    onPointerLeave: null,
+    onPointerUp: null,
+    onPointerMove: null,
     onClick: null,
     disableDraggingSelection: false,
     disableDraggingOverlay: false,
@@ -572,9 +572,9 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
       left,
       width: stageWidth,
       height: stageHeight,
-      onMouseLeave,
-      onMouseUp,
-      onMouseMove,
+      onPointerLeave,
+      onPointerUp,
+      onPointerMove,
       onBrushEnd,
       onClick,
       resizeTriggerAreas,
@@ -630,15 +630,15 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
                   dragStart(event);
                 }}
                 onPointerLeave={(event: PointerHandlerEvent) => {
-                  if (onMouseLeave) onMouseLeave(event);
+                  if (onPointerLeave) onPointerLeave(event);
                 }}
                 onPointerMove={(event: PointerHandlerEvent) => {
-                  if (!isDragging && onMouseMove) onMouseMove(event);
+                  if (!isDragging && onPointerMove) onPointerMove(event);
                   if (isDragging) dragMove(event);
                 }}
                 onPointerUp={(event: PointerHandlerEvent) => {
                   this.mouseUpTime = Date.now();
-                  if (onMouseUp) onMouseUp(event);
+                  if (onPointerUp) onPointerUp(event);
                   dragEnd(event);
                 }}
                 style={{ cursor: 'crosshair' }}
@@ -659,9 +659,9 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
             disableDraggingSelection={disableDraggingSelection}
             onBrushEnd={onBrushEnd}
             onBrushStart={this.handleBrushStart}
-            onMouseLeave={onMouseLeave}
-            onMouseMove={onMouseMove}
-            onMouseUp={onMouseUp}
+            onPointerLeave={onPointerLeave}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
             onMoveSelectionChange={this.handleBrushingTypeChange}
             onClick={onClick}
             selectedBoxStyle={selectedBoxStyle}

packages/visx-brush/src/Brush.tsx

@@ -32,9 +32,9 @@ export type BrushProps = {
   /** Callback invoked on mouse up when a Brush size is being updated. */
   onBrushEnd?: (bounds: Bounds | null) => void;
   /** Callback invoked on mouse move in Brush stage when *not* dragging. */
-  onMouseMove?: BaseBrushProps['onMouseMove'];
+  onPointerMove?: BaseBrushProps['onPointerMove'];
   /** Callback invoked on mouse leave from Brush stage when *not* dragging. */
-  onMouseLeave?: BaseBrushProps['onMouseLeave'];
+  onPointerLeave?: BaseBrushProps['onPointerLeave'];
   /** Callback invoked on Brush stage click. */
   onClick?: BaseBrushProps['onClick'];
   /** Margin subtracted from Brush stage dimensions. */
@@ -98,8 +98,8 @@ class Brush extends Component<BrushProps> {
     onBrushEnd: null,
     disableDraggingSelection: false,
     resetOnEnd: false,
-    onMouseMove: null,
-    onMouseLeave: null,
+    onPointerMove: null,
+    onPointerLeave: null,
     onClick: null,
     useWindowMoveEvents: false,
     renderBrushHandles: null,
@@ -186,8 +186,8 @@ class Brush extends Component<BrushProps> {
       disableDraggingSelection,
       disableDraggingOverlay,
       resetOnEnd,
-      onMouseLeave,
-      onMouseMove,
+      onPointerLeave,
+      onPointerMove,
       onClick,
       handleSize,
       useWindowMoveEvents,
@@ -251,8 +251,8 @@ class Brush extends Component<BrushProps> {
         onBrushStart={this.handleBrushStart}
         onChange={this.handleChange}
         onClick={onClick}
-        onMouseLeave={onMouseLeave}
-        onMouseMove={onMouseMove}
+        onPointerLeave={onPointerLeave}
+        onPointerMove={onPointerMove}
         useWindowMoveEvents={useWindowMoveEvents}
         renderBrushHandle={renderBrushHandle}
       />

packages/visx-brush/src/BrushSelection.tsx

@@ -21,9 +21,9 @@ export type BrushSelectionProps = {
   onBrushStart?: (brush: DragArgs) => void;
   onBrushEnd?: (brush: BrushState) => void;
   disableDraggingSelection: boolean;
-  onMouseLeave: PointerHandler;
-  onMouseMove: PointerHandler;
-  onMouseUp: PointerHandler;
+  onPointerLeave: PointerHandler;
+  onPointerMove: PointerHandler;
+  onPointerUp: PointerHandler;
   onClick: PointerHandler;
   selectedBoxStyle: React.SVGProps<SVGRectElement>;
   isControlled?: boolean;
@@ -34,9 +34,9 @@ export default class BrushSelection extends React.Component<
   BrushSelectionProps & Omit<React.SVGProps<SVGRectElement>, keyof BrushSelectionProps>
 > {
   static defaultProps = {
-    onMouseLeave: null,
-    onMouseUp: null,
-    onMouseMove: null,
+    onPointerLeave: null,
+    onPointerUp: null,
+    onPointerMove: null,
     onClick: null,
   };
 
@@ -122,9 +122,9 @@ export default class BrushSelection extends React.Component<
       stageHeight,
       brush,
       disableDraggingSelection,
-      onMouseLeave,
-      onMouseMove,
-      onMouseUp,
+      onPointerLeave,
+      onPointerMove,
+      onPointerUp,
       onClick,
       selectedBoxStyle,
       isControlled,
@@ -162,17 +162,17 @@ export default class BrushSelection extends React.Component<
               className="visx-brush-selection"
               onPointerDown={disableDraggingSelection ? undefined : dragStart}
               onPointerLeave={(event) => {
-                if (onMouseLeave) onMouseLeave(event);
+                if (onPointerLeave) onPointerLeave(event);
               }}
               onPointerMove={(event) => {
                 dragMove(event);
-                if (onMouseMove) onMouseMove(event);
+                if (onPointerMove) onPointerMove(event);
               }}
               onPointerUp={(event) => {
                 if (!isControlled) {
                   dragEnd(event);
                 }
-                if (onMouseUp) onMouseUp(event);
+                if (onPointerUp) onPointerUp(event);
               }}
               onClick={(event) => {
                 if (onClick) onClick(event as React.PointerEvent<SVGRectElement>);