Merge pull request #5654 from plotly/v2-modebar

Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in
plotly · May 14, 2021 · 2eca2a6 · 2eca2a6
2 parents 327fa92 + f4e6120
commit 2eca2a6
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 67 deletions.
diff --git a/src/components/modebar/manage.js b/src/components/modebar/manage.js
@@ -170,19 +170,50 @@ function getButtonGroups(gd) {
         dragModeGroup.push('select2d', 'lasso2d');
     }
 
-    // accept pre-defined buttons as string
+    var enabledHoverGroup = [];
+    var enableHover = function(a) {
+        // return if already added
+        if(enabledHoverGroup.indexOf(a) !== -1) return;
+        // should be in hoverGroup
+        if(hoverGroup.indexOf(a) !== -1) {
+            enabledHoverGroup.push(a);
+        }
+    };
     if(Array.isArray(buttonsToAdd)) {
         var newList = [];
         for(var i = 0; i < buttonsToAdd.length; i++) {
             var b = buttonsToAdd[i];
             if(typeof b === 'string') {
+                b = b.toLowerCase();
+
                 if(DRAW_MODES.indexOf(b) !== -1) {
+                    // accept pre-defined drag modes i.e. shape drawing features as string
                     if(
                         fullLayout._has('mapbox') || // draw shapes in paper coordinate (could be improved in future to support data coordinate, when there is no pitch)
                         fullLayout._has('cartesian') // draw shapes in data coordinate
                     ) {
                         dragModeGroup.push(b);
                     }
+                } else if(b === 'togglespikelines') {
+                    enableHover('toggleSpikelines');
+                } else if(b === 'togglehover') {
+                    enableHover('toggleHover');
+                } else if(b === 'hovercompare') {
+                    enableHover('hoverCompareCartesian');
+                } else if(b === 'hoverclosest') {
+                    enableHover('hoverClosestCartesian');
+                    enableHover('hoverClosestGeo');
+                    enableHover('hoverClosest3d');
+                    enableHover('hoverClosestGl2d');
+                    enableHover('hoverClosestPie');
+                } else if(b === 'v1hovermode') {
+                    enableHover('toggleHover');
+                    enableHover('hoverClosestCartesian');
+                    enableHover('hoverCompareCartesian');
+                    enableHover('hoverClosestGeo');
+                    enableHover('hoverClosest3d');
+                    enableHover('hoverClosestGl2d');
+                    enableHover('hoverClosestPie');
                 }
             } else newList.push(b);
         }
@@ -191,7 +222,7 @@ function getButtonGroups(gd) {
 
     addGroup(dragModeGroup);
     addGroup(zoomGroup.concat(resetGroup));
-    addGroup(hoverGroup);
+    addGroup(enabledHoverGroup);
 
     return appendButtonsToGroups(groups, buttonsToAdd);
 }

diff --git a/test/jasmine/tests/gl3d_plot_interact_test.js b/test/jasmine/tests/gl3d_plot_interact_test.js
@@ -455,6 +455,9 @@ describe('Test gl3d modebar handlers - perspective case', function() {
                     },
                     aspectratio: { x: 3, y: 2, z: 1 }
                 }
+            },
+            config: {
+                modeBarButtonsToAdd: ['hoverclosest']
             }
         };
 
@@ -534,7 +537,7 @@ describe('Test gl3d modebar handlers - perspective case', function() {
         expect(buttonOrbit.isActive()).toBe(false);
     });
 
-    it('@gl button hoverClosest3d should update the scene hovermode and spikes', function() {
+    it('@gl button hoverClosest should update the scene hovermode and spikes', function() {
         var buttonHover = selectButton(modeBar, 'hoverClosest3d');
 
         assertScenes(gd._fullLayout, 'hovermode', 'closest');