diff --git a/packages/visx-brush/src/BaseBrush.tsx b/packages/visx-brush/src/BaseBrush.tsx index f31886074..1a11acb0f 100644 --- a/packages/visx-brush/src/BaseBrush.tsx +++ b/packages/visx-brush/src/BaseBrush.tsx @@ -15,7 +15,7 @@ import { BrushingType, BrushPageOffset, } from './types'; -import { getPageCoordinates } from './utils'; +import { debounce, getPageCoordinates } from './utils'; type PointerHandlerEvent = React.PointerEvent; @@ -177,14 +177,14 @@ export default class BaseBrush extends React.Component, end: Partial) => { const { brushDirection, width, height } = this.props; const x0 = brushDirection === 'vertical' ? 0 : Math.min(start.x || 0, end.x || 0); diff --git a/packages/visx-brush/src/utils.ts b/packages/visx-brush/src/utils.ts index 2abd27445..7b02d9fc5 100644 --- a/packages/visx-brush/src/utils.ts +++ b/packages/visx-brush/src/utils.ts @@ -69,3 +69,14 @@ export function getPageCoordinates(event: MouseTouchOrPointerEvent) { pageY: pointerEvent.pageY, }; } + +// Tweaked from https://dev.to/cantem/how-to-write-a-debounce-function-1bdf +export function debounce(func: T, delay: number): (...args: any[]) => void { + let timeoutId: ReturnType; + return function debouncedFn(this: unknown, ...args: unknown[]) { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => { + func.apply(this, args); + }, delay); + }; +}