Implement padding for chart title alignment [882]

Author: rmoestl

src/components/sliders/attributes.js

@@ -133,7 +133,7 @@ module.exports = overrideAll(templatedArray('slider', {
         role: 'style',
         description: 'Sets the x position (in normalized coordinates) of the slider.'
     },
-    pad: extendDeepAll({}, padAttrs, {
+    pad: extendDeepAll(padAttrs({editType: 'arraydraw'}), {
         description: 'Set the padding of the slider component along each side.'
     }, {t: {dflt: 20}}),
     xanchor: {

src/components/updatemenus/attributes.js

@@ -162,7 +162,7 @@ module.exports = overrideAll(templatedArray('updatemenu', {
         ].join(' ')
     },
 
-    pad: extendFlat({}, padAttrs, {
+    pad: extendFlat(padAttrs({editType: 'arraydraw'}), {
         description: 'Sets the padding around the buttons or dropdown menu.'
     }),
 

src/plot_api/subroutines.js

@@ -27,6 +27,10 @@ var enforceAxisConstraints = axisConstraints.enforce;
 var cleanAxisConstraints = axisConstraints.clean;
 var doAutoRange = require('../plots/cartesian/autorange').doAutoRange;
 
+var SVG_TEXT_ANCHOR_START = 'start';
+var SVG_TEXT_ANCHOR_MIDDLE = 'middle';
+var SVG_TEXT_ANCHOR_END = 'end';
+
 exports.layoutStyles = function(gd) {
     return Lib.syncOrAsync([Plots.doAutoMargin, lsInner], gd);
 };
@@ -450,45 +454,62 @@ function findCounterAxisLineWidth(ax, side, counterAx, axList) {
 exports.drawMainTitle = function(gd) {
     var fullLayout = gd._fullLayout;
 
+    var textAnchor = getMainTitleTextAnchor(fullLayout);
+    var dy = getMainTitleDy(fullLayout);
+
     Titles.draw(gd, 'gtitle', {
         propContainer: fullLayout,
         propName: 'title.text',
         placeholder: fullLayout._dfltTitle.plot,
         attributes: {
-            x: getMainTitleX(fullLayout),
-            y: getMainTitleY(fullLayout),
-            'text-anchor': getMainTitleTextAnchor(fullLayout),
-            dy: getMainTitleDy(fullLayout)
+            x: getMainTitleX(fullLayout, textAnchor),
+            y: getMainTitleY(fullLayout, dy),
+            'text-anchor': textAnchor,
+            dy: dy
         }
     });
 };
 
-function getMainTitleX(fullLayout) {
+function getMainTitleX(fullLayout, textAnchor) {
     var title = fullLayout.title;
     var _size = fullLayout._size;
+    var hPadShift = 0;
+
+    if(textAnchor === SVG_TEXT_ANCHOR_START) {
+        hPadShift = title.pad.l;
+    } else if(textAnchor === SVG_TEXT_ANCHOR_END) {
+        hPadShift = -title.pad.r;
+    }
 
     switch(title.xref) {
         case 'paper':
-            return _size.l + _size.w * title.x;
+            return _size.l + _size.w * title.x + hPadShift;
         case 'container':
         default:
-            return fullLayout.width * title.x;
+            return fullLayout.width * title.x + hPadShift;
     }
 }
 
-function getMainTitleY(fullLayout) {
+function getMainTitleY(fullLayout, dy) {
     var title = fullLayout.title;
     var _size = fullLayout._size;
+    var vPadShift = 0;
+
+    if(dy === '0em' || !dy) {
+        vPadShift = -title.pad.b;
+    } else if(dy === alignmentConstants.CAP_SHIFT + 'em') {
+        vPadShift = title.pad.t;
+    }
 
     if(title.y === 'auto') {
         return _size.t / 2;
     } else {
         switch(title.yref) {
             case 'paper':
-                return _size.t + _size.h - _size.h * title.y;
+                return _size.t + _size.h - _size.h * title.y + vPadShift;
             case 'container':
             default:
-                return fullLayout.height - fullLayout.height * title.y;
+                return fullLayout.height - fullLayout.height * title.y + vPadShift;
         }
     }
 }
@@ -500,22 +521,22 @@ function getMainTitleTextAnchor(fullLayout) {
         case 'auto':
             return calcTextAnchor(fullLayout.title.x);
         case 'left':
-            return 'start';
+            return SVG_TEXT_ANCHOR_START;
         case 'right':
-            return 'end';
+            return SVG_TEXT_ANCHOR_END;
         case 'center':
         default:
-            return 'middle';
+            return SVG_TEXT_ANCHOR_MIDDLE;
     }
 
     function calcTextAnchor(x) {
         if(x < 1 / 3) {
-            return 'start';
+            return SVG_TEXT_ANCHOR_START;
         } else if(x > 2 / 3) {
-            return 'end';
+            return SVG_TEXT_ANCHOR_END;
         }
 
-        return 'middle';
+        return SVG_TEXT_ANCHOR_MIDDLE;
     }
 }
 

src/plots/layout_attributes.js

@@ -10,6 +10,8 @@
 
 var fontAttrs = require('./font_attributes');
 var colorAttrs = require('../components/color/attributes');
+var padAttrs = require('./pad_attributes');
+var extendFlat = require('../lib/extend').extendFlat;
 
 var globalFont = fontAttrs({
     editType: 'calc',
@@ -102,6 +104,16 @@ module.exports = {
                 'docu', // TODO document
             ].join(' ')
         },
+        pad: extendFlat(padAttrs({editType: 'layoutstyle'}), {
+            description: [
+                'Sets the padding of the title.',
+                'Each padding value only applies when the corresponding',
+                'xanchor / yanchor value is set accordingly. E.g. for left',
+                'padding to take effect, xanchor must be set to left.',
+                'The same rule applies if xanchor/yanchor is determined automatically.',
+                'Padding is muted if respective anchor value is middle/center.'
+            ].join(' ')
+        }),
         editType: 'layoutstyle'
     },
     autosize: {

src/plots/pad_attributes.js

@@ -8,37 +8,46 @@
 
 'use strict';
 
-// This is used exclusively by components inside component arrays,
-// hence the 'arraydraw' editType. If this ever gets used elsewhere
-// we could generalize it as a function ala font_attributes
-module.exports = {
-    t: {
-        valType: 'number',
-        dflt: 0,
-        role: 'style',
-        editType: 'arraydraw',
-        description: 'The amount of padding (in px) along the top of the component.'
-    },
-    r: {
-        valType: 'number',
-        dflt: 0,
-        role: 'style',
-        editType: 'arraydraw',
-        description: 'The amount of padding (in px) on the right side of the component.'
-    },
-    b: {
-        valType: 'number',
-        dflt: 0,
-        role: 'style',
-        editType: 'arraydraw',
-        description: 'The amount of padding (in px) along the bottom of the component.'
-    },
-    l: {
-        valType: 'number',
-        dflt: 0,
-        role: 'style',
-        editType: 'arraydraw',
-        description: 'The amount of padding (in px) on the left side of the component.'
-    },
-    editType: 'arraydraw'
+/**
+ * Creates a set of padding attributes.
+ *
+ * @param {object} opts
+ *   @param {string} editType:
+ *     the editType for all pieces of this padding definition
+ *
+ * @return {object} attributes object containing {t, r, b, l} as specified
+ */
+module.exports = function(opts) {
+    var editType = opts.editType;
+    return {
+        t: {
+            valType: 'number',
+            dflt: 0,
+            role: 'style',
+            editType: editType,
+            description: 'The amount of padding (in px) along the top of the component.'
+        },
+        r: {
+            valType: 'number',
+            dflt: 0,
+            role: 'style',
+            editType: editType,
+            description: 'The amount of padding (in px) on the right side of the component.'
+        },
+        b: {
+            valType: 'number',
+            dflt: 0,
+            role: 'style',
+            editType: editType,
+            description: 'The amount of padding (in px) along the bottom of the component.'
+        },
+        l: {
+            valType: 'number',
+            dflt: 0,
+            role: 'style',
+            editType: editType,
+            description: 'The amount of padding (in px) on the left side of the component.'
+        },
+        editType: editType
+    };
 };

src/plots/plots.js

@@ -1338,6 +1338,10 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
     coerce('title.y'); // TODO restrict to [-2, 3]?
     coerce('title.xanchor');
     coerce('title.yanchor');
+    coerce('title.pad.t');
+    coerce('title.pad.r');
+    coerce('title.pad.b');
+    coerce('title.pad.l');
 
     // Make sure that autosize is defaulted to *true*
     // on layouts with no set width and height for backward compatibly,