Not hardcoding axis references but using regex and coerce. Purposeful duplication of code per github PR 610

Author: MFed

src/components/annotations/attributes.js

@@ -160,7 +160,7 @@ module.exports = {
         dflt: 'pixel',
         values: [
             'pixel',
-            'x'
+            cartesianConstants.idRegex.x.toString()
         ],
         role: 'info',
         description: [
@@ -177,7 +177,7 @@ module.exports = {
         dflt: 'pixel',
         values: [
             'pixel',
-            'y'
+            cartesianConstants.idRegex.y.toString()
         ],
         role: 'info',
         description: [

src/components/annotations/index.js

@@ -78,6 +78,10 @@ function handleAnnotationDefaults(annIn, fullLayout) {
         // xref, yref
         var axRef = Axes.coerceRef(annIn, annOut, tdMock, axLetter);
 
+        //todo: should be refactored in conjunction with Axes
+        // axref, ayref
+        var aaxRef = Axes.coerceARef(annIn, annOut, tdMock, axLetter);
+
         // x, y
         var defaultPosition = 0.5;
         if(axRef !== 'paper') {
@@ -92,7 +96,7 @@ function handleAnnotationDefaults(annIn, fullLayout) {
                     newval = Lib.dateTime2ms(annIn[axLetter]);
                     if(newval !== false) annIn[axLetter] = newval;
 
-                    if(annIn['a' + axLetter + 'ref'] === axRef) {
+                    if(aaxRef === axRef) {
                         var newvalB = Lib.dateTime2ms(annIn['a' + axLetter]);
                         if(newvalB !== false) annIn['a' + axLetter] = newvalB;
                     }
@@ -487,15 +491,17 @@ 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.axref === options.xref)
+            if(options.axref === options.xref) {
                 arrowX = Lib.constrain(annPosPx.x, 1, fullLayout.width - 1);
-            else
+            } else {
                 arrowX = Lib.constrain(annPosPx.x - options.ax, 1, fullLayout.width - 1);
+            }
 
-            if(options.ayref === options.yref)
+            if(options.ayref === options.yref) {
                 arrowY = Lib.constrain(annPosPx.y, 1, fullLayout.height - 1);
-            else
+            } 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);
@@ -515,15 +521,17 @@ annotations.draw = function(gd, index, opt, value) {
             outerwidth - borderwidth, outerheight - borderwidth);
 
         var annX = 0, annY = 0;
-        if(options.axref === options.xref)
+        if(options.axref === options.xref) {
             annX = Math.round(annPosPx.aax - outerwidth / 2);
-        else
+        } else {
             annX = Math.round(annPosPx.x - outerwidth / 2);
+        }
 
-        if(options.ayref === options.yref)
+        if(options.ayref === options.yref) {
             annY = Math.round(annPosPx.aay - outerheight / 2);
-        else
+        } else {
             annY = Math.round(annPosPx.y - outerheight / 2);
+        }
 
         ann.call(Lib.setTranslate, annX, annY);
 
@@ -544,15 +552,17 @@ annotations.draw = function(gd, index, opt, value) {
             //    how-to-get-the-width-of-an-svg-tspan-element
             var arrowX0, arrowY0;
 
-            if(options.axref === options.xref)
+            if(options.axref === options.xref) {
                 arrowX0 = annPosPx.aax + dx;
-            else
+            } else {
                 arrowX0 = annPosPx.x + dx;
+            }
 
-            if(options.ayref === options.yref)
+            if(options.ayref === options.yref) {
                 arrowY0 = annPosPx.aay + dy;
-            else
+            } else {
                 arrowY0 = annPosPx.y + dy;
+            }
 
                 // create transform matrix and related functions
             var transform =
@@ -654,15 +664,17 @@ annotations.draw = function(gd, index, opt, value) {
                             (options.y + dy / ya._m) :
                             (1 - ((arrowY + dy - gs.t) / gs.h));
 
-                        if(options.axref === options.xref)
+                        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)
+                        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 + ',' +
@@ -706,15 +718,17 @@ annotations.draw = function(gd, index, opt, value) {
                     ann.call(Lib.setTranslate, x0 + dx, y0 + dy);
                     var csr = 'pointer';
                     if(options.showarrow) {
-                        if(options.axref === options.xref)
+                        if(options.axref === options.xref) {
                             update[annbase + '.ax'] = xa.p2l(xa.l2p(options.ax) + dx);
-                        else
+                        } else {
                             update[annbase + '.ax'] = options.ax + dx;
+                        }
 
-                        if(options.ayref === options.yref)
+                        if(options.ayref === options.yref) {
                             update[annbase + '.ay'] = ya.p2l(ya.l2p(options.ay) + dy);
-                        else
+                        } else {
                             update[annbase + '.ay'] = options.ay + dy;
+                        }
 
                         drawArrow(dx, dy);
                     }

src/plots/cartesian/axes.js

@@ -55,6 +55,26 @@ axes.coerceRef = function(containerIn, containerOut, gd, axLetter, dflt) {
     return Lib.coerce(containerIn, containerOut, attrDef, refAttr);
 };
 
+//todo: duplicated per github PR 610. Should be consolidated with axes.coerceRef.
+// find the list of possible axes to reference with an axref or ayref attribute
+// and coerce it to that list
+axes.coerceARef = function(containerIn, containerOut, gd, axLetter, dflt) {
+    var axlist = gd._fullLayout._has('gl2d') ? [] : axes.listIds(gd, axLetter),
+        refAttr = 'a' + axLetter + 'ref',
+        attrDef = {};
+
+    // data-ref annotations are not supported in gl2d yet
+
+    attrDef[refAttr] = {
+        valType: 'enumerated',
+        values: axlist.concat(['pixel']),
+        dflt: dflt || 'pixel' || axlist[0]
+    };
+
+    // axref, ayref
+    return Lib.coerce(containerIn, containerOut, attrDef, refAttr);
+};
+
 // empty out types for all axes containing these traces
 // so we auto-set them again
 axes.clearTypes = function(gd, traces) {