From ea5234593396e9663e65315f5b57eadb39b823bb Mon Sep 17 00:00:00 2001
From: Brent Hagen <brent.hagen@opentrons.com>
Date: Thu, 16 May 2024 14:45:19 -0400
Subject: [PATCH] add mouse events for local development

---
 .../organisms/WellSelection/SelectionRect.tsx | 43 ++++++++++++++-----
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/app/src/organisms/WellSelection/SelectionRect.tsx b/app/src/organisms/WellSelection/SelectionRect.tsx
index 69326635b70..2851518139e 100644
--- a/app/src/organisms/WellSelection/SelectionRect.tsx
+++ b/app/src/organisms/WellSelection/SelectionRect.tsx
@@ -24,14 +24,23 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     }
   }
 
-  const handleDrag = (e: TouchEvent): void => {
-    const touch = e.touches[0]
+  const handleDrag = (e: TouchEvent | MouseEvent): void => {
+    let xDynamic: number
+    let yDynamic: number
+    if (e instanceof TouchEvent) {
+      const touch = e.touches[0]
+      xDynamic = touch.clientX
+      yDynamic = touch.clientY
+    } else {
+      xDynamic = e.clientX
+      yDynamic = e.clientY
+    }
     setPositions(prevPositions => {
       if (prevPositions) {
         const nextRect = {
           ...prevPositions,
-          xDynamic: touch.clientX,
-          yDynamic: touch.clientY,
+          xDynamic,
+          yDynamic,
         }
         const rect = getRect(nextRect)
         onSelectionMove && onSelectionMove(rect)
@@ -42,8 +51,8 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     })
   }
 
-  const handleTouchEnd = (e: TouchEvent): void => {
-    if (!(e instanceof TouchEvent)) {
+  const handleDragEnd = (e: TouchEvent | MouseEvent): void => {
+    if (!(e instanceof TouchEvent) && !(e instanceof MouseEvent)) {
       return
     }
     const finalRect = positions && getRect(positions)
@@ -64,18 +73,32 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     })
   }
 
+  const handleMouseDown: React.MouseEventHandler = e => {
+    setPositions({
+      xStart: e.clientX,
+      xDynamic: e.clientX,
+      yStart: e.clientY,
+      yDynamic: e.clientY,
+    })
+  }
+
   React.useEffect(() => {
     document.addEventListener('touchmove', handleDrag)
-    document.addEventListener('touchend', handleTouchEnd)
+    document.addEventListener('touchend', handleDragEnd)
+    document.addEventListener('mousemove', handleDrag)
+    document.addEventListener('mouseup', handleDragEnd)
     return () => {
       document.removeEventListener('touchmove', handleDrag)
-      document.removeEventListener('touchend', handleTouchEnd)
+      document.removeEventListener('touchend', handleDragEnd)
+      document.removeEventListener('mousemove', handleDrag)
+      document.removeEventListener('mouseup', handleDragEnd)
     }
-  }, [handleDrag, handleTouchEnd])
+  }, [handleDrag, handleDragEnd])
 
   return (
     <div
-      // add mouse event for local development
+      // mouse events to enable local development
+      onMouseDown={handleMouseDown}
       onTouchStart={handleTouchStart}
       ref={ref => {
         parentRef.current = ref