change default xanchor and yanchor behavior

Author: emilykl

src/components/shapes/attributes.js

@@ -258,12 +258,19 @@ module.exports = templatedArray('shape', {
                 'the default textangle is 0 (horizontal).'
             ].join(' ')
         },
-        xanchor: extendFlat({}, annAttrs.xanchor, {
+        xanchor: {
+            valType: 'enumerated',
+            values: ['auto', 'left', 'center', 'right'],
+            dflt: 'auto',
+            editType: 'calc+arraydraw',
             description: 'Sets the text box\'s horizontal position anchor.',
-        }),
-        yanchor: extendFlat({}, annAttrs.yanchor, {
+        },
+        yanchor: {
+            valType: 'enumerated',
+            values: ['top', 'middle', 'bottom'],
+            editType: 'calc+arraydraw',
             description: 'Sets the text box\'s vertical position anchor.',
-        }),
+        },
         padding: {
             valType: 'number',
             dflt: 3,

src/components/shapes/defaults.js

@@ -15,6 +15,22 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut) {
     });
 };
 
+function dfltLabelYanchor(shapeType, labelTextPosition) {
+    var dfltYanchor;
+    if(shapeType === 'line') {
+        dfltYanchor = 'bottom';
+    } else {
+        if(labelTextPosition.indexOf('top') !== -1) {
+            dfltYanchor = 'top';
+        } else if(labelTextPosition.indexOf('bottom') !== -1) {
+            dfltYanchor = 'bottom';
+        } else {
+            dfltYanchor = 'middle';
+        }
+    }
+    return dfltYanchor;
+}
+
 function handleShapeDefaults(shapeIn, shapeOut, fullLayout) {
     function coerce(attr, dflt) {
         return Lib.coerce(shapeIn, shapeOut, attributes, attr, dflt);
@@ -119,10 +135,14 @@ function handleShapeDefaults(shapeIn, shapeOut, fullLayout) {
 
     // Label options
     coerce('label.text');
-    coerce('label.xanchor');
-    coerce('label.yanchor');
     coerce('label.textangle', shapeType === 'line' ? 'auto' : 0);
-    coerce('label.textposition', shapeType === 'line' ? 'middle' : 'middle center');
+    var labelTextPosition = coerce(
+        'label.textposition',
+        shapeType === 'line' ? 'middle' : 'middle center'
+    );
+    coerce('label.xanchor');
+    // Default yanchor value depends on shape type and label textposition
+    coerce('label.yanchor', dfltLabelYanchor(shapeType, labelTextPosition));
     coerce('label.padding');
     Lib.coerceFont(coerce, 'label.font', fullLayout.font);
 }

src/components/shapes/draw.js

@@ -731,6 +731,7 @@ function calcTextAngle(shapex0, shapey0, shapex1, shapey1) {
 
 function calcTextPosition(shapex0, shapey0, shapex1, shapey1, shapeOptions, actualTextAngle, textBB) {
     var textPosition = shapeOptions.label.textposition;
+    var textAngle = shapeOptions.label.textangle;
     var textPadding = shapeOptions.label.padding;
     var shapeType = shapeOptions.type;
     var textAngleRad = Math.PI / 180 * actualTextAngle;
@@ -745,24 +746,27 @@ function calcTextPosition(shapex0, shapey0, shapex1, shapey1, shapeOptions, actu
         if(textPosition.indexOf('start') !== -1) {
             textx = shapex0;
             texty = shapey0;
-            if(xanchor === 'auto') xanchor = (shapex1 >= shapex0) ? 'right' : 'left';
+            if(xanchor === 'auto') {
+                if(textAngle === 'auto') xanchor = (shapex1 >= shapex0) ? 'left' : 'right';
+                else xanchor = (shapex1 >= shapex0) ? 'right' : 'left';
+            }
         } else if(textPosition.indexOf('end') !== -1) {
             textx = shapex1;
             texty = shapey1;
-            if(xanchor === 'auto') xanchor = (shapex1 >= shapex0) ? 'left' : 'right';
+            if(xanchor === 'auto') {
+                if(textAngle === 'auto') xanchor = (shapex1 >= shapex0) ? 'right' : 'left';
+                else xanchor = (shapex1 >= shapex0) ? 'left' : 'right';
+            }
         } else { // Default: center
             textx = (shapex0 + shapex1) / 2;
             texty = (shapey0 + shapey1) / 2;
             if(xanchor === 'auto') xanchor = 'center';
         }
 
-        // Default yanchor is 'bottom' for lines (should handle in defaults.js)
-        if(yanchor === 'auto') yanchor = 'bottom';
-
         // Special case for padding when angle is 'auto' for lines
         // Padding should be treated as an orthogonal offset in this case
         // Otherwise, padding is just a simple x and y offset
-        if(shapeOptions.label.textangle === 'auto') {
+        if(textAngle === 'auto') {
             // Set direction to apply padding (based on `yanchor` only)
             var paddingDirection = { bottom: 1, middle: 0, top: -1 }[yanchor];
             paddingX = textPadding * Math.sin(textAngleRad) * paddingDirection;
@@ -782,27 +786,30 @@ function calcTextPosition(shapex0, shapey0, shapex1, shapey1, shapeOptions, actu
         // Horizontal needs a little extra padding to look balanced
         paddingX = textPadding + 3;
         if(textPosition.indexOf('right') !== -1) {
-            textx = Math.max(shapex0, shapex1) + paddingX;
-            if(xanchor === 'auto') xanchor = 'left';
-        } else if(textPosition.indexOf('left') !== -1) {
-            textx = Math.min(shapex0, shapex1) - paddingX;
+            textx = Math.max(shapex0, shapex1) - paddingX;
             if(xanchor === 'auto') xanchor = 'right';
+        } else if(textPosition.indexOf('left') !== -1) {
+            textx = Math.min(shapex0, shapex1) + paddingX;
+            if(xanchor === 'auto') xanchor = 'left';
         } else { // Default: center
             textx = (shapex0 + shapex1) / 2;
             if(xanchor === 'auto') xanchor = 'center';
         }
 
         // calc vertical position
-        paddingY = textPadding;
         if(textPosition.indexOf('top') !== -1) {
-            texty = Math.min(shapey0, shapey1) - paddingY;
-            if(yanchor === 'auto') yanchor = 'bottom';
+            texty = Math.min(shapey0, shapey1);
         } else if(textPosition.indexOf('bottom') !== -1) {
-            texty = Math.max(shapey0, shapey1) + paddingY;
-            if(yanchor === 'auto') yanchor = 'top';
-        } else { // Default: middle
+            texty = Math.max(shapey0, shapey1);
+        } else {
             texty = (shapey0 + shapey1) / 2;
-            if(yanchor === 'auto') yanchor = 'middle';
+        }
+        // Apply padding
+        paddingY = textPadding;
+        if(yanchor === 'bottom') {
+            texty = texty - paddingY;
+        } else if(yanchor === 'top') {
+            texty = texty + paddingY;
         }
     }