From d70c524db17ae7b6f835d3655be6e503784cb797 Mon Sep 17 00:00:00 2001 From: Rema'a Bdair <57008402+RemaaBdair@users.noreply.github.com> Date: Tue, 13 Apr 2021 23:18:48 +0300 Subject: [PATCH] fix(brush): use PointerEvents instead of MouseEvents (#1155) * change mouse events to pointer events * simplify type to React.PointerEvent Co-authored-by: Remaa --- packages/visx-brush/src/BaseBrush.tsx | 22 ++++++++--------- packages/visx-brush/src/BrushHandle.tsx | 6 ++--- packages/visx-brush/src/BrushSelection.tsx | 28 ++++++++++------------ packages/visx-drag/src/Drag.tsx | 4 ++-- 4 files changed, 28 insertions(+), 32 deletions(-) diff --git a/packages/visx-brush/src/BaseBrush.tsx b/packages/visx-brush/src/BaseBrush.tsx index d5088d546..d7d33dff3 100644 --- a/packages/visx-brush/src/BaseBrush.tsx +++ b/packages/visx-brush/src/BaseBrush.tsx @@ -10,9 +10,7 @@ import { MarginShape, Point, BrushShape, ResizeTriggerAreas, PartialBrushStartEn const BRUSH_OVERLAY_STYLES = { cursor: 'crosshair' }; -type MouseHandlerEvent = - | React.MouseEvent - | React.TouchEvent; +type PointerHandlerEvent = React.PointerEvent; export type BaseBrushProps = { brushDirection?: 'horizontal' | 'vertical' | 'both'; @@ -28,10 +26,10 @@ export type BaseBrushProps = { onBrushStart?: (start: BaseBrushState['start']) => void; onBrushEnd?: (state: BaseBrushState) => void; selectedBoxStyle: React.SVGProps; - 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 +383,22 @@ export default class BaseBrush extends React.Component 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); diff --git a/packages/visx-brush/src/BrushHandle.tsx b/packages/visx-brush/src/BrushHandle.tsx index 03dcab37a..3a859ba45 100644 --- a/packages/visx-brush/src/BrushHandle.tsx +++ b/packages/visx-brush/src/BrushHandle.tsx @@ -141,9 +141,9 @@ export default class BrushHandle extends React.Component { 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', diff --git a/packages/visx-brush/src/BrushSelection.tsx b/packages/visx-brush/src/BrushSelection.tsx index 5dc028dee..fd0ab708e 100644 --- a/packages/visx-brush/src/BrushSelection.tsx +++ b/packages/visx-brush/src/BrushSelection.tsx @@ -5,9 +5,7 @@ import { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush'; const DRAGGING_OVERLAY_STYLES = { cursor: 'move' }; -type MouseHandler = ( - event: React.MouseEvent | React.TouchEvent, -) => void; +type PointerHandler = (event: React.PointerEvent) => void; export type BrushSelectionProps = { width: number; @@ -18,10 +16,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; }; @@ -119,9 +117,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,20 +129,20 @@ 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); }} onClick={event => { - if (onClick) onClick(event); + if (onClick) onClick(event as React.PointerEvent); }} style={{ pointerEvents: brush.isBrushing || brush.activeHandle ? 'none' : 'all', diff --git a/packages/visx-drag/src/Drag.tsx b/packages/visx-drag/src/Drag.tsx index 631023258..2e6257287 100644 --- a/packages/visx-drag/src/Drag.tsx +++ b/packages/visx-drag/src/Drag.tsx @@ -37,8 +37,8 @@ export default function Drag({ )}