Skip to content

Commit

Permalink
Make wheel listener active
Browse files Browse the repository at this point in the history
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
  • Loading branch information
brianc committed Apr 12, 2019
1 parent 7bd8c38 commit 92f5515
Showing 1 changed file with 6 additions and 1 deletion.
7 changes: 6 additions & 1 deletion packages/regl-worldview/src/camera/CameraListener.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit 92f5515

Please sign in to comment.