From 07e814a30650a6662ca39ebd344b2c84488dcb47 Mon Sep 17 00:00:00 2001
From: tfineberg4 <166535835+tfineberg4@users.noreply.github.com>
Date: Fri, 24 May 2024 07:46:21 -0600
Subject: [PATCH] brush: fix brush jumping around after mouseup (#1836)

---
 packages/visx-brush/src/BaseBrush.tsx |  8 +++++---
 packages/visx-brush/src/utils.ts      | 11 +++++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

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<SVGRectElement>;
 
@@ -177,14 +177,14 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
   componentDidMount() {
     if (this.props.useWindowMoveEvents) {
       window.addEventListener('mouseup', this.handleWindowPointerUp);
-      window.addEventListener('mousemove', this.handleWindowPointerMove);
+      window.addEventListener('mousemove', this.debouncedHandleWindowPointerMove);
     }
   }
 
   componentWillUnmount() {
     if (this.props.useWindowMoveEvents) {
       window.removeEventListener('mouseup', this.handleWindowPointerUp);
-      window.removeEventListener('mousemove', this.handleWindowPointerMove);
+      window.removeEventListener('mousemove', this.debouncedHandleWindowPointerMove);
     }
   }
 
@@ -320,6 +320,8 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
     }
   };
 
+  debouncedHandleWindowPointerMove = debounce(this.handleWindowPointerMove, 1);
+
   getExtent = (start: Partial<Point>, end: Partial<Point>) => {
     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<T extends Function>(func: T, delay: number): (...args: any[]) => void {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  return function debouncedFn(this: unknown, ...args: unknown[]) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+}