Merge pull request #377 from plotly/rangeslider-gl-safety

Rangeslider gl safety check

Author: mdtusz

src/components/rangeslider/create_slider.js

@@ -249,8 +249,8 @@ module.exports = function createSlider(gd, minStart, maxStart) {
     ]);
 
     sliderContainer.data([0])
-    .enter().append(function() {
-        options.setRange = setRange;
-        return slider;
-    });
+        .enter().append(function() {
+            options.setRange = setRange;
+            return slider;
+        });
 };

src/components/rangeslider/index.js

@@ -41,11 +41,15 @@ function draw(gd, minStart, maxStart) {
     var height = (fullLayout.height - fullLayout.margin.b - fullLayout.margin.t) * options.thickness,
         offsetShift = Math.floor(options.borderwidth / 2);
 
-    if(sliderContainer[0].length === 0) createSlider(gd, minStart, maxStart);
+    if(sliderContainer[0].length === 0 && !fullLayout._hasGL2D) createSlider(gd, minStart, maxStart);
+
+    // Need to default to 0 for when making gl plots
+    var bb = fullLayout.xaxis._boundingBox ?
+        fullLayout.xaxis._boundingBox.height : 0;
 
     Plots.autoMargin(gd, 'range-slider', {
         x: 0, y: 0, l: 0, r: 0, t: 0,
-        b: height + fullLayout.margin.b + fullLayout.xaxis._boundingBox.height,
+        b: height + fullLayout.margin.b + bb,
         pad: 15 + offsetShift * 2
     });
 }

test/jasmine/tests/gl_plot_interact_test.js

@@ -414,3 +414,38 @@ describe('Test gl plot interactions', function() {
         });
     });
 });
+
+describe('Test gl plot side effects', function() {
+    describe('when present with rangeslider', function() {
+
+        var gd;
+
+        beforeEach(function() {
+            gd = createGraphDiv();
+        });
+
+        afterEach(destroyGraphDiv);
+
+        it('should not draw the rangeslider', function(done) {
+            var data = [{
+                x: [1,2,3],
+                y: [2,3,4],
+                type: 'scattergl'
+            }, {
+                x: [1,2,3],
+                y: [2,3,4],
+                type: 'scatter'
+            }];
+
+            var layout = {
+                xaxis: { rangeslider: { visible: true } }
+            };
+
+            Plotly.plot(gd, data, layout).then(function() {
+                var rangeSlider = document.getElementsByClassName('range-slider')[0];
+                expect(rangeSlider).not.toBeDefined();
+                done();
+            });
+        });
+    });
+});