Skip to content

Commit 446bacc

Browse files
archmojarchmoj
committed
fix outside long text position with textangle - add test
1 parent 30b172a commit 446bacc

File tree

4 files changed

+189
-29
lines changed

4 files changed

+189
-29
lines changed

‎src/traces/bar/plot.js‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -350,7 +350,6 @@ function getRotationFromAngle(angle) {
350350
}
351351

352352
function getTransformToMoveInsideBar(x0, x1, y0, y1, textBB, isHorizontal, constrained, angle, anchor) {
353-
// compute text and target positions
354353
var textWidth = textBB.width;
355354
var textHeight = textBB.height;
356355
var lx = Math.abs(x1 - x0);
@@ -403,16 +402,14 @@ function getTransformToMoveInsideBar(x0, x1, y0, y1, textBB, isHorizontal, const
403402
if(anchor !== 'middle') { // case of 'start' or 'end'
404403
var targetWidth = scale * (isHorizontal !== isAutoRotated ? textHeight : textWidth);
405404
var targetHeight = scale * (isHorizontal !== isAutoRotated ? textWidth : textHeight);
406-
var move = targetWidth * absSin + targetHeight * absCos;
407-
408-
var offset = textpad + move / 2;
405+
textpad += 0.5 * (targetWidth * absSin + targetHeight * absCos);
409406

410407
if(isHorizontal) {
411-
offset *= dirSign(x0, x1);
412-
targetX = (anchor === 'start') ? x0 + offset : x1 - offset;
408+
textpad *= dirSign(x0, x1);
409+
targetX = (anchor === 'start') ? x0 + textpad : x1 - textpad;
413410
} else {
414-
offset *= dirSign(y0, y1);
415-
targetY = (anchor === 'start') ? y0 + offset : y1 - offset;
411+
textpad *= dirSign(y0, y1);
412+
targetY = (anchor === 'start') ? y0 + textpad : y1 - textpad;
416413
}
417414
}
418415

@@ -426,47 +423,49 @@ function getTransformToMoveInsideBar(x0, x1, y0, y1, textBB, isHorizontal, const
426423
}
427424

428425
function getTransformToMoveOutsideBar(x0, x1, y0, y1, textBB, isHorizontal, constrained, angle) {
429-
var barWidth = (isHorizontal) ?
430-
Math.abs(y1 - y0) :
431-
Math.abs(x1 - x0);
432-
433-
var rotation = getRotationFromAngle(angle);
426+
var textWidth = textBB.width;
427+
var textHeight = textBB.height;
428+
var lx = Math.abs(x1 - x0);
429+
var ly = Math.abs(y1 - y0);
434430

435-
var textpad = 0;
431+
var textpad;
436432
// Keep the padding so the text doesn't sit right against
437433
// the bars, but don't factor it into barWidth
438-
if(barWidth > 2 * TEXTPAD) {
439-
textpad = TEXTPAD;
434+
if(isHorizontal) {
435+
textpad = (ly > 2 * TEXTPAD) ? TEXTPAD : 0;
436+
} else {
437+
textpad = (lx > 2 * TEXTPAD) ? TEXTPAD : 0;
440438
}
441-
var absSin = Math.abs(Math.sin(Math.PI / 180 * rotation));
442-
var absCos = Math.abs(Math.cos(Math.PI / 180 * rotation));
443439

444440
// compute rotation and scale
445441
var scale = 1;
446442
if(constrained) {
447443
scale = (isHorizontal) ?
448-
Math.min(1, barWidth / textBB.height) :
449-
Math.min(1, barWidth / textBB.width);
444+
Math.min(1, ly / textHeight) :
445+
Math.min(1, lx / textWidth);
450446
}
451447

452-
// compute text and target positions
453-
var textX = (textBB.left + textBB.right) / 2;
454-
var textY = (textBB.top + textBB.bottom) / 2;
455-
456-
var targetWidth = scale * textBB.width;
457-
var targetHeight = scale * textBB.height;
448+
var rotation = getRotationFromAngle(angle);
449+
var absSin = Math.abs(Math.sin(Math.PI / 180 * rotation));
450+
var absCos = Math.abs(Math.cos(Math.PI / 180 * rotation));
458451

459-
textpad += 0.5 * Math.min(absSin * targetHeight, absCos * targetWidth);
452+
// compute text and target positions
453+
var targetWidth = scale * (isHorizontal ? textHeight : textWidth);
454+
var targetHeight = scale * (isHorizontal ? textWidth : textHeight);
455+
textpad += 0.5 * (targetWidth * absSin + targetHeight * absCos);
460456

461457
var targetX = (x0 + x1) / 2;
462458
var targetY = (y0 + y1) / 2;
463459

464460
if(isHorizontal) {
465-
targetX = x1 - (textpad + targetWidth / 2) * dirSign(x1, x0);
461+
targetX = x1 - textpad * dirSign(x1, x0);
466462
} else {
467-
targetY = y1 + (textpad + targetHeight / 2) * dirSign(y0, y1);
463+
targetY = y1 + textpad * dirSign(y0, y1);
468464
}
469465

466+
var textX = (textBB.left + textBB.right) / 2;
467+
var textY = (textBB.top + textBB.bottom) / 2;
468+
470469
return getTransform(textX, textY, targetX, targetY, scale, rotation);
471470
}
472471

‎test/image/baselines/bar_axis_textangle_outside.png‎

53.6 KB
Loading

‎test/image/baselines/funnel_axis_textangle_outside.png‎

-128 Bytes
Loading

‎test/image/mocks/bar_axis_textangle_outside.json‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
{
2+
"data": [
3+
{
4+
"type": "bar",
5+
"orientation": "v",
6+
"x": [
7+
"A",
8+
"B",
9+
"C"
10+
],
11+
"y": [
12+
3,
13+
2,
14+
1
15+
],
16+
"text": [
17+
"()",
18+
"void main()",
19+
"public static void main()"
20+
],
21+
"textposition": "outside",
22+
"cliponaxis": false,
23+
"textangle": -15,
24+
"textinfo": "value+percent initial+percent previous+percent total"
25+
},
26+
{
27+
"type": "bar",
28+
"orientation": "v",
29+
"x": [
30+
"A",
31+
"B",
32+
"C"
33+
],
34+
"y": [
35+
300,
36+
200,
37+
100
38+
],
39+
"text": [
40+
"()",
41+
"void main()",
42+
"public static void main()"
43+
],
44+
"textposition": "outside",
45+
"cliponaxis": false,
46+
"textangle": 135,
47+
"textinfo": "value+percent initial+percent previous+percent total",
48+
"xaxis": "x2",
49+
"yaxis": "y2"
50+
},
51+
{
52+
"type": "bar",
53+
"orientation": "h",
54+
"x": [
55+
30000,
56+
20000,
57+
10000
58+
],
59+
"y": [
60+
"A",
61+
"B",
62+
"C"
63+
],
64+
"text": [
65+
"()",
66+
"void main()",
67+
"public static void main()"
68+
],
69+
"textposition": "outside",
70+
"cliponaxis": false,
71+
"textangle": 30,
72+
"textinfo": "value+percent initial+percent previous+percent total",
73+
"xaxis": "x3",
74+
"yaxis": "y3"
75+
},
76+
{
77+
"type": "bar",
78+
"orientation": "h",
79+
"x": [
80+
1000000,
81+
2000000,
82+
3000000
83+
],
84+
"y": [
85+
"A",
86+
"B",
87+
"C"
88+
],
89+
"text": [
90+
"()",
91+
"void main()",
92+
"public static void main()"
93+
],
94+
"textposition": "outside",
95+
"cliponaxis": false,
96+
"textangle": -90,
97+
"textinfo": "value+percent initial+percent previous+percent total",
98+
"xaxis": "x4",
99+
"yaxis": "y4"
100+
}
101+
],
102+
"layout": {
103+
"width": 800,
104+
"height": 800,
105+
"dragmode": "pan",
106+
"xaxis": {
107+
"domain": [
108+
0,
109+
0.48
110+
]
111+
},
112+
"xaxis2": {
113+
"anchor": "y2",
114+
"domain": [
115+
0.52,
116+
1
117+
]
118+
},
119+
"xaxis3": {
120+
"anchor": "y3",
121+
"domain": [
122+
0,
123+
0.48
124+
]
125+
},
126+
"xaxis4": {
127+
"anchor": "y4",
128+
"domain": [
129+
0.52,
130+
1
131+
]
132+
},
133+
"yaxis": {
134+
"domain": [
135+
0,
136+
0.48
137+
]
138+
},
139+
"yaxis2": {
140+
"anchor": "x2",
141+
"domain": [
142+
0.52,
143+
1
144+
]
145+
},
146+
"yaxis3": {
147+
"anchor": "x3",
148+
"domain": [
149+
0.52,
150+
1
151+
]
152+
},
153+
"yaxis4": {
154+
"anchor": "x4",
155+
"domain": [
156+
0,
157+
0.48
158+
]
159+
}
160+
}
161+
}

0 commit comments

Comments
 (0)