Migrate onWheel event to be non-passive, which fixes #141 (#158)

* Migrate onWheel event to be non-passive, which fixes #141

* cleanup

* Convert onWheel to a real method instead of arrow-function instrance property.

Author: krnlde

src/viewer.js

@@ -82,6 +82,7 @@ export default class ReactSVGPanZoom extends React.Component {
       defaultValue
     }
     this.autoPanLoop = this.autoPanLoop.bind(this);
+    this.onWheel = this.onWheel.bind(this);
 
     if (process.env.NODE_ENV !== 'production') {
       printMigrationTipsRelatedToProps(props)
@@ -145,10 +146,12 @@ export default class ReactSVGPanZoom extends React.Component {
   componentDidMount() {
     this.autoPanIsRunning = true;
     requestAnimationFrame(this.autoPanLoop);
+    this.ViewerDOM.addEventListener('wheel', this.onWheel, false);
   }
 
   componentWillUnmount() {
     this.autoPanIsRunning = false;
+    this.ViewerDOM.removeEventListener('wheel', this.onWheel);
   }
 
   /** ReactSVGPanZoom handlers **/
@@ -257,6 +260,11 @@ export default class ReactSVGPanZoom extends React.Component {
     }
   }
 
+  onWheel(event) {
+    let nextValue = onWheel(event, this.ViewerDOM, this.getTool(), this.getValue(), this.props);
+    if (this.getValue() !== nextValue) this.setValue(nextValue);
+  }
+
   /** React renderer **/
   render() {
     let {props, state: {pointerX, pointerY}} = this;
@@ -330,11 +338,6 @@ export default class ReactSVGPanZoom extends React.Component {
             this.handleViewerEvent(event);
           }}
 
-          onWheel={event => {
-            let nextValue = onWheel(event, this.ViewerDOM, this.getTool(), this.getValue(), this.props);
-            if (this.getValue() !== nextValue) this.setValue(nextValue);
-          }}
-
           onMouseEnter={event => {
             if (detectTouch()) return;
             let nextValue = onMouseEnterOrLeave(event, this.ViewerDOM, this.getTool(), this.getValue(), this.props);