From 33e6814fceb739d8ed219ad1e2fa010e447d6f42 Mon Sep 17 00:00:00 2001
From: Rob Watson <rob@netflux.io>
Date: Tue, 23 Nov 2021 14:06:50 +0100
Subject: [PATCH] Handle mouseUp event outside of Overview component

---
 frontend/src/App.tsx      |  4 ++--
 frontend/src/Overview.tsx | 12 +++++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index aa47fb9..9cf8787 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -158,8 +158,8 @@ function App(): JSX.Element {
             height={80}
             position={position}
             selection={viewport}
-            onSelectionStart={(x1: number) => {
-              console.log('onSelectionStart', x1);
+            onSelectionStart={() => {
+              // empty
             }}
             onSelectionChange={handleOverviewSelectionChange}
           />
diff --git a/frontend/src/Overview.tsx b/frontend/src/Overview.tsx
index 122fe86..3490878 100644
--- a/frontend/src/Overview.tsx
+++ b/frontend/src/Overview.tsx
@@ -46,6 +46,17 @@ export const Overview: React.FC<Props> = ({
 
   // effects
 
+  // handle global mouse up.
+  // Currently this adds and removes the global event listener every time the
+  // component is rerendered (which is often when dragging or redrawing). It
+  // works but probably better to optimize this for performance reasons.
+  useEffect(() => {
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [mode, newSelection]);
+
   // load peaks on mediaset change
   useEffect(() => {
     (async function () {
@@ -244,7 +255,6 @@ export const Overview: React.FC<Props> = ({
           style={hudCanvasStyles}
           onMouseDown={handleMouseDown}
           onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
         ></canvas>
       </div>
     </>