Listen to mouse move events when dragging offscreen (#116)

MLH-Fellowship · Aug 5, 2020 · fe1c11d · fe1c11d
1 parent 7f65c60
commit fe1c11d
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/useCanvasInteraction.js b/src/useCanvasInteraction.js
@@ -113,7 +113,7 @@ export function useCanvasInteraction(
       });
     };
 
-    const onCanvasMouseMove: MouseEventHandler = event => {
+    const onDocumentMouseMove: MouseEventHandler = event => {
       interactor({
         type: 'mousemove',
         payload: {
@@ -174,18 +174,18 @@ export function useCanvasInteraction(
       return false;
     };
 
+    document.addEventListener('mousemove', onDocumentMouseMove);
     document.addEventListener('mouseup', onDocumentMouseUp);
 
-    canvas.addEventListener('wheel', onCanvasWheel);
     canvas.addEventListener('mousedown', onCanvasMouseDown);
-    canvas.addEventListener('mousemove', onCanvasMouseMove);
+    canvas.addEventListener('wheel', onCanvasWheel);
 
     return () => {
+      document.removeEventListener('mousemove', onDocumentMouseMove);
       document.removeEventListener('mouseup', onDocumentMouseUp);
 
-      canvas.removeEventListener('wheel', onCanvasWheel);
       canvas.removeEventListener('mousedown', onCanvasMouseDown);
-      canvas.removeEventListener('mousemove', onCanvasMouseMove);
+      canvas.removeEventListener('wheel', onCanvasWheel);
     };
   }, [canvasRef, interactor]);
 }