add touch events for brush component

packages/visx-brush/src/BaseBrush.tsx

@@ -376,6 +376,7 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
           onDragMove={this.handleDragMove}
           onDragEnd={this.handleDragEnd}
         >
+          {/* resize */}
           {({ dragStart, isDragging, dragMove, dragEnd }) => (
             <Bar
               className="visx-brush-overlay"
@@ -405,6 +406,19 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
                 if (onMouseUp) onMouseUp(event);
                 dragEnd(event);
               }}
+              onTouchStart={(event: MouseHandlerEvent) => {
+                this.mouseDownTime = Date.now();
+                dragStart(event);
+              }}
+              onTouchMove={(event: MouseHandlerEvent) => {
+                if (!isDragging && onMouseMove) onMouseMove(event);
+                if (isDragging) dragMove(event);
+              }}
+              onTouchEnd={(event: MouseHandlerEvent) => {
+                this.mouseUpTime = Date.now();
+                if (onMouseUp) onMouseUp(event);
+                dragEnd(event);
+              }}
               style={BRUSH_OVERLAY_STYLES}
             />
           )}

packages/visx-brush/src/BrushHandle.tsx

@@ -144,6 +144,9 @@ export default class BrushHandle extends React.Component<BrushHandleProps> {
               onMouseDown={dragStart}
               onMouseMove={dragMove}
               onMouseUp={dragEnd}
+              onTouchStart={dragStart}
+              onTouchMove={dragMove}
+              onTouchEnd={dragEnd}
               style={{
                 cursor,
                 pointerEvents: !!brush.activeHandle || !!brush.isBrushing ? 'none' : 'all',

packages/visx-brush/src/BrushSelection.tsx

@@ -112,6 +112,7 @@ export default class BrushSelection extends React.Component<
         onDragMove={this.selectionDragMove}
         onDragEnd={this.selectionDragEnd}
       >
+        {/* location */}
         {({ isDragging, dragStart, dragEnd, dragMove }) => (
           <g>
             {isDragging && (
@@ -122,6 +123,8 @@ export default class BrushSelection extends React.Component<
                 onMouseUp={dragEnd}
                 onMouseMove={dragMove}
                 onMouseLeave={dragEnd}
+                onTouchMove={dragMove}
+                onTouchEnd={dragEnd}
                 style={DRAGGING_OVERLAY_STYLES}
               />
             )}
@@ -146,6 +149,15 @@ export default class BrushSelection extends React.Component<
               onClick={event => {
                 if (onClick) onClick(event);
               }}
+              onTouchStart={disableDraggingSelection ? undefined : dragStart}
+              onTouchMove={event => {
+                dragMove(event);
+                if (onMouseMove) onMouseMove(event);
+              }}
+              onTouchEnd={event => {
+                dragEnd(event);
+                if (onMouseUp) onMouseUp(event);
+              }}
               style={{
                 pointerEvents: brush.isBrushing || brush.activeHandle ? 'none' : 'all',
                 cursor: disableDraggingSelection ? undefined : 'move',

packages/visx-drag/src/Drag.tsx

@@ -120,6 +120,8 @@ export default class Drag extends React.Component<DragProps, DragState> {
             height={height}
             onMouseMove={this.handleDragMove}
             onMouseUp={this.handleDragEnd}
+            onTouchMove={this.handleDragMove}
+            onTouchEnd={this.handleDragEnd}
             fill="transparent"
           />
         )}