keep text pad consistent when uniformtext rescales at start/end anchor positions

- also revise code related to autorotate

Author: archmoj

src/lib/index.js

@@ -1186,8 +1186,10 @@ lib.isHidden = function(gd) {
  *  @param {object} transform
  *  - targetX: desired position on the x-axis
  *  - targetY: desired position on the y-axis
- *  - textX: width of text
- *  - textY: height of text
+ *  - textX: text middle position on the x-axis
+ *  - textY: text middle position on the y-axis
+ *  - anchorX: (optional) text anchor position on the x-axis (computed from textX), zero for middle anchor
+ *  - anchorY: (optional) text anchor position on the y-axis (computed from textY), zero for middle anchor
  *  - scale: (optional) scale applied after translate
  *  - rotate: (optional) rotation applied after scale
  *  - noCenter: when defined no extra arguments needed in rotation
@@ -1198,15 +1200,17 @@ lib.getTextTransform = function(transform) {
     var textY = transform.textY;
     var targetX = transform.targetX;
     var targetY = transform.targetY;
+    var anchorX = transform.anchorX || 0;
+    var anchorY = transform.anchorY || 0;
     var rotate = transform.rotate;
     var scale = transform.scale;
     if(!scale) scale = 0;
     else if(scale > 1) scale = 1;
 
     return (
         'translate(' +
-            (targetX - scale * textX) + ',' +
-            (targetY - scale * textY) +
+            (targetX - scale * (textX + anchorX)) + ',' +
+            (targetY - scale * (textY + anchorY)) +
         ')' +
         (scale < 1 ?
             'scale(' + scale + ')' : ''

src/traces/bar/plot.js

@@ -457,25 +457,16 @@ function toMoveInsideBar(x0, x1, y0, y1, textBB, opts) {
     lx -= 2 * textpad;
     ly -= 2 * textpad;
 
-    var autoRotate = (angle === 'auto');
-    var isAutoRotated = false;
-    if(autoRotate &&
+    var rotate = getRotateFromAngle(angle);
+    if((angle === 'auto') &&
         !(textWidth <= lx && textHeight <= ly) &&
         (textWidth > lx || textHeight > ly) && (
         !(textWidth > ly || textHeight > lx) ||
         ((textWidth < textHeight) !== (lx < ly))
     )) {
-        isAutoRotated = true;
-    }
-
-    if(isAutoRotated) {
-        // don't rotate yet only swap bar width with height
-        var tmp = ly;
-        ly = lx;
-        lx = tmp;
+        rotate += 90;
     }
 
-    var rotate = getRotateFromAngle(angle);
     var t = getRotatedTextSize(textBB, rotate);
 
     var scale = 1;
@@ -488,31 +479,42 @@ function toMoveInsideBar(x0, x1, y0, y1, textBB, opts) {
     }
 
     // compute text and target positions
+    var textX = (textBB.left + textBB.right) / 2;
+    var textY = (textBB.top + textBB.bottom) / 2;
     var targetX = (x0 + x1) / 2;
     var targetY = (y0 + y1) / 2;
+    var anchorX = 0;
+    var anchorY = 0;
     if(isStart || isEnd) {
-        textpad += 0.5 * scale * (isHorizontal !== isAutoRotated ? t.x : t.y);
+        var extrapad = (isHorizontal ? t.x : t.y) / 2;
+        var dir = isHorizontal ? dirSign(x0, x1) : dirSign(y0, y1);
 
         if(isHorizontal) {
-            textpad *= dirSign(x0, x1);
-            targetX = isStart ? x0 + textpad : x1 - textpad;
+            if(isStart) {
+                targetX = x0 + dir * textpad;
+                anchorX = -dir * extrapad;
+            } else {
+                targetX = x1 - dir * textpad;
+                anchorX = dir * extrapad;
+            }
         } else {
-            textpad *= dirSign(y0, y1);
-            targetY = isStart ? y0 + textpad : y1 - textpad;
+            if(isStart) {
+                targetY = y0 + dir * textpad;
+                anchorY = -dir * extrapad;
+            } else {
+                targetY = y1 - dir * textpad;
+                anchorY = dir * extrapad;
+            }
         }
     }
 
-    var textX = (textBB.left + textBB.right) / 2;
-    var textY = (textBB.top + textBB.bottom) / 2;
-
-    // lastly apply auto rotation
-    if(isAutoRotated) rotate += 90;
-
     return {
         textX: textX,
         textY: textY,
         targetX: targetX,
         targetY: targetY,
+        anchorX: anchorX,
+        anchorY: anchorY,
         scale: scale,
         rotate: rotate
     };
@@ -549,24 +551,30 @@ function toMoveOutsideBar(x0, x1, y0, y1, textBB, opts) {
     var t = getRotatedTextSize(textBB, rotate);
 
     // compute text and target positions
-    textpad += 0.5 * scale * (isHorizontal ? t.x : t.y);
+    var extrapad = (isHorizontal ? t.x : t.y) / 2;
+    var textX = (textBB.left + textBB.right) / 2;
+    var textY = (textBB.top + textBB.bottom) / 2;
     var targetX = (x0 + x1) / 2;
     var targetY = (y0 + y1) / 2;
+    var anchorX = 0;
+    var anchorY = 0;
 
+    var dir = isHorizontal ? dirSign(x1, x0) : dirSign(y0, y1);
     if(isHorizontal) {
-        targetX = x1 - textpad * dirSign(x1, x0);
+        targetX = x1 - dir * textpad;
+        anchorX = dir * extrapad;
     } else {
-        targetY = y1 + textpad * dirSign(y0, y1);
+        targetY = y1 + dir * textpad;
+        anchorY = -dir * extrapad;
     }
 
-    var textX = (textBB.left + textBB.right) / 2;
-    var textY = (textBB.top + textBB.bottom) / 2;
-
     return {
         textX: textX,
         textY: textY,
         targetX: targetX,
         targetY: targetY,
+        anchorX: anchorX,
+        anchorY: anchorY,
         scale: scale,
         rotate: rotate
     };

src/traces/treemap/plot.js

@@ -368,8 +368,10 @@ function plotOne(gd, cd, element, transitionOpts) {
             else if(offsetDir === 'right') transform.targetX += deltaX;
         }
 
-        transform.targetX = viewMapX(transform.targetX);
-        transform.targetY = viewMapY(transform.targetY);
+        transform.targetX = viewMapX(transform.targetX - transform.anchorX * transform.scale);
+        transform.targetY = viewMapY(transform.targetY - transform.anchorY * transform.scale);
+        transform.anchorX = 0;
+        transform.anchorY = 0;
 
         if(isNaN(transform.targetX) || isNaN(transform.targetY)) {
             return {};