[zoom] make wheel event active by default. fixes #455

packages/vx-demo/components/tiles/zoom-i.js

@@ -83,7 +83,6 @@ export default class ZoomI extends React.Component {
                     height={height}
                     rx={14}
                     fill="transparent"
-                    onWheel={zoom.handleWheel}
                     onTouchStart={zoom.dragStart}
                     onTouchMove={zoom.dragMove}
                     onTouchEnd={zoom.dragEnd}

packages/vx-demo/static/docs/vx-zoom.html

@@ -49,6 +49,7 @@ <h3 id="zoom-">&lt;Zoom /&gt;</h3>
 
 
 <p><a id="#Zoom__children" name="Zoom__children" href="#Zoom__children">#</a> <em>Zoom</em>.<strong>children</strong>&lt;func&gt; <code>required</code> </p>
+<p><a id="#Zoom__className" name="Zoom__className" href="#Zoom__className">#</a> <em>Zoom</em>.<strong>className</strong>&lt;string&gt;  <table><tr><td><strong>Default</strong></td><td>undefined</td></td></table></p>
 <p><a id="#Zoom__constrain" name="Zoom__constrain" href="#Zoom__constrain">#</a> <em>Zoom</em>.<strong>constrain</strong>&lt;func&gt; </p>
 <p>By default constrain() will only constrain scale values. To change
 constraints you can pass in your own constrain function as a prop.</p>
@@ -69,10 +70,18 @@ <h3 id="zoom-">&lt;Zoom /&gt;</h3>
 @param {matrix} prevTransformMatrix
 @returns {martix} </p>
 <p><a id="#Zoom__height" name="Zoom__height" href="#Zoom__height">#</a> <em>Zoom</em>.<strong>height</strong>&lt;number&gt; <code>required</code> </p>
+<p><a id="#Zoom__passive" name="Zoom__passive" href="#Zoom__passive">#</a> <em>Zoom</em>.<strong>passive</strong>&lt;bool&gt; </p>
+<p>By default passive is <code>false</code>. This will wrap <Zoom> children in a <div> and add an active wheel
+event listener (handleWheel). <code>handleWheel()</code> will call <code>event.preventDefault()</code> before other
+execution. This prevents an outer parent from scrolling when the mouse wheel is used to zoom.</p>
+<p>When passive is <code>true</code> it is required to add <code>&lt;MyComponent onWheel={zoom.handleWheel} /&gt;</code> to handle
+wheel events. <strong>Note:</strong> By default you do not need to add <code>&lt;MyComponent onWheel={zoom.handleWheel} /&gt;</code>.
+This is only necessary when <code>&lt;Zoom passive={true} /&gt;</code>. <table><tr><td><strong>Default</strong></td><td>false</td></td></table></p>
 <p><a id="#Zoom__scaleXMax" name="Zoom__scaleXMax" href="#Zoom__scaleXMax">#</a> <em>Zoom</em>.<strong>scaleXMax</strong>&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>Infinity</td></td></table></p>
 <p><a id="#Zoom__scaleXMin" name="Zoom__scaleXMin" href="#Zoom__scaleXMin">#</a> <em>Zoom</em>.<strong>scaleXMin</strong>&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table></p>
 <p><a id="#Zoom__scaleYMax" name="Zoom__scaleYMax" href="#Zoom__scaleYMax">#</a> <em>Zoom</em>.<strong>scaleYMax</strong>&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>Infinity</td></td></table></p>
 <p><a id="#Zoom__scaleYMin" name="Zoom__scaleYMin" href="#Zoom__scaleYMin">#</a> <em>Zoom</em>.<strong>scaleYMin</strong>&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table></p>
+<p><a id="#Zoom__style" name="Zoom__style" href="#Zoom__style">#</a> <em>Zoom</em>.<strong>style</strong>&lt;object&gt;  <table><tr><td><strong>Default</strong></td><td>undefined</td></td></table></p>
 <p><a id="#Zoom__transformMatrix" name="Zoom__transformMatrix" href="#Zoom__transformMatrix">#</a> <em>Zoom</em>.<strong>transformMatrix</strong>&lt;shape[object Object]&gt;  <table><tr><td><strong>Default</strong></td><td>{
   scaleX: 1,
   scaleY: 1,

packages/vx-zoom/Readme.md

@@ -28,6 +28,8 @@ npm install --save @vx/zoom
 
 <a id="#Zoom__children" name="Zoom__children" href="#Zoom__children">#</a> *Zoom*.**children**&lt;func&gt; `required` 
 
+<a id="#Zoom__className" name="Zoom__className" href="#Zoom__className">#</a> *Zoom*.**className**&lt;string&gt;  <table><tr><td><strong>Default</strong></td><td>undefined</td></td></table>
+
 <a id="#Zoom__constrain" name="Zoom__constrain" href="#Zoom__constrain">#</a> *Zoom*.**constrain**&lt;func&gt; 
 
 By default constrain() will only constrain scale values. To change
@@ -55,6 +57,16 @@ function constrain(transformMatrix, prevTransformMatrix) {
 
 <a id="#Zoom__height" name="Zoom__height" href="#Zoom__height">#</a> *Zoom*.**height**&lt;number&gt; `required` 
 
+<a id="#Zoom__passive" name="Zoom__passive" href="#Zoom__passive">#</a> *Zoom*.**passive**&lt;bool&gt; 
+
+By default passive is `false`. This will wrap <Zoom> children in a <div> and add an active wheel
+event listener (handleWheel). `handleWheel()` will call `event.preventDefault()` before other
+execution. This prevents an outer parent from scrolling when the mouse wheel is used to zoom.
+
+When passive is `true` it is required to add `<MyComponent onWheel={zoom.handleWheel} />` to handle
+wheel events. **Note:** By default you do not need to add `<MyComponent onWheel={zoom.handleWheel} />`.
+This is only necessary when `<Zoom passive={true} />`. <table><tr><td><strong>Default</strong></td><td>false</td></td></table>
+
 <a id="#Zoom__scaleXMax" name="Zoom__scaleXMax" href="#Zoom__scaleXMax">#</a> *Zoom*.**scaleXMax**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>Infinity</td></td></table>
 
 <a id="#Zoom__scaleXMin" name="Zoom__scaleXMin" href="#Zoom__scaleXMin">#</a> *Zoom*.**scaleXMin**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
@@ -63,6 +75,8 @@ function constrain(transformMatrix, prevTransformMatrix) {
 
 <a id="#Zoom__scaleYMin" name="Zoom__scaleYMin" href="#Zoom__scaleYMin">#</a> *Zoom*.**scaleYMin**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
 
+<a id="#Zoom__style" name="Zoom__style" href="#Zoom__style">#</a> *Zoom*.**style**&lt;object&gt;  <table><tr><td><strong>Default</strong></td><td>undefined</td></td></table>
+
 <a id="#Zoom__transformMatrix" name="Zoom__transformMatrix" href="#Zoom__transformMatrix">#</a> *Zoom*.**transformMatrix**&lt;shape[object Object]&gt;  <table><tr><td><strong>Default</strong></td><td>{
   scaleX: 1,
   scaleY: 1,

packages/vx-zoom/docs/api.md

@@ -4,6 +4,8 @@
 
 <a id="#Zoom__children" name="Zoom__children" href="#Zoom__children">#</a> *Zoom*.**children**&lt;func&gt; `required` 
 
+<a id="#Zoom__className" name="Zoom__className" href="#Zoom__className">#</a> *Zoom*.**className**&lt;string&gt;  <table><tr><td><strong>Default</strong></td><td>undefined</td></td></table>
+
 <a id="#Zoom__constrain" name="Zoom__constrain" href="#Zoom__constrain">#</a> *Zoom*.**constrain**&lt;func&gt; 
 
 By default constrain() will only constrain scale values. To change
@@ -31,6 +33,16 @@ function constrain(transformMatrix, prevTransformMatrix) {
 
 <a id="#Zoom__height" name="Zoom__height" href="#Zoom__height">#</a> *Zoom*.**height**&lt;number&gt; `required` 
 
+<a id="#Zoom__passive" name="Zoom__passive" href="#Zoom__passive">#</a> *Zoom*.**passive**&lt;bool&gt; 
+
+By default passive is `false`. This will wrap <Zoom> children in a <div> and add an active wheel
+event listener (handleWheel). `handleWheel()` will call `event.preventDefault()` before other
+execution. This prevents an outer parent from scrolling when the mouse wheel is used to zoom.
+
+When passive is `true` it is required to add `<MyComponent onWheel={zoom.handleWheel} />` to handle
+wheel events. **Note:** By default you do not need to add `<MyComponent onWheel={zoom.handleWheel} />`.
+This is only necessary when `<Zoom passive={true} />`. <table><tr><td><strong>Default</strong></td><td>false</td></td></table>
+
 <a id="#Zoom__scaleXMax" name="Zoom__scaleXMax" href="#Zoom__scaleXMax">#</a> *Zoom*.**scaleXMax**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>Infinity</td></td></table>
 
 <a id="#Zoom__scaleXMin" name="Zoom__scaleXMin" href="#Zoom__scaleXMin">#</a> *Zoom*.**scaleXMin**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
@@ -39,6 +51,8 @@ function constrain(transformMatrix, prevTransformMatrix) {
 
 <a id="#Zoom__scaleYMin" name="Zoom__scaleYMin" href="#Zoom__scaleYMin">#</a> *Zoom*.**scaleYMin**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
 
+<a id="#Zoom__style" name="Zoom__style" href="#Zoom__style">#</a> *Zoom*.**style**&lt;object&gt;  <table><tr><td><strong>Default</strong></td><td>undefined</td></td></table>
+
 <a id="#Zoom__transformMatrix" name="Zoom__transformMatrix" href="#Zoom__transformMatrix">#</a> *Zoom*.**transformMatrix**&lt;shape[object Object]&gt;  <table><tr><td><strong>Default</strong></td><td>{
   scaleX: 1,
   scaleY: 1,

packages/vx-zoom/docs/docs.md

@@ -28,6 +28,8 @@ npm install --save @vx/zoom
 
 <a id="#Zoom__children" name="Zoom__children" href="#Zoom__children">#</a> *Zoom*.**children**&lt;func&gt; `required` 
 
+<a id="#Zoom__className" name="Zoom__className" href="#Zoom__className">#</a> *Zoom*.**className**&lt;string&gt;  <table><tr><td><strong>Default</strong></td><td>undefined</td></td></table>
+
 <a id="#Zoom__constrain" name="Zoom__constrain" href="#Zoom__constrain">#</a> *Zoom*.**constrain**&lt;func&gt; 
 
 By default constrain() will only constrain scale values. To change
@@ -55,6 +57,16 @@ function constrain(transformMatrix, prevTransformMatrix) {
 
 <a id="#Zoom__height" name="Zoom__height" href="#Zoom__height">#</a> *Zoom*.**height**&lt;number&gt; `required` 
 
+<a id="#Zoom__passive" name="Zoom__passive" href="#Zoom__passive">#</a> *Zoom*.**passive**&lt;bool&gt; 
+
+By default passive is `false`. This will wrap <Zoom> children in a <div> and add an active wheel
+event listener (handleWheel). `handleWheel()` will call `event.preventDefault()` before other
+execution. This prevents an outer parent from scrolling when the mouse wheel is used to zoom.
+
+When passive is `true` it is required to add `<MyComponent onWheel={zoom.handleWheel} />` to handle
+wheel events. **Note:** By default you do not need to add `<MyComponent onWheel={zoom.handleWheel} />`.
+This is only necessary when `<Zoom passive={true} />`. <table><tr><td><strong>Default</strong></td><td>false</td></td></table>
+
 <a id="#Zoom__scaleXMax" name="Zoom__scaleXMax" href="#Zoom__scaleXMax">#</a> *Zoom*.**scaleXMax**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>Infinity</td></td></table>
 
 <a id="#Zoom__scaleXMin" name="Zoom__scaleXMin" href="#Zoom__scaleXMin">#</a> *Zoom*.**scaleXMin**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
@@ -63,6 +75,8 @@ function constrain(transformMatrix, prevTransformMatrix) {
 
 <a id="#Zoom__scaleYMin" name="Zoom__scaleYMin" href="#Zoom__scaleYMin">#</a> *Zoom*.**scaleYMin**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
 
+<a id="#Zoom__style" name="Zoom__style" href="#Zoom__style">#</a> *Zoom*.**style**&lt;object&gt;  <table><tr><td><strong>Default</strong></td><td>undefined</td></td></table>
+
 <a id="#Zoom__transformMatrix" name="Zoom__transformMatrix" href="#Zoom__transformMatrix">#</a> *Zoom*.**transformMatrix**&lt;shape[object Object]&gt;  <table><tr><td><strong>Default</strong></td><td>{
   scaleX: 1,
   scaleY: 1,

packages/vx-zoom/src/Zoom.js

@@ -41,6 +41,20 @@ class Zoom extends React.Component {
     this.toStringInvert = this.toStringInvert.bind(this);
   }
 
+  componentDidMount() {
+    const { passive } = this.props;
+    if (this.containerRef && !passive) {
+      this.containerRef.addEventListener('wheel', this.handleWheel, { passive: false });
+    }
+  }
+
+  componentWillUnmount() {
+    const { passive } = this.props;
+    if (this.containerRef && !passive) {
+      this.containerRef.removeEventListener('wheel', this.handleWheel, { passive: false });
+    }
+  }
+
   applyToPoint({ x, y }) {
     const { transformMatrix } = this.state;
     return applyMatrixToPoint(transformMatrix, { x, y });
@@ -146,7 +160,8 @@ class Zoom extends React.Component {
   }
 
   handleWheel(event) {
-    event.preventDefault();
+    const { passive } = this.props;
+    if (!passive) event.preventDefault();
     const { wheelDelta } = this.props;
     const point = localPoint(event);
     const { scaleX, scaleY } = wheelDelta(event);
@@ -174,7 +189,7 @@ class Zoom extends React.Component {
   }
 
   render() {
-    const { children } = this.props;
+    const { passive, children, style, className } = this.props;
     const zoom = {
       ...this.state,
       center: this.center,
@@ -196,6 +211,19 @@ class Zoom extends React.Component {
       applyToPoint: this.applyToPoint,
       applyInverseToPoint: this.applyInverseToPoint
     };
+    if (!passive) {
+      return (
+        <div
+          ref={c => {
+            this.containerRef = c;
+          }}
+          style={style}
+          className={className}
+        >
+          {children(zoom)}
+        </div>
+      );
+    }
     return children(zoom);
   }
 }
@@ -249,10 +277,23 @@ Zoom.propTypes = {
     translateY: PropTypes.number,
     skewX: PropTypes.number,
     skewY: PropTypes.number
-  })
+  }),
+  /**
+   * By default passive is `false`. This will wrap <Zoom> children in a <div> and add an active wheel
+   * event listener (handleWheel). `handleWheel()` will call `event.preventDefault()` before other
+   * execution. This prevents an outer parent from scrolling when the mouse wheel is used to zoom.
+   *
+   * When passive is `true` it is required to add `<MyComponent onWheel={zoom.handleWheel} />` to handle
+   * wheel events. **Note:** By default you do not need to add `<MyComponent onWheel={zoom.handleWheel} />`.
+   * This is only necessary when `<Zoom passive={true} />`.
+   */
+  passive: PropTypes.bool,
+  style: PropTypes.object,
+  className: PropTypes.string
 };
 
 Zoom.defaultProps = {
+  passive: false,
   scaleXMin: 0,
   scaleXMax: Infinity,
   scaleYMin: 0,
@@ -267,7 +308,9 @@ Zoom.defaultProps = {
   },
   wheelDelta: event => {
     return -event.deltaY > 0 ? { scaleX: 1.1, scaleY: 1.1 } : { scaleX: 0.9, scaleY: 0.9 };
-  }
+  },
+  style: undefined,
+  className: undefined
 };
 
 export default Zoom;