Make wheel listener active

Recently chrome changed the behavior of wheel listeners to be passive by default.  Passive listeners cannot cancel event propagation.  When a wheel event propagates outside of the canvas it can drastically slow down the browser as the parent elements try to compute whether or not they can scroll.  This change uses manual event listener management to add active listeners, which is inline w/ the behavior for chrome before version 73.

Test plan: use mousewheel. Notice there are no console.warn messages about passive listeners anymore.

Semver impact: this is semver patch.  Bugfix only.

Further reading: facebook/react#14856
facebook/react#6436

Author: brianc

packages/regl-worldview/src/camera/CameraListener.js

@@ -68,13 +68,19 @@ export default class CameraListener extends React.Component<Props> {
     };
     listen(document, "blur", this._onBlur);
     listen(window, "mouseup", this._onWindowMouseUp);
+    _el.addEventListener("wheel", this._onWheel, { passive: false });
   }
 
   componentWillUnmount() {
     this._listeners.forEach((listener) => {
       listener.target.removeEventListener(listener.name, listener.fn);
     });
     this._endDragging();
+    const { _el } = this;
+    if (!_el) {
+      return;
+    }
+    _el.removeEventListener("wheel", this._onWheel, { passive: false });
   }
 
   _getMouseOnScreen = (mouse: MouseEvent) => {
@@ -405,7 +411,6 @@ export default class CameraListener extends React.Component<Props> {
         ref={(el) => (this._el = el)}
         onMouseDown={this._onMouseDown}
         onMouseUp={this._onMouseUp}
-        onWheel={this._onWheel}
         onBlur={this._onBlur}
         onContextMenu={this._onContextMenu}
         onKeyDown={this._onKeyDown}