Fixed Unable to preventDefault errors in Chrome (#130)

* Fixed Unable to preventDefault errors in Chrome

* Cleanup wheel event listener

src/index.tsx

@@ -940,6 +940,8 @@ class App extends React.Component<{}, AppState> {
     this.forceUpdate();
   };
 
+  private removeWheelEventListener: (() => void) | undefined;
+
   public render() {
     return (
       <div
@@ -1110,13 +1112,18 @@ class App extends React.Component<{}, AppState> {
           id="canvas"
           width={window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT}
           height={window.innerHeight - CANVAS_WINDOW_OFFSET_TOP}
-          onWheel={e => {
+          ref={canvas => {
-            e.preventDefault();
+            if (this.removeWheelEventListener) {
-            const { deltaX, deltaY } = e;
+              this.removeWheelEventListener();
-            this.setState(state => ({
+              this.removeWheelEventListener = undefined;
-              scrollX: state.scrollX - deltaX,
+            }
-              scrollY: state.scrollY - deltaY
+            if (canvas) {
-            }));
+              canvas.addEventListener("wheel", this.handleWheel, {
+                passive: false
+              });
+              this.removeWheelEventListener = () =>
+                canvas.removeEventListener("wheel", this.handleWheel);
+            }
           }}
           onMouseDown={e => {
             // only handle left mouse button
@@ -1394,6 +1401,15 @@ class App extends React.Component<{}, AppState> {
     );
   }
 
+  private handleWheel = (e: WheelEvent) => {
+    e.preventDefault();
+    const { deltaX, deltaY } = e;
+    this.setState(state => ({
+      scrollX: state.scrollX - deltaX,
+      scrollY: state.scrollY - deltaY
+    }));
+  };
+
   componentDidUpdate() {
     renderScene(rc, context, {
       scrollX: this.state.scrollX,