From efcfb376c41cea24d79de2e99a7bd6f29b2432c5 Mon Sep 17 00:00:00 2001 From: Elizaveta Guseva Date: Wed, 21 Aug 2024 17:23:14 +0200 Subject: [PATCH] attempted to fix brush issues not working on mobile. needs a little more testing --- packages/visx-brush/src/BaseBrush.tsx | 30 +++++++++++----------- packages/visx-brush/src/Brush.tsx | 16 ++++++------ packages/visx-brush/src/BrushSelection.tsx | 24 ++++++++--------- 3 files changed, 35 insertions(+), 35 deletions(-) diff --git a/packages/visx-brush/src/BaseBrush.tsx b/packages/visx-brush/src/BaseBrush.tsx index 1a11acb0f..e54e48031 100644 --- a/packages/visx-brush/src/BaseBrush.tsx +++ b/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; - 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 { - 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 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 { 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 { disableDraggingSelection, disableDraggingOverlay, resetOnEnd, - onMouseLeave, - onMouseMove, + onPointerLeave, + onPointerMove, onClick, handleSize, useWindowMoveEvents, @@ -251,8 +251,8 @@ class Brush extends Component { onBrushStart={this.handleBrushStart} onChange={this.handleChange} onClick={onClick} - onMouseLeave={onMouseLeave} - onMouseMove={onMouseMove} + onPointerLeave={onPointerLeave} + onPointerMove={onPointerMove} useWindowMoveEvents={useWindowMoveEvents} renderBrushHandle={renderBrushHandle} /> diff --git a/packages/visx-brush/src/BrushSelection.tsx b/packages/visx-brush/src/BrushSelection.tsx index 37b84b721..e51a543a5 100644 --- a/packages/visx-brush/src/BrushSelection.tsx +++ b/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; isControlled?: boolean; @@ -34,9 +34,9 @@ export default class BrushSelection extends React.Component< BrushSelectionProps & Omit, 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);