From 0e56cd4f5647ff2d0b30fb48c1173d08fd755b82 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Thu, 16 Jan 2020 00:21:39 +0100
Subject: [PATCH] pan canvas on wheel button drag (#375)

* pan canvas on wheel button drag

* make mousemove passive
---
 src/index.tsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/index.tsx b/src/index.tsx
index 55834354c0..30f03466ff 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -627,6 +627,34 @@ export class App extends React.Component<{}, AppState> {
               // being in a weird state, we clean up on the next mousedown
               lastMouseUp(e);
             }
+
+            // pan canvas on wheel button drag
+            if (e.button === 1) {
+              let { clientX: lastX, clientY: lastY } = e;
+              const onMouseMove = (e: MouseEvent) => {
+                document.documentElement.style.cursor = `grabbing`;
+                let deltaX = lastX - e.clientX;
+                let deltaY = lastY - e.clientY;
+                lastX = e.clientX;
+                lastY = e.clientY;
+                this.setState(state => ({
+                  scrollX: state.scrollX - deltaX,
+                  scrollY: state.scrollY - deltaY
+                }));
+              };
+              const onMouseUp = (lastMouseUp = (e: MouseEvent) => {
+                lastMouseUp = null;
+                resetCursor();
+                window.removeEventListener("mousemove", onMouseMove);
+                window.removeEventListener("mouseup", onMouseUp);
+              });
+              window.addEventListener("mousemove", onMouseMove, {
+                passive: true
+              });
+              window.addEventListener("mouseup", onMouseUp);
+              return;
+            }
+
             // only handle left mouse button
             if (e.button !== 0) return;
             // fixes mousemove causing selection of UI texts #32