add arrowanchor property

Author: apalchys

src/components/annotations/attributes.js

@@ -175,6 +175,14 @@ module.exports = {
         editType: 'arraydraw',
         description: 'Sets the annotation arrow head style.'
     },
+    arrowanchor: {
+        valType: 'enumerated',
+        values: ['end', 'start', 'start+end'],
+        dflt: 'end',
+        role: 'style',
+        editType: 'arraydraw',
+        description: 'Sets the annotation arrow head position.'
+    },
     arrowsize: {
         valType: 'number',
         min: 0.3,

src/components/annotations/common_defaults.js

@@ -37,6 +37,7 @@ module.exports = function handleAnnotationCommonDefaults(annIn, annOut, fullLayo
     if(showArrow) {
         coerce('arrowcolor', borderOpacity ? annOut.bordercolor : Color.defaultLine);
         coerce('arrowhead');
+        coerce('arrowanchor');
         coerce('arrowsize');
         coerce('arrowwidth', ((borderOpacity && borderWidth) || 1) * 2);
         coerce('standoff');

src/components/annotations/draw.js

@@ -509,7 +509,8 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
             });
 
             var strokewidth = options.arrowwidth,
-                arrowColor = options.arrowcolor;
+                arrowColor = options.arrowcolor,
+                arrowAnchor = options.arrowanchor;
 
             var arrowGroup = annGroup.append('g')
                 .style({opacity: Color.opacity(arrowColor)})
@@ -520,7 +521,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
                 .style('stroke-width', strokewidth + 'px')
                 .call(Color.stroke, Color.rgb(arrowColor));
 
-            drawArrowHead(arrow, 'end', options);
+            drawArrowHead(arrow, arrowAnchor, options);
 
             // the arrow dragger is a small square right at the head, then a line to the tail,
             // all expanded by a stroke width of 6px plus the arrow line width

src/components/annotations3d/attributes.js

@@ -72,6 +72,7 @@ module.exports = overrideAll({
     showarrow: annAtts.showarrow,
     arrowcolor: annAtts.arrowcolor,
     arrowhead: annAtts.arrowhead,
+    arrowanchor: annAtts.arrowanchor,
     arrowsize: annAtts.arrowsize,
     arrowwidth: annAtts.arrowwidth,
     standoff: annAtts.standoff,

test/image/baselines/annotations.png

@@ -45,6 +45,7 @@
                 "arrowcolor":"rgb(166, 28, 0)","borderpad":3,"textangle":50,"x":5,"y":1
             },
             {"text":"","showarrow":true,"borderwidth":1.2,"arrowhead":2,"axref":"x","ayref":"y","x":5,"y":3,"ax":4,"ay":5},
+            {"text":"","showarrow":true,"borderwidth":1.2,"arrowhead":2,"arrowanchor":"start+end","axref":"x","ayref":"y","x":2,"y":4,"ax":3,"ay":4},
             {"text":"","showarrow":true,"borderwidth":1.2,"arrowhead":2,"axref":"x","ayref":"y","x":6,"y":2,"ax":3,"ay":3},
             {
                 "text": "arrow ML<br>+standoff", "x": 2, "y": 2, "ax": 20, "ay": 20,

test/image/mocks/annotations.json

@@ -140,6 +140,16 @@ describe('Test annotations', function() {
             expect(layoutOut.annotations[2]._xclick).toBe(2, 'log');
             expect(layoutOut.annotations[2]._yclick).toBe('A', 'category');
         });
+
+        it('should default to end for arrowanchor', function() {
+            var layoutIn = {
+                annotations: [{ showarrow: true, arrowhead: 2 }]
+            };
+
+            var out = _supply(layoutIn);
+
+            expect(out[0].arrowanchor).toEqual('end');
+        });
     });
 });