refactor annotations.draw, add standoff and anchor with arrow

Author: alexcjohnson

src/components/annotations/annotation_defaults.js

@@ -75,7 +75,7 @@ module.exports = function handleAnnotationDefaults(annIn, annOut, fullLayout, op
         }
 
         // xanchor, yanchor
-        else coerce(axLetter + 'anchor');
+        coerce(axLetter + 'anchor');
     }
 
     // if you have one coordinate you should have both
@@ -86,6 +86,7 @@ module.exports = function handleAnnotationDefaults(annIn, annOut, fullLayout, op
         coerce('arrowhead');
         coerce('arrowsize');
         coerce('arrowwidth', ((borderOpacity && borderWidth) || 1) * 2);
+        coerce('standoff');
 
         // if you have one part of arrow length you should have both
         Lib.noneOrAll(annIn, annOut, ['ax', 'ay']);

src/components/annotations/arrow_paths.js

@@ -21,7 +21,10 @@
 
 module.exports = [
     // no arrow
-    '',
+    {
+        path: '',
+        backoff: 0
+    },
     // wide with flat back
     {
         path: 'M-2.4,-3V3L0.6,0Z',

src/components/annotations/attributes.js

@@ -140,6 +140,17 @@ module.exports = {
         role: 'style',
         description: 'Sets the width (in px) of annotation arrow.'
     },
+    standoff: {
+        valType: 'number',
+        min: 0,
+        dflt: 0,
+        role: 'style',
+        description: [
+            'Sets a distance, in pixels, to move the arrowhead away from the',
+            'position it is pointing at, for example to point at the edge of',
+            'a marker independent of zoom.'
+        ].join(' ')
+    },
     ax: {
         valType: 'any',
         role: 'info',
@@ -236,17 +247,17 @@ module.exports = {
         dflt: 'auto',
         role: 'info',
         description: [
-            'Sets the annotation\'s horizontal position anchor',
+            'Sets the text box\'s horizontal position anchor',
             'This anchor binds the `x` position to the *left*, *center*',
             'or *right* of the annotation.',
             'For example, if `x` is set to 1, `xref` to *paper* and',
             '`xanchor` to *right* then the right-most portion of the',
             'annotation lines up with the right-most edge of the',
             'plotting area.',
             'If *auto*, the anchor is equivalent to *center* for',
-            'data-referenced annotations',
-            'whereas for paper-referenced, the anchor picked corresponds',
-            'to the closest side.'
+            'data-referenced annotations or if there is an arrow,',
+            'whereas for paper-referenced with no arrow, the anchor picked',
+            'corresponds to the closest side.'
         ].join(' ')
     },
     yref: {
@@ -286,17 +297,17 @@ module.exports = {
         dflt: 'auto',
         role: 'info',
         description: [
-            'Sets the annotation\'s vertical position anchor',
+            'Sets the text box\'s vertical position anchor',
             'This anchor binds the `y` position to the *top*, *middle*',
             'or *bottom* of the annotation.',
             'For example, if `y` is set to 1, `yref` to *paper* and',
             '`yanchor` to *top* then the top-most portion of the',
             'annotation lines up with the top-most edge of the',
             'plotting area.',
             'If *auto*, the anchor is equivalent to *middle* for',
-            'data-referenced annotations',
-            'whereas for paper-referenced, the anchor picked corresponds',
-            'to the closest side.'
+            'data-referenced annotations or if there is an arrow,',
+            'whereas for paper-referenced with no arrow, the anchor picked',
+            'corresponds to the closest side.'
         ].join(' ')
     },
 

src/components/annotations/calc_autorange.js

@@ -47,39 +47,47 @@ function annAutorange(gd) {
     // as the whole anno may include hidden text in its bbox
     fullLayout.annotations.forEach(function(ann) {
         var xa = Axes.getFromId(gd, ann.xref),
-            ya = Axes.getFromId(gd, ann.yref);
-
-        if(!(xa || ya)) return;
-
-        var halfWidth = (ann._xsize || 0) / 2,
-            xShift = ann._xshift || 0,
-            halfHeight = (ann._ysize || 0) / 2,
-            yShift = ann._yshift || 0,
-            leftSize = halfWidth - xShift,
-            rightSize = halfWidth + xShift,
-            topSize = halfHeight - yShift,
-            bottomSize = halfHeight + yShift;
-
-        if(ann.showarrow) {
-            var headSize = 3 * ann.arrowsize * ann.arrowwidth;
-            leftSize = Math.max(leftSize, headSize);
-            rightSize = Math.max(rightSize, headSize);
-            topSize = Math.max(topSize, headSize);
-            bottomSize = Math.max(bottomSize, headSize);
-        }
+            ya = Axes.getFromId(gd, ann.yref),
+            headSize = 3 * ann.arrowsize * ann.arrowwidth || 0;
 
         if(xa && xa.autorange) {
-            Axes.expand(xa, [xa.r2c(ann.x)], {
-                ppadplus: rightSize,
-                ppadminus: leftSize
-            });
+            if(ann.axref === ann.xref) {
+                // expand for the arrowhead (padded by arrowhead)
+                Axes.expand(xa, [xa.r2c(ann.x)], {
+                    ppadplus: headSize,
+                    ppadminus: headSize
+                });
+                // again for the textbox (padded by textbox)
+                Axes.expand(xa, [xa.r2c(ann.ax)], {
+                    ppadplus: ann._xpadplus,
+                    ppadminus: ann._xpadminus
+                });
+            }
+            else {
+                Axes.expand(xa, [xa.r2c(ann.x)], {
+                    ppadplus: Math.max(ann._xpadplus, headSize),
+                    ppadminus: Math.max(ann._xpadminus, headSize)
+                });
+            }
         }
 
         if(ya && ya.autorange) {
-            Axes.expand(ya, [ya.r2c(ann.y)], {
-                ppadplus: bottomSize,
-                ppadminus: topSize
-            });
+            if(ann.ayref === ann.yref) {
+                Axes.expand(ya, [ya.r2c(ann.y)], {
+                    ppadplus: headSize,
+                    ppadminus: headSize
+                });
+                Axes.expand(ya, [ya.r2c(ann.ay)], {
+                    ppadplus: ann._ypadplus,
+                    ppadminus: ann._ypadminus
+                });
+            }
+            else {
+                Axes.expand(ya, [ya.r2c(ann.y)], {
+                    ppadplus: Math.max(ann._ypadplus, headSize),
+                    ppadminus: Math.max(ann._ypadminus, headSize)
+                });
+            }
         }
     });
 }