mv create/update Modebar wrapper in modebar/ :

- manageModebar handles logic around which button should
  appear on the modebar and how to modebar buttons are
  grouped.

Author: etpinard

src/components/modebar/manage.js

@@ -0,0 +1,112 @@
+/**
+* Copyright 2012-2015, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+var Plotly = require('../../plotly');
+
+var createModebar = require('./');
+var buttonsConfig = require('./buttons_config');
+
+/**
+ * Modebar wrapper around 'create' and 'update',
+ * chooses buttons to pass to Modebar constructor based on
+ * plot type and plot config.
+ *
+ * @param {object} gd main plot object
+ *
+ */
+module.exports = function manageModebar(gd) {
+    var fullLayout = gd._fullLayout,
+        context = gd._context,
+        modebar = fullLayout._modebar;
+
+    if(!context.displayModeBar && modebar) {
+        modebar.destroy();
+        delete fullLayout._modebar;
+        return;
+    }
+
+    var buttons = chooseButtons(fullLayout, context.modebarButtons);
+
+    if(modebar) modebar.update(gd, buttons);
+    else fullLayout._modebar = createModebar(gd, buttons);
+};
+
+function chooseButtons(fullLayout) {
+    var buttons = findButtons('all');
+
+    if(fullLayout._hasGL3D) buttons = buttons.concat(findButtons('gl3d'));
+
+    if(fullLayout._hasGeo) buttons = buttons.concat(findButtons('geo'));
+
+    if(fullLayout._hasCartesian && !areAllAxesFixed(fullLayout)) {
+        buttons = buttons.concat(findButtons('2d'));
+        buttons = buttons.concat(findButtons('cartesian'));
+    }
+
+    if(fullLayout._hasGL2D) {
+        buttons = buttons.concat(findButtons('2d'));
+        buttons = buttons.concat(findButtons('gl2d'));
+    }
+
+    if(fullLayout._hasPie) buttons = buttons.concat(findButtons('pie'));
+
+    buttons = groupButtons(buttons);
+
+    return buttons;
+}
+
+function findButtons(category, list) {
+    var buttonNames = Object.keys(buttonsConfig);
+    var out = [];
+
+    for(var i = 0; i < buttonNames.length; i++) {
+        var buttonName = buttonNames[i];
+        if(buttonsConfig[buttonName].category === category) out.push(buttonName);
+    }
+
+    return out;
+}
+
+function areAllAxesFixed(fullLayout) {
+    var axList = Plotly.Axes.list({_fullLayout: fullLayout}, null, true);
+    var allFixed = true;
+
+    for(var i = 0; i < axList.length; i++) {
+        if(!axList[i].fixedrange) {
+            allFixed = false;
+            break;
+        }
+    }
+
+    return allFixed;
+}
+
+function groupButtons(buttons) {
+    var hashObj = {};
+    var i;
+
+    for(i = 0; i < buttons.length; i++) {
+        var button = buttons[i],
+            group = buttonsConfig[button].group;
+
+        if(hashObj[group] === undefined) hashObj[group] = [button];
+        else hashObj[group].push(button);
+    }
+
+    var groups = Object.keys(hashObj);
+    var out = [];
+
+    for(i = 0; i < groups.length; i++) {
+        out.push(hashObj[groups[i]]);
+    }
+
+    return out;
+}

src/plot_api/plot_api.js

@@ -11,6 +11,7 @@
 
 var Plotly = require('../plotly');
 var Events = require('../lib/events');
+var manageModebar = require('../components/modebar/manage');
 
 var d3 = require('d3');
 var m4FromQuat = require('gl-mat4/fromQuat');
@@ -399,11 +400,6 @@ function setPlotContext(gd, config) {
             }
         });
 
-        // cause a remake of the modebar any time we change context
-        if(gd._fullLayout && gd._fullLayout._modebar) {
-            delete gd._fullLayout._modebar;
-        }
-
         // map plot3dPixelRatio to plotGlPixelRatio for backward compatibility
         if(config.plot3dPixelRatio && !context.plotGlPixelRatio) {
             context.plotGlPixelRatio = context.plot3dPixelRatio;
@@ -2468,8 +2464,9 @@ Plotly.relayout = function relayout(gd, astr, val) {
                 return plots.previousPromises(gd);
             });
         }
+
         // this is decoupled enough it doesn't need async regardless
-        if(domodebar) Plotly.Fx.modeBar(gd);
+        if(domodebar) manageModebar(gd);
 
         var subplotIds;
         if(doSceneDragmode || domodebar) {
@@ -3006,7 +3003,7 @@ function lsInner(gd) {
 
     Plotly.Titles.draw(gd, 'gtitle');
 
-    Plotly.Fx.modeBar(gd);
+    manageModebar(gd);
 
     return gd._promises.length && Promise.all(gd._promises);
 }

src/plots/cartesian/graph_interact.js

@@ -1279,99 +1279,6 @@ fx.click = function(gd,evt){
     }
 };
 
-// dragmode and hovermode toolbars
-fx.modeBar = function(gd){
-
-    function initModebar(){
-
-        var modebar = new Plotly.ModeBar({
-            buttons: buttons,
-            container: fullLayout._paperdiv.node(),
-            graphInfo: gd
-        });
-
-        if(fullLayout._privateplot) {
-            d3.select(modebar.element).append('span')
-                .classed('badge-private float--left', true)
-                .text('PRIVATE');
-        }
-
-        return modebar;
-    }
-
-    function deleteModebar() {
-        Plotly.Lib.removeElement(gd.querySelector('.modebar'));
-    }
-
-    var modebar,
-        fullLayout = gd._fullLayout || {};
-
-    if (!gd._context.displayModeBar) return deleteModebar();
-
-    var buttons = chooseModebarButtons(fullLayout);
-
-    if (!fullLayout._modebar){
-        deleteModebar();
-        fullLayout._modebar = initModebar();
-    }
-
-    modebar = fullLayout._modebar;
-
-    //if the buttons are different, clean old and init new modebar
-    if (!modebar.hasButtons(buttons)) {
-        fullLayout._modebar.cleanup();
-        fullLayout._modebar = initModebar();
-    }
-};
-
-function chooseModebarButtons(fullLayout) {
-    if(fullLayout._hasGL3D) {
-        return [
-            ['toImage', 'sendDataToCloud'],
-            ['orbitRotation', 'tableRotation', 'zoom3d', 'pan3d'],
-            ['resetCameraDefault3d', 'resetCameraLastSave3d'],
-            ['hoverClosest3d']
-        ];
-    }
-    else if(fullLayout._hasGeo) {
-        return [
-            ['toImage', 'sendDataToCloud'],
-            ['zoomInGeo', 'zoomOutGeo', 'resetGeo'],
-            ['hoverClosestGeo']
-        ];
-    }
-
-    var axList = Plotly.Axes.list({_fullLayout: fullLayout}, null, true),
-        allFixed = true,
-        i,
-        buttons;
-
-    for(i = 0; i < axList.length; i++) {
-        if(!axList[i].fixedrange) {
-            allFixed = false;
-            break;
-        }
-    }
-
-    if(allFixed) buttons = [['toImage', 'sendDataToCloud']];
-    else buttons = [
-        ['toImage', 'sendDataToCloud'],
-        ['zoom2d', 'pan2d'],
-        ['zoomIn2d', 'zoomOut2d', 'resetScale2d', 'autoScale2d']
-    ];
-
-    if(fullLayout._hasCartesian) {
-        buttons.push(['hoverClosest2d', 'hoverCompare2d']);
-    }
-    else if(fullLayout._hasPie) {
-        buttons.push(['hoverClosestPie']);
-    }
-    else if(fullLayout._hasGL2D) {
-        buttons.push(['hoverClosestGl2d']);
-    }
-
-    return buttons;
-}
 
 // ----------------------------------------------------
 // Axis dragging functions