@@ -23,21 +23,22 @@ var axisIds = require('../../plots/cartesian/axis_ids');
23
23
24
24
var Titles = module . exports = { } ;
25
25
26
- // titles - (re)draw titles on the axes and plot
27
- // title can be 'xtitle', 'ytitle', 'gtitle',
28
- // or empty to draw all
26
+ /**
27
+ * Titles - (re)draw titles on the axes and plot:
28
+ * title can be 'xtitle', 'ytitle', 'gtitle'
29
+ */
29
30
Titles . draw = function ( gd , title ) {
30
31
var fullLayout = gd . _fullLayout ,
31
32
gs = fullLayout . _size ,
32
33
axletter = title . charAt ( 0 ) ,
33
- colorbar = title . substr ( 1 , 2 ) === 'cb' ;
34
+ colorbar = ( title . substr ( 1 , 2 ) === 'cb' ) ;
34
35
35
36
var cbnum , cont , options ;
36
37
37
38
if ( colorbar ) {
38
- var uid = title . substr ( 3 ) . replace ( 'title' , '' ) ;
39
+ var uid = title . substr ( 3 ) . replace ( 'title' , '' ) ;
39
40
gd . _fullData . some ( function ( trace , i ) {
40
- if ( trace . uid === uid ) {
41
+ if ( trace . uid === uid ) {
41
42
cbnum = i ;
42
43
cont = gd . calcdata [ i ] [ 0 ] . t . cb . axis ;
43
44
return true ;
@@ -46,9 +47,9 @@ Titles.draw = function(gd, title) {
46
47
}
47
48
else cont = fullLayout [ axisIds . id2name ( title . replace ( 'title' , '' ) ) ] || fullLayout ;
48
49
49
- var prop = cont === fullLayout ? 'title' : cont . _name + '.title' ,
50
+ var prop = ( cont === fullLayout ) ? 'title' : cont . _name + '.title' ,
50
51
name = colorbar ? 'colorscale' :
51
- ( ( cont . _id || axletter ) . toUpperCase ( ) + ' axis' ) ,
52
+ ( ( cont . _id || axletter ) . toUpperCase ( ) + ' axis' ) ,
52
53
font = cont . titlefont . family ,
53
54
fontSize = cont . titlefont . size ,
54
55
fontColor = cont . titlefont . color ,
@@ -66,7 +67,7 @@ Titles.draw = function(gd, title) {
66
67
avoidTransform ;
67
68
68
69
// find the transform applied to the parents of the avoid selection
69
- // which doesn't get picked up by Plotly. Drawing.bBox
70
+ // which doesn't get picked up by Drawing.bBox
70
71
if ( colorbar ) {
71
72
avoid . offsetLeft = gs . l ;
72
73
avoid . offsetTop = gs . t ;
@@ -84,57 +85,61 @@ Titles.draw = function(gd, title) {
84
85
if ( colorbar && cont . titleside ) {
85
86
// argh, we only make it here if the title is on top or bottom,
86
87
// not right
87
- x = gs . l + cont . titlex * gs . w ;
88
- y = gs . t + ( 1 - cont . titley ) * gs . h + ( ( cont . titleside === 'top' ) ?
89
- 3 + fontSize * 0.75 : - 3 - fontSize * 0.25 ) ;
90
- options = { x : x , y : y , 'text-anchor' :'start' } ;
88
+ x = gs . l + cont . titlex * gs . w ;
89
+ y = gs . t + ( 1 - cont . titley ) * gs . h + ( ( cont . titleside === 'top' ) ?
90
+ 3 + fontSize * 0.75 : - 3 - fontSize * 0.25 ) ;
91
+ options = { x : x , y : y , 'text-anchor' : 'start' } ;
91
92
avoid = { } ;
92
93
93
94
// convertToTspans rotates any 'y...' by 90 degrees...
94
95
// TODO: need a better solution than this hack
95
- title = 'h' + title ;
96
+ title = 'h' + title ;
96
97
}
97
- else if ( axletter === 'x' ) {
98
+ else if ( axletter === 'x' ) {
98
99
xa = cont ;
99
- ya = ( xa . anchor === 'free' ) ?
100
- { _offset :gs . t + ( 1 - ( xa . position || 0 ) ) * gs . h , _length :0 } :
101
- x = xa . _offset + xa . _length / 2 ;
102
- y = ya . _offset + ( ( xa . side === 'top' ) ?
100
+ ya = ( xa . anchor === 'free' ) ?
101
+ { _offset : gs . t + ( 1 - ( xa . position || 0 ) ) * gs . h , _length : 0 } :
103
102
axisIds . getFromId ( gd , xa . anchor ) ;
103
+
104
+ x = xa . _offset + xa . _length / 2 ;
105
+ y = ya . _offset + ( ( xa . side === 'top' ) ?
104
106
- 10 - fontSize * ( offsetBase + ( xa . showticklabels ? 1 : 0 ) ) :
105
107
ya . _length + 10 +
106
108
fontSize * ( offsetBase + ( xa . showticklabels ? 1.5 : 0.5 ) ) ) ;
109
+
107
110
options = { x : x , y : y , 'text-anchor' : 'middle' } ;
108
- if ( ! avoid . side ) { avoid . side = 'bottom' ; }
111
+ if ( ! avoid . side ) avoid . side = 'bottom' ;
109
112
}
110
- else if ( axletter === 'y' ) {
113
+ else if ( axletter === 'y' ) {
111
114
ya = cont ;
112
- xa = ( ya . anchor === 'free' ) ?
113
- { _offset :gs . l + ( ya . position || 0 ) * gs . w , _length :0 } :
114
- y = ya . _offset + ya . _length / 2 ;
115
- x = xa . _offset + ( ( ya . side === 'right' ) ?
115
+ xa = ( ya . anchor === 'free' ) ?
116
+ { _offset : gs . l + ( ya . position || 0 ) * gs . w , _length : 0 } :
116
117
axisIds . getFromId ( gd , ya . anchor ) ;
118
+
119
+ y = ya . _offset + ya . _length / 2 ;
120
+ x = xa . _offset + ( ( ya . side === 'right' ) ?
117
121
xa . _length + 10 +
118
122
fontSize * ( offsetBase + ( ya . showticklabels ? 1 : 0.5 ) ) :
119
123
- 10 - fontSize * ( offsetBase + ( ya . showticklabels ? 0.5 : 0 ) ) ) ;
124
+
120
125
options = { x : x , y : y , 'text-anchor' : 'middle' } ;
121
126
transform = { rotate : '-90' , offset : 0 } ;
122
- if ( ! avoid . side ) { avoid . side = 'left' ; }
127
+ if ( ! avoid . side ) avoid . side = 'left' ;
123
128
}
124
- else {
129
+ else {
125
130
// plot title
126
131
name = 'Plot' ;
127
132
fontSize = fullLayout . titlefont . size ;
128
- x = fullLayout . width / 2 ;
129
- y = fullLayout . _size . t / 2 ;
133
+ x = fullLayout . width / 2 ;
134
+ y = fullLayout . _size . t / 2 ;
130
135
options = { x : x , y : y , 'text-anchor' : 'middle' } ;
131
136
avoid = { } ;
132
137
}
133
138
134
139
var opacity = 1 ,
135
140
isplaceholder = false ,
136
141
txt = cont . title . trim ( ) ;
137
- if ( txt === '' ) { opacity = 0 ; }
142
+ if ( txt === '' ) opacity = 0 ;
138
143
if ( txt . match ( / C l i c k t o e n t e r .+ t i t l e / ) ) {
139
144
opacity = 0.2 ;
140
145
isplaceholder = true ;
@@ -143,20 +148,20 @@ Titles.draw = function(gd, title) {
143
148
var group ;
144
149
if ( colorbar ) {
145
150
group = d3 . select ( gd )
146
- . selectAll ( '.' + cont . _id . substr ( 1 ) + ' .cbtitle' ) ;
151
+ . selectAll ( '.' + cont . _id . substr ( 1 ) + ' .cbtitle' ) ;
147
152
// this class-to-rotate thing with convertToTspans is
148
153
// getting hackier and hackier... delete groups with the
149
154
// wrong class
150
- var otherClass = title . charAt ( 0 ) === 'h' ?
151
- title . substr ( 1 ) : ( 'h' + title ) ;
152
- group . selectAll ( '.' + otherClass + ',.' + otherClass + '-math-group' )
155
+ var otherClass = title . charAt ( 0 ) === 'h' ?
156
+ title . substr ( 1 ) : ( 'h' + title ) ;
157
+ group . selectAll ( '.' + otherClass + ',.' + otherClass + '-math-group' )
153
158
. remove ( ) ;
154
159
}
155
160
else {
156
- group = fullLayout . _infolayer . selectAll ( '.g-' + title )
161
+ group = fullLayout . _infolayer . selectAll ( '.g-' + title )
157
162
. data ( [ 0 ] ) ;
158
163
group . enter ( ) . append ( 'g' )
159
- . classed ( 'g-' + title , true ) ;
164
+ . classed ( 'g-' + title , true ) ;
160
165
}
161
166
162
167
var el = group . selectAll ( 'text' )
@@ -177,7 +182,7 @@ Titles.draw = function(gd, title) {
177
182
function drawTitle ( titleEl ) {
178
183
titleEl . attr ( 'transform' , transform ?
179
184
'rotate(' + [ transform . rotate , options . x , options . y ] +
180
- ') translate(0, ' + transform . offset + ')' :
185
+ ') translate(0, ' + transform . offset + ')' :
181
186
null ) ;
182
187
183
188
titleEl . style ( {
@@ -200,7 +205,7 @@ Titles.draw = function(gd, title) {
200
205
var titleGroup = d3 . select ( titleElIn . node ( ) . parentNode ) ;
201
206
202
207
if ( avoid && avoid . selection && avoid . side && txt ) {
203
- titleGroup . attr ( 'transform' , null ) ;
208
+ titleGroup . attr ( 'transform' , null ) ;
204
209
205
210
// move toward avoid.side (= left, right, top, bottom) if needed
206
211
// can include pad (pixels, default 2)
@@ -211,7 +216,7 @@ Titles.draw = function(gd, title) {
211
216
top : 'bottom' ,
212
217
bottom : 'top'
213
218
} [ avoid . side ] ,
214
- shiftSign = ( [ 'left' , 'top' ] . indexOf ( avoid . side ) !== - 1 ) ?
219
+ shiftSign = ( [ 'left' , 'top' ] . indexOf ( avoid . side ) !== - 1 ) ?
215
220
- 1 : 1 ,
216
221
pad = isNumeric ( avoid . pad ) ? avoid . pad : 2 ,
217
222
titlebb = Drawing . bBox ( titleGroup . node ( ) ) ,
@@ -223,9 +228,9 @@ Titles.draw = function(gd, title) {
223
228
} ,
224
229
maxshift = colorbar ? fullLayout . width :
225
230
( paperbb [ avoid . side ] - titlebb [ avoid . side ] ) *
226
- ( ( avoid . side === 'left' || avoid . side === 'top' ) ? - 1 : 1 ) ;
231
+ ( ( avoid . side === 'left' || avoid . side === 'top' ) ? - 1 : 1 ) ;
227
232
// Prevent the title going off the paper
228
- if ( maxshift < 0 ) shift = maxshift ;
233
+ if ( maxshift < 0 ) shift = maxshift ;
229
234
else {
230
235
// so we don't have to offset each avoided element,
231
236
// give the title the opposite offset
@@ -246,7 +251,7 @@ Titles.draw = function(gd, title) {
246
251
} ) ;
247
252
shift = Math . min ( maxshift , shift ) ;
248
253
}
249
- if ( shift > 0 || maxshift < 0 ) {
254
+ if ( shift > 0 || maxshift < 0 ) {
250
255
var shiftTemplate = {
251
256
left : [ - shift , 0 ] ,
252
257
right : [ shift , 0 ] ,
@@ -262,22 +267,22 @@ Titles.draw = function(gd, title) {
262
267
el . attr ( { 'data-unformatted' : txt } )
263
268
. call ( titleLayout ) ;
264
269
265
- var placeholderText = 'Click to enter ' + name . replace ( / \d + / , '' ) + ' title' ;
270
+ var placeholderText = 'Click to enter ' + name . replace ( / \d + / , '' ) + ' title' ;
266
271
267
- function setPlaceholder ( ) {
272
+ function setPlaceholder ( ) {
268
273
opacity = 0 ;
269
274
isplaceholder = true ;
270
275
txt = placeholderText ;
271
- fullLayout . _infolayer . select ( '.' + title )
276
+ fullLayout . _infolayer . select ( '.' + title )
272
277
. attr ( { 'data-unformatted' : txt } )
273
278
. text ( txt )
274
- . on ( 'mouseover.opacity' , function ( ) {
279
+ . on ( 'mouseover.opacity' , function ( ) {
275
280
d3 . select ( this ) . transition ( )
276
- . duration ( 100 ) . style ( 'opacity' , 1 ) ;
281
+ . duration ( 100 ) . style ( 'opacity' , 1 ) ;
277
282
} )
278
- . on ( 'mouseout.opacity' , function ( ) {
283
+ . on ( 'mouseout.opacity' , function ( ) {
279
284
d3 . select ( this ) . transition ( )
280
- . duration ( 1000 ) . style ( 'opacity' , 0 ) ;
285
+ . duration ( 1000 ) . style ( 'opacity' , 0 ) ;
281
286
} ) ;
282
287
}
283
288
@@ -288,17 +293,18 @@ Titles.draw = function(gd, title) {
288
293
. on ( 'edit' , function ( text ) {
289
294
if ( colorbar ) {
290
295
var trace = gd . _fullData [ cbnum ] ;
291
- if ( plots . traceIs ( trace , 'markerColorscale' ) ) {
296
+ if ( Plots . traceIs ( trace , 'markerColorscale' ) ) {
292
297
Plotly . restyle ( gd , 'marker.colorbar.title' , text , cbnum ) ;
293
- } else Plotly . restyle ( gd , 'colorbar.title' , text , cbnum ) ;
298
+ }
299
+ else Plotly . restyle ( gd , 'colorbar.title' , text , cbnum ) ;
294
300
}
295
301
else Plotly . relayout ( gd , prop , text ) ;
296
302
} )
297
- . on ( 'cancel' , function ( ) {
303
+ . on ( 'cancel' , function ( ) {
298
304
this . text ( this . attr ( 'data-unformatted' ) )
299
305
. call ( titleLayout ) ;
300
306
} )
301
- . on ( 'input' , function ( d ) {
307
+ . on ( 'input' , function ( d ) {
302
308
this . text ( d || ' ' ) . attr ( options )
303
309
. selectAll ( 'tspan.line' )
304
310
. attr ( options ) ;
@@ -307,5 +313,5 @@ Titles.draw = function(gd, title) {
307
313
else if ( ! txt || txt . match ( / C l i c k t o e n t e r .+ t i t l e / ) ) {
308
314
el . remove ( ) ;
309
315
}
310
- el . classed ( 'js-placeholder' , isplaceholder ) ;
316
+ el . classed ( 'js-placeholder' , isplaceholder ) ;
311
317
} ;
0 commit comments