Merge pull request #6296 from plotly/static-plots

`staticPlot` disable interactions for `sunburst`, `treemap`, `icicle`, `pie`, `funnelarea`, `parcats`, `parcoords` & `sankey` traces

Author: archmoj

draftlogs/6296_fix.md

@@ -0,0 +1,2 @@
+ - Disable interactions for `treemap`, `icicle`, `sunburst`, `pie`, `funnelarea`, 
+   `parcats`, `parcoords` and `sankey` traces when `staticPlot` is set to true [[#6296](https://github.com/plotly/plotly.js/pull/6296)]

src/traces/funnelarea/plot.js

@@ -25,6 +25,8 @@ var positionTitleOutside = piePlot.positionTitleOutside;
 var formatSliceLabel = piePlot.formatSliceLabel;
 
 module.exports = function plot(gd, cdModule) {
+    var isStatic = gd._context.staticPlot;
+
     var fullLayout = gd._fullLayout;
 
     clearMinTextSize('funnelarea', fullLayout);
@@ -63,7 +65,7 @@ module.exports = function plot(gd, cdModule) {
 
                 slicePath.enter().append('path')
                     .classed('surface', true)
-                    .style({'pointer-events': 'all'});
+                    .style({'pointer-events': isStatic ? 'none' : 'all'});
 
                 sliceTop.call(attachFxHandlers, gd, cd);
 

src/traces/icicle/draw_descendants.js

@@ -29,6 +29,8 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
     var prevEntry = opts.prevEntry;
     var refRect = {};
 
+    var isStatic = gd._context.staticPlot;
+
     var fullLayout = gd._fullLayout;
     var cd0 = cd[0];
     var trace = cd0.trace;
@@ -130,7 +132,7 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
         var sliceTop = d3.select(this);
 
         var slicePath = Lib.ensureSingle(sliceTop, 'path', 'surface', function(s) {
-            s.style('pointer-events', 'all');
+            s.style('pointer-events', isStatic ? 'none' : 'all');
         });
 
         if(hasTransition) {

src/traces/parcats/parcats.js

@@ -11,6 +11,8 @@ var tinycolor = require('tinycolor2');
 var svgTextUtils = require('../../lib/svg_text_utils');
 
 function performPlot(parcatsModels, graphDiv, layout, svg) {
+    var isStatic = graphDiv._context.staticPlot;
+
     var viewModels = parcatsModels.map(createParcatsViewModel.bind(0, graphDiv, layout));
 
     // Get (potentially empty) parcatslayer selection with bound data to single element array
@@ -20,7 +22,7 @@ function performPlot(parcatsModels, graphDiv, layout, svg) {
     layerSelection.enter()
         .append('g')
         .attr('class', 'parcatslayer')
-        .style('pointer-events', 'all');
+        .style('pointer-events', isStatic ? 'none' : 'all');
 
     // Bind data to children of layerSelection and get reference to traceSelection
     var traceSelection = layerSelection

src/traces/parcoords/axisbrush.js

@@ -354,15 +354,17 @@ function attachDragBehavior(selection) {
 
 function startAsc(a, b) { return a[0] - b[0]; }
 
-function renderAxisBrush(axisBrush, paperColor) {
+function renderAxisBrush(axisBrush, paperColor, gd) {
+    var isStatic = gd._context.staticPlot;
+
     var background = axisBrush.selectAll('.background').data(repeat);
 
     background.enter()
         .append('rect')
         .classed('background', true)
         .call(barHorizontalSetup)
         .call(backgroundBarHorizontalSetup)
-        .style('pointer-events', 'auto') // parent pointer events are disabled; we must have it to register events
+        .style('pointer-events', isStatic ? 'none' : 'auto') // parent pointer events are disabled; we must have it to register events
         .attr('transform', strTranslate(0, c.verticalPadding));
 
     background
@@ -402,15 +404,15 @@ function renderAxisBrush(axisBrush, paperColor) {
         .call(styleHighlight);
 }
 
-function ensureAxisBrush(axisOverlays, paperColor) {
+function ensureAxisBrush(axisOverlays, paperColor, gd) {
     var axisBrush = axisOverlays.selectAll('.' + c.cn.axisBrush)
         .data(repeat, keyFun);
 
     axisBrush.enter()
         .append('g')
         .classed(c.cn.axisBrush, true);
 
-    renderAxisBrush(axisBrush, paperColor);
+    renderAxisBrush(axisBrush, paperColor, gd);
 }
 
 function getBrushExtent(brush) {

src/traces/parcoords/parcoords.js

@@ -435,6 +435,8 @@ function extremeText(d, isTop) {
 
 
 module.exports = function parcoords(gd, cdModule, layout, callbacks) {
+    var isStatic = gd._context.staticPlot;
+
     var fullLayout = gd._fullLayout;
     var svg = fullLayout._toppaper;
     var glContainer = fullLayout._glcontainer;
@@ -469,7 +471,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
 
     // emit hover / unhover event
     pickLayer
-        .style('pointer-events', 'auto')
+        .style('pointer-events', isStatic ? 'none' : 'auto')
         .on('mousemove', function(d) {
             if(state.linePickActive() && d.lineLayer && callbacks && callbacks.hover) {
                 var event = d3.event;
@@ -674,7 +676,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
         .classed(c.cn.axisTitle, true)
         .attr('text-anchor', 'middle')
         .style('cursor', 'ew-resize')
-        .style('pointer-events', 'auto');
+        .style('pointer-events', isStatic ? 'none' : 'auto');
 
     axisTitle
         .text(function(d) { return d.label; })
@@ -758,5 +760,5 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
         .text(function(d) { return extremeText(d, false); })
         .each(function(d) { Drawing.font(d3.select(this), d.model.rangeFont); });
 
-    brush.ensureAxisBrush(axisOverlays, paperColor);
+    brush.ensureAxisBrush(axisOverlays, paperColor, gd);
 };

src/traces/pie/plot.js

@@ -20,6 +20,8 @@ var eventData = require('./event_data');
 var isValidTextValue = require('../../lib').isValidTextValue;
 
 function plot(gd, cdModule) {
+    var isStatic = gd._context.staticPlot;
+
     var fullLayout = gd._fullLayout;
     var gs = fullLayout._size;
 
@@ -71,7 +73,7 @@ function plot(gd, cdModule) {
 
                 slicePath.enter().append('path')
                     .classed('surface', true)
-                    .style({'pointer-events': 'all'});
+                    .style({'pointer-events': isStatic ? 'none' : 'all'});
 
                 sliceTop.call(attachFxHandlers, gd, cd);
 

src/traces/sankey/render.js

@@ -804,6 +804,8 @@ function switchToSankeyFormat(nodes) {
 
 // scene graph
 module.exports = function(gd, svg, calcData, layout, callbacks) {
+    var isStatic = gd._context.staticPlot;
+
     // To prevent animation on first render
     var firstRender = false;
     Lib.ensureSingle(gd._fullLayout._infolayer, 'g', 'first-render', function() {
@@ -830,7 +832,7 @@ module.exports = function(gd, svg, calcData, layout, callbacks) {
         .style('position', 'absolute')
         .style('left', 0)
         .style('shape-rendering', 'geometricPrecision')
-        .style('pointer-events', 'auto')
+        .style('pointer-events', isStatic ? 'none' : 'auto')
         .attr('transform', sankeyTransform);
 
     sankey.each(function(d, i) {
@@ -843,7 +845,7 @@ module.exports = function(gd, svg, calcData, layout, callbacks) {
 
         // Style dragbox
         gd._fullData[i]._bgRect
-          .style('pointer-events', 'all')
+          .style('pointer-events', isStatic ? 'none' : 'all')
           .attr('width', d.width)
           .attr('height', d.height)
           .attr('x', d.translateX)

src/traces/sunburst/plot.js

@@ -80,6 +80,8 @@ exports.plot = function(gd, cdmodule, transitionOpts, makeOnCompleteCallback) {
 };
 
 function plotOne(gd, cd, element, transitionOpts) {
+    var isStatic = gd._context.staticPlot;
+
     var fullLayout = gd._fullLayout;
     var hasTransition = !fullLayout.uniformtext.mode && helpers.hasTransition(transitionOpts);
 
@@ -219,7 +221,7 @@ function plotOne(gd, cd, element, transitionOpts) {
         var sliceTop = d3.select(this);
 
         var slicePath = Lib.ensureSingle(sliceTop, 'path', 'surface', function(s) {
-            s.style('pointer-events', 'all');
+            s.style('pointer-events', isStatic ? 'none' : 'all');
         });
 
         pt.rpx0 = y2rpx(pt.y0);

src/traces/treemap/draw_ancestors.js

@@ -28,6 +28,8 @@ module.exports = function drawAncestors(gd, cd, entry, slices, opts) {
     var makeUpdateTextInterpolator = opts.makeUpdateTextInterpolator;
     var refRect = {};
 
+    var isStatic = gd._context.staticPlot;
+
     var fullLayout = gd._fullLayout;
     var cd0 = cd[0];
     var trace = cd0.trace;
@@ -101,7 +103,7 @@ module.exports = function drawAncestors(gd, cd, entry, slices, opts) {
         var sliceTop = d3.select(this);
 
         var slicePath = Lib.ensureSingle(sliceTop, 'path', 'surface', function(s) {
-            s.style('pointer-events', 'all');
+            s.style('pointer-events', isStatic ? 'none' : 'all');
         });
 
         if(hasTransition) {