Make scrollZoom config option a flaglist

src/plot_api/plot_api.js

@@ -507,6 +507,25 @@ function setPlotContext(gd, config) {
  // Check if gd has a specified widht/height to begin with
  context._hasZeroHeight = context._hasZeroHeight || gd.clientHeight === 0;
  context._hasZeroWidth = context._hasZeroWidth || gd.clientWidth === 0;
+
+ // fill context._scrollZoom helper to help manage scrollZoom flaglist
+ var szIn = context.scrollZoom;
+ var szOut = context._scrollZoom = {};
+ if(szIn === true) {
+ szOut.cartesian = 1;
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ } else if(typeof szIn === 'string') {
+ var parts = szIn.split('+');
+ for(i = 0; i < parts.length; i++) {
+ szOut[parts[i]] = 1;
+ }
+ } else if(szIn !== false) {
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ }
 }
 
 function plotLegacyPolar(gd, data, layout) {

src/plot_api/plot_config.js

@@ -145,11 +145,16 @@ var configAttributes = {
  },
 
  scrollZoom: {
- valType: 'boolean',
- dflt: false,
+ valType: 'flaglist',
+ flags: ['cartesian', 'gl3d', 'geo', 'mapbox'],
+ extras: [true, false],
+ dflt: 'gl3d+geo+mapbox',
  description: [
- 'Determines whether mouse wheel or two-finger scroll zooms is',
- 'enable. Has an effect only on cartesian subplots.'
+ 'Determines whether mouse wheel or two-finger scroll zooms is enable.',
+ 'Turned on by default for gl3d, geo and mapbox subplots',
+ '(as these subplot types do not have zoombox via pan),',
+ 'but turned off by default for cartesian subplots.',
+ 'Set `scrollZoom` to *false* to disable scrolling for all subplots.'
  ].join(' ')
  },
  doubleClick: {

src/plots/cartesian/dragbox.js

@@ -417,7 +417,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
  // deactivate mousewheel scrolling on embedded graphs
  // devs can override this with layout._enablescrollzoom,
  // but _ ensures this setting won't leave their page
- if(!gd._context.scrollZoom && !gd._fullLayout._enablescrollzoom) {
+ if(!gd._context._scrollZoom.cartesian && !gd._fullLayout._enablescrollzoom) {
  return;
  }
 

src/plots/geo/geo.js

@@ -420,6 +420,9 @@ proto.updateFx = function(fullLayout, geoLayout) {
  bgRect.node().onmousedown = null;
  bgRect.call(createGeoZoom(_this, geoLayout));
  bgRect.on('dblclick.zoom', zoomReset);
+ if(!gd._context._scrollZoom.geo) {
+ bgRect.on('wheel.zoom', null);
+ }
  }
  else if(dragMode === 'select' || dragMode === 'lasso') {
  bgRect.on('.zoom', null);

src/plots/gl2d/scene2d.js

@@ -38,7 +38,7 @@ function Scene2D(options, fullLayout) {
  this.pixelRatio = options.plotGlPixelRatio || window.devicePixelRatio;
  this.id = options.id;
  this.staticPlot = !!options.staticPlot;
- this.scrollZoom = this.graphDiv._context.scrollZoom;
+ this.scrollZoom = this.graphDiv._context._scrollZoom.cartesian;
 
  this.fullData = null;
  this.updateRefs(fullLayout);

src/plots/gl3d/camera.js

@@ -48,6 +48,7 @@ function createCamera(element, options) {
 
  var camera = {
  keyBindingMode: 'rotate',
+ enableWheel: true,
  view: view,
  element: element,
  delay: options.delay || 16,
@@ -257,7 +258,9 @@ function createCamera(element, options) {
  }
 
  camera.wheelListener = mouseWheel(element, function(dx, dy) {
+ // TODO remove now that we can disable scroll via scrollZoom?
  if(camera.keyBindingMode === false) return;
+ if(!camera.enableWheel) return;
 
  var flipX = camera.flipX ? 1 : -1;
  var flipY = camera.flipY ? 1 : -1;

src/plots/gl3d/scene.js

@@ -227,8 +227,15 @@ function initializeGLPlot(scene, canvas, gl) {
  scene.graphDiv.emit('plotly_relayout', update);
  };
 
- scene.glplot.canvas.addEventListener('mouseup', relayoutCallback.bind(null, scene));
- scene.glplot.canvas.addEventListener('wheel', relayoutCallback.bind(null, scene), passiveSupported ? {passive: false} : false);
+ scene.glplot.canvas.addEventListener('mouseup', function() {
+ relayoutCallback(scene);
+ });
+
+ scene.glplot.canvas.addEventListener('wheel', function() {
+ if(gd._context._scrollZoom.gl3d) {
+ relayoutCallback(scene);
+ }
+ }, passiveSupported ? {passive: false} : false);
 
  if(!scene.staticMode) {
  scene.glplot.canvas.addEventListener('webglcontextlost', function(event) {
@@ -385,7 +392,6 @@ function computeTraceBounds(scene, trace, bounds) {
 }
 
 proto.plot = function(sceneData, fullLayout, layout) {
-
  // Save parameters
  this.plotArgs = [sceneData, fullLayout, layout];
 
@@ -412,6 +418,7 @@ proto.plot = function(sceneData, fullLayout, layout) {
  // Update camera and camera mode
  this.setCamera(fullSceneLayout.camera);
  this.updateFx(fullSceneLayout.dragmode, fullSceneLayout.hovermode);
+ this.camera.enableWheel = this.graphDiv._context._scrollZoom.gl3d;
 
  // Update scene
  this.glplot.update({});
@@ -776,7 +783,6 @@ proto.updateFx = function(dragmode, hovermode) {
  fullCamera.up = zUp;
  Lib.nestedProperty(layout, attr).set(zUp);
  } else {
-
  // none rotation modes [pan or zoom]
  camera.keyBindingMode = dragmode;
  }

src/plots/mapbox/mapbox.js

@@ -258,6 +258,12 @@ proto.updateMap = function(calcData, fullLayout, resolve, reject) {
  self.updateLayout(fullLayout);
  self.resolveOnRender(resolve);
  }
+
+ if(this.gd._context._scrollZoom.mapbox) {
+ map.scrollZoom.enable();
+ } else {
+ map.scrollZoom.disable();
+ }
 };
 
 proto.updateData = function(calcData) {

test/jasmine/tests/config_test.js

@@ -760,4 +760,63 @@ describe('config argument', function() {
  .then(done);
  });
  });
+
+ describe('scrollZoom:', function() {
+ var gd;
+
+ beforeEach(function() { gd = createGraphDiv(); });
+
+ afterEach(destroyGraphDiv);
+
+ function plot(config) {
+ return Plotly.plot(gd, [], {}, config);
+ }
+
+ it('should fill in scrollZoom default', function(done) {
+ plot(undefined).then(function() {
+ expect(gd._context.scrollZoom).toBe('gl3d+geo+mapbox');
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should fill in blank scrollZoom value', function(done) {
+ plot({scrollZoom: null}).then(function() {
+ expect(gd._context.scrollZoom).toBe(null);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:true', function(done) {
+ plot({scrollZoom: true}).then(function() {
+ expect(gd._context.scrollZoom).toBe(true);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, cartesian: 1, mapbox: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:false', function(done) {
+ plot({scrollZoom: false}).then(function() {
+ expect(gd._context.scrollZoom).toBe(false);
+ expect(gd._context._scrollZoom).toEqual({});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom flaglist', function(done) {
+ plot({scrollZoom: 'mapbox+cartesian'}).then(function() {
+ expect(gd._context.scrollZoom).toBe('mapbox+cartesian');
+ expect(gd._context._scrollZoom).toEqual({mapbox: 1, cartesian: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+ });
 });

test/jasmine/tests/geo_test.js

@@ -1961,4 +1961,52 @@ describe('Test geo zoom/pan/drag interactions:', function() {
  .catch(failTest)
  .then(done);
  });
+
+ it('should respect scrollZoom config option', function(done) {
+ var fig = Lib.extendDeep({}, require('@mocks/geo_winkel-tripel'));
+ fig.layout.width = 700;
+ fig.layout.height = 500;
+ fig.layout.dragmode = 'pan';
+
+ function _assert(step, attr, proj, eventKeys) {
+ var msg = '[' + step + '] ';
+
+ var geoLayout = gd._fullLayout.geo;
+ var scale = geoLayout.projection.scale;
+ expect(scale).toBeCloseTo(attr[0], 1, msg + 'zoom');
+
+ var geo = geoLayout._subplot;
+ var _scale = geo.projection.scale();
+ expect(_scale).toBeCloseTo(proj[0], 0, msg + 'scale');
+
+ assertEventData(msg, eventKeys);
+ }
+
+ plot(fig)
+ .then(function() {
+ _assert('base', [1], [101.9], undefined);
+ })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scroll enable (by default)',
+ [1.3], [134.4],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: false}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:false', [1.3], [134.4], undefined);
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: 'geo'}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:geo',
+ [1.74], [177.34],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .catch(failTest)
+ .then(done);
+ });
 });

test/jasmine/tests/gl3d_plot_interact_test.js

@@ -1097,6 +1097,11 @@ describe('Test gl3d drag and wheel interactions', function() {
  }
  };
 
+ function _assertAndReset(cnt) {
+ expect(relayoutCallback).toHaveBeenCalledTimes(cnt);
+ relayoutCallback.calls.reset();
+ }
+
  Plotly.plot(gd, mock)
  .then(function() {
  relayoutCallback = jasmine.createSpy('relayoutCallback');
@@ -1115,48 +1120,32 @@ describe('Test gl3d drag and wheel interactions', function() {
  return scroll(sceneTarget);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return scroll(sceneTarget2);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
- return Plotly.relayout(gd, {
- 'scene.dragmode': false,
- 'scene2.dragmode': false
- });
+ _assertAndReset(1);
+ return Plotly.relayout(gd, {'scene.dragmode': false, 'scene2.dragmode': false});
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
-expect(relayoutCallback).toHaveBeenCalledTimes(0);
+_assertAndReset(0);
 
- return Plotly.relayout(gd, {
- 'scene.dragmode': 'orbit',
- 'scene2.dragmode': 'turntable'
- });
+ return Plotly.relayout(gd, {'scene.dragmode': 'orbit', 'scene2.dragmode': 'turntable'});
  })
  .then(function() {
  expect(relayoutCallback).toHaveBeenCalledTimes(1);
@@ -1168,7 +1157,27 @@ describe('Test gl3d drag and wheel interactions', function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(2);
+ _assertAndReset(2);
+ return Plotly.plot(gd, [], {}, {scrollZoom: false});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(0);
+ return Plotly.plot(gd, [], {}, {scrollZoom: 'gl3d'});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(2);
  })
  .catch(failTest)
  .then(done);

src/plot_api/plot_api.js

@@ -507,6 +507,25 @@ function setPlotContext(gd, config) {
  // Check if gd has a specified widht/height to begin with
  context._hasZeroHeight = context._hasZeroHeight || gd.clientHeight === 0;
  context._hasZeroWidth = context._hasZeroWidth || gd.clientWidth === 0;
+
+ // fill context._scrollZoom helper to help manage scrollZoom flaglist
+ var szIn = context.scrollZoom;
+ var szOut = context._scrollZoom = {};
+ if(szIn === true) {
+ szOut.cartesian = 1;
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ } else if(typeof szIn === 'string') {
+ var parts = szIn.split('+');
+ for(i = 0; i < parts.length; i++) {
+ szOut[parts[i]] = 1;
+ }
+ } else if(szIn !== false) {
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ }
 }
 
 function plotLegacyPolar(gd, data, layout) {

src/plot_api/plot_config.js

@@ -145,11 +145,16 @@ var configAttributes = {
  },
 
  scrollZoom: {
- valType: 'boolean',
- dflt: false,
+ valType: 'flaglist',
+ flags: ['cartesian', 'gl3d', 'geo', 'mapbox'],
+ extras: [true, false],
+ dflt: 'gl3d+geo+mapbox',
  description: [
- 'Determines whether mouse wheel or two-finger scroll zooms is',
- 'enable. Has an effect only on cartesian subplots.'
+ 'Determines whether mouse wheel or two-finger scroll zooms is enable.',
+ 'Turned on by default for gl3d, geo and mapbox subplots',
+ '(as these subplot types do not have zoombox via pan),',
+ 'but turned off by default for cartesian subplots.',
+ 'Set `scrollZoom` to *false* to disable scrolling for all subplots.'
  ].join(' ')
  },
  doubleClick: {

src/plots/cartesian/dragbox.js

@@ -417,7 +417,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
  // deactivate mousewheel scrolling on embedded graphs
  // devs can override this with layout._enablescrollzoom,
  // but _ ensures this setting won't leave their page
- if(!gd._context.scrollZoom && !gd._fullLayout._enablescrollzoom) {
+ if(!gd._context._scrollZoom.cartesian && !gd._fullLayout._enablescrollzoom) {
  return;
  }
 

src/plots/geo/geo.js

@@ -420,6 +420,9 @@ proto.updateFx = function(fullLayout, geoLayout) {
  bgRect.node().onmousedown = null;
  bgRect.call(createGeoZoom(_this, geoLayout));
  bgRect.on('dblclick.zoom', zoomReset);
+ if(!gd._context._scrollZoom.geo) {
+ bgRect.on('wheel.zoom', null);
+ }
  }
  else if(dragMode === 'select' || dragMode === 'lasso') {
  bgRect.on('.zoom', null);

src/plots/gl2d/scene2d.js

@@ -38,7 +38,7 @@ function Scene2D(options, fullLayout) {
  this.pixelRatio = options.plotGlPixelRatio || window.devicePixelRatio;
  this.id = options.id;
  this.staticPlot = !!options.staticPlot;
- this.scrollZoom = this.graphDiv._context.scrollZoom;
+ this.scrollZoom = this.graphDiv._context._scrollZoom.cartesian;
 
  this.fullData = null;
  this.updateRefs(fullLayout);

src/plots/gl3d/camera.js

@@ -48,6 +48,7 @@ function createCamera(element, options) {
 
  var camera = {
  keyBindingMode: 'rotate',
+ enableWheel: true,
  view: view,
  element: element,
  delay: options.delay || 16,
@@ -257,7 +258,9 @@ function createCamera(element, options) {
  }
 
  camera.wheelListener = mouseWheel(element, function(dx, dy) {
+ // TODO remove now that we can disable scroll via scrollZoom?
  if(camera.keyBindingMode === false) return;
+ if(!camera.enableWheel) return;
 
  var flipX = camera.flipX ? 1 : -1;
  var flipY = camera.flipY ? 1 : -1;

src/plots/gl3d/scene.js

@@ -227,8 +227,15 @@ function initializeGLPlot(scene, canvas, gl) {
  scene.graphDiv.emit('plotly_relayout', update);
  };
 
- scene.glplot.canvas.addEventListener('mouseup', relayoutCallback.bind(null, scene));
- scene.glplot.canvas.addEventListener('wheel', relayoutCallback.bind(null, scene), passiveSupported ? {passive: false} : false);
+ scene.glplot.canvas.addEventListener('mouseup', function() {
+ relayoutCallback(scene);
+ });
+
+ scene.glplot.canvas.addEventListener('wheel', function() {
+ if(gd._context._scrollZoom.gl3d) {
+ relayoutCallback(scene);
+ }
+ }, passiveSupported ? {passive: false} : false);
 
  if(!scene.staticMode) {
  scene.glplot.canvas.addEventListener('webglcontextlost', function(event) {
@@ -385,7 +392,6 @@ function computeTraceBounds(scene, trace, bounds) {
 }
 
 proto.plot = function(sceneData, fullLayout, layout) {
-
  // Save parameters
  this.plotArgs = [sceneData, fullLayout, layout];
 
@@ -412,6 +418,7 @@ proto.plot = function(sceneData, fullLayout, layout) {
  // Update camera and camera mode
  this.setCamera(fullSceneLayout.camera);
  this.updateFx(fullSceneLayout.dragmode, fullSceneLayout.hovermode);
+ this.camera.enableWheel = this.graphDiv._context._scrollZoom.gl3d;
 
  // Update scene
  this.glplot.update({});
@@ -776,7 +783,6 @@ proto.updateFx = function(dragmode, hovermode) {
  fullCamera.up = zUp;
  Lib.nestedProperty(layout, attr).set(zUp);
  } else {
-
  // none rotation modes [pan or zoom]
  camera.keyBindingMode = dragmode;
  }

src/plots/mapbox/mapbox.js

@@ -258,6 +258,12 @@ proto.updateMap = function(calcData, fullLayout, resolve, reject) {
  self.updateLayout(fullLayout);
  self.resolveOnRender(resolve);
  }
+
+ if(this.gd._context._scrollZoom.mapbox) {
+ map.scrollZoom.enable();
+ } else {
+ map.scrollZoom.disable();
+ }
 };
 
 proto.updateData = function(calcData) {

test/jasmine/tests/config_test.js

@@ -760,4 +760,63 @@ describe('config argument', function() {
  .then(done);
  });
  });
+
+ describe('scrollZoom:', function() {
+ var gd;
+
+ beforeEach(function() { gd = createGraphDiv(); });
+
+ afterEach(destroyGraphDiv);
+
+ function plot(config) {
+ return Plotly.plot(gd, [], {}, config);
+ }
+
+ it('should fill in scrollZoom default', function(done) {
+ plot(undefined).then(function() {
+ expect(gd._context.scrollZoom).toBe('gl3d+geo+mapbox');
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should fill in blank scrollZoom value', function(done) {
+ plot({scrollZoom: null}).then(function() {
+ expect(gd._context.scrollZoom).toBe(null);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:true', function(done) {
+ plot({scrollZoom: true}).then(function() {
+ expect(gd._context.scrollZoom).toBe(true);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, cartesian: 1, mapbox: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:false', function(done) {
+ plot({scrollZoom: false}).then(function() {
+ expect(gd._context.scrollZoom).toBe(false);
+ expect(gd._context._scrollZoom).toEqual({});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom flaglist', function(done) {
+ plot({scrollZoom: 'mapbox+cartesian'}).then(function() {
+ expect(gd._context.scrollZoom).toBe('mapbox+cartesian');
+ expect(gd._context._scrollZoom).toEqual({mapbox: 1, cartesian: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+ });
 });

test/jasmine/tests/geo_test.js

@@ -1961,4 +1961,52 @@ describe('Test geo zoom/pan/drag interactions:', function() {
  .catch(failTest)
  .then(done);
  });
+
+ it('should respect scrollZoom config option', function(done) {
+ var fig = Lib.extendDeep({}, require('@mocks/geo_winkel-tripel'));
+ fig.layout.width = 700;
+ fig.layout.height = 500;
+ fig.layout.dragmode = 'pan';
+
+ function _assert(step, attr, proj, eventKeys) {
+ var msg = '[' + step + '] ';
+
+ var geoLayout = gd._fullLayout.geo;
+ var scale = geoLayout.projection.scale;
+ expect(scale).toBeCloseTo(attr[0], 1, msg + 'zoom');
+
+ var geo = geoLayout._subplot;
+ var _scale = geo.projection.scale();
+ expect(_scale).toBeCloseTo(proj[0], 0, msg + 'scale');
+
+ assertEventData(msg, eventKeys);
+ }
+
+ plot(fig)
+ .then(function() {
+ _assert('base', [1], [101.9], undefined);
+ })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scroll enable (by default)',
+ [1.3], [134.4],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: false}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:false', [1.3], [134.4], undefined);
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: 'geo'}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:geo',
+ [1.74], [177.34],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .catch(failTest)
+ .then(done);
+ });
 });

test/jasmine/tests/gl3d_plot_interact_test.js

@@ -1097,6 +1097,11 @@ describe('Test gl3d drag and wheel interactions', function() {
  }
  };
 
+ function _assertAndReset(cnt) {
+ expect(relayoutCallback).toHaveBeenCalledTimes(cnt);
+ relayoutCallback.calls.reset();
+ }
+
  Plotly.plot(gd, mock)
  .then(function() {
  relayoutCallback = jasmine.createSpy('relayoutCallback');
@@ -1115,48 +1120,32 @@ describe('Test gl3d drag and wheel interactions', function() {
  return scroll(sceneTarget);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return scroll(sceneTarget2);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
- return Plotly.relayout(gd, {
- 'scene.dragmode': false,
- 'scene2.dragmode': false
- });
+ _assertAndReset(1);
+ return Plotly.relayout(gd, {'scene.dragmode': false, 'scene2.dragmode': false});
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
-expect(relayoutCallback).toHaveBeenCalledTimes(0);
+_assertAndReset(0);
 
- return Plotly.relayout(gd, {
- 'scene.dragmode': 'orbit',
- 'scene2.dragmode': 'turntable'
- });
+ return Plotly.relayout(gd, {'scene.dragmode': 'orbit', 'scene2.dragmode': 'turntable'});
  })
  .then(function() {
  expect(relayoutCallback).toHaveBeenCalledTimes(1);
@@ -1168,7 +1157,27 @@ describe('Test gl3d drag and wheel interactions', function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(2);
+ _assertAndReset(2);
+ return Plotly.plot(gd, [], {}, {scrollZoom: false});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(0);
+ return Plotly.plot(gd, [], {}, {scrollZoom: 'gl3d'});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(2);
  })
  .catch(failTest)
  .then(done);

src/plot_api/plot_api.js

@@ -507,6 +507,25 @@ function setPlotContext(gd, config) {
  // Check if gd has a specified widht/height to begin with
  context._hasZeroHeight = context._hasZeroHeight || gd.clientHeight === 0;
  context._hasZeroWidth = context._hasZeroWidth || gd.clientWidth === 0;
+
+ // fill context._scrollZoom helper to help manage scrollZoom flaglist
+ var szIn = context.scrollZoom;
+ var szOut = context._scrollZoom = {};
+ if(szIn === true) {
+ szOut.cartesian = 1;
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ } else if(typeof szIn === 'string') {
+ var parts = szIn.split('+');
+ for(i = 0; i < parts.length; i++) {
+ szOut[parts[i]] = 1;
+ }
+ } else if(szIn !== false) {
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ }
 }
 
 function plotLegacyPolar(gd, data, layout) {

src/plot_api/plot_config.js

@@ -145,11 +145,16 @@ var configAttributes = {
  },
 
  scrollZoom: {
- valType: 'boolean',
- dflt: false,
+ valType: 'flaglist',
+ flags: ['cartesian', 'gl3d', 'geo', 'mapbox'],
+ extras: [true, false],
+ dflt: 'gl3d+geo+mapbox',
  description: [
- 'Determines whether mouse wheel or two-finger scroll zooms is',
- 'enable. Has an effect only on cartesian subplots.'
+ 'Determines whether mouse wheel or two-finger scroll zooms is enable.',
+ 'Turned on by default for gl3d, geo and mapbox subplots',
+ '(as these subplot types do not have zoombox via pan),',
+ 'but turned off by default for cartesian subplots.',
+ 'Set `scrollZoom` to *false* to disable scrolling for all subplots.'
  ].join(' ')
  },
  doubleClick: {

src/plots/cartesian/dragbox.js

@@ -417,7 +417,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
  // deactivate mousewheel scrolling on embedded graphs
  // devs can override this with layout._enablescrollzoom,
  // but _ ensures this setting won't leave their page
- if(!gd._context.scrollZoom && !gd._fullLayout._enablescrollzoom) {
+ if(!gd._context._scrollZoom.cartesian && !gd._fullLayout._enablescrollzoom) {
  return;
  }
 

src/plots/geo/geo.js

@@ -420,6 +420,9 @@ proto.updateFx = function(fullLayout, geoLayout) {
  bgRect.node().onmousedown = null;
  bgRect.call(createGeoZoom(_this, geoLayout));
  bgRect.on('dblclick.zoom', zoomReset);
+ if(!gd._context._scrollZoom.geo) {
+ bgRect.on('wheel.zoom', null);
+ }
  }
  else if(dragMode === 'select' || dragMode === 'lasso') {
  bgRect.on('.zoom', null);

src/plots/gl2d/scene2d.js

@@ -38,7 +38,7 @@ function Scene2D(options, fullLayout) {
  this.pixelRatio = options.plotGlPixelRatio || window.devicePixelRatio;
  this.id = options.id;
  this.staticPlot = !!options.staticPlot;
- this.scrollZoom = this.graphDiv._context.scrollZoom;
+ this.scrollZoom = this.graphDiv._context._scrollZoom.cartesian;
 
  this.fullData = null;
  this.updateRefs(fullLayout);

src/plots/gl3d/camera.js

@@ -48,6 +48,7 @@ function createCamera(element, options) {
 
  var camera = {
  keyBindingMode: 'rotate',
+ enableWheel: true,
  view: view,
  element: element,
  delay: options.delay || 16,
@@ -257,7 +258,9 @@ function createCamera(element, options) {
  }
 
  camera.wheelListener = mouseWheel(element, function(dx, dy) {
+ // TODO remove now that we can disable scroll via scrollZoom?
  if(camera.keyBindingMode === false) return;
+ if(!camera.enableWheel) return;
 
  var flipX = camera.flipX ? 1 : -1;
  var flipY = camera.flipY ? 1 : -1;

src/plots/gl3d/scene.js

@@ -227,8 +227,15 @@ function initializeGLPlot(scene, canvas, gl) {
  scene.graphDiv.emit('plotly_relayout', update);
  };
 
- scene.glplot.canvas.addEventListener('mouseup', relayoutCallback.bind(null, scene));
- scene.glplot.canvas.addEventListener('wheel', relayoutCallback.bind(null, scene), passiveSupported ? {passive: false} : false);
+ scene.glplot.canvas.addEventListener('mouseup', function() {
+ relayoutCallback(scene);
+ });
+
+ scene.glplot.canvas.addEventListener('wheel', function() {
+ if(gd._context._scrollZoom.gl3d) {
+ relayoutCallback(scene);
+ }
+ }, passiveSupported ? {passive: false} : false);
 
  if(!scene.staticMode) {
  scene.glplot.canvas.addEventListener('webglcontextlost', function(event) {
@@ -385,7 +392,6 @@ function computeTraceBounds(scene, trace, bounds) {
 }
 
 proto.plot = function(sceneData, fullLayout, layout) {
-
  // Save parameters
  this.plotArgs = [sceneData, fullLayout, layout];
 
@@ -412,6 +418,7 @@ proto.plot = function(sceneData, fullLayout, layout) {
  // Update camera and camera mode
  this.setCamera(fullSceneLayout.camera);
  this.updateFx(fullSceneLayout.dragmode, fullSceneLayout.hovermode);
+ this.camera.enableWheel = this.graphDiv._context._scrollZoom.gl3d;
 
  // Update scene
  this.glplot.update({});
@@ -776,7 +783,6 @@ proto.updateFx = function(dragmode, hovermode) {
  fullCamera.up = zUp;
  Lib.nestedProperty(layout, attr).set(zUp);
  } else {
-
  // none rotation modes [pan or zoom]
  camera.keyBindingMode = dragmode;
  }

src/plots/mapbox/mapbox.js

@@ -258,6 +258,12 @@ proto.updateMap = function(calcData, fullLayout, resolve, reject) {
  self.updateLayout(fullLayout);
  self.resolveOnRender(resolve);
  }
+
+ if(this.gd._context._scrollZoom.mapbox) {
+ map.scrollZoom.enable();
+ } else {
+ map.scrollZoom.disable();
+ }
 };
 
 proto.updateData = function(calcData) {

test/jasmine/tests/config_test.js

@@ -760,4 +760,63 @@ describe('config argument', function() {
  .then(done);
  });
  });
+
+ describe('scrollZoom:', function() {
+ var gd;
+
+ beforeEach(function() { gd = createGraphDiv(); });
+
+ afterEach(destroyGraphDiv);
+
+ function plot(config) {
+ return Plotly.plot(gd, [], {}, config);
+ }
+
+ it('should fill in scrollZoom default', function(done) {
+ plot(undefined).then(function() {
+ expect(gd._context.scrollZoom).toBe('gl3d+geo+mapbox');
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should fill in blank scrollZoom value', function(done) {
+ plot({scrollZoom: null}).then(function() {
+ expect(gd._context.scrollZoom).toBe(null);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:true', function(done) {
+ plot({scrollZoom: true}).then(function() {
+ expect(gd._context.scrollZoom).toBe(true);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, cartesian: 1, mapbox: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:false', function(done) {
+ plot({scrollZoom: false}).then(function() {
+ expect(gd._context.scrollZoom).toBe(false);
+ expect(gd._context._scrollZoom).toEqual({});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom flaglist', function(done) {
+ plot({scrollZoom: 'mapbox+cartesian'}).then(function() {
+ expect(gd._context.scrollZoom).toBe('mapbox+cartesian');
+ expect(gd._context._scrollZoom).toEqual({mapbox: 1, cartesian: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+ });
 });

test/jasmine/tests/geo_test.js

@@ -1961,4 +1961,52 @@ describe('Test geo zoom/pan/drag interactions:', function() {
  .catch(failTest)
  .then(done);
  });
+
+ it('should respect scrollZoom config option', function(done) {
+ var fig = Lib.extendDeep({}, require('@mocks/geo_winkel-tripel'));
+ fig.layout.width = 700;
+ fig.layout.height = 500;
+ fig.layout.dragmode = 'pan';
+
+ function _assert(step, attr, proj, eventKeys) {
+ var msg = '[' + step + '] ';
+
+ var geoLayout = gd._fullLayout.geo;
+ var scale = geoLayout.projection.scale;
+ expect(scale).toBeCloseTo(attr[0], 1, msg + 'zoom');
+
+ var geo = geoLayout._subplot;
+ var _scale = geo.projection.scale();
+ expect(_scale).toBeCloseTo(proj[0], 0, msg + 'scale');
+
+ assertEventData(msg, eventKeys);
+ }
+
+ plot(fig)
+ .then(function() {
+ _assert('base', [1], [101.9], undefined);
+ })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scroll enable (by default)',
+ [1.3], [134.4],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: false}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:false', [1.3], [134.4], undefined);
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: 'geo'}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:geo',
+ [1.74], [177.34],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .catch(failTest)
+ .then(done);
+ });
 });

test/jasmine/tests/gl3d_plot_interact_test.js

@@ -1097,6 +1097,11 @@ describe('Test gl3d drag and wheel interactions', function() {
  }
  };
 
+ function _assertAndReset(cnt) {
+ expect(relayoutCallback).toHaveBeenCalledTimes(cnt);
+ relayoutCallback.calls.reset();
+ }
+
  Plotly.plot(gd, mock)
  .then(function() {
  relayoutCallback = jasmine.createSpy('relayoutCallback');
@@ -1115,48 +1120,32 @@ describe('Test gl3d drag and wheel interactions', function() {
  return scroll(sceneTarget);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return scroll(sceneTarget2);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
- return Plotly.relayout(gd, {
- 'scene.dragmode': false,
- 'scene2.dragmode': false
- });
+ _assertAndReset(1);
+ return Plotly.relayout(gd, {'scene.dragmode': false, 'scene2.dragmode': false});
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
-expect(relayoutCallback).toHaveBeenCalledTimes(0);
+_assertAndReset(0);
 
- return Plotly.relayout(gd, {
- 'scene.dragmode': 'orbit',
- 'scene2.dragmode': 'turntable'
- });
+ return Plotly.relayout(gd, {'scene.dragmode': 'orbit', 'scene2.dragmode': 'turntable'});
  })
  .then(function() {
  expect(relayoutCallback).toHaveBeenCalledTimes(1);
@@ -1168,7 +1157,27 @@ describe('Test gl3d drag and wheel interactions', function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(2);
+ _assertAndReset(2);
+ return Plotly.plot(gd, [], {}, {scrollZoom: false});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(0);
+ return Plotly.plot(gd, [], {}, {scrollZoom: 'gl3d'});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(2);
  })
  .catch(failTest)
  .then(done);

src/plot_api/plot_api.js

@@ -507,6 +507,25 @@ function setPlotContext(gd, config) {
  // Check if gd has a specified widht/height to begin with
  context._hasZeroHeight = context._hasZeroHeight || gd.clientHeight === 0;
  context._hasZeroWidth = context._hasZeroWidth || gd.clientWidth === 0;
+
+ // fill context._scrollZoom helper to help manage scrollZoom flaglist
+ var szIn = context.scrollZoom;
+ var szOut = context._scrollZoom = {};
+ if(szIn === true) {
+ szOut.cartesian = 1;
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ } else if(typeof szIn === 'string') {
+ var parts = szIn.split('+');
+ for(i = 0; i < parts.length; i++) {
+ szOut[parts[i]] = 1;
+ }
+ } else if(szIn !== false) {
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ }
 }
 
 function plotLegacyPolar(gd, data, layout) {

src/plot_api/plot_config.js

@@ -145,11 +145,16 @@ var configAttributes = {
  },
 
  scrollZoom: {
- valType: 'boolean',
- dflt: false,
+ valType: 'flaglist',
+ flags: ['cartesian', 'gl3d', 'geo', 'mapbox'],
+ extras: [true, false],
+ dflt: 'gl3d+geo+mapbox',
  description: [
- 'Determines whether mouse wheel or two-finger scroll zooms is',
- 'enable. Has an effect only on cartesian subplots.'
+ 'Determines whether mouse wheel or two-finger scroll zooms is enable.',
+ 'Turned on by default for gl3d, geo and mapbox subplots',
+ '(as these subplot types do not have zoombox via pan),',
+ 'but turned off by default for cartesian subplots.',
+ 'Set `scrollZoom` to *false* to disable scrolling for all subplots.'
  ].join(' ')
  },
  doubleClick: {

src/plots/cartesian/dragbox.js

@@ -417,7 +417,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
  // deactivate mousewheel scrolling on embedded graphs
  // devs can override this with layout._enablescrollzoom,
  // but _ ensures this setting won't leave their page
- if(!gd._context.scrollZoom && !gd._fullLayout._enablescrollzoom) {
+ if(!gd._context._scrollZoom.cartesian && !gd._fullLayout._enablescrollzoom) {
  return;
  }
 

src/plots/geo/geo.js

@@ -420,6 +420,9 @@ proto.updateFx = function(fullLayout, geoLayout) {
  bgRect.node().onmousedown = null;
  bgRect.call(createGeoZoom(_this, geoLayout));
  bgRect.on('dblclick.zoom', zoomReset);
+ if(!gd._context._scrollZoom.geo) {
+ bgRect.on('wheel.zoom', null);
+ }
  }
  else if(dragMode === 'select' || dragMode === 'lasso') {
  bgRect.on('.zoom', null);

src/plots/gl2d/scene2d.js

@@ -38,7 +38,7 @@ function Scene2D(options, fullLayout) {
  this.pixelRatio = options.plotGlPixelRatio || window.devicePixelRatio;
  this.id = options.id;
  this.staticPlot = !!options.staticPlot;
- this.scrollZoom = this.graphDiv._context.scrollZoom;
+ this.scrollZoom = this.graphDiv._context._scrollZoom.cartesian;
 
  this.fullData = null;
  this.updateRefs(fullLayout);

src/plots/gl3d/camera.js

@@ -48,6 +48,7 @@ function createCamera(element, options) {
 
  var camera = {
  keyBindingMode: 'rotate',
+ enableWheel: true,
  view: view,
  element: element,
  delay: options.delay || 16,
@@ -257,7 +258,9 @@ function createCamera(element, options) {
  }
 
  camera.wheelListener = mouseWheel(element, function(dx, dy) {
+ // TODO remove now that we can disable scroll via scrollZoom?
  if(camera.keyBindingMode === false) return;
+ if(!camera.enableWheel) return;
 
  var flipX = camera.flipX ? 1 : -1;
  var flipY = camera.flipY ? 1 : -1;

src/plots/gl3d/scene.js

@@ -227,8 +227,15 @@ function initializeGLPlot(scene, canvas, gl) {
  scene.graphDiv.emit('plotly_relayout', update);
  };
 
- scene.glplot.canvas.addEventListener('mouseup', relayoutCallback.bind(null, scene));
- scene.glplot.canvas.addEventListener('wheel', relayoutCallback.bind(null, scene), passiveSupported ? {passive: false} : false);
+ scene.glplot.canvas.addEventListener('mouseup', function() {
+ relayoutCallback(scene);
+ });
+
+ scene.glplot.canvas.addEventListener('wheel', function() {
+ if(gd._context._scrollZoom.gl3d) {
+ relayoutCallback(scene);
+ }
+ }, passiveSupported ? {passive: false} : false);
 
  if(!scene.staticMode) {
  scene.glplot.canvas.addEventListener('webglcontextlost', function(event) {
@@ -385,7 +392,6 @@ function computeTraceBounds(scene, trace, bounds) {
 }
 
 proto.plot = function(sceneData, fullLayout, layout) {
-
  // Save parameters
  this.plotArgs = [sceneData, fullLayout, layout];
 
@@ -412,6 +418,7 @@ proto.plot = function(sceneData, fullLayout, layout) {
  // Update camera and camera mode
  this.setCamera(fullSceneLayout.camera);
  this.updateFx(fullSceneLayout.dragmode, fullSceneLayout.hovermode);
+ this.camera.enableWheel = this.graphDiv._context._scrollZoom.gl3d;
 
  // Update scene
  this.glplot.update({});
@@ -776,7 +783,6 @@ proto.updateFx = function(dragmode, hovermode) {
  fullCamera.up = zUp;
  Lib.nestedProperty(layout, attr).set(zUp);
  } else {
-
  // none rotation modes [pan or zoom]
  camera.keyBindingMode = dragmode;
  }

src/plots/mapbox/mapbox.js

@@ -258,6 +258,12 @@ proto.updateMap = function(calcData, fullLayout, resolve, reject) {
  self.updateLayout(fullLayout);
  self.resolveOnRender(resolve);
  }
+
+ if(this.gd._context._scrollZoom.mapbox) {
+ map.scrollZoom.enable();
+ } else {
+ map.scrollZoom.disable();
+ }
 };
 
 proto.updateData = function(calcData) {

test/jasmine/tests/config_test.js

@@ -760,4 +760,63 @@ describe('config argument', function() {
  .then(done);
  });
  });
+
+ describe('scrollZoom:', function() {
+ var gd;
+
+ beforeEach(function() { gd = createGraphDiv(); });
+
+ afterEach(destroyGraphDiv);
+
+ function plot(config) {
+ return Plotly.plot(gd, [], {}, config);
+ }
+
+ it('should fill in scrollZoom default', function(done) {
+ plot(undefined).then(function() {
+ expect(gd._context.scrollZoom).toBe('gl3d+geo+mapbox');
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should fill in blank scrollZoom value', function(done) {
+ plot({scrollZoom: null}).then(function() {
+ expect(gd._context.scrollZoom).toBe(null);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:true', function(done) {
+ plot({scrollZoom: true}).then(function() {
+ expect(gd._context.scrollZoom).toBe(true);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, cartesian: 1, mapbox: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:false', function(done) {
+ plot({scrollZoom: false}).then(function() {
+ expect(gd._context.scrollZoom).toBe(false);
+ expect(gd._context._scrollZoom).toEqual({});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom flaglist', function(done) {
+ plot({scrollZoom: 'mapbox+cartesian'}).then(function() {
+ expect(gd._context.scrollZoom).toBe('mapbox+cartesian');
+ expect(gd._context._scrollZoom).toEqual({mapbox: 1, cartesian: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+ });
 });

test/jasmine/tests/geo_test.js

@@ -1961,4 +1961,52 @@ describe('Test geo zoom/pan/drag interactions:', function() {
  .catch(failTest)
  .then(done);
  });
+
+ it('should respect scrollZoom config option', function(done) {
+ var fig = Lib.extendDeep({}, require('@mocks/geo_winkel-tripel'));
+ fig.layout.width = 700;
+ fig.layout.height = 500;
+ fig.layout.dragmode = 'pan';
+
+ function _assert(step, attr, proj, eventKeys) {
+ var msg = '[' + step + '] ';
+
+ var geoLayout = gd._fullLayout.geo;
+ var scale = geoLayout.projection.scale;
+ expect(scale).toBeCloseTo(attr[0], 1, msg + 'zoom');
+
+ var geo = geoLayout._subplot;
+ var _scale = geo.projection.scale();
+ expect(_scale).toBeCloseTo(proj[0], 0, msg + 'scale');
+
+ assertEventData(msg, eventKeys);
+ }
+
+ plot(fig)
+ .then(function() {
+ _assert('base', [1], [101.9], undefined);
+ })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scroll enable (by default)',
+ [1.3], [134.4],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: false}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:false', [1.3], [134.4], undefined);
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: 'geo'}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:geo',
+ [1.74], [177.34],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .catch(failTest)
+ .then(done);
+ });
 });

test/jasmine/tests/gl3d_plot_interact_test.js

@@ -1097,6 +1097,11 @@ describe('Test gl3d drag and wheel interactions', function() {
  }
  };
 
+ function _assertAndReset(cnt) {
+ expect(relayoutCallback).toHaveBeenCalledTimes(cnt);
+ relayoutCallback.calls.reset();
+ }
+
  Plotly.plot(gd, mock)
  .then(function() {
  relayoutCallback = jasmine.createSpy('relayoutCallback');
@@ -1115,48 +1120,32 @@ describe('Test gl3d drag and wheel interactions', function() {
  return scroll(sceneTarget);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return scroll(sceneTarget2);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
- return Plotly.relayout(gd, {
- 'scene.dragmode': false,
- 'scene2.dragmode': false
- });
+ _assertAndReset(1);
+ return Plotly.relayout(gd, {'scene.dragmode': false, 'scene2.dragmode': false});
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
-expect(relayoutCallback).toHaveBeenCalledTimes(0);
+_assertAndReset(0);
 
- return Plotly.relayout(gd, {
- 'scene.dragmode': 'orbit',
- 'scene2.dragmode': 'turntable'
- });
+ return Plotly.relayout(gd, {'scene.dragmode': 'orbit', 'scene2.dragmode': 'turntable'});
  })
  .then(function() {
  expect(relayoutCallback).toHaveBeenCalledTimes(1);
@@ -1168,7 +1157,27 @@ describe('Test gl3d drag and wheel interactions', function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(2);
+ _assertAndReset(2);
+ return Plotly.plot(gd, [], {}, {scrollZoom: false});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(0);
+ return Plotly.plot(gd, [], {}, {scrollZoom: 'gl3d'});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(2);
  })
  .catch(failTest)
  .then(done);

src/plot_api/plot_api.js

@@ -507,6 +507,25 @@ function setPlotContext(gd, config) {
  // Check if gd has a specified widht/height to begin with
  context._hasZeroHeight = context._hasZeroHeight || gd.clientHeight === 0;
  context._hasZeroWidth = context._hasZeroWidth || gd.clientWidth === 0;
+
+ // fill context._scrollZoom helper to help manage scrollZoom flaglist
+ var szIn = context.scrollZoom;
+ var szOut = context._scrollZoom = {};
+ if(szIn === true) {
+ szOut.cartesian = 1;
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ } else if(typeof szIn === 'string') {
+ var parts = szIn.split('+');
+ for(i = 0; i < parts.length; i++) {
+ szOut[parts[i]] = 1;
+ }
+ } else if(szIn !== false) {
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ }
 }
 
 function plotLegacyPolar(gd, data, layout) {

src/plot_api/plot_config.js

@@ -145,11 +145,16 @@ var configAttributes = {
  },
 
  scrollZoom: {
- valType: 'boolean',
- dflt: false,
+ valType: 'flaglist',
+ flags: ['cartesian', 'gl3d', 'geo', 'mapbox'],
+ extras: [true, false],
+ dflt: 'gl3d+geo+mapbox',
  description: [
- 'Determines whether mouse wheel or two-finger scroll zooms is',
- 'enable. Has an effect only on cartesian subplots.'
+ 'Determines whether mouse wheel or two-finger scroll zooms is enable.',
+ 'Turned on by default for gl3d, geo and mapbox subplots',
+ '(as these subplot types do not have zoombox via pan),',
+ 'but turned off by default for cartesian subplots.',
+ 'Set `scrollZoom` to *false* to disable scrolling for all subplots.'
  ].join(' ')
  },
  doubleClick: {

src/plots/cartesian/dragbox.js

@@ -417,7 +417,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
  // deactivate mousewheel scrolling on embedded graphs
  // devs can override this with layout._enablescrollzoom,
  // but _ ensures this setting won't leave their page
- if(!gd._context.scrollZoom && !gd._fullLayout._enablescrollzoom) {
+ if(!gd._context._scrollZoom.cartesian && !gd._fullLayout._enablescrollzoom) {
  return;
  }
 

src/plots/geo/geo.js

@@ -420,6 +420,9 @@ proto.updateFx = function(fullLayout, geoLayout) {
  bgRect.node().onmousedown = null;
  bgRect.call(createGeoZoom(_this, geoLayout));
  bgRect.on('dblclick.zoom', zoomReset);
+ if(!gd._context._scrollZoom.geo) {
+ bgRect.on('wheel.zoom', null);
+ }
  }
  else if(dragMode === 'select' || dragMode === 'lasso') {
  bgRect.on('.zoom', null);

src/plots/gl2d/scene2d.js

@@ -38,7 +38,7 @@ function Scene2D(options, fullLayout) {
  this.pixelRatio = options.plotGlPixelRatio || window.devicePixelRatio;
  this.id = options.id;
  this.staticPlot = !!options.staticPlot;
- this.scrollZoom = this.graphDiv._context.scrollZoom;
+ this.scrollZoom = this.graphDiv._context._scrollZoom.cartesian;
 
  this.fullData = null;
  this.updateRefs(fullLayout);

src/plots/gl3d/camera.js

@@ -48,6 +48,7 @@ function createCamera(element, options) {
 
  var camera = {
  keyBindingMode: 'rotate',
+ enableWheel: true,
  view: view,
  element: element,
  delay: options.delay || 16,
@@ -257,7 +258,9 @@ function createCamera(element, options) {
  }
 
  camera.wheelListener = mouseWheel(element, function(dx, dy) {
+ // TODO remove now that we can disable scroll via scrollZoom?
  if(camera.keyBindingMode === false) return;
+ if(!camera.enableWheel) return;
 
  var flipX = camera.flipX ? 1 : -1;
  var flipY = camera.flipY ? 1 : -1;

src/plots/gl3d/scene.js

@@ -227,8 +227,15 @@ function initializeGLPlot(scene, canvas, gl) {
  scene.graphDiv.emit('plotly_relayout', update);
  };
 
- scene.glplot.canvas.addEventListener('mouseup', relayoutCallback.bind(null, scene));
- scene.glplot.canvas.addEventListener('wheel', relayoutCallback.bind(null, scene), passiveSupported ? {passive: false} : false);
+ scene.glplot.canvas.addEventListener('mouseup', function() {
+ relayoutCallback(scene);
+ });
+
+ scene.glplot.canvas.addEventListener('wheel', function() {
+ if(gd._context._scrollZoom.gl3d) {
+ relayoutCallback(scene);
+ }
+ }, passiveSupported ? {passive: false} : false);
 
  if(!scene.staticMode) {
  scene.glplot.canvas.addEventListener('webglcontextlost', function(event) {
@@ -385,7 +392,6 @@ function computeTraceBounds(scene, trace, bounds) {
 }
 
 proto.plot = function(sceneData, fullLayout, layout) {
-
  // Save parameters
  this.plotArgs = [sceneData, fullLayout, layout];
 
@@ -412,6 +418,7 @@ proto.plot = function(sceneData, fullLayout, layout) {
  // Update camera and camera mode
  this.setCamera(fullSceneLayout.camera);
  this.updateFx(fullSceneLayout.dragmode, fullSceneLayout.hovermode);
+ this.camera.enableWheel = this.graphDiv._context._scrollZoom.gl3d;
 
  // Update scene
  this.glplot.update({});
@@ -776,7 +783,6 @@ proto.updateFx = function(dragmode, hovermode) {
  fullCamera.up = zUp;
  Lib.nestedProperty(layout, attr).set(zUp);
  } else {
-
  // none rotation modes [pan or zoom]
  camera.keyBindingMode = dragmode;
  }

src/plots/mapbox/mapbox.js

@@ -258,6 +258,12 @@ proto.updateMap = function(calcData, fullLayout, resolve, reject) {
  self.updateLayout(fullLayout);
  self.resolveOnRender(resolve);
  }
+
+ if(this.gd._context._scrollZoom.mapbox) {
+ map.scrollZoom.enable();
+ } else {
+ map.scrollZoom.disable();
+ }
 };
 
 proto.updateData = function(calcData) {

test/jasmine/tests/config_test.js

@@ -760,4 +760,63 @@ describe('config argument', function() {
  .then(done);
  });
  });
+
+ describe('scrollZoom:', function() {
+ var gd;
+
+ beforeEach(function() { gd = createGraphDiv(); });
+
+ afterEach(destroyGraphDiv);
+
+ function plot(config) {
+ return Plotly.plot(gd, [], {}, config);
+ }
+
+ it('should fill in scrollZoom default', function(done) {
+ plot(undefined).then(function() {
+ expect(gd._context.scrollZoom).toBe('gl3d+geo+mapbox');
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should fill in blank scrollZoom value', function(done) {
+ plot({scrollZoom: null}).then(function() {
+ expect(gd._context.scrollZoom).toBe(null);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:true', function(done) {
+ plot({scrollZoom: true}).then(function() {
+ expect(gd._context.scrollZoom).toBe(true);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, cartesian: 1, mapbox: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:false', function(done) {
+ plot({scrollZoom: false}).then(function() {
+ expect(gd._context.scrollZoom).toBe(false);
+ expect(gd._context._scrollZoom).toEqual({});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom flaglist', function(done) {
+ plot({scrollZoom: 'mapbox+cartesian'}).then(function() {
+ expect(gd._context.scrollZoom).toBe('mapbox+cartesian');
+ expect(gd._context._scrollZoom).toEqual({mapbox: 1, cartesian: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+ });
 });

test/jasmine/tests/geo_test.js

@@ -1961,4 +1961,52 @@ describe('Test geo zoom/pan/drag interactions:', function() {
  .catch(failTest)
  .then(done);
  });
+
+ it('should respect scrollZoom config option', function(done) {
+ var fig = Lib.extendDeep({}, require('@mocks/geo_winkel-tripel'));
+ fig.layout.width = 700;
+ fig.layout.height = 500;
+ fig.layout.dragmode = 'pan';
+
+ function _assert(step, attr, proj, eventKeys) {
+ var msg = '[' + step + '] ';
+
+ var geoLayout = gd._fullLayout.geo;
+ var scale = geoLayout.projection.scale;
+ expect(scale).toBeCloseTo(attr[0], 1, msg + 'zoom');
+
+ var geo = geoLayout._subplot;
+ var _scale = geo.projection.scale();
+ expect(_scale).toBeCloseTo(proj[0], 0, msg + 'scale');
+
+ assertEventData(msg, eventKeys);
+ }
+
+ plot(fig)
+ .then(function() {
+ _assert('base', [1], [101.9], undefined);
+ })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scroll enable (by default)',
+ [1.3], [134.4],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: false}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:false', [1.3], [134.4], undefined);
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: 'geo'}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:geo',
+ [1.74], [177.34],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .catch(failTest)
+ .then(done);
+ });
 });

test/jasmine/tests/gl3d_plot_interact_test.js

@@ -1097,6 +1097,11 @@ describe('Test gl3d drag and wheel interactions', function() {
  }
  };
 
+ function _assertAndReset(cnt) {
+ expect(relayoutCallback).toHaveBeenCalledTimes(cnt);
+ relayoutCallback.calls.reset();
+ }
+
  Plotly.plot(gd, mock)
  .then(function() {
  relayoutCallback = jasmine.createSpy('relayoutCallback');
@@ -1115,48 +1120,32 @@ describe('Test gl3d drag and wheel interactions', function() {
  return scroll(sceneTarget);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return scroll(sceneTarget2);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
- return Plotly.relayout(gd, {
- 'scene.dragmode': false,
- 'scene2.dragmode': false
- });
+ _assertAndReset(1);
+ return Plotly.relayout(gd, {'scene.dragmode': false, 'scene2.dragmode': false});
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
-expect(relayoutCallback).toHaveBeenCalledTimes(0);
+_assertAndReset(0);
 
- return Plotly.relayout(gd, {
- 'scene.dragmode': 'orbit',
- 'scene2.dragmode': 'turntable'
- });
+ return Plotly.relayout(gd, {'scene.dragmode': 'orbit', 'scene2.dragmode': 'turntable'});
  })
  .then(function() {
  expect(relayoutCallback).toHaveBeenCalledTimes(1);
@@ -1168,7 +1157,27 @@ describe('Test gl3d drag and wheel interactions', function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(2);
+ _assertAndReset(2);
+ return Plotly.plot(gd, [], {}, {scrollZoom: false});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(0);
+ return Plotly.plot(gd, [], {}, {scrollZoom: 'gl3d'});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(2);
  })
  .catch(failTest)
  .then(done);

src/plot_api/plot_api.js

@@ -507,6 +507,25 @@ function setPlotContext(gd, config) {
  // Check if gd has a specified widht/height to begin with
  context._hasZeroHeight = context._hasZeroHeight || gd.clientHeight === 0;
  context._hasZeroWidth = context._hasZeroWidth || gd.clientWidth === 0;
+
+ // fill context._scrollZoom helper to help manage scrollZoom flaglist
+ var szIn = context.scrollZoom;
+ var szOut = context._scrollZoom = {};
+ if(szIn === true) {
+ szOut.cartesian = 1;
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ } else if(typeof szIn === 'string') {
+ var parts = szIn.split('+');
+ for(i = 0; i < parts.length; i++) {
+ szOut[parts[i]] = 1;
+ }
+ } else if(szIn !== false) {
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ }
 }
 
 function plotLegacyPolar(gd, data, layout) {

src/plot_api/plot_config.js

@@ -145,11 +145,16 @@ var configAttributes = {
  },
 
  scrollZoom: {
- valType: 'boolean',
- dflt: false,
+ valType: 'flaglist',
+ flags: ['cartesian', 'gl3d', 'geo', 'mapbox'],
+ extras: [true, false],
+ dflt: 'gl3d+geo+mapbox',
  description: [
- 'Determines whether mouse wheel or two-finger scroll zooms is',
- 'enable. Has an effect only on cartesian subplots.'
+ 'Determines whether mouse wheel or two-finger scroll zooms is enable.',
+ 'Turned on by default for gl3d, geo and mapbox subplots',
+ '(as these subplot types do not have zoombox via pan),',
+ 'but turned off by default for cartesian subplots.',
+ 'Set `scrollZoom` to *false* to disable scrolling for all subplots.'
  ].join(' ')
  },
  doubleClick: {

src/plots/cartesian/dragbox.js

@@ -417,7 +417,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
  // deactivate mousewheel scrolling on embedded graphs
  // devs can override this with layout._enablescrollzoom,
  // but _ ensures this setting won't leave their page
- if(!gd._context.scrollZoom && !gd._fullLayout._enablescrollzoom) {
+ if(!gd._context._scrollZoom.cartesian && !gd._fullLayout._enablescrollzoom) {
  return;
  }
 

src/plots/geo/geo.js

@@ -420,6 +420,9 @@ proto.updateFx = function(fullLayout, geoLayout) {
  bgRect.node().onmousedown = null;
  bgRect.call(createGeoZoom(_this, geoLayout));
  bgRect.on('dblclick.zoom', zoomReset);
+ if(!gd._context._scrollZoom.geo) {
+ bgRect.on('wheel.zoom', null);
+ }
  }
  else if(dragMode === 'select' || dragMode === 'lasso') {
  bgRect.on('.zoom', null);

src/plots/gl2d/scene2d.js

@@ -38,7 +38,7 @@ function Scene2D(options, fullLayout) {
  this.pixelRatio = options.plotGlPixelRatio || window.devicePixelRatio;
  this.id = options.id;
  this.staticPlot = !!options.staticPlot;
- this.scrollZoom = this.graphDiv._context.scrollZoom;
+ this.scrollZoom = this.graphDiv._context._scrollZoom.cartesian;
 
  this.fullData = null;
  this.updateRefs(fullLayout);

src/plots/gl3d/camera.js

@@ -48,6 +48,7 @@ function createCamera(element, options) {
 
  var camera = {
  keyBindingMode: 'rotate',
+ enableWheel: true,
  view: view,
  element: element,
  delay: options.delay || 16,
@@ -257,7 +258,9 @@ function createCamera(element, options) {
  }
 
  camera.wheelListener = mouseWheel(element, function(dx, dy) {
+ // TODO remove now that we can disable scroll via scrollZoom?
  if(camera.keyBindingMode === false) return;
+ if(!camera.enableWheel) return;
 
  var flipX = camera.flipX ? 1 : -1;
  var flipY = camera.flipY ? 1 : -1;

src/plots/gl3d/scene.js

@@ -227,8 +227,15 @@ function initializeGLPlot(scene, canvas, gl) {
  scene.graphDiv.emit('plotly_relayout', update);
  };
 
- scene.glplot.canvas.addEventListener('mouseup', relayoutCallback.bind(null, scene));
- scene.glplot.canvas.addEventListener('wheel', relayoutCallback.bind(null, scene), passiveSupported ? {passive: false} : false);
+ scene.glplot.canvas.addEventListener('mouseup', function() {
+ relayoutCallback(scene);
+ });
+
+ scene.glplot.canvas.addEventListener('wheel', function() {
+ if(gd._context._scrollZoom.gl3d) {
+ relayoutCallback(scene);
+ }
+ }, passiveSupported ? {passive: false} : false);
 
  if(!scene.staticMode) {
  scene.glplot.canvas.addEventListener('webglcontextlost', function(event) {
@@ -385,7 +392,6 @@ function computeTraceBounds(scene, trace, bounds) {
 }
 
 proto.plot = function(sceneData, fullLayout, layout) {
-
  // Save parameters
  this.plotArgs = [sceneData, fullLayout, layout];
 
@@ -412,6 +418,7 @@ proto.plot = function(sceneData, fullLayout, layout) {
  // Update camera and camera mode
  this.setCamera(fullSceneLayout.camera);
  this.updateFx(fullSceneLayout.dragmode, fullSceneLayout.hovermode);
+ this.camera.enableWheel = this.graphDiv._context._scrollZoom.gl3d;
 
  // Update scene
  this.glplot.update({});
@@ -776,7 +783,6 @@ proto.updateFx = function(dragmode, hovermode) {
  fullCamera.up = zUp;
  Lib.nestedProperty(layout, attr).set(zUp);
  } else {
-
  // none rotation modes [pan or zoom]
  camera.keyBindingMode = dragmode;
  }

src/plots/mapbox/mapbox.js

@@ -258,6 +258,12 @@ proto.updateMap = function(calcData, fullLayout, resolve, reject) {
  self.updateLayout(fullLayout);
  self.resolveOnRender(resolve);
  }
+
+ if(this.gd._context._scrollZoom.mapbox) {
+ map.scrollZoom.enable();
+ } else {
+ map.scrollZoom.disable();
+ }
 };
 
 proto.updateData = function(calcData) {

test/jasmine/tests/config_test.js

@@ -760,4 +760,63 @@ describe('config argument', function() {
  .then(done);
  });
  });
+
+ describe('scrollZoom:', function() {
+ var gd;
+
+ beforeEach(function() { gd = createGraphDiv(); });
+
+ afterEach(destroyGraphDiv);
+
+ function plot(config) {
+ return Plotly.plot(gd, [], {}, config);
+ }
+
+ it('should fill in scrollZoom default', function(done) {
+ plot(undefined).then(function() {
+ expect(gd._context.scrollZoom).toBe('gl3d+geo+mapbox');
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should fill in blank scrollZoom value', function(done) {
+ plot({scrollZoom: null}).then(function() {
+ expect(gd._context.scrollZoom).toBe(null);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:true', function(done) {
+ plot({scrollZoom: true}).then(function() {
+ expect(gd._context.scrollZoom).toBe(true);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, cartesian: 1, mapbox: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:false', function(done) {
+ plot({scrollZoom: false}).then(function() {
+ expect(gd._context.scrollZoom).toBe(false);
+ expect(gd._context._scrollZoom).toEqual({});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom flaglist', function(done) {
+ plot({scrollZoom: 'mapbox+cartesian'}).then(function() {
+ expect(gd._context.scrollZoom).toBe('mapbox+cartesian');
+ expect(gd._context._scrollZoom).toEqual({mapbox: 1, cartesian: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+ });
 });

test/jasmine/tests/geo_test.js

@@ -1961,4 +1961,52 @@ describe('Test geo zoom/pan/drag interactions:', function() {
  .catch(failTest)
  .then(done);
  });
+
+ it('should respect scrollZoom config option', function(done) {
+ var fig = Lib.extendDeep({}, require('@mocks/geo_winkel-tripel'));
+ fig.layout.width = 700;
+ fig.layout.height = 500;
+ fig.layout.dragmode = 'pan';
+
+ function _assert(step, attr, proj, eventKeys) {
+ var msg = '[' + step + '] ';
+
+ var geoLayout = gd._fullLayout.geo;
+ var scale = geoLayout.projection.scale;
+ expect(scale).toBeCloseTo(attr[0], 1, msg + 'zoom');
+
+ var geo = geoLayout._subplot;
+ var _scale = geo.projection.scale();
+ expect(_scale).toBeCloseTo(proj[0], 0, msg + 'scale');
+
+ assertEventData(msg, eventKeys);
+ }
+
+ plot(fig)
+ .then(function() {
+ _assert('base', [1], [101.9], undefined);
+ })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scroll enable (by default)',
+ [1.3], [134.4],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: false}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:false', [1.3], [134.4], undefined);
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: 'geo'}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:geo',
+ [1.74], [177.34],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .catch(failTest)
+ .then(done);
+ });
 });

test/jasmine/tests/gl3d_plot_interact_test.js

@@ -1097,6 +1097,11 @@ describe('Test gl3d drag and wheel interactions', function() {
  }
  };
 
+ function _assertAndReset(cnt) {
+ expect(relayoutCallback).toHaveBeenCalledTimes(cnt);
+ relayoutCallback.calls.reset();
+ }
+
  Plotly.plot(gd, mock)
  .then(function() {
  relayoutCallback = jasmine.createSpy('relayoutCallback');
@@ -1115,48 +1120,32 @@ describe('Test gl3d drag and wheel interactions', function() {
  return scroll(sceneTarget);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return scroll(sceneTarget2);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
- return Plotly.relayout(gd, {
- 'scene.dragmode': false,
- 'scene2.dragmode': false
- });
+ _assertAndReset(1);
+ return Plotly.relayout(gd, {'scene.dragmode': false, 'scene2.dragmode': false});
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
-expect(relayoutCallback).toHaveBeenCalledTimes(0);
+_assertAndReset(0);
 
- return Plotly.relayout(gd, {
- 'scene.dragmode': 'orbit',
- 'scene2.dragmode': 'turntable'
- });
+ return Plotly.relayout(gd, {'scene.dragmode': 'orbit', 'scene2.dragmode': 'turntable'});
  })
  .then(function() {
  expect(relayoutCallback).toHaveBeenCalledTimes(1);
@@ -1168,7 +1157,27 @@ describe('Test gl3d drag and wheel interactions', function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(2);
+ _assertAndReset(2);
+ return Plotly.plot(gd, [], {}, {scrollZoom: false});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(0);
+ return Plotly.plot(gd, [], {}, {scrollZoom: 'gl3d'});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(2);
  })
  .catch(failTest)
  .then(done);

src/plot_api/plot_api.js

@@ -507,6 +507,25 @@ function setPlotContext(gd, config) {
  // Check if gd has a specified widht/height to begin with
  context._hasZeroHeight = context._hasZeroHeight || gd.clientHeight === 0;
  context._hasZeroWidth = context._hasZeroWidth || gd.clientWidth === 0;
+
+ // fill context._scrollZoom helper to help manage scrollZoom flaglist
+ var szIn = context.scrollZoom;
+ var szOut = context._scrollZoom = {};
+ if(szIn === true) {
+ szOut.cartesian = 1;
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ } else if(typeof szIn === 'string') {
+ var parts = szIn.split('+');
+ for(i = 0; i < parts.length; i++) {
+ szOut[parts[i]] = 1;
+ }
+ } else if(szIn !== false) {
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ }
 }
 
 function plotLegacyPolar(gd, data, layout) {

src/plot_api/plot_config.js

@@ -145,11 +145,16 @@ var configAttributes = {
  },
 
  scrollZoom: {
- valType: 'boolean',
- dflt: false,
+ valType: 'flaglist',
+ flags: ['cartesian', 'gl3d', 'geo', 'mapbox'],
+ extras: [true, false],
+ dflt: 'gl3d+geo+mapbox',
  description: [
- 'Determines whether mouse wheel or two-finger scroll zooms is',
- 'enable. Has an effect only on cartesian subplots.'
+ 'Determines whether mouse wheel or two-finger scroll zooms is enable.',
+ 'Turned on by default for gl3d, geo and mapbox subplots',
+ '(as these subplot types do not have zoombox via pan),',
+ 'but turned off by default for cartesian subplots.',
+ 'Set `scrollZoom` to *false* to disable scrolling for all subplots.'
  ].join(' ')
  },
  doubleClick: {

src/plots/cartesian/dragbox.js

@@ -417,7 +417,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
  // deactivate mousewheel scrolling on embedded graphs
  // devs can override this with layout._enablescrollzoom,
  // but _ ensures this setting won't leave their page
- if(!gd._context.scrollZoom && !gd._fullLayout._enablescrollzoom) {
+ if(!gd._context._scrollZoom.cartesian && !gd._fullLayout._enablescrollzoom) {
  return;
  }
 

src/plots/geo/geo.js

@@ -420,6 +420,9 @@ proto.updateFx = function(fullLayout, geoLayout) {
  bgRect.node().onmousedown = null;
  bgRect.call(createGeoZoom(_this, geoLayout));
  bgRect.on('dblclick.zoom', zoomReset);
+ if(!gd._context._scrollZoom.geo) {
+ bgRect.on('wheel.zoom', null);
+ }
  }
  else if(dragMode === 'select' || dragMode === 'lasso') {
  bgRect.on('.zoom', null);

src/plots/gl2d/scene2d.js

@@ -38,7 +38,7 @@ function Scene2D(options, fullLayout) {
  this.pixelRatio = options.plotGlPixelRatio || window.devicePixelRatio;
  this.id = options.id;
  this.staticPlot = !!options.staticPlot;
- this.scrollZoom = this.graphDiv._context.scrollZoom;
+ this.scrollZoom = this.graphDiv._context._scrollZoom.cartesian;
 
  this.fullData = null;
  this.updateRefs(fullLayout);

src/plots/gl3d/camera.js

@@ -48,6 +48,7 @@ function createCamera(element, options) {
 
  var camera = {
  keyBindingMode: 'rotate',
+ enableWheel: true,
  view: view,
  element: element,
  delay: options.delay || 16,
@@ -257,7 +258,9 @@ function createCamera(element, options) {
  }
 
  camera.wheelListener = mouseWheel(element, function(dx, dy) {
+ // TODO remove now that we can disable scroll via scrollZoom?
  if(camera.keyBindingMode === false) return;
+ if(!camera.enableWheel) return;
 
  var flipX = camera.flipX ? 1 : -1;
  var flipY = camera.flipY ? 1 : -1;

src/plots/gl3d/scene.js

@@ -227,8 +227,15 @@ function initializeGLPlot(scene, canvas, gl) {
  scene.graphDiv.emit('plotly_relayout', update);
  };
 
- scene.glplot.canvas.addEventListener('mouseup', relayoutCallback.bind(null, scene));
- scene.glplot.canvas.addEventListener('wheel', relayoutCallback.bind(null, scene), passiveSupported ? {passive: false} : false);
+ scene.glplot.canvas.addEventListener('mouseup', function() {
+ relayoutCallback(scene);
+ });
+
+ scene.glplot.canvas.addEventListener('wheel', function() {
+ if(gd._context._scrollZoom.gl3d) {
+ relayoutCallback(scene);
+ }
+ }, passiveSupported ? {passive: false} : false);
 
  if(!scene.staticMode) {
  scene.glplot.canvas.addEventListener('webglcontextlost', function(event) {
@@ -385,7 +392,6 @@ function computeTraceBounds(scene, trace, bounds) {
 }
 
 proto.plot = function(sceneData, fullLayout, layout) {
-
  // Save parameters
  this.plotArgs = [sceneData, fullLayout, layout];
 
@@ -412,6 +418,7 @@ proto.plot = function(sceneData, fullLayout, layout) {
  // Update camera and camera mode
  this.setCamera(fullSceneLayout.camera);
  this.updateFx(fullSceneLayout.dragmode, fullSceneLayout.hovermode);
+ this.camera.enableWheel = this.graphDiv._context._scrollZoom.gl3d;
 
  // Update scene
  this.glplot.update({});
@@ -776,7 +783,6 @@ proto.updateFx = function(dragmode, hovermode) {
  fullCamera.up = zUp;
  Lib.nestedProperty(layout, attr).set(zUp);
  } else {
-
  // none rotation modes [pan or zoom]
  camera.keyBindingMode = dragmode;
  }

src/plots/mapbox/mapbox.js

@@ -258,6 +258,12 @@ proto.updateMap = function(calcData, fullLayout, resolve, reject) {
  self.updateLayout(fullLayout);
  self.resolveOnRender(resolve);
  }
+
+ if(this.gd._context._scrollZoom.mapbox) {
+ map.scrollZoom.enable();
+ } else {
+ map.scrollZoom.disable();
+ }
 };
 
 proto.updateData = function(calcData) {

test/jasmine/tests/config_test.js

@@ -760,4 +760,63 @@ describe('config argument', function() {
  .then(done);
  });
  });
+
+ describe('scrollZoom:', function() {
+ var gd;
+
+ beforeEach(function() { gd = createGraphDiv(); });
+
+ afterEach(destroyGraphDiv);
+
+ function plot(config) {
+ return Plotly.plot(gd, [], {}, config);
+ }
+
+ it('should fill in scrollZoom default', function(done) {
+ plot(undefined).then(function() {
+ expect(gd._context.scrollZoom).toBe('gl3d+geo+mapbox');
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should fill in blank scrollZoom value', function(done) {
+ plot({scrollZoom: null}).then(function() {
+ expect(gd._context.scrollZoom).toBe(null);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:true', function(done) {
+ plot({scrollZoom: true}).then(function() {
+ expect(gd._context.scrollZoom).toBe(true);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, cartesian: 1, mapbox: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:false', function(done) {
+ plot({scrollZoom: false}).then(function() {
+ expect(gd._context.scrollZoom).toBe(false);
+ expect(gd._context._scrollZoom).toEqual({});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom flaglist', function(done) {
+ plot({scrollZoom: 'mapbox+cartesian'}).then(function() {
+ expect(gd._context.scrollZoom).toBe('mapbox+cartesian');
+ expect(gd._context._scrollZoom).toEqual({mapbox: 1, cartesian: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+ });
 });

test/jasmine/tests/geo_test.js

@@ -1961,4 +1961,52 @@ describe('Test geo zoom/pan/drag interactions:', function() {
  .catch(failTest)
  .then(done);
  });
+
+ it('should respect scrollZoom config option', function(done) {
+ var fig = Lib.extendDeep({}, require('@mocks/geo_winkel-tripel'));
+ fig.layout.width = 700;
+ fig.layout.height = 500;
+ fig.layout.dragmode = 'pan';
+
+ function _assert(step, attr, proj, eventKeys) {
+ var msg = '[' + step + '] ';
+
+ var geoLayout = gd._fullLayout.geo;
+ var scale = geoLayout.projection.scale;
+ expect(scale).toBeCloseTo(attr[0], 1, msg + 'zoom');
+
+ var geo = geoLayout._subplot;
+ var _scale = geo.projection.scale();
+ expect(_scale).toBeCloseTo(proj[0], 0, msg + 'scale');
+
+ assertEventData(msg, eventKeys);
+ }
+
+ plot(fig)
+ .then(function() {
+ _assert('base', [1], [101.9], undefined);
+ })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scroll enable (by default)',
+ [1.3], [134.4],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: false}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:false', [1.3], [134.4], undefined);
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: 'geo'}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:geo',
+ [1.74], [177.34],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .catch(failTest)
+ .then(done);
+ });
 });

test/jasmine/tests/gl3d_plot_interact_test.js

@@ -1097,6 +1097,11 @@ describe('Test gl3d drag and wheel interactions', function() {
  }
  };
 
+ function _assertAndReset(cnt) {
+ expect(relayoutCallback).toHaveBeenCalledTimes(cnt);
+ relayoutCallback.calls.reset();
+ }
+
  Plotly.plot(gd, mock)
  .then(function() {
  relayoutCallback = jasmine.createSpy('relayoutCallback');
@@ -1115,48 +1120,32 @@ describe('Test gl3d drag and wheel interactions', function() {
  return scroll(sceneTarget);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return scroll(sceneTarget2);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
- return Plotly.relayout(gd, {
- 'scene.dragmode': false,
- 'scene2.dragmode': false
- });
+ _assertAndReset(1);
+ return Plotly.relayout(gd, {'scene.dragmode': false, 'scene2.dragmode': false});
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
-expect(relayoutCallback).toHaveBeenCalledTimes(0);
+_assertAndReset(0);
 
- return Plotly.relayout(gd, {
- 'scene.dragmode': 'orbit',
- 'scene2.dragmode': 'turntable'
- });
+ return Plotly.relayout(gd, {'scene.dragmode': 'orbit', 'scene2.dragmode': 'turntable'});
  })
  .then(function() {
  expect(relayoutCallback).toHaveBeenCalledTimes(1);
@@ -1168,7 +1157,27 @@ describe('Test gl3d drag and wheel interactions', function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(2);
+ _assertAndReset(2);
+ return Plotly.plot(gd, [], {}, {scrollZoom: false});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(0);
+ return Plotly.plot(gd, [], {}, {scrollZoom: 'gl3d'});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(2);
  })
  .catch(failTest)
  .then(done);

src/plot_api/plot_api.js

@@ -507,6 +507,25 @@ function setPlotContext(gd, config) {
  // Check if gd has a specified widht/height to begin with
  context._hasZeroHeight = context._hasZeroHeight || gd.clientHeight === 0;
  context._hasZeroWidth = context._hasZeroWidth || gd.clientWidth === 0;
+
+ // fill context._scrollZoom helper to help manage scrollZoom flaglist
+ var szIn = context.scrollZoom;
+ var szOut = context._scrollZoom = {};
+ if(szIn === true) {
+ szOut.cartesian = 1;
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ } else if(typeof szIn === 'string') {
+ var parts = szIn.split('+');
+ for(i = 0; i < parts.length; i++) {
+ szOut[parts[i]] = 1;
+ }
+ } else if(szIn !== false) {
+ szOut.gl3d = 1;
+ szOut.geo = 1;
+ szOut.mapbox = 1;
+ }
 }
 
 function plotLegacyPolar(gd, data, layout) {

src/plot_api/plot_config.js

@@ -145,11 +145,16 @@ var configAttributes = {
  },
 
  scrollZoom: {
- valType: 'boolean',
- dflt: false,
+ valType: 'flaglist',
+ flags: ['cartesian', 'gl3d', 'geo', 'mapbox'],
+ extras: [true, false],
+ dflt: 'gl3d+geo+mapbox',
  description: [
- 'Determines whether mouse wheel or two-finger scroll zooms is',
- 'enable. Has an effect only on cartesian subplots.'
+ 'Determines whether mouse wheel or two-finger scroll zooms is enable.',
+ 'Turned on by default for gl3d, geo and mapbox subplots',
+ '(as these subplot types do not have zoombox via pan),',
+ 'but turned off by default for cartesian subplots.',
+ 'Set `scrollZoom` to *false* to disable scrolling for all subplots.'
  ].join(' ')
  },
  doubleClick: {

src/plots/cartesian/dragbox.js

@@ -417,7 +417,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
  // deactivate mousewheel scrolling on embedded graphs
  // devs can override this with layout._enablescrollzoom,
  // but _ ensures this setting won't leave their page
- if(!gd._context.scrollZoom && !gd._fullLayout._enablescrollzoom) {
+ if(!gd._context._scrollZoom.cartesian && !gd._fullLayout._enablescrollzoom) {
  return;
  }
 

src/plots/geo/geo.js

@@ -420,6 +420,9 @@ proto.updateFx = function(fullLayout, geoLayout) {
  bgRect.node().onmousedown = null;
  bgRect.call(createGeoZoom(_this, geoLayout));
  bgRect.on('dblclick.zoom', zoomReset);
+ if(!gd._context._scrollZoom.geo) {
+ bgRect.on('wheel.zoom', null);
+ }
  }
  else if(dragMode === 'select' || dragMode === 'lasso') {
  bgRect.on('.zoom', null);

src/plots/gl2d/scene2d.js

@@ -38,7 +38,7 @@ function Scene2D(options, fullLayout) {
  this.pixelRatio = options.plotGlPixelRatio || window.devicePixelRatio;
  this.id = options.id;
  this.staticPlot = !!options.staticPlot;
- this.scrollZoom = this.graphDiv._context.scrollZoom;
+ this.scrollZoom = this.graphDiv._context._scrollZoom.cartesian;
 
  this.fullData = null;
  this.updateRefs(fullLayout);

src/plots/gl3d/camera.js

@@ -48,6 +48,7 @@ function createCamera(element, options) {
 
  var camera = {
  keyBindingMode: 'rotate',
+ enableWheel: true,
  view: view,
  element: element,
  delay: options.delay || 16,
@@ -257,7 +258,9 @@ function createCamera(element, options) {
  }
 
  camera.wheelListener = mouseWheel(element, function(dx, dy) {
+ // TODO remove now that we can disable scroll via scrollZoom?
  if(camera.keyBindingMode === false) return;
+ if(!camera.enableWheel) return;
 
  var flipX = camera.flipX ? 1 : -1;
  var flipY = camera.flipY ? 1 : -1;

src/plots/gl3d/scene.js

@@ -227,8 +227,15 @@ function initializeGLPlot(scene, canvas, gl) {
  scene.graphDiv.emit('plotly_relayout', update);
  };
 
- scene.glplot.canvas.addEventListener('mouseup', relayoutCallback.bind(null, scene));
- scene.glplot.canvas.addEventListener('wheel', relayoutCallback.bind(null, scene), passiveSupported ? {passive: false} : false);
+ scene.glplot.canvas.addEventListener('mouseup', function() {
+ relayoutCallback(scene);
+ });
+
+ scene.glplot.canvas.addEventListener('wheel', function() {
+ if(gd._context._scrollZoom.gl3d) {
+ relayoutCallback(scene);
+ }
+ }, passiveSupported ? {passive: false} : false);
 
  if(!scene.staticMode) {
  scene.glplot.canvas.addEventListener('webglcontextlost', function(event) {
@@ -385,7 +392,6 @@ function computeTraceBounds(scene, trace, bounds) {
 }
 
 proto.plot = function(sceneData, fullLayout, layout) {
-
  // Save parameters
  this.plotArgs = [sceneData, fullLayout, layout];
 
@@ -412,6 +418,7 @@ proto.plot = function(sceneData, fullLayout, layout) {
  // Update camera and camera mode
  this.setCamera(fullSceneLayout.camera);
  this.updateFx(fullSceneLayout.dragmode, fullSceneLayout.hovermode);
+ this.camera.enableWheel = this.graphDiv._context._scrollZoom.gl3d;
 
  // Update scene
  this.glplot.update({});
@@ -776,7 +783,6 @@ proto.updateFx = function(dragmode, hovermode) {
  fullCamera.up = zUp;
  Lib.nestedProperty(layout, attr).set(zUp);
  } else {
-
  // none rotation modes [pan or zoom]
  camera.keyBindingMode = dragmode;
  }

src/plots/mapbox/mapbox.js

@@ -258,6 +258,12 @@ proto.updateMap = function(calcData, fullLayout, resolve, reject) {
  self.updateLayout(fullLayout);
  self.resolveOnRender(resolve);
  }
+
+ if(this.gd._context._scrollZoom.mapbox) {
+ map.scrollZoom.enable();
+ } else {
+ map.scrollZoom.disable();
+ }
 };
 
 proto.updateData = function(calcData) {

test/jasmine/tests/config_test.js

@@ -760,4 +760,63 @@ describe('config argument', function() {
  .then(done);
  });
  });
+
+ describe('scrollZoom:', function() {
+ var gd;
+
+ beforeEach(function() { gd = createGraphDiv(); });
+
+ afterEach(destroyGraphDiv);
+
+ function plot(config) {
+ return Plotly.plot(gd, [], {}, config);
+ }
+
+ it('should fill in scrollZoom default', function(done) {
+ plot(undefined).then(function() {
+ expect(gd._context.scrollZoom).toBe('gl3d+geo+mapbox');
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should fill in blank scrollZoom value', function(done) {
+ plot({scrollZoom: null}).then(function() {
+ expect(gd._context.scrollZoom).toBe(null);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, mapbox: 1});
+ expect(gd._context._scrollZoom.cartesian).toBe(undefined, 'no cartesian!');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:true', function(done) {
+ plot({scrollZoom: true}).then(function() {
+ expect(gd._context.scrollZoom).toBe(true);
+ expect(gd._context._scrollZoom).toEqual({gl3d: 1, geo: 1, cartesian: 1, mapbox: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom:false', function(done) {
+ plot({scrollZoom: false}).then(function() {
+ expect(gd._context.scrollZoom).toBe(false);
+ expect(gd._context._scrollZoom).toEqual({});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ it('should honor scrollZoom flaglist', function(done) {
+ plot({scrollZoom: 'mapbox+cartesian'}).then(function() {
+ expect(gd._context.scrollZoom).toBe('mapbox+cartesian');
+ expect(gd._context._scrollZoom).toEqual({mapbox: 1, cartesian: 1});
+ })
+ .catch(failTest)
+ .then(done);
+ });
+ });
 });

test/jasmine/tests/geo_test.js

@@ -1961,4 +1961,52 @@ describe('Test geo zoom/pan/drag interactions:', function() {
  .catch(failTest)
  .then(done);
  });
+
+ it('should respect scrollZoom config option', function(done) {
+ var fig = Lib.extendDeep({}, require('@mocks/geo_winkel-tripel'));
+ fig.layout.width = 700;
+ fig.layout.height = 500;
+ fig.layout.dragmode = 'pan';
+
+ function _assert(step, attr, proj, eventKeys) {
+ var msg = '[' + step + '] ';
+
+ var geoLayout = gd._fullLayout.geo;
+ var scale = geoLayout.projection.scale;
+ expect(scale).toBeCloseTo(attr[0], 1, msg + 'zoom');
+
+ var geo = geoLayout._subplot;
+ var _scale = geo.projection.scale();
+ expect(_scale).toBeCloseTo(proj[0], 0, msg + 'scale');
+
+ assertEventData(msg, eventKeys);
+ }
+
+ plot(fig)
+ .then(function() {
+ _assert('base', [1], [101.9], undefined);
+ })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scroll enable (by default)',
+ [1.3], [134.4],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: false}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:false', [1.3], [134.4], undefined);
+ })
+ .then(function() { return Plotly.plot(gd, [], {}, {scrollZoom: 'geo'}); })
+ .then(function() { return scroll([200, 250], [-200, -200]); })
+ .then(function() {
+ _assert('with scrollZoom:geo',
+ [1.74], [177.34],
+ ['geo.projection.rotation.lon', 'geo.center.lon', 'geo.center.lat', 'geo.projection.scale']
+ );
+ })
+ .catch(failTest)
+ .then(done);
+ });
 });

test/jasmine/tests/gl3d_plot_interact_test.js

@@ -1097,6 +1097,11 @@ describe('Test gl3d drag and wheel interactions', function() {
  }
  };
 
+ function _assertAndReset(cnt) {
+ expect(relayoutCallback).toHaveBeenCalledTimes(cnt);
+ relayoutCallback.calls.reset();
+ }
+
  Plotly.plot(gd, mock)
  .then(function() {
  relayoutCallback = jasmine.createSpy('relayoutCallback');
@@ -1115,48 +1120,32 @@ describe('Test gl3d drag and wheel interactions', function() {
  return scroll(sceneTarget);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return scroll(sceneTarget2);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
- return Plotly.relayout(gd, {
- 'scene.dragmode': false,
- 'scene2.dragmode': false
- });
+ _assertAndReset(1);
+ return Plotly.relayout(gd, {'scene.dragmode': false, 'scene2.dragmode': false});
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(1);
- relayoutCallback.calls.reset();
-
+ _assertAndReset(1);
  return drag(sceneTarget, [0, 0], [100, 100]);
  })
  .then(function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
-expect(relayoutCallback).toHaveBeenCalledTimes(0);
+_assertAndReset(0);
 
- return Plotly.relayout(gd, {
- 'scene.dragmode': 'orbit',
- 'scene2.dragmode': 'turntable'
- });
+ return Plotly.relayout(gd, {'scene.dragmode': 'orbit', 'scene2.dragmode': 'turntable'});
  })
  .then(function() {
  expect(relayoutCallback).toHaveBeenCalledTimes(1);
@@ -1168,7 +1157,27 @@ describe('Test gl3d drag and wheel interactions', function() {
  return drag(sceneTarget2, [0, 0], [100, 100]);
  })
  .then(function() {
- expect(relayoutCallback).toHaveBeenCalledTimes(2);
+ _assertAndReset(2);
+ return Plotly.plot(gd, [], {}, {scrollZoom: false});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(0);
+ return Plotly.plot(gd, [], {}, {scrollZoom: 'gl3d'});
+ })
+ .then(function() {
+ return scroll(sceneTarget);
+ })
+ .then(function() {
+ return scroll(sceneTarget2);
+ })
+ .then(function() {
+ _assertAndReset(2);
  })
  .catch(failTest)
  .then(done);