Skip to content

Commit 19a06c6

Browse files
apalchysapalchys
committed
update auto range based on startarrowsize and baseline tests
1 parent c4a0f1f commit 19a06c6

13 files changed

+157
-67
lines changed

‎src/components/annotations/calc_autorange.js

+19-10
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,16 @@ function annAutorange(gd) {
4848
Lib.filterVisible(fullLayout.annotations).forEach(function(ann) {
4949
var xa = Axes.getFromId(gd, ann.xref),
5050
ya = Axes.getFromId(gd, ann.yref),
51-
headSize = 3 * ann.arrowsize * ann.arrowwidth || 0;
51+
headSize = 3 * ann.arrowsize * ann.arrowwidth || 0,
52+
startHeadSize = 3 * ann.startarrowsize * ann.arrowwidth || 0;
5253

53-
var headPlus, headMinus;
54+
var headPlus, headMinus, startHeadPlus, startHeadMinus;
5455

5556
if(xa && xa.autorange) {
5657
headPlus = headSize + ann.xshift;
5758
headMinus = headSize - ann.xshift;
59+
startHeadPlus = startHeadSize + ann.xshift;
60+
startHeadMinus = startHeadSize - ann.xshift;
5861

5962
if(ann.axref === ann.xref) {
6063
// expand for the arrowhead (padded by arrowhead)
@@ -64,36 +67,42 @@ function annAutorange(gd) {
6467
});
6568
// again for the textbox (padded by textbox)
6669
Axes.expand(xa, [xa.r2c(ann.ax)], {
67-
ppadplus: ann._xpadplus,
68-
ppadminus: ann._xpadminus
70+
ppadplus: Math.max(ann._xpadplus, startHeadPlus),
71+
ppadminus: Math.max(ann._xpadminus, startHeadMinus)
6972
});
7073
}
7174
else {
75+
startHeadPlus = ann.ax ? startHeadPlus + ann.ax : startHeadPlus;
76+
startHeadMinus = ann.ax ? startHeadMinus - ann.ax : startHeadMinus;
7277
Axes.expand(xa, [xa.r2c(ann.x)], {
73-
ppadplus: Math.max(ann._xpadplus, headPlus),
74-
ppadminus: Math.max(ann._xpadminus, headMinus)
78+
ppadplus: Math.max(ann._xpadplus, headPlus, startHeadPlus),
79+
ppadminus: Math.max(ann._xpadminus, headMinus, startHeadMinus)
7580
});
7681
}
7782
}
7883

7984
if(ya && ya.autorange) {
8085
headPlus = headSize - ann.yshift;
8186
headMinus = headSize + ann.yshift;
87+
startHeadPlus = startHeadSize - ann.yshift;
88+
startHeadMinus = startHeadSize + ann.yshift;
8289

8390
if(ann.ayref === ann.yref) {
8491
Axes.expand(ya, [ya.r2c(ann.y)], {
8592
ppadplus: headPlus,
8693
ppadminus: headMinus
8794
});
8895
Axes.expand(ya, [ya.r2c(ann.ay)], {
89-
ppadplus: ann._ypadplus,
90-
ppadminus: ann._ypadminus
96+
ppadplus: Math.max(ann._ypadplus, startHeadPlus),
97+
ppadminus: Math.max(ann._ypadminus, startHeadMinus)
9198
});
9299
}
93100
else {
101+
startHeadPlus = ann.ay ? startHeadPlus + ann.ay : startHeadPlus;
102+
startHeadMinus = ann.ay ? startHeadMinus - ann.ay : startHeadMinus;
94103
Axes.expand(ya, [ya.r2c(ann.y)], {
95-
ppadplus: Math.max(ann._ypadplus, headPlus),
96-
ppadminus: Math.max(ann._ypadminus, headMinus)
104+
ppadplus: Math.max(ann._ypadplus, headPlus, startHeadPlus),
105+
ppadminus: Math.max(ann._ypadminus, headMinus, startHeadMinus)
97106
});
98107
}
99108
}

‎src/components/annotations/draw_arrow_head.js

+15-18
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ module.exports = function drawArrowHead(el3, ends, options) {
4343
var startScale = (options.arrowwidth || 1) * options.startarrowsize;
4444
var doStart = ends.indexOf('start') >= 0;
4545
var doEnd = ends.indexOf('end') >= 0;
46-
var doNone = ends.indexOf('none') >= 0;
4746
var backOff = headStyle.backoff * scale + options.standoff;
4847
var startBackOff = startHeadStyle.backoff * startScale + options.startstandoff;
4948

@@ -59,7 +58,7 @@ module.exports = function drawArrowHead(el3, ends, options) {
5958
startRot = Math.atan2(dy, dx);
6059
endRot = startRot + Math.PI;
6160
if(backOff && startBackOff) {
62-
if(backOff * backOff + startBackOff * startBackOff > dx * dx + dy * dy) {
61+
if(backOff + startBackOff > Math.sqrt(dx * dx + dy * dy)) {
6362
hideLine();
6463
return;
6564
}
@@ -73,11 +72,10 @@ module.exports = function drawArrowHead(el3, ends, options) {
7372
var backOffX = backOff * Math.cos(startRot),
7473
backOffY = backOff * Math.sin(startRot);
7574

76-
if(doEnd || doNone) {
77-
end.x += backOffX;
78-
end.y += backOffY;
79-
el3.attr({x2: end.x, y2: end.y});
80-
}
75+
end.x += backOffX;
76+
end.y += backOffY;
77+
el3.attr({x2: end.x, y2: end.y});
78+
8179
}
8280

8381
if(startBackOff) {
@@ -88,11 +86,10 @@ module.exports = function drawArrowHead(el3, ends, options) {
8886
var startBackOffX = startBackOff * Math.cos(startRot),
8987
startbackOffY = startBackOff * Math.sin(startRot);
9088

91-
if(doStart || doNone) {
92-
start.x -= startBackOffX;
93-
start.y -= startbackOffY;
94-
el3.attr({x1: start.x, y1: start.y});
95-
}
89+
start.x -= startBackOffX;
90+
start.y -= startbackOffY;
91+
el3.attr({x1: start.x, y1: start.y});
92+
9693
}
9794
}
9895
else if(el.nodeName === 'path') {
@@ -103,7 +100,7 @@ module.exports = function drawArrowHead(el3, ends, options) {
103100
// combine the two
104101
dashArray = '';
105102

106-
if(pathlen < backOff || pathlen < startBackOff || pathlen < backOff + startBackOff) {
103+
if(pathlen < backOff + startBackOff) {
107104
hideLine();
108105
return;
109106
}
@@ -131,18 +128,18 @@ module.exports = function drawArrowHead(el3, ends, options) {
131128

132129
function hideLine() { el3.style('stroke-dasharray', '0px,100px'); }
133130

134-
function drawhead(headStyle, p, rot, scale) {
135-
if(!headStyle.path) return;
136-
if(headStyle.noRotate) rot = 0;
131+
function drawhead(arrowHeadStyle, p, rot, arrowScale) {
132+
if(!arrowHeadStyle.path) return;
133+
if(arrowHeadStyle.noRotate) rot = 0;
137134

138135
d3.select(el.parentNode).append('path')
139136
.attr({
140137
'class': el3.attr('class'),
141-
d: headStyle.path,
138+
d: arrowHeadStyle.path,
142139
transform:
143140
'translate(' + p.x + ',' + p.y + ')' +
144141
(rot ? 'rotate(' + (rot * 180 / Math.PI) + ')' : '') +
145-
'scale(' + scale + ')'
142+
'scale(' + arrowScale + ')'
146143
})
147144
.style({
148145
fill: Color.rgb(options.arrowcolor),

‎test/image/baselines/annotations-autorange.png

9.83 KB
Loading

‎test/image/baselines/annotations.png

273 Bytes
Loading

‎test/image/baselines/category-autorange.png

11 Bytes
Loading

‎test/image/baselines/gl2d_annotations.png

1.34 KB
Loading

‎test/image/baselines/gl3d_annotations.png

2.89 KB
Loading

‎test/image/mocks/annotations-autorange.json

+41-6
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,33 @@
1010
"layout":{
1111
"autosize":false,
1212
"xaxis":{
13-
"domain":[0,0.3],
13+
"domain":[0,0.21],
1414
"mirror":true,
1515
"zeroline":false,
1616
"showline":true
1717
},
1818
"xaxis2":{
19-
"domain":[0.35,0.65],
19+
"domain":[0.26,0.47],
2020
"anchor":"y2",
2121
"mirror":true,
2222
"zeroline":false,
2323
"showline":true,
2424
"type": "date"
2525
},
2626
"xaxis3":{
27-
"domain":[0.7,1],
27+
"domain":[0.52,0.73],
2828
"anchor":"y3",
2929
"mirror":true,
3030
"zeroline":false,
3131
"showline":true
3232
},
33+
"xaxis4":{
34+
"domain":[0.78,1],
35+
"anchor":"y4",
36+
"mirror":true,
37+
"zeroline":false,
38+
"showline":true
39+
},
3340
"yaxis":{
3441
"mirror":true,
3542
"zeroline":false,
@@ -48,8 +55,14 @@
4855
"zeroline":false,
4956
"showline":true
5057
},
58+
"yaxis4":{
59+
"anchor":"x4",
60+
"mirror":true,
61+
"zeroline":false,
62+
"showline":true
63+
},
5164
"height":360,
52-
"width":800,
65+
"width":1000,
5366
"margin":{"r":40,"b":100,"l":40,"t":40},
5467
"annotations":[
5568
{"ay":0,"ax":50,"x":1,"y":1.5,"text":"Left", "xshift": -10, "yshift": -10},
@@ -94,19 +107,41 @@
94107
"xref":"x3","yref":"y3","text":"Top<br>no<br>arrow","y":2,"x":1.5,"showarrow":false,
95108
"yshift": -10
96109
},
110+
{
111+
"xref":"x4","yref":"y4","text":"From left","y":2,"ax":-27,"ay":0,"x":0,
112+
"textangle": -90, "bordercolor": "#444", "xanchor": "left","yanchor": "top",
113+
"arrowside":"start+end", "startarrowsize":2,"startarrowhead":6,
114+
"xshift": 10
115+
},
116+
{
117+
"xref":"x4","yref":"y4","y":2,"x":6,"ay":0,"ax":40,
118+
"arrowside":"start+end", "startarrowsize":3,"startarrowhead":6,
119+
"xshift": -10
120+
},
121+
{
122+
"xref":"x4","yref":"y4","y":4,"x":4,"ay":-40,"ax":0,
123+
"arrowside":"start+end", "startarrowsize":2,"startarrowhead":6,"xanchor": "right","yanchor": "top",
124+
"yshift": -10
125+
},
126+
{
127+
"xref":"x4","yref":"y4","text":"From Bottom","y":1,"ax":0,"ay":60,"x":4,
128+
"arrowside":"start+end","startarrowhead":6,"startarrowsize":1,"xanchor": "right","yanchor": "bottom",
129+
"bordercolor": "#444", "borderwidth": 3, "height": 30,"textangle":0,
130+
"yshift": 10
131+
},
97132
{
98133
"xref": "paper", "yref": "paper", "text": "On the<br>bottom of the plot",
99134
"x": 0.3, "y": -0.1, "showarrow": false,
100135
"xanchor": "right", "yanchor": "top", "width": 200, "height": 60,
101136
"bgcolor": "#eee", "bordercolor": "#444",
102-
"xshift": -5, "yshift": 5
137+
"xshift": -55, "yshift": 5
103138
},
104139
{
105140
"xref": "paper", "yref": "paper", "text": "blah blah blah blah<br>blah<br>blah<br>blah<br>blah<br>blah",
106141
"x": 0.3, "y": -0.25, "ax": 100, "ay": 0, "textangle": 40, "borderpad": 4,
107142
"xanchor": "left", "yanchor": "bottom", "align": "left", "valign": "top",
108143
"width": 60, "height": 40, "bgcolor": "#eee", "bordercolor": "#444",
109-
"xshift": -5, "yshift": 5
144+
"xshift": -55, "yshift": 5
110145
}
111146
]
112147
}

‎test/image/mocks/annotations.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,9 @@
4545
"arrowcolor":"rgb(166, 28, 0)","borderpad":3,"textangle":50,"x":5,"y":1
4646
},
4747
{"text":"","showarrow":true,"borderwidth":1.2,"arrowhead":2,"axref":"x","ayref":"y","x":5,"y":3,"ax":4,"ay":5},
48-
{"text":"","showarrow":true,"borderwidth":1.2,"arrowhead":3,"startarrowhead":6,"arrowsize":1.5,"startarrowsize":3,"standoff": 7,"startstandoff": 15,"arrowside":"start+end","axref":"x","ayref":"y","x":2,"y":4,"ax":3,"ay":4},
49-
{"text":"","showarrow":true,"borderwidth":1.2,"startarrowhead":2,"startstandoff": 5,"arrowside":"start","axref":"x","ayref":"y","x":1,"y":5,"ax":2,"ay":4},
48+
{"text":"","showarrow":true,"borderwidth":1.2,"arrowhead":3,"startarrowhead":6,"arrowsize":1.5,"startarrowsize":3,"standoff":7,"startstandoff": 15,"arrowside":"start+end","axref":"x","ayref":"y","x":2,"y":4,"ax":3,"ay":4},
49+
{"text":"","showarrow":true,"borderwidth":1.2,"startarrowhead":2,"startstandoff":5,"arrowside":"start","axref":"x","ayref":"y","x":1,"y":5,"ax":2,"ay":4},
50+
{"text":"","showarrow":true,"borderwidth":1.2,"startstandoff":5,"standoff":7,"arrowside":"none","axref":"x","ayref":"y","x":2,"y":3,"ax":2,"ay":4},
5051
{"text":"","showarrow":true,"borderwidth":1.2,"arrowhead":2,"axref":"x","ayref":"y","x":6,"y":2,"ax":3,"ay":3},
5152
{
5253
"text": "arrow ML<br>+standoff", "x": 2, "y": 2, "ax": 20, "ay": 20,

‎test/image/mocks/gl2d_annotations.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,10 @@
4646
"arrowcolor":"rgb(166, 28, 0)","borderpad":3,"textangle":50,"x":5,"y":1
4747
},
4848
{"text":"","showarrow":true,"borderwidth":1.2,"arrowhead":2,"axref":"x","ayref":"y","x":5,"y":3,"ax":4,"ay":5},
49-
{"text":"","showarrow":true,"borderwidth":1.2,"arrowhead":2,"axref":"x","ayref":"y","x":6,"y":2,"ax":3,"ay":3}
49+
{"text":"","showarrow":true,"borderwidth":1.2,"arrowhead":2,"axref":"x","ayref":"y","x":6,"y":2,"ax":3,"ay":3},
50+
{"text":"","showarrow":true,"borderwidth":1.2,"arrowhead":3,"startarrowhead":6,"arrowsize":1.5,"startarrowsize":3,"standoff":7,"startstandoff": 15,"arrowside":"start+end","axref":"x","ayref":"y","x":2,"y":4,"ax":3,"ay":4},
51+
{"text":"","showarrow":true,"borderwidth":1.2,"startarrowhead":2,"startstandoff":5,"arrowside":"start","axref":"x","ayref":"y","x":1,"y":5,"ax":2,"ay":4},
52+
{"text":"","showarrow":true,"borderwidth":1.2,"startstandoff":5,"standoff":7,"arrowside":"none","axref":"x","ayref":"y","x":2,"y":3,"ax":2,"ay":4}
5053
]
5154
}
5255
}

‎test/image/mocks/gl3d_annotations.json

+35-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"data": [{
33
"type": "scatter3d",
4-
"x": ["2017-01-01", "2017-02-10", "2017-03-20"],
5-
"y": ["A", "B", "C"],
6-
"z": [1, 1e3, 1e5]
4+
"x": ["2017-01-01", "2017-02-10", "2017-03-20", "2017-04-29"],
5+
"y": ["A", "B", "C", "B"],
6+
"z": [1, 1e3, 1e5, 100]
77
}],
88
"layout": {
99
"scene": {
@@ -72,7 +72,38 @@
7272
"z": 6,
7373
"text": "autorange bump!",
7474
"ax": -50
75-
}]
75+
}, {
76+
"x": "2017-04-29",
77+
"y": "B",
78+
"z": 2,
79+
"ax": 50,
80+
"ay": 50,
81+
"arrowside": "start+end",
82+
"arrowhead": 2,
83+
"startarrowhead": 3,
84+
"standoff": 10,
85+
"startstandoff": 20
86+
}, {
87+
"x": "2017-04-29",
88+
"y": "B",
89+
"z": 2,
90+
"ax": -100,
91+
"ay": 0,
92+
"arrowside": "start",
93+
"startarrowhead": 6,
94+
"standoff": 10,
95+
"startstandoff": 20
96+
}, {
97+
"x": "2017-04-29",
98+
"y": "B",
99+
"z": 2,
100+
"ax": 80,
101+
"ay": -50,
102+
"arrowside": "none",
103+
"standoff": 10,
104+
"startstandoff": 20
105+
}
106+
]
76107
}
77108
}
78109
}

0 commit comments

Comments
 (0)