Switch to new rangeslider range opts (default missing)

Author: TomDemulierChevret

src/components/rangeslider/constants.js

@@ -37,7 +37,7 @@ module.exports = {
     // style constants
 
     maskColor: 'rgba(0,0,0,0.4)',
-    maskOppColor: 'rgba(0,0,0,0.2)',
+    maskOppAxisColor: 'rgba(0,0,0,0.2)',
 
     slideBoxFill: 'transparent',
     slideBoxCursor: 'ew-resize',

src/components/rangeslider/defaults.js

@@ -37,6 +37,7 @@ module.exports = function handleDefaults(layoutIn, layoutOut, axName) {
 
     coerce('autorange', !axOut.isValidRange(containerIn.range));
     coerce('range');
+    containerOut.yaxis = containerIn.yaxis;
 
     // to map back range slider (auto) range
     containerOut._input = containerIn;

src/components/rangeslider/draw.js

@@ -78,7 +78,8 @@ module.exports = function(gd) {
     rangeSliders.each(function(axisOpts) {
         var rangeSlider = d3.select(this),
             opts = axisOpts[constants.name],
-            oppAxisOpts = fullLayout[Axes.id2name(axisOpts.anchor)];
+            oppAxisOpts = fullLayout[Axes.id2name(axisOpts.anchor)],
+            oppAxisRangeOpts = opts[Axes.id2name(axisOpts.anchor)];
 
         // update range
         // Expand slider range to the axis range
@@ -136,9 +137,9 @@ 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]),
+        if(oppAxisRangeOpts.rangemode === 'auto' || oppAxisRangeOpts.rangemode === 'fixed') {
+            var range0OppAxis = oppAxisOpts.r2l(oppAxisRangeOpts.range[0]),
+                range1OppAxis = oppAxisOpts.r2l(oppAxisRangeOpts.range[1]),
                 distOppAxis = range1OppAxis - range0OppAxis;
 
             opts.d2pOppAxis = function(v) {
@@ -151,16 +152,16 @@ module.exports = function(gd) {
         rangeSlider
             .call(drawBg, gd, axisOpts, opts)
             .call(addClipPath, gd, axisOpts, opts)
-            .call(drawRangePlot, gd, axisOpts, opts)
-            .call(drawMasks, gd, axisOpts, opts, oppAxisOpts)
+            .call(drawRangePlot, gd, axisOpts, opts, oppAxisRangeOpts)
+            .call(drawMasks, gd, axisOpts, opts, oppAxisRangeOpts)
             .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, oppAxisOpts);
+        setPixelRange(rangeSlider, gd, axisOpts, opts, oppAxisOpts, oppAxisRangeOpts);
 
         // update margins
 
@@ -276,7 +277,7 @@ function setDataRange(rangeSlider, gd, axisOpts, opts) {
     });
 }
 
-function setPixelRange(rangeSlider, gd, axisOpts, opts, oppAxisOpts) {
+function setPixelRange(rangeSlider, gd, axisOpts, opts, oppAxisOpts, oppAxisRangeOpts) {
     var hw2 = constants.handleWidth / 2;
 
     function clamp(v) {
@@ -305,7 +306,7 @@ function setPixelRange(rangeSlider, gd, axisOpts, opts, oppAxisOpts) {
         .attr('x', pixelMax)
         .attr('width', opts._width - pixelMax);
 
-    if(oppAxisOpts.rangeslidermode === 'auto' || oppAxisOpts.rangeslidermode === 'fixed') {
+    if(oppAxisRangeOpts.rangemode === 'auto' || oppAxisRangeOpts.rangemode === 'fixed') {
         var pixelMinOppAxis = opts._height - clampOppAxis(opts.d2pOppAxis(oppAxisOpts._rl[1])),
             pixelMaxOppAxis = opts._height - clampOppAxis(opts.d2pOppAxis(oppAxisOpts._rl[0]));
 
@@ -385,7 +386,7 @@ function addClipPath(rangeSlider, gd, axisOpts, opts) {
     });
 }
 
-function drawRangePlot(rangeSlider, gd, axisOpts, opts) {
+function drawRangePlot(rangeSlider, gd, axisOpts, opts, oppAxisRangeOpts) {
     var subplotData = Axes.getSubplots(gd, axisOpts),
         calcData = gd.calcdata;
 
@@ -428,7 +429,7 @@ function drawRangePlot(rangeSlider, gd, axisOpts, opts) {
         mockFigure.layout[oppAxisName] = {
             type: oppAxisOpts.type,
             domain: [0, 1],
-            range: (oppAxisOpts.rangeslidermode === 'auto' || oppAxisOpts.rangeslidermode === 'fixed') ? oppAxisOpts.rangesliderrange.slice() : oppAxisOpts.range.slice(),
+            range: (oppAxisRangeOpts.rangemode === 'auto' || oppAxisRangeOpts.rangemode === 'fixed') ? oppAxisRangeOpts.range.slice() : oppAxisOpts.range.slice(),
             calendar: oppAxisOpts.calendar
         };
 
@@ -469,7 +470,7 @@ function filterRangePlotCalcData(calcData, subplotId) {
     return out;
 }
 
-function drawMasks(rangeSlider, gd, axisOpts, opts, oppAxisOpts) {
+function drawMasks(rangeSlider, gd, axisOpts, opts, yAxisOpts) {
     var maskMin = rangeSlider.selectAll('rect.' + constants.maskMinClassName)
         .data([0]);
 
@@ -495,7 +496,7 @@ function drawMasks(rangeSlider, gd, axisOpts, opts, oppAxisOpts) {
         .call(Color.fill, constants.maskColor);
 
     // masks used for oppAxis zoom
-    if(oppAxisOpts.rangeslidermode === 'auto' || oppAxisOpts.rangeslidermode === 'fixed') {
+    if(yAxisOpts.rangemode === 'auto' || yAxisOpts.rangemode === 'fixed') {
         var maskMinOppAxis = rangeSlider.selectAll('rect.' + constants.maskMinOppAxisClassName)
             .data([0]);
 
@@ -506,7 +507,7 @@ function drawMasks(rangeSlider, gd, axisOpts, opts, oppAxisOpts) {
 
         maskMinOppAxis
             .attr('width', opts._width)
-            .call(Color.fill, constants.maskOppColor);
+            .call(Color.fill, constants.maskOppAxisColor);
 
         var maskMaxOppAxis = rangeSlider.selectAll('rect.' + constants.maskMaxOppAxisClassName)
             .data([0]);
@@ -519,7 +520,7 @@ function drawMasks(rangeSlider, gd, axisOpts, opts, oppAxisOpts) {
         maskMaxOppAxis
             .attr('width', opts._width)
             .style('border-top', constants.maskOppBorder)
-            .call(Color.fill, constants.maskOppColor);
+            .call(Color.fill, constants.maskOppAxisColor);
     }
 }
 

src/plots/cartesian/axis_defaults.js

@@ -55,7 +55,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
     containerOut.cleanRange();
 
     if(letter === 'y') {
-        if(containerIn.rangesliderrange) {
+        if(!containerIn.rangesliderrange) {
             coerce('rangeslidermode', 'auto');
         } else if(containerOut.isValidRange(containerIn.rangesliderrange)) {
             coerce('rangeslidermode', 'fixed');