Rangeslider allow zoom on oppaxis

src/components/rangeslider/constants.js

@@ -31,9 +31,13 @@ module.exports = {
     grabAreaMaxClassName: 'rangeslider-grabarea-max',
     handleMaxClassName: 'rangeslider-handle-max',
 
+    maskMinOppAxisClassName: 'rangeslider-mask-min-opp-axis',
+    maskMaxOppAxisClassName: 'rangeslider-mask-max-opp-axis',
+
     // style constants
 
     maskColor: 'rgba(0,0,0,0.4)',
+    maskOppColor: 'rgba(0,0,0,0.2)',
 
     slideBoxFill: 'transparent',
     slideBoxCursor: 'ew-resize',

src/components/rangeslider/draw.js

@@ -136,21 +136,31 @@ module.exports = function(gd) {
 
         opts._rl = [range0, range1];
 
+        if(oppAxisOpts.rangeslidermode === 'auto' || oppAxisOpts.rangeslidermode === 'fixed') {
+            var range0OppAxis = oppAxisOpts.r2l(oppAxisOpts.rangesliderrange[0]),
+                range1OppAxis = oppAxisOpts.r2l(oppAxisOpts.rangesliderrange[1]),
+                distOppAxis = range1OppAxis - range0OppAxis;
+
+            opts.d2pOppAxis = function(v) {
+                return (v - range0OppAxis) / distOppAxis * opts._height;
+            };
+        }
+
         // update inner nodes
 
         rangeSlider
             .call(drawBg, gd, axisOpts, opts)
             .call(addClipPath, gd, axisOpts, opts)
             .call(drawRangePlot, gd, axisOpts, opts)
-            .call(drawMasks, gd, axisOpts, opts)
+            .call(drawMasks, gd, axisOpts, opts, oppAxisOpts)
             .call(drawSlideBox, gd, axisOpts, opts)
             .call(drawGrabbers, gd, axisOpts, opts);
 
         // setup drag element
         setupDragElement(rangeSlider, gd, axisOpts, opts);
 
         // update current range
-        setPixelRange(rangeSlider, gd, axisOpts, opts);
+        setPixelRange(rangeSlider, gd, axisOpts, opts, oppAxisOpts);
 
         // update margins
 
@@ -266,13 +276,17 @@ function setDataRange(rangeSlider, gd, axisOpts, opts) {
     });
 }
 
-function setPixelRange(rangeSlider, gd, axisOpts, opts) {
+function setPixelRange(rangeSlider, gd, axisOpts, opts, oppAxisOpts) {
     var hw2 = constants.handleWidth / 2;
 
     function clamp(v) {
         return Lib.constrain(v, 0, opts._width);
     }
 
+    function clampOppAxis(v) {
+        return Lib.constrain(v, 0, opts._height);
+    }
+
     function clampHandle(v) {
         return Lib.constrain(v, -hw2, opts._width + hw2);
     }
@@ -291,6 +305,26 @@ function setPixelRange(rangeSlider, gd, axisOpts, opts) {
         .attr('x', pixelMax)
         .attr('width', opts._width - pixelMax);
 
+    if(oppAxisOpts.rangeslidermode === 'auto' || oppAxisOpts.rangeslidermode === 'fixed') {
+        var pixelMinOppAxis = opts._height - clampOppAxis(opts.d2pOppAxis(oppAxisOpts._rl[1])),
+            pixelMaxOppAxis = opts._height - clampOppAxis(opts.d2pOppAxis(oppAxisOpts._rl[0]));
+
+        rangeSlider.select('rect.' + constants.maskMinOppAxisClassName)
+            .attr('x', pixelMin)
+            .attr('height', pixelMinOppAxis)
+            .attr('width', pixelMax - pixelMin);
+
+        rangeSlider.select('rect.' + constants.maskMaxOppAxisClassName)
+            .attr('x', pixelMin)
+            .attr('y', pixelMaxOppAxis)
+            .attr('height', opts._height - pixelMaxOppAxis)
+            .attr('width', pixelMax - pixelMin);
+
+        rangeSlider.select('rect.' + constants.slideBoxClassName)
+            .attr('y', pixelMinOppAxis)
+            .attr('height', pixelMaxOppAxis - pixelMinOppAxis);
+    }
+
     // add offset for crispier corners
     // https://github.com/plotly/plotly.js/pull/1409
     var offset = 0.5;
@@ -394,7 +428,7 @@ function drawRangePlot(rangeSlider, gd, axisOpts, opts) {
         mockFigure.layout[oppAxisName] = {
             type: oppAxisOpts.type,
             domain: [0, 1],
-            range: oppAxisOpts.range.slice(),
+            range: (oppAxisOpts.rangeslidermode === 'auto' || oppAxisOpts.rangeslidermode === 'fixed') ? oppAxisOpts.rangesliderrange.slice() : oppAxisOpts.range.slice(),
             calendar: oppAxisOpts.calendar
         };
 
@@ -435,7 +469,7 @@ function filterRangePlotCalcData(calcData, subplotId) {
     return out;
 }
 
-function drawMasks(rangeSlider, gd, axisOpts, opts) {
+function drawMasks(rangeSlider, gd, axisOpts, opts, oppAxisOpts) {
     var maskMin = rangeSlider.selectAll('rect.' + constants.maskMinClassName)
         .data([0]);
 
@@ -459,6 +493,34 @@ function drawMasks(rangeSlider, gd, axisOpts, opts) {
     maskMax
         .attr('height', opts._height)
         .call(Color.fill, constants.maskColor);
+
+    // masks used for oppAxis zoom
+    if(oppAxisOpts.rangeslidermode === 'auto' || oppAxisOpts.rangeslidermode === 'fixed') {
+        var maskMinOppAxis = rangeSlider.selectAll('rect.' + constants.maskMinOppAxisClassName)
+            .data([0]);
+
+        maskMinOppAxis.enter().append('rect')
+            .classed(constants.maskMinOppAxisClassName, true)
+            .attr('y', 0)
+            .attr('shape-rendering', 'crispEdges');
+
+        maskMinOppAxis
+            .attr('width', opts._width)
+            .call(Color.fill, constants.maskOppColor);
+
+        var maskMaxOppAxis = rangeSlider.selectAll('rect.' + constants.maskMaxOppAxisClassName)
+            .data([0]);
+
+        maskMaxOppAxis.enter().append('rect')
+            .classed(constants.maskMaxOppAxisClassName, true)
+            .attr('y', 0)
+            .attr('shape-rendering', 'crispEdges');
+
+        maskMaxOppAxis
+            .attr('width', opts._width)
+            .style('border-top', constants.maskOppBorder)
+            .call(Color.fill, constants.maskOppColor);
+    }
 }
 
 function drawSlideBox(rangeSlider, gd, axisOpts, opts) {

src/plots/cartesian/axes.js

@@ -352,6 +352,7 @@ axes.doAutoRange = function(ax) {
 
     // TODO do we really need this?
     var hasDeps = (ax._min && ax._max && ax._min.length && ax._max.length);
+    var axIn;
 
     if(ax.autorange && hasDeps) {
         ax.range = axes.getAutoRange(ax);
@@ -362,10 +363,16 @@ axes.doAutoRange = function(ax) {
         // doAutoRange will get called on fullLayout,
         // but we want to report its results back to layout
 
-        var axIn = ax._input;
+        axIn = ax._input;
         axIn.range = ax.range.slice();
         axIn.autorange = ax.autorange;
     }
+
+    if(ax.rangeslidermode === 'auto') {
+        ax.rangesliderrange = hasDeps ? axes.getAutoRange(ax) : ax.range.slice();
+        axIn = ax._input;
+        axIn.rangesliderrange = ax.rangesliderrange.slice();
+    }
 };
 
 // save a copy of the initial axis ranges in fullLayout

src/plots/cartesian/axis_defaults.js

@@ -54,6 +54,19 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
     coerce('range');
     containerOut.cleanRange();
 
+    if(letter === 'y') {
+        if(containerIn.rangesliderrange) {
+            coerce('rangeslidermode', 'auto');
+        } else if(containerOut.isValidRange(containerIn.rangesliderrange)) {
+            coerce('rangeslidermode', 'fixed');
+        } else {
+            coerce('rangeslidermode', 'match');
+        }
+
+        coerce('rangesliderrange');
+        containerOut.cleanRange('rangesliderrange');
+    }
+
     handleCategoryOrderDefaults(containerIn, containerOut, coerce);
     containerOut._initialCategories = axType === 'category' ?
         orderedCategories(letter, containerOut.categoryorder, containerOut.categoryarray, options.data) :

src/plots/cartesian/layout_attributes.js

@@ -128,6 +128,33 @@ module.exports = {
             'If true, then zoom is disabled.'
         ].join(' ')
     },
+    rangeslidermode: {
+        valType: 'enumerated',
+        values: ['auto', 'fixed', 'match'],
+        dflt: 'auto',
+        role: 'style',
+        editType: 'calc',
+        description: [
+            'Determines whether or not the range of this axis in',
+            'the rangeslider use the same value than in the main plot',
+            'when zooming in/out.',
+            'If *auto*, the autorange will be used.',
+            'If *fixed*, the `rangesliderrange` is used.',
+            'If *match*, the current range is used.'
+        ].join(' ')
+    },
+    rangesliderrange: {
+        valType: 'info_array',
+        role: 'style',
+        items: [
+            {valType: 'any', editType: 'calc'},
+            {valType: 'any', editType: 'calc'}
+        ],
+        editType: 'calc',
+        description: [
+            'Sets the range of this axis for the rangeslider.'
+        ].join(' ')
+    },
     // scaleanchor: not used directly, just put here for reference
     // values are any opposite-letter axis id
     scaleanchor: {

src/plots/gl3d/layout/axis_attributes.js

@@ -78,6 +78,8 @@ module.exports = overrideAll({
     autorange: axesAttrs.autorange,
     rangemode: axesAttrs.rangemode,
     range: axesAttrs.range,
+    rangeslidermode: axesAttrs.rangeslidermode,
+    rangesliderrange: axesAttrs.rangesliderrange,
     // ticks
     tickmode: axesAttrs.tickmode,
     nticks: axesAttrs.nticks,