adapt and 🔒 annotations to 'calcIfAutorange'-less edits!

etpinard · etpinard · commit a8fb653ddca6 · 2018-07-18T11:08:22.000-04:00
diff --git a/src/components/annotations/attributes.js b/src/components/annotations/attributes.js
@@ -19,7 +19,7 @@ module.exports = templatedArray('annotation', {
         valType: 'boolean',
         role: 'info',
         dflt: true,
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Determines whether or not this annotation is visible.'
         ].join(' ')
@@ -28,7 +28,7 @@ module.exports = templatedArray('annotation', {
     text: {
         valType: 'string',
         role: 'info',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets the text associated with this annotation.',
             'Plotly uses a subset of HTML tags to do things like',
@@ -41,14 +41,14 @@ module.exports = templatedArray('annotation', {
         valType: 'angle',
         dflt: 0,
         role: 'style',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets the angle at which the `text` is drawn',
             'with respect to the horizontal.'
         ].join(' ')
     },
     font: fontAttrs({
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         colorEditType: 'arraydraw',
         description: 'Sets the annotation text font.'
     }),
@@ -57,7 +57,7 @@ module.exports = templatedArray('annotation', {
         min: 1,
         dflt: null,
         role: 'style',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets an explicit width for the text box. null (default) lets the',
             'text set the box width. Wider text will be clipped.',
@@ -69,7 +69,7 @@ module.exports = templatedArray('annotation', {
         min: 1,
         dflt: null,
         role: 'style',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets an explicit height for the text box. null (default) lets the',
             'text set the box height. Taller text will be clipped.'
@@ -130,7 +130,7 @@ module.exports = templatedArray('annotation', {
         min: 0,
         dflt: 1,
         role: 'style',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets the padding (in px) between the `text`',
             'and the enclosing border.'
@@ -141,7 +141,7 @@ module.exports = templatedArray('annotation', {
         min: 0,
         dflt: 1,
         role: 'style',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets the width (in px) of the border enclosing',
             'the annotation `text`.'
@@ -152,7 +152,7 @@ module.exports = templatedArray('annotation', {
         valType: 'boolean',
         dflt: true,
         role: 'style',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Determines whether or not the annotation is drawn with an arrow.',
             'If *true*, `text` is placed near the arrow\'s tail.',
@@ -197,7 +197,7 @@ module.exports = templatedArray('annotation', {
         min: 0.3,
         dflt: 1,
         role: 'style',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets the size of the end annotation arrow head, relative to `arrowwidth`.',
             'A value of 1 (default) gives a head about 3x as wide as the line.'
@@ -208,7 +208,7 @@ module.exports = templatedArray('annotation', {
         min: 0.3,
         dflt: 1,
         role: 'style',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets the size of the start annotation arrow head, relative to `arrowwidth`.',
             'A value of 1 (default) gives a head about 3x as wide as the line.'
@@ -218,15 +218,15 @@ module.exports = templatedArray('annotation', {
         valType: 'number',
         min: 0.1,
         role: 'style',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: 'Sets the width (in px) of annotation arrow line.'
     },
     standoff: {
         valType: 'number',
         min: 0,
         dflt: 0,
         role: 'style',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets a distance, in pixels, to move the end arrowhead away from the',
             'position it is pointing at, for example to point at the edge of',
@@ -240,7 +240,7 @@ module.exports = templatedArray('annotation', {
         min: 0,
         dflt: 0,
         role: 'style',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets a distance, in pixels, to move the start arrowhead away from the',
             'position it is pointing at, for example to point at the edge of',
@@ -252,7 +252,7 @@ module.exports = templatedArray('annotation', {
     ax: {
         valType: 'any',
         role: 'info',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets the x component of the arrow tail about the arrow head.',
             'If `axref` is `pixel`, a positive (negative) ',
@@ -265,7 +265,7 @@ module.exports = templatedArray('annotation', {
     ay: {
         valType: 'any',
         role: 'info',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets the y component of the arrow tail about the arrow head.',
             'If `ayref` is `pixel`, a positive (negative) ',
@@ -332,7 +332,7 @@ module.exports = templatedArray('annotation', {
     x: {
         valType: 'any',
         role: 'info',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets the annotation\'s x position.',
             'If the axis `type` is *log*, then you must take the',
@@ -350,7 +350,7 @@ module.exports = templatedArray('annotation', {
         values: ['auto', 'left', 'center', 'right'],
         dflt: 'auto',
         role: 'info',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets the text box\'s horizontal position anchor',
             'This anchor binds the `x` position to the *left*, *center*',
@@ -369,7 +369,7 @@ module.exports = templatedArray('annotation', {
         valType: 'number',
         dflt: 0,
         role: 'style',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Shifts the position of the whole annotation and arrow to the',
             'right (positive) or left (negative) by this many pixels.'
@@ -395,7 +395,7 @@ module.exports = templatedArray('annotation', {
     y: {
         valType: 'any',
         role: 'info',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets the annotation\'s y position.',
             'If the axis `type` is *log*, then you must take the',
@@ -413,7 +413,7 @@ module.exports = templatedArray('annotation', {
         values: ['auto', 'top', 'middle', 'bottom'],
         dflt: 'auto',
         role: 'info',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Sets the text box\'s vertical position anchor',
             'This anchor binds the `y` position to the *top*, *middle*',
@@ -432,7 +432,7 @@ module.exports = templatedArray('annotation', {
         valType: 'number',
         dflt: 0,
         role: 'style',
-        editType: 'calcIfAutorange+arraydraw',
+        editType: 'calc+arraydraw',
         description: [
             'Shifts the position of the whole annotation and arrow up',
             '(positive) or down (negative) by this many pixels.'
diff --git a/src/components/annotations/calc_autorange.js b/src/components/annotations/calc_autorange.js
@@ -16,25 +16,11 @@ var draw = require('./draw').draw;
 
 
 module.exports = function calcAutorange(gd) {
-    var fullLayout = gd._fullLayout,
-        annotationList = Lib.filterVisible(fullLayout.annotations);
-
-    if(!annotationList.length || !gd._fullData.length) return;
-
-    var annotationAxes = {};
-    annotationList.forEach(function(ann) {
-        annotationAxes[ann.xref] = 1;
-        annotationAxes[ann.yref] = 1;
-    });
+    var fullLayout = gd._fullLayout;
+    var annotationList = Lib.filterVisible(fullLayout.annotations);
 
-    for(var axId in annotationAxes) {
-        var ax = Axes.getFromId(gd, axId);
-        if(ax && ax.autorange) {
-            return Lib.syncOrAsync([
-                draw,
-                annAutorange
-            ], gd);
-        }
+    if(annotationList.length && gd._fullData.length) {
+        return Lib.syncOrAsync([draw, annAutorange], gd);
     }
 };
 
@@ -46,14 +32,14 @@ function annAutorange(gd) {
     // use the arrow and the text bg rectangle,
     // as the whole anno may include hidden text in its bbox
     Lib.filterVisible(fullLayout.annotations).forEach(function(ann) {
-        var xa = Axes.getFromId(gd, ann.xref),
-            ya = Axes.getFromId(gd, ann.yref),
-            headSize = 3 * ann.arrowsize * ann.arrowwidth || 0,
-            startHeadSize = 3 * ann.startarrowsize * ann.arrowwidth || 0;
+        var xa = Axes.getFromId(gd, ann.xref);
+        var ya = Axes.getFromId(gd, ann.yref);
+        var headSize = 3 * ann.arrowsize * ann.arrowwidth || 0;
+        var startHeadSize = 3 * ann.startarrowsize * ann.arrowwidth || 0;
 
         var headPlus, headMinus, startHeadPlus, startHeadMinus;
 
-        if(xa && xa.autorange) {
+        if(xa) {
             headPlus = headSize + ann.xshift;
             headMinus = headSize - ann.xshift;
             startHeadPlus = startHeadSize + ann.xshift;
@@ -81,7 +67,7 @@ function annAutorange(gd) {
             }
         }
 
-        if(ya && ya.autorange) {
+        if(ya) {
             headPlus = headSize - ann.yshift;
             headMinus = headSize + ann.yshift;
             startHeadPlus = startHeadSize - ann.yshift;
diff --git a/src/components/annotations/draw.js b/src/components/annotations/draw.js
@@ -300,25 +300,17 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
              * otherwise the text anchor point
              */
             if(ax) {
-                /*
-                 * hide the annotation if it's pointing outside the visible plot
-                 * as long as the axis isn't autoranged - then we need to draw it
-                 * anyway to get its bounding box. When we're dragging, an axis can
-                 * still look autoranged even though it won't be when the drag finishes.
-                 */
+                // check if annotation is off screen, to bypass DOM manipulations
                 var posFraction = ax.r2fraction(options[axLetter]);
-                if((gd._dragging || !ax.autorange) && (posFraction < 0 || posFraction > 1)) {
+                if(posFraction < 0 || posFraction > 1) {
                     if(tailRef === axRef) {
                         posFraction = ax.r2fraction(options['a' + axLetter]);
                         if(posFraction < 0 || posFraction > 1) {
                             annotationIsOffscreen = true;
                         }
-                    }
-                    else {
+                    } else {
                         annotationIsOffscreen = true;
                     }
-
-                    if(annotationIsOffscreen) continue;
                 }
                 basePx = ax._offset + ax.r2p(options[axLetter]);
                 autoAlignFraction = 0.5;
@@ -402,7 +394,9 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
             options['_' + axLetter + 'shift'] = textShift;
         }
 
-        if(annotationIsOffscreen) {
+        // We have everything we need for calcAutorange at this point,
+        // we can safely exit - unless we're currently dragging the plot
+        if(!gd._dragging && annotationIsOffscreen) {
             annTextGroupInner.remove();
             return;
         }
diff --git a/test/jasmine/tests/annotations_test.js b/test/jasmine/tests/annotations_test.js
@@ -737,6 +737,43 @@ describe('annotations autorange', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should propagate axis autorange changes when axis ranges are set', function(done) {
+        function _assert(msg, xrng, yrng) {
+            var fullLayout = gd._fullLayout;
+            expect(fullLayout.xaxis.range).toBeCloseToArray(xrng, 1, msg + ' xrng');
+            expect(fullLayout.yaxis.range).toBeCloseToArray(yrng, 1, msg + ' yrng');
+        }
+
+        Plotly.plot(gd, [{y: [1, 2]}], {
+            xaxis: {range: [0, 2]},
+            yaxis: {range: [0, 2]},
+            annotations: [{
+                text: 'a',
+                x: 3, y: 3
+            }]
+        })
+        .then(function() {
+            _assert('set rng / small tx', [0, 2], [0, 2]);
+            return Plotly.relayout(gd, 'annotations[0].text', 'loooooooooooooooooooooooong');
+        })
+        .then(function() {
+            _assert('set rng / big tx', [0, 2], [0, 2]);
+            return Plotly.relayout(gd, {
+                'xaxis.autorange': true,
+                'yaxis.autorange': true
+            });
+        })
+        .then(function() {
+            _assert('auto rng / big tx', [-0.22, 3.57], [0.84, 3.365]);
+            return Plotly.relayout(gd, 'annotations[0].text', 'a');
+        })
+        .then(function() {
+            _assert('auto rng / small tx', [-0.18, 3.035], [0.84, 3.365]);
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 describe('annotation clicktoshow', function() {
