add spikedistance, hoverdistance, spikesnap

Author: apalchys

src/components/fx/hover.js

@@ -59,7 +59,6 @@ function loneUnhover(containerOrSelection) {
 
     selection.selectAll('g.hovertext').remove();
     selection.selectAll('.spikeline').remove();
-    selection.selectAll('.crossline').remove();
 }
 
 // helpers for traces that use Fx.loneHover

src/components/fx/index.js

@@ -38,7 +38,28 @@ module.exports = {
         editType: 'modebar',
         description: 'Determines the mode of hover interactions.'
     },
-
+    hoverdistance: {
+        valType: 'integer',
+        min: -1,
+        dflt: 20,
+        role: 'style',
+        editType: 'none',
+        description: [
+            'Sets the default distance (in points) to look for data',
+            'to add hover labels'
+        ].join(' ')
+    },
+    spikedistance: {
+        valType: 'integer',
+        min: -1,
+        dflt: 20,
+        role: 'style',
+        editType: 'none',
+        description: [
+            'Sets the default distance (in points) to look for data',
+            'to draw spikelines to. By default inherits from hoverdistance'
+        ].join(' ')
+    },
     hoverlabel: {
         bgcolor: {
             valType: 'color',

src/components/fx/layout_attributes.js

@@ -28,6 +28,8 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
     else hovermodeDflt = 'closest';
 
     coerce('hovermode', hovermodeDflt);
+    coerce('hoverdistance');
+    coerce('spikedistance');
 
     // if only mapbox or geo subplots is present on graph,
     // reset 'zoom' dragmode to 'pan' until 'zoom' is implemented,

src/components/fx/layout_defaults.js

@@ -237,9 +237,6 @@ function handleCartesian(gd, ev) {
         if(astr === 'hovermode' && (val === 'x' || val === 'y')) {
             val = fullLayout._isHoriz ? 'y' : 'x';
             button.setAttribute('data-val', val);
-            if(val !== 'closest') {
-                fullLayout._cartesianSpikesEnabled = 'off';
-            }
         } else if(astr === 'hovermode' && val === 'closest') {
             for(i = 0; i < axList.length; i++) {
                 ax = axList[i];
@@ -551,12 +548,10 @@ modeBarButtons.toggleSpikelines = {
     click: function(gd) {
         var fullLayout = gd._fullLayout;
 
-        fullLayout._cartesianSpikesEnabled = fullLayout.hovermode === 'closest' ?
-            (fullLayout._cartesianSpikesEnabled === 'on' ? 'off' : 'on') : 'on';
+        fullLayout._cartesianSpikesEnabled = fullLayout._cartesianSpikesEnabled === 'on' ? 'off' : 'on';
 
         var aobj = setSpikelineVisibility(gd);
 
-        aobj.hovermode = 'closest';
         Plotly.relayout(gd, aobj);
     }
 };

src/components/modebar/buttons.js

@@ -166,9 +166,6 @@ Plotly.plot = function(gd, data, layout, config) {
     // save initial show spikes once per graph
     if(graphWasEmpty) Plotly.Axes.saveShowSpikeInitial(gd);
 
-    // save initial show crosslines once per graph
-    if(graphWasEmpty) Plotly.Axes.saveShowCrosslineInitial(gd);
-
     // prepare the data and find the autorange
 
     // generate calcdata, if we need to

src/plot_api/plot_api.js

@@ -423,30 +423,6 @@ axes.saveShowSpikeInitial = function(gd, overwrite) {
     return hasOneAxisChanged;
 };
 
-// save a copy of the initial crossline visibility
-axes.saveShowCrosslineInitial = function(gd, overwrite) {
-    var axList = axes.list(gd, '', true),
-        hasOneAxisChanged = false;
-
-    for(var i = 0; i < axList.length; i++) {
-        var ax = axList[i];
-
-        var isNew = (ax._showCrosslineInitial === undefined);
-        var hasChanged = (
-            isNew || !(
-                ax.showcrossline === ax._showcrossline
-            )
-        );
-
-        if((isNew) || (overwrite && hasChanged)) {
-            ax._showCrosslineInitial = ax.showcrossline;
-            hasOneAxisChanged = true;
-        }
-
-    }
-    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/axes.js

@@ -387,28 +387,14 @@ module.exports = {
             'plotted on'
         ].join(' ')
     },
-    showcrossline: {
-        valType: 'boolean',
-        dflt: false,
-        role: 'style',
-        editType: 'none',
-        description: 'Determines whether or not crossline are drawn for this axis.'
-    },
-    crosslinecolor: {
-        valType: 'color',
-        dflt: null,
-        role: 'style',
-        editType: 'none',
-        description: 'Sets the crossline color. If undefined, will use the contrast to background color'
-    },
-    crosslinethickness: {
-        valType: 'number',
-        dflt: 2,
+    spikesnap: {
+        valType: 'enumerated',
+        values: ['data', 'cursor'],
+        dflt: 'data',
         role: 'style',
         editType: 'none',
-        description: 'Sets the width (in px) of the zero line.'
+        description: 'Determines whether spikelines are stuck to the cursor or to the closest datapoints.'
     },
-    crosslinedash: extendFlat({}, dash, {dflt: 'solid', editType: 'none'}),
     tickfont: fontAttrs({
         editType: 'ticks',
         description: 'Sets the tick font.'

src/plots/cartesian/layout_attributes.js

@@ -139,19 +139,13 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
 
         handleAxisDefaults(axLayoutIn, axLayoutOut, coerce, defaultOptions, layoutOut);
 
-        var showCrossline = coerce('showcrossline');
-        if(showCrossline) {
-            coerce('crosslinecolor');
-            coerce('crosslinethickness');
-            coerce('crosslinedash');
-        }
-
         var showSpikes = coerce('showspikes');
         if(showSpikes) {
             coerce('spikecolor');
             coerce('spikethickness');
             coerce('spikedash');
             coerce('spikemode');
+            coerce('spikesnap');
         }
 
         var positioningOptions = {

src/plots/cartesian/layout_defaults.js

@@ -861,38 +861,13 @@ describe('ModeBar', function() {
             });
 
             describe('button toggleSpikelines', function() {
-                it('should update layout hovermode', function() {
-                    expect(gd._fullLayout.hovermode).toBe('x');
-                    assertActive(hovermodeButtons, buttonCompare);
-
-                    buttonToggle.click();
-                    expect(gd._fullLayout.hovermode).toBe('closest');
-                    assertActive(hovermodeButtons, buttonClosest);
-                });
                 it('should makes spikelines visible', function() {
                     buttonToggle.click();
                     expect(gd._fullLayout._cartesianSpikesEnabled).toBe('on');
 
                     buttonToggle.click();
                     expect(gd._fullLayout._cartesianSpikesEnabled).toBe('off');
                 });
-                it('should become disabled when hovermode is switched off closest', function() {
-                    buttonToggle.click();
-                    expect(gd._fullLayout._cartesianSpikesEnabled).toBe('on');
-
-                    buttonCompare.click();
-                    expect(gd._fullLayout._cartesianSpikesEnabled).toBe('off');
-                });
-                it('should be re-enabled when hovermode is set to closest if it was previously on', function() {
-                    buttonToggle.click();
-                    expect(gd._fullLayout._cartesianSpikesEnabled).toBe('on');
-
-                    buttonCompare.click();
-                    expect(gd._fullLayout._cartesianSpikesEnabled).toBe('off');
-
-                    buttonClosest.click();
-                    expect(gd._fullLayout._cartesianSpikesEnabled).toBe('on');
-                });
             });
         });