diff --git a/packages/visx-brush/src/BaseBrush.tsx b/packages/visx-brush/src/BaseBrush.tsx index d5088d546..eaa51c00c 100644 --- a/packages/visx-brush/src/BaseBrush.tsx +++ b/packages/visx-brush/src/BaseBrush.tsx @@ -405,6 +405,19 @@ export default class BaseBrush extends React.Component { + 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} /> )} diff --git a/packages/visx-brush/src/BrushHandle.tsx b/packages/visx-brush/src/BrushHandle.tsx index 03dcab37a..696de4240 100644 --- a/packages/visx-brush/src/BrushHandle.tsx +++ b/packages/visx-brush/src/BrushHandle.tsx @@ -144,6 +144,9 @@ export default class BrushHandle extends React.Component { onMouseDown={dragStart} onMouseMove={dragMove} onMouseUp={dragEnd} + onTouchStart={dragStart} + onTouchMove={dragMove} + onTouchEnd={dragEnd} style={{ cursor, pointerEvents: !!brush.activeHandle || !!brush.isBrushing ? 'none' : 'all', diff --git a/packages/visx-brush/src/BrushSelection.tsx b/packages/visx-brush/src/BrushSelection.tsx index 5dc028dee..cc1270fa2 100644 --- a/packages/visx-brush/src/BrushSelection.tsx +++ b/packages/visx-brush/src/BrushSelection.tsx @@ -122,6 +122,8 @@ export default class BrushSelection extends React.Component< onMouseUp={dragEnd} onMouseMove={dragMove} onMouseLeave={dragEnd} + onTouchMove={dragMove} + onTouchEnd={dragEnd} style={DRAGGING_OVERLAY_STYLES} /> )} @@ -146,6 +148,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', diff --git a/packages/visx-drag/src/Drag.tsx b/packages/visx-drag/src/Drag.tsx index 1ccd95971..498f57882 100644 --- a/packages/visx-drag/src/Drag.tsx +++ b/packages/visx-drag/src/Drag.tsx @@ -120,6 +120,8 @@ export default class Drag extends React.Component { height={height} onMouseMove={this.handleDragMove} onMouseUp={this.handleDragEnd} + onTouchMove={this.handleDragMove} + onTouchEnd={this.handleDragEnd} fill="transparent" /> )}