fix bugs in rangeslider with explicit range and relayout

alexcjohnson · alexcjohnson · commit be4932da492f · 2018-02-08T17:41:34.000-05:00
the range_slider_multiple mock showed the first bug, but I updated it so neither bound matches the default [-1, 6]
second bug was that impliedEdits were missing so some range updates wouldn't work
diff --git a/src/components/rangeslider/attributes.js b/src/components/rangeslider/attributes.js
@@ -38,6 +38,7 @@ module.exports = {
         dflt: true,
         role: 'style',
         editType: 'calc',
+        impliedEdits: {'range[0]': undefined, 'range[1]': undefined},
         description: [
             'Determines whether or not the range slider range is',
             'computed in relation to the input data.',
@@ -48,10 +49,11 @@ module.exports = {
         valType: 'info_array',
         role: 'info',
         items: [
-            {valType: 'any', editType: 'calc'},
-            {valType: 'any', editType: 'calc'}
+            {valType: 'any', editType: 'calc', impliedEdits: {'^autorange': false}},
+            {valType: 'any', editType: 'calc', impliedEdits: {'^autorange': false}}
         ],
         editType: 'calc',
+        impliedEdits: {'autorange': false},
         description: [
             'Sets the range of the range slider.',
             'If not set, defaults to the full xaxis range.',
diff --git a/src/components/rangeslider/defaults.js b/src/components/rangeslider/defaults.js
@@ -38,18 +38,6 @@ module.exports = function handleDefaults(layoutIn, layoutOut, axName) {
     coerce('autorange', !axOut.isValidRange(containerIn.range));
     coerce('range');
 
-    // Expand slider range to the axis range
-    // TODO: what if the ranges are reversed?
-    if(containerOut.range) {
-        var outRange = containerOut.range,
-            axRange = axOut.range;
-
-        outRange[0] = axOut.l2r(Math.min(axOut.r2l(outRange[0]), axOut.r2l(axRange[0])));
-        outRange[1] = axOut.l2r(Math.max(axOut.r2l(outRange[1]), axOut.r2l(axRange[1])));
-    }
-
-    axOut.cleanRange('rangeslider.range');
-
     // to map back range slider (auto) range
     containerOut._input = containerIn;
 };
diff --git a/src/components/rangeslider/draw.js b/src/components/rangeslider/draw.js
@@ -80,6 +80,21 @@ module.exports = function(gd) {
             opts = axisOpts[constants.name],
             oppAxisOpts = fullLayout[Axes.id2name(axisOpts.anchor)];
 
+        // update range
+        // Expand slider range to the axis range
+        // TODO: what if the ranges are reversed?
+        if(opts.range) {
+            var outRange = opts.range;
+            var axRange = axisOpts.range;
+
+            outRange[0] = axisOpts.l2r(Math.min(axisOpts.r2l(outRange[0]), axisOpts.r2l(axRange[0])));
+            outRange[1] = axisOpts.l2r(Math.max(axisOpts.r2l(outRange[1]), axisOpts.r2l(axRange[1])));
+            opts._input.range = outRange.slice();
+        }
+
+        axisOpts.cleanRange('rangeslider.range');
+
+
         // update range slider dimensions
 
         var margin = fullLayout.margin,
diff --git a/test/image/baselines/range_slider_multiple.png b/test/image/baselines/range_slider_multiple.png
diff --git a/test/image/mocks/range_slider_multiple.json b/test/image/mocks/range_slider_multiple.json
@@ -26,7 +26,7 @@
       "anchor": "y2",
       "domain": [ 0.55, 1 ],
       "rangeslider": {
-        "range": [ -1, 4 ]
+        "range": [ -2, 4 ]
       }
     },
     "yaxis": {
diff --git a/test/jasmine/tests/range_slider_test.js b/test/jasmine/tests/range_slider_test.js
@@ -445,7 +445,7 @@ describe('the range slider', function() {
         it('should not mutate layoutIn', function() {
             var layoutIn = { xaxis: { rangeslider: { visible: true }} },
                 layoutOut = { xaxis: { rangeslider: {}} },
-                expected = { xaxis: { rangeslider: { visible: true }} };
+                expected = { xaxis: { rangeslider: { visible: true}} };
 
             _supply(layoutIn, layoutOut, 'xaxis');
             expect(layoutIn).toEqual(expected);
@@ -457,7 +457,6 @@ describe('the range slider', function() {
                 expected = {
                     visible: true,
                     autorange: true,
-                    range: [-1, 6],
                     thickness: 0.15,
                     bgcolor: '#fff',
                     borderwidth: 0,
@@ -475,7 +474,6 @@ describe('the range slider', function() {
                 expected = {
                     visible: true,
                     autorange: true,
-                    range: [-1, 6],
                     thickness: 0.15,
                     bgcolor: '#fff',
                     borderwidth: 0,
@@ -507,7 +505,6 @@ describe('the range slider', function() {
                 expected = {
                     visible: true,
                     autorange: true,
-                    range: [-1, 6],
                     thickness: 0.15,
                     bgcolor: '#fff',
                     borderwidth: 0,
@@ -519,34 +516,12 @@ describe('the range slider', function() {
             expect(layoutOut.xaxis.rangeslider).toEqual(expected);
         });
 
-        it('should expand the rangeslider range to axis range', function() {
-            var layoutIn = { xaxis: { rangeslider: { range: [5, 6] } } },
-                layoutOut = { xaxis: { range: [1, 10], type: 'linear'} },
-                expected = {
-                    visible: true,
-                    autorange: false,
-                    range: [1, 10],
-                    thickness: 0.15,
-                    bgcolor: '#fff',
-                    borderwidth: 0,
-                    bordercolor: '#444',
-                    _input: layoutIn.xaxis.rangeslider
-                };
-
-            _supply(layoutIn, layoutOut, 'xaxis');
-
-            // don't compare the whole layout, because we had to run setConvert which
-            // attaches all sorts of other stuff to xaxis
-            expect(layoutOut.xaxis.rangeslider).toEqual(expected);
-        });
-
         it('should set autorange to true when range input is invalid', function() {
             var layoutIn = { xaxis: { rangeslider: { range: 'not-gonna-work'}} },
                 layoutOut = { xaxis: {} },
                 expected = {
                     visible: true,
                     autorange: true,
-                    range: [-1, 6],
                     thickness: 0.15,
                     bgcolor: '#fff',
                     borderwidth: 0,
@@ -729,6 +704,17 @@ describe('the range slider', function() {
             .then(function() {
                 assertRange([-0.26, 4.26], [-0.26, 4.26]);
 
+                // smaller than xaxis.range - won't be accepted
+                return Plotly.relayout(gd, {'xaxis.rangeslider.range': [0, 2]});
+            })
+            .then(function() {
+                assertRange([-0.26, 4.26], [-0.26, 4.26]);
+
+                // will be accepted (and autorange is disabled by impliedEdits)
+                return Plotly.relayout(gd, {'xaxis.rangeslider.range': [-2, 12]});
+            })
+            .then(function() {
+                assertRange([-0.26, 4.26], [-2, 12]);
             })
             .then(done);
         });

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`"anchor": "y2",`
`27`	`27`	`"domain": [ 0.55, 1 ],`
`28`	`28`	`"rangeslider": {`
`29`		`- "range": [ -1, 4 ]`
	`29`	`+ "range": [ -2, 4 ]`
`30`	`30`	`}`
`31`	`31`	`},`
`32`	`32`	`"yaxis": {`