Switching absolutetail to axref, ayref based on code review feedback. Can't figure out how the regex for axis ref works, so hardcoded to x,y for now and seeking guidance.

Author: MFed

src/components/annotations/attributes.js

@@ -131,31 +131,16 @@ module.exports = {
         role: 'style',
         description: 'Sets the width (in px) of annotation arrow.'
     },
-    absolutetail: {
-        valType: 'boolean',
-        dflt: false,
-        role: 'style',
-        description: [
-            'Indicates if the tail of this arrow is a point in ',
-            'the coordinate system vs a relative offset in pixels.',
-            'This is useful for trendline annotations which should ',
-            'continue to indicate the correct trend when zoomed.',
-            'If *true*, `ax` is a value on the x axis and `ay` is ',
-            'a value on the y axis.',
-            'If *false*, `ax` and `ay` assume their normal offset ',
-            'roles.'
-        ].join(' ')
-    },
     ax: {
         valType: 'number',
         dflt: -10,
         role: 'info',
         description: [
             'Sets the x component of the arrow tail about the arrow head.',
-            'If `absolutetail` is false, a positive (negative) ',
+            'If `axref` is `pixel`, a positive (negative) ',
             'component corresponds to an arrow pointing',
             'from right to left (left to right).',
-            'If `absolutetail` is true, this is a value on the x axis.'
+            'If `axref` is an axis, this is a value on that axis.'
         ].join(' ')
     },
     ay: {
@@ -164,10 +149,44 @@ module.exports = {
         role: 'info',
         description: [
             'Sets the y component of the arrow tail about the arrow head.',
-            'If `absolutetail` is false, a positive (negative) ',
+            'If `ayref` is `pixel`, a positive (negative) ',
             'component corresponds to an arrow pointing',
             'from bottom to top (top to bottom).',
-            'If `absolutetail` is true, this is a value on the y axis.'
+            'If `ayref` is an axis, this is a value on that axis.'
+        ].join(' ')
+    },
+    axref: {
+        valType: 'enumerated',
+        dflt: 'pixel',
+        values: [
+            'pixel',
+            'x'
+        ],
+        role: 'info',
+        description: [
+            'Indicates in what terms the tail of the annotation (ax,ay) ',
+            'is specified. If `pixel`, `ax` is a relative offset in pixels ',
+            'from `x`. If set to an x axis id (e.g. *x* or *x2*), `ax` is ',
+            'specified in the same terms as that axis. This is useful ',
+            'for trendline annotations which should continue to indicate ',
+            'the correct trend when zoomed.'
+        ].join(' ')
+    },
+    ayref: {
+        valType: 'enumerated',
+        dflt: 'pixel',
+        values: [
+            'pixel',
+            'y'
+        ],
+        role: 'info',
+        description: [
+            'Indicates in what terms the tail of the annotation (ax,ay) ',
+            'is specified. If `pixel`, `ay` is a relative offset in pixels ',
+            'from `y`. If set to a y axis id (e.g. *y* or *y2*), `ay` is ',
+            'specified in the same terms as that axis. This is useful ',
+            'for trendline annotations which should continue to indicate ',
+            'the correct trend when zoomed.'
         ].join(' ')
     },
     // positioning

src/components/annotations/index.js

@@ -59,7 +59,8 @@ function handleAnnotationDefaults(annIn, fullLayout) {
         coerce('arrowwidth', ((borderOpacity && borderWidth) || 1) * 2);
         coerce('ax');
         coerce('ay');
-        coerce('absolutetail');
+        coerce('axref');
+        coerce('ayref');
 
         // if you have one part of arrow length you should have both
         Lib.noneOrAll(annIn, annOut, ['ax', 'ay']);
@@ -91,7 +92,7 @@ function handleAnnotationDefaults(annIn, fullLayout) {
                     newval = Lib.dateTime2ms(annIn[axLetter]);
                     if(newval !== false) annIn[axLetter] = newval;
 
-                    if(annIn.absolutetail) {
+                    if(annIn['a' + axLetter + 'ref'] === axRef) {
                         var newvalB = Lib.dateTime2ms(annIn['a' + axLetter]);
                         if(newvalB !== false) annIn['a' + axLetter] = newvalB;
                     }
@@ -425,8 +426,8 @@ annotations.draw = function(gd, index, opt, value) {
 
         var annotationIsOffscreen = false;
         ['x', 'y'].forEach(function(axLetter) {
-            var ax = Axes.getFromId(gd,
-                    options[axLetter + 'ref'] || axLetter),
+            var axRef = options[axLetter + 'ref'] || axLetter,
+                ax = Axes.getFromId(gd, axRef),
                 dimAngle = (textangle + (axLetter === 'x' ? 0 : 90)) * Math.PI / 180,
                 annSize = outerwidth * Math.abs(Math.cos(dimAngle)) +
                           outerheight * Math.abs(Math.sin(dimAngle)),
@@ -456,7 +457,7 @@ annotations.draw = function(gd, index, opt, value) {
             }
 
             var alignShift = 0;
-            if(options.absolutetail) {
+            if(options['a' + axLetter + 'ref'] === axRef) {
                 annPosPx['aa' + axLetter] = ax._offset + ax.l2p(options['a' + axLetter]);
             } else {
                 if(options.showarrow) {
@@ -486,13 +487,15 @@ annotations.draw = function(gd, index, opt, value) {
         // make sure the arrowhead (if there is one)
         // and the annotation center are visible
         if(options.showarrow) {
-            if (options.absolutetail) {
+            if(options.axref === options.xref)
                 arrowX = Lib.constrain(annPosPx.x, 1, fullLayout.width - 1);
-                arrowY = Lib.constrain(annPosPx.y, 1, fullLayout.height - 1);
-            } else {
+            else
                 arrowX = Lib.constrain(annPosPx.x - options.ax, 1, fullLayout.width - 1);
+
+            if(options.ayref === options.yref)
+                arrowY = Lib.constrain(annPosPx.y, 1, fullLayout.height - 1);
+            else
                 arrowY = Lib.constrain(annPosPx.y - options.ay, 1, fullLayout.height - 1);
-            }
         }
         annPosPx.x = Lib.constrain(annPosPx.x, 1, fullLayout.width - 1);
         annPosPx.y = Lib.constrain(annPosPx.y, 1, fullLayout.height - 1);
@@ -512,13 +515,15 @@ annotations.draw = function(gd, index, opt, value) {
             outerwidth - borderwidth, outerheight - borderwidth);
 
         var annX = 0, annY = 0;
-        if(options.absolutetail) {
+        if(options.axref === options.xref)
             annX = Math.round(annPosPx.aax - outerwidth / 2);
-            annY = Math.round(annPosPx.aay - outerheight / 2);
-        } else {
+        else
             annX = Math.round(annPosPx.x - outerwidth / 2);
+
+        if(options.ayref === options.yref)
+            annY = Math.round(annPosPx.aay - outerheight / 2);
+        else
             annY = Math.round(annPosPx.y - outerheight / 2);
-        }
 
         ann.call(Lib.setTranslate, annX, annY);
 
@@ -539,13 +544,15 @@ annotations.draw = function(gd, index, opt, value) {
             //    how-to-get-the-width-of-an-svg-tspan-element
             var arrowX0, arrowY0;
 
-            if(options.absolutetail) {
+            if(options.axref === options.xref)
                 arrowX0 = annPosPx.aax + dx;
-                arrowY0 = annPosPx.aay + dy;
-            } else {
+            else
                 arrowX0 = annPosPx.x + dx;
+
+            if(options.ayref === options.yref)
+                arrowY0 = annPosPx.aay + dy;
+            else
                 arrowY0 = annPosPx.y + dy;
-            }
 
                 // create transform matrix and related functions
             var transform =
@@ -648,14 +655,15 @@ annotations.draw = function(gd, index, opt, value) {
                             (options.y + dy / ya._m) :
                             (1 - ((arrowY + dy - gs.t) / gs.h));
 
-                        if(options.absolutetail) {
+                        if(options.axref === options.xref)
                             update[annbase + '.ax'] = xa ?
                               (options.ax + dx / xa._m) :
                               ((arrowX + dx - gs.l) / gs.w);
+
+                        if(options.ayref === options.yref)
                             update[annbase + '.ay'] = ya ?
                               (options.ay + dy / ya._m) :
                               (1 - ((arrowY + dy - gs.t) / gs.h));
-                        }
 
                         anng.attr({
                             transform: 'rotate(' + textangle + ',' +
@@ -698,13 +706,16 @@ annotations.draw = function(gd, index, opt, value) {
                     ann.call(Lib.setTranslate, x0 + dx, y0 + dy);
                     var csr = 'pointer';
                     if(options.showarrow) {
-                        if(options.absolutetail) {
+                        if(options.axref === options.xref)
                             update[annbase + '.ax'] = xa.p2l(xa.l2p(options.ax) + dx);
-                            update[annbase + '.ay'] = ya.p2l(ya.l2p(options.ay) + dy);
-                        } else {
+                        else
                             update[annbase + '.ax'] = options.ax + dx;
+
+                        if(options.ayref === options.yref)
+                            update[annbase + '.ay'] = ya.p2l(ya.l2p(options.ay) + dy);
+                        else
                             update[annbase + '.ay'] = options.ay + dy;
-                        }
+
                         drawArrow(dx, dy);
                     }
                     else {

test/image/mocks/annotations.json

@@ -42,7 +42,7 @@
                 "font":{"color":"rgb(0, 0, 255)","size":20},
                 "arrowcolor":"rgb(166, 28, 0)","borderpad":3,"textangle":50,"x":5,"y":1
             },
-            {"text":"","showarrow":true,"borderwidth":1.2,"arrowhead":2,"absolutetail":true,"x":5,"y":5,"ax":4,"ay":3}
+            {"text":"","showarrow":true,"borderwidth":1.2,"arrowhead":2,"axref":"x","ayref":"y","x":5,"y":5,"ax":4,"ay":3}
         ]
     }
 }

test/jasmine/tests/annotations_test.js

@@ -1,4 +1,4 @@
-var PlotlyInternal = require('@src/plotly');
+require('@src/plotly');
 var Plots = require('@src/plots/plots');
 var Annotations = require('@src/components/annotations');
 
@@ -7,21 +7,22 @@ describe('Test annotations', function() {
     'use strict';
 
     describe('supplyLayoutDefaults', function() {
-        it('should default to not use absolute arrow tail', function() {
+        it('should default to pixel for axref/ayref', function() {
             var annotationDefaults = {};
             annotationDefaults._has = Plots._hasPlotType.bind(annotationDefaults);
 
             Annotations.supplyLayoutDefaults({ annotations: [{ showarrow: true, arrowhead: 2}] }, annotationDefaults);
 
-            expect(annotationDefaults.annotations[0].absolutetail).toBe(false);
+            expect(annotationDefaults.annotations[0].axref).toEqual('pixel');
+            expect(annotationDefaults.annotations[0].ayref).toEqual('pixel');
         });
 
-        it('should convert ax/ay date coordinates to milliseconds if absolutetail is true', function() {
+        it('should convert ax/ay date coordinates to milliseconds if tail is in axis terms and axis is a date', function() {
             var annotationOut = { xaxis: { type: 'date', range: ['2000-01-01', '2016-01-01'] }};
             annotationOut._has = Plots._hasPlotType.bind(annotationOut);
 
             var annotationIn = {
-                annotations: [{ showarrow: true, absolutetail: true, x: '2008-07-01', ax: '2004-07-01', y: 0, ay: 50}]
+                annotations: [{ showarrow: true, axref: 'x', ayref: 'y', x: '2008-07-01', ax: '2004-07-01', y: 0, ay: 50}]
             };
 
             Annotations.supplyLayoutDefaults(annotationIn, annotationOut);