Add cartesian spikeline modebar support

Author: rpaskowitz

src/components/modebar/buttons.js

@@ -183,7 +183,8 @@ function handleCartesian(gd, ev) {
         var mag = (val === 'in') ? 0.5 : 2,
             r0 = (1 + mag) / 2,
             r1 = (1 - mag) / 2,
-            axList = Axes.list(gd, null, true);
+            axList = Axes.list(gd, null, true),
+            allEnabled = 'on';
 
         var ax, axName;
 
@@ -202,6 +203,12 @@ function handleCartesian(gd, ev) {
                         aobj[axName + '.range[0]'] = rangeInitial[0];
                         aobj[axName + '.range[1]'] = rangeInitial[1];
                     }
+                    if(ax._showSpikeInitial !== undefined) {
+                        aobj[axName + '.showspike'] = ax._showSpikeInitial;
+                        if(allEnabled === 'on' && !ax._showSpikeInitial) {
+                            allEnabled = 'off';
+                        }
+                    }
                 }
                 else {
                     var rangeNow = [
@@ -219,12 +226,17 @@ function handleCartesian(gd, ev) {
                 }
             }
         }
+        fullLayout._cartesianSpikesEnabled = allEnabled;
     }
     else {
         // if ALL traces have orientation 'h', 'hovermode': 'x' otherwise: 'y'
         if(astr === 'hovermode' && (val === 'x' || val === 'y')) {
             val = fullLayout._isHoriz ? 'y' : 'x';
             button.setAttribute('data-val', val);
+            if(val !== 'closest') {
+                fullLayout._cartesianSpikesEnabled = 'off';
+                aobj = setSpikelineVisibility(gd);
+            }
         }
 
         aobj[astr] = val;
@@ -518,3 +530,38 @@ modeBarButtons.resetViews = {
         // geo subplots.
     }
 };
+
+modeBarButtons.toggleSpikelines = {
+    name: 'toggleSpikelines',
+    title: 'Toggle Spike Lines',
+    icon: Icons.home,
+    attr: '_cartesianSpikesEnabled',
+    val: 'on',
+    click: function(gd) {
+        var fullLayout = gd._fullLayout;
+
+        fullLayout._cartesianSpikesEnabled = fullLayout.hovermode === 'closest' ?
+            (fullLayout._cartesianSpikesEnabled === 'on' ? 'off' : 'on') : 'on';
+
+        var aobj = setSpikelineVisibility(gd);
+
+        aobj.hovermode = 'closest';
+        Plotly.relayout(gd, aobj);
+    }
+};
+
+function setSpikelineVisibility(gd) {
+    var fullLayout = gd._fullLayout,
+        axList = Axes.list(gd, null, true),
+        ax,
+        axName,
+        aobj = {};
+
+    for(var i = 0; i < axList.length; i++) {
+        ax = axList[i];
+        axName = ax._name;
+        aobj[axName + '.showspike'] = fullLayout._cartesianSpikesEnabled === 'on' ? true : false;
+    }
+
+    return aobj;
+}

src/components/modebar/manage.js

@@ -138,7 +138,7 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
         addGroup(['hoverClosestGl2d']);
     }
     else if(hasCartesian) {
-        addGroup(['hoverClosestCartesian', 'hoverCompareCartesian']);
+        addGroup(['toggleSpikelines', 'hoverClosestCartesian', 'hoverCompareCartesian']);
     }
     else if(hasPie) {
         addGroup(['hoverClosestPie']);

src/plot_api/plot_api.js

@@ -151,9 +151,12 @@ Plotly.plot = function(gd, data, layout, config) {
         makePlotFramework(gd);
     }
 
-    // save initial axis range once per graph
-    if(graphWasEmpty) Plotly.Axes.saveRangeInitial(gd);
-
+    if(graphWasEmpty) {
+        // save initial axis range once per graph
+        Plotly.Axes.saveRangeInitial(gd);
+        // save initial show spikes once per graph
+        Plotly.Axes.saveShowSpikeInitial(gd);
+    }
 
     // prepare the data and find the autorange
 

src/plots/cartesian/axes.js

@@ -361,6 +361,35 @@ axes.saveRangeInitial = function(gd, overwrite) {
     return hasOneAxisChanged;
 };
 
+// save a copy of the initial spike visibility
+axes.saveShowSpikeInitial = function(gd, overwrite) {
+    var axList = axes.list(gd, '', true),
+        hasOneAxisChanged = false,
+        allEnabled = 'on';
+
+    for(var i = 0; i < axList.length; i++) {
+        var ax = axList[i];
+
+        var isNew = (ax._showSpikeInitial === undefined);
+        var hasChanged = (
+            isNew || !(
+                ax.showspike === ax._showspike
+            )
+        );
+
+        if((isNew) || (overwrite && hasChanged)) {
+            ax._showSpikeInitial = ax.showspike;
+            hasOneAxisChanged = true;
+        }
+
+        if(allEnabled === 'on' && !ax.showspike) {
+            allEnabled = 'off';
+        }
+    }
+    gd._fullLayout._cartesianSpikesEnabled = allEnabled;
+    return hasOneAxisChanged;
+};
+
 // axes.expand: if autoranging, include new data in the outer limits
 // for this axis
 // data is an array of numbers (ie already run through ax.d2c)

src/plots/cartesian/axis_defaults.js

@@ -99,7 +99,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
     coerce('range');
     containerOut.cleanRange();
 
-    coerce('showspikes');
+    coerce('showspike');
     coerce('spikecolor');
     coerce('spikethickness');
     coerce('spikedash');

src/plots/cartesian/graph_interact.js

@@ -879,7 +879,7 @@ function createDroplines(hoverData, opts) {
     container.selectAll('circle.dropline').remove();
 
 
-    if(c0.ya.showspikes) {
+    if(c0.ya.showspike) {
         if(ySpikeLine) {
             // Background horizontal Line (to y-axis)
             container.append('line')
@@ -913,7 +913,7 @@ function createDroplines(hoverData, opts) {
         }
     }
 
-    if(c0.xa.showspikes) {
+    if(c0.xa.showspike) {
         if(xSpikeLine) {
         // Background vertical line (to x-axis)
             container.append('line')

src/plots/cartesian/layout_attributes.js

@@ -244,9 +244,9 @@ module.exports = {
         role: 'style',
         description: 'Determines whether or not the tick labels are drawn.'
     },
-    showspikes: {
+    showspike: {
         valType: 'boolean',
-        dflt: true,
+        dflt: false,
         role: 'style',
         description: [
             'Determines whether or not spikes (aka droplines) are drawn for this axis.',