Merge pull request #989 from plotly/fix-updatemenus-padding

Improve padding logic for updatemenus

Author: rreusser

src/components/updatemenus/attributes.js

@@ -11,6 +11,7 @@
 var fontAttrs = require('../../plots/font_attributes');
 var colorAttrs = require('../color/attributes');
 var extendFlat = require('../../lib/extend').extendFlat;
+var padAttrs = require('../../plots/pad_attributes');
 
 var buttonsAttrs = {
     _isLinkedToArray: true,
@@ -140,6 +141,10 @@ module.exports = {
         ].join(' ')
     },
 
+    pad: extendFlat({}, padAttrs, {
+        description: 'Sets the padding around the buttons or dropdown menu.'
+    }),
+
     font: extendFlat({}, fontAttrs, {
         description: 'Sets the font of the update menu button text.'
     }),

src/components/updatemenus/defaults.js

@@ -60,6 +60,11 @@ function menuDefaults(menuIn, menuOut, layoutOut) {
     coerce('xanchor');
     coerce('yanchor');
 
+    coerce('pad.t');
+    coerce('pad.r');
+    coerce('pad.b');
+    coerce('pad.l');
+
     Lib.coerceFont(coerce, 'font', layoutOut.font);
 
     coerce('bgcolor', layoutOut.paper_bgcolor);

src/components/updatemenus/draw.js

@@ -169,7 +169,7 @@ function drawHeader(gd, gHeader, gButton, menuOpts) {
 
     var active = menuOpts.active,
         headerOpts = menuOpts.buttons[active] || constants.blankHeaderOpts,
-        posOpts = { y: 0, yPad: 0, x: 0, xPad: 0, index: 0 },
+        posOpts = { y: menuOpts.pad.t, yPad: 0, x: menuOpts.pad.l, xPad: 0, index: 0 },
         positionOverrides = {
             width: menuOpts.headerWidth,
             height: menuOpts.headerHeight
@@ -191,8 +191,8 @@ function drawHeader(gd, gHeader, gButton, menuOpts) {
         .text('▼');
 
     arrow.attr({
-        x: menuOpts.headerWidth - constants.arrowOffsetX,
-        y: menuOpts.headerHeight / 2 + constants.textOffsetY
+        x: menuOpts.headerWidth - constants.arrowOffsetX + menuOpts.pad.l,
+        y: menuOpts.headerHeight / 2 + constants.textOffsetY + menuOpts.pad.t
     });
 
     header.on('click', function() {
@@ -275,8 +275,8 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
     }
 
     var posOpts = {
-        x: x0,
-        y: y0,
+        x: x0 + menuOpts.pad.l,
+        y: y0 + menuOpts.pad.t,
         yPad: constants.gapButton,
         xPad: constants.gapButton,
         index: 0,
@@ -468,27 +468,30 @@ function findDimenstions(gd, menuOpts) {
 
     fakeButtons.remove();
 
+    var paddedWidth = menuOpts.totalWidth + menuOpts.pad.l + menuOpts.pad.r;
+    var paddedHeight = menuOpts.totalHeight + menuOpts.pad.t + menuOpts.pad.b;
+
     var graphSize = gd._fullLayout._size;
     menuOpts.lx = graphSize.l + graphSize.w * menuOpts.x;
     menuOpts.ly = graphSize.t + graphSize.h * (1 - menuOpts.y);
 
     var xanchor = 'left';
     if(anchorUtils.isRightAnchor(menuOpts)) {
-        menuOpts.lx -= menuOpts.totalWidth;
+        menuOpts.lx -= paddedWidth;
         xanchor = 'right';
     }
     if(anchorUtils.isCenterAnchor(menuOpts)) {
-        menuOpts.lx -= menuOpts.totalWidth / 2;
+        menuOpts.lx -= paddedWidth / 2;
         xanchor = 'center';
     }
 
     var yanchor = 'top';
     if(anchorUtils.isBottomAnchor(menuOpts)) {
-        menuOpts.ly -= menuOpts.totalHeight;
+        menuOpts.ly -= paddedHeight;
         yanchor = 'bottom';
     }
     if(anchorUtils.isMiddleAnchor(menuOpts)) {
-        menuOpts.ly -= menuOpts.totalHeight / 2;
+        menuOpts.ly -= paddedHeight / 2;
         yanchor = 'middle';
     }
 
@@ -500,10 +503,10 @@ function findDimenstions(gd, menuOpts) {
     Plots.autoMargin(gd, constants.autoMarginIdRoot + menuOpts._index, {
         x: menuOpts.x,
         y: menuOpts.y,
-        l: menuOpts.totalWidth * ({right: 1, center: 0.5}[xanchor] || 0),
-        r: menuOpts.totalWidth * ({left: 1, center: 0.5}[xanchor] || 0),
-        b: menuOpts.totalHeight * ({top: 1, middle: 0.5}[yanchor] || 0),
-        t: menuOpts.totalHeight * ({bottom: 1, middle: 0.5}[yanchor] || 0)
+        l: paddedWidth * ({right: 1, center: 0.5}[xanchor] || 0),
+        r: paddedWidth * ({left: 1, center: 0.5}[xanchor] || 0),
+        b: paddedHeight * ({top: 1, middle: 0.5}[yanchor] || 0),
+        t: paddedHeight * ({bottom: 1, middle: 0.5}[yanchor] || 0)
     });
 }
 

src/plots/pad_attributes.js

@@ -0,0 +1,36 @@
+/**
+* Copyright 2012-2016, 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';
+
+module.exports = {
+    t: {
+        valType: 'number',
+        dflt: 0,
+        role: 'style',
+        description: 'The amount of padding (in px) along the top of the component.'
+    },
+    r: {
+        valType: 'number',
+        dflt: 0,
+        role: 'style',
+        description: 'The amount of padding (in px) on the right side of the component.'
+    },
+    b: {
+        valType: 'number',
+        dflt: 0,
+        role: 'style',
+        description: 'The amount of padding (in px) along the bottom of the component.'
+    },
+    l: {
+        valType: 'number',
+        dflt: 0,
+        role: 'style',
+        description: 'The amount of padding (in px) on the left side of the component.'
+    }
+};