Merge pull request #5210 from miqh/fix/5177

Fix staticPlot behaviour for range slider and legend

Author: archmoj

src/components/legend/draw.js

@@ -465,11 +465,14 @@ function setupTraceToggle(g, gd) {
     var numClicks = 1;
 
     var traceToggle = Lib.ensureSingle(g, 'rect', 'legendtoggle', function(s) {
-        s.style('cursor', 'pointer')
-            .attr('pointer-events', 'all')
-            .call(Color.fill, 'rgba(0,0,0,0)');
+        if(!gd._context.staticPlot) {
+            s.style('cursor', 'pointer').attr('pointer-events', 'all');
+        }
+        s.call(Color.fill, 'rgba(0,0,0,0)');
     });
 
+    if(gd._context.staticPlot) return;
+
     traceToggle.on('mousedown', function() {
         newMouseDownTime = (new Date()).getTime();
         if(newMouseDownTime - gd._legendMouseDownTime < doubleClickDelay) {

src/components/rangeslider/draw.js

@@ -232,6 +232,8 @@ module.exports = function(gd) {
 };
 
 function setupDragElement(rangeSlider, gd, axisOpts, opts) {
+    if(gd._context.staticPlot) return;
+
     var slideBox = rangeSlider.select('rect.' + constants.slideBoxClassName).node();
     var grabAreaMin = rangeSlider.select('rect.' + constants.grabAreaMinClassName).node();
     var grabAreaMax = rangeSlider.select('rect.' + constants.grabAreaMaxClassName).node();
@@ -619,14 +621,12 @@ function drawGrabbers(rangeSlider, gd, axisOpts, opts) {
     handleMax.attr(handleDynamicAttrs);
 
     // <g grabarea />
-    if(gd._context.staticPlot) return;
-
     var grabAreaFixAttrs = {
         width: constants.grabAreaWidth,
         x: 0,
         y: 0,
         fill: constants.grabAreaFill,
-        cursor: constants.grabAreaCursor
+        cursor: !gd._context.staticPlot ? constants.grabAreaCursor : undefined,
     };
 
     var grabAreaMin = Lib.ensureSingle(grabberMin, 'rect', constants.grabAreaMinClassName, function(s) {

test/jasmine/tests/legend_test.js

@@ -1289,6 +1289,47 @@ describe('legend interaction', function() {
         });
     });
 
+    describe('staticPlot', function() {
+        var gd;
+
+        beforeEach(function() {
+            gd = createGraphDiv();
+        });
+
+        afterEach(destroyGraphDiv);
+
+        function toggleTrace() {
+            var toggle = d3.select('.legendtoggle').node();
+            expect(toggle).not.toEqual(null);
+
+            toggle.dispatchEvent(new MouseEvent('mousedown'));
+            toggle.dispatchEvent(new MouseEvent('mouseup'));
+
+            // Delay needs to be long enough for Plotly to react
+            return delay(300)();
+        }
+
+        function assertToggled(toggled) {
+            return function() {
+                var container = d3.select('g.traces').node();
+                expect(container).not.toEqual(null);
+                expect(container.style.opacity).toBe(toggled ? '0.5' : '1');
+            };
+        }
+
+        it('should prevent toggling if set', function(done) {
+            var data = [{ x: [0, 1], y: [0, 1], type: 'scatter' }];
+            var layout = { showlegend: true };
+            var config = { staticPlot: true };
+
+            Plotly.newPlot(gd, data, layout, config)
+                .then(toggleTrace)
+                .then(assertToggled(false))
+                .catch(failTest)
+                .then(done);
+        });
+    });
+
     describe('visible toggle', function() {
         var gd;
 

test/jasmine/tests/range_slider_test.js

@@ -201,6 +201,40 @@ describe('Visible rangesliders', function() {
         .then(done);
     });
 
+    it('should not react to any interactions when staticPlot is set', function(done) {
+        var mockCopy = Lib.extendDeep({}, mock);
+        var moveDelta = 50;
+        Plotly.newPlot(gd, mockCopy.data, mockCopy.layout, { staticPlot: true })
+            .then(function() {
+                // Try move minimum handle
+                var minHandle = d3.select('.' + constants.grabberMinClassName).node();
+                expect(minHandle).not.toEqual(null);
+                var minHandleRect = minHandle.getBoundingClientRect();
+                var x = minHandleRect.x + minHandleRect.width / 2;
+                var y = minHandleRect.y + minHandleRect.height / 2;
+                return slide(x, y, x + moveDelta, y);
+            })
+            .then(function() {
+                // Try move maximum handle
+                var maxHandle = d3.select('.' + constants.grabberMaxClassName).node();
+                expect(maxHandle).not.toEqual(null);
+                var maxHandleRect = maxHandle.getBoundingClientRect();
+                var x = maxHandleRect.x + maxHandleRect.width / 2;
+                var y = maxHandleRect.y + maxHandleRect.height / 2;
+                return slide(x, y, x - moveDelta, y);
+            })
+            .then(function() {
+                // Slidebox should not exist
+                var slidebox = d3.select('.' + constants.slideBoxClassName).node();
+                expect(slidebox).toEqual(null);
+            })
+            .then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([0, 49]);
+            })
+            .catch(failTest)
+            .then(done);
+    });
+
     it('should update correctly when moving slider on an axis with rangebreaks', function(done) {
         var start = 250;
         var end = 300;