@@ -23,21 +23,22 @@ var axisIds = require('../../plots/cartesian/axis_ids');
2323
2424var Titles = module . exports = { } ;
2525
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+ */
2930Titles . draw = function ( gd , title ) {
3031 var fullLayout = gd . _fullLayout ,
3132 gs = fullLayout . _size ,
3233 axletter = title . charAt ( 0 ) ,
33- colorbar = title . substr ( 1 , 2 ) === 'cb' ;
34+ colorbar = ( title . substr ( 1 , 2 ) === 'cb' ) ;
3435
3536 var cbnum , cont , options ;
3637
3738 if ( colorbar ) {
38- var uid = title . substr ( 3 ) . replace ( 'title' , '' ) ;
39+ var uid = title . substr ( 3 ) . replace ( 'title' , '' ) ;
3940 gd . _fullData . some ( function ( trace , i ) {
40- if ( trace . uid === uid ) {
41+ if ( trace . uid === uid ) {
4142 cbnum = i ;
4243 cont = gd . calcdata [ i ] [ 0 ] . t . cb . axis ;
4344 return true ;
@@ -46,9 +47,9 @@ Titles.draw = function(gd, title) {
4647 }
4748 else cont = fullLayout [ axisIds . id2name ( title . replace ( 'title' , '' ) ) ] || fullLayout ;
4849
49- var prop = cont === fullLayout ? 'title' : cont . _name + '.title' ,
50+ var prop = ( cont === fullLayout ) ? 'title' : cont . _name + '.title' ,
5051 name = colorbar ? 'colorscale' :
51- ( ( cont . _id || axletter ) . toUpperCase ( ) + ' axis' ) ,
52+ ( ( cont . _id || axletter ) . toUpperCase ( ) + ' axis' ) ,
5253 font = cont . titlefont . family ,
5354 fontSize = cont . titlefont . size ,
5455 fontColor = cont . titlefont . color ,
@@ -66,7 +67,7 @@ Titles.draw = function(gd, title) {
6667 avoidTransform ;
6768
6869 // 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
7071 if ( colorbar ) {
7172 avoid . offsetLeft = gs . l ;
7273 avoid . offsetTop = gs . t ;
@@ -84,57 +85,61 @@ Titles.draw = function(gd, title) {
8485 if ( colorbar && cont . titleside ) {
8586 // argh, we only make it here if the title is on top or bottom,
8687 // 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' } ;
9192 avoid = { } ;
9293
9394 // convertToTspans rotates any 'y...' by 90 degrees...
9495 // TODO: need a better solution than this hack
95- title = 'h' + title ;
96+ title = 'h' + title ;
9697 }
97- else if ( axletter === 'x' ) {
98+ else if ( axletter === 'x' ) {
9899 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 } :
103102 axisIds . getFromId ( gd , xa . anchor ) ;
103+
104+ x = xa . _offset + xa . _length / 2 ;
105+ y = ya . _offset + ( ( xa . side === 'top' ) ?
104106 - 10 - fontSize * ( offsetBase + ( xa . showticklabels ? 1 : 0 ) ) :
105107 ya . _length + 10 +
106108 fontSize * ( offsetBase + ( xa . showticklabels ? 1.5 : 0.5 ) ) ) ;
109+
107110 options = { x : x , y : y , 'text-anchor' : 'middle' } ;
108- if ( ! avoid . side ) { avoid . side = 'bottom' ; }
111+ if ( ! avoid . side ) avoid . side = 'bottom' ;
109112 }
110- else if ( axletter === 'y' ) {
113+ else if ( axletter === 'y' ) {
111114 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 } :
116117 axisIds . getFromId ( gd , ya . anchor ) ;
118+
119+ y = ya . _offset + ya . _length / 2 ;
120+ x = xa . _offset + ( ( ya . side === 'right' ) ?
117121 xa . _length + 10 +
118122 fontSize * ( offsetBase + ( ya . showticklabels ? 1 : 0.5 ) ) :
119123 - 10 - fontSize * ( offsetBase + ( ya . showticklabels ? 0.5 : 0 ) ) ) ;
124+
120125 options = { x : x , y : y , 'text-anchor' : 'middle' } ;
121126 transform = { rotate : '-90' , offset : 0 } ;
122- if ( ! avoid . side ) { avoid . side = 'left' ; }
127+ if ( ! avoid . side ) avoid . side = 'left' ;
123128 }
124- else {
129+ else {
125130 // plot title
126131 name = 'Plot' ;
127132 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 ;
130135 options = { x : x , y : y , 'text-anchor' : 'middle' } ;
131136 avoid = { } ;
132137 }
133138
134139 var opacity = 1 ,
135140 isplaceholder = false ,
136141 txt = cont . title . trim ( ) ;
137- if ( txt === '' ) { opacity = 0 ; }
142+ if ( txt === '' ) opacity = 0 ;
138143 if ( txt . match ( / C l i c k t o e n t e r .+ t i t l e / ) ) {
139144 opacity = 0.2 ;
140145 isplaceholder = true ;
@@ -143,20 +148,20 @@ Titles.draw = function(gd, title) {
143148 var group ;
144149 if ( colorbar ) {
145150 group = d3 . select ( gd )
146- . selectAll ( '.' + cont . _id . substr ( 1 ) + ' .cbtitle' ) ;
151+ . selectAll ( '.' + cont . _id . substr ( 1 ) + ' .cbtitle' ) ;
147152 // this class-to-rotate thing with convertToTspans is
148153 // getting hackier and hackier... delete groups with the
149154 // 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' )
153158 . remove ( ) ;
154159 }
155160 else {
156- group = fullLayout . _infolayer . selectAll ( '.g-' + title )
161+ group = fullLayout . _infolayer . selectAll ( '.g-' + title )
157162 . data ( [ 0 ] ) ;
158163 group . enter ( ) . append ( 'g' )
159- . classed ( 'g-' + title , true ) ;
164+ . classed ( 'g-' + title , true ) ;
160165 }
161166
162167 var el = group . selectAll ( 'text' )
@@ -177,7 +182,7 @@ Titles.draw = function(gd, title) {
177182 function drawTitle ( titleEl ) {
178183 titleEl . attr ( 'transform' , transform ?
179184 'rotate(' + [ transform . rotate , options . x , options . y ] +
180- ') translate(0, ' + transform . offset + ')' :
185+ ') translate(0, ' + transform . offset + ')' :
181186 null ) ;
182187
183188 titleEl . style ( {
@@ -200,7 +205,7 @@ Titles.draw = function(gd, title) {
200205 var titleGroup = d3 . select ( titleElIn . node ( ) . parentNode ) ;
201206
202207 if ( avoid && avoid . selection && avoid . side && txt ) {
203- titleGroup . attr ( 'transform' , null ) ;
208+ titleGroup . attr ( 'transform' , null ) ;
204209
205210 // move toward avoid.side (= left, right, top, bottom) if needed
206211 // can include pad (pixels, default 2)
@@ -211,7 +216,7 @@ Titles.draw = function(gd, title) {
211216 top : 'bottom' ,
212217 bottom : 'top'
213218 } [ avoid . side ] ,
214- shiftSign = ( [ 'left' , 'top' ] . indexOf ( avoid . side ) !== - 1 ) ?
219+ shiftSign = ( [ 'left' , 'top' ] . indexOf ( avoid . side ) !== - 1 ) ?
215220 - 1 : 1 ,
216221 pad = isNumeric ( avoid . pad ) ? avoid . pad : 2 ,
217222 titlebb = Drawing . bBox ( titleGroup . node ( ) ) ,
@@ -223,9 +228,9 @@ Titles.draw = function(gd, title) {
223228 } ,
224229 maxshift = colorbar ? fullLayout . width :
225230 ( paperbb [ avoid . side ] - titlebb [ avoid . side ] ) *
226- ( ( avoid . side === 'left' || avoid . side === 'top' ) ? - 1 : 1 ) ;
231+ ( ( avoid . side === 'left' || avoid . side === 'top' ) ? - 1 : 1 ) ;
227232 // Prevent the title going off the paper
228- if ( maxshift < 0 ) shift = maxshift ;
233+ if ( maxshift < 0 ) shift = maxshift ;
229234 else {
230235 // so we don't have to offset each avoided element,
231236 // give the title the opposite offset
@@ -246,7 +251,7 @@ Titles.draw = function(gd, title) {
246251 } ) ;
247252 shift = Math . min ( maxshift , shift ) ;
248253 }
249- if ( shift > 0 || maxshift < 0 ) {
254+ if ( shift > 0 || maxshift < 0 ) {
250255 var shiftTemplate = {
251256 left : [ - shift , 0 ] ,
252257 right : [ shift , 0 ] ,
@@ -262,22 +267,22 @@ Titles.draw = function(gd, title) {
262267 el . attr ( { 'data-unformatted' : txt } )
263268 . call ( titleLayout ) ;
264269
265- var placeholderText = 'Click to enter ' + name . replace ( / \d + / , '' ) + ' title' ;
270+ var placeholderText = 'Click to enter ' + name . replace ( / \d + / , '' ) + ' title' ;
266271
267- function setPlaceholder ( ) {
272+ function setPlaceholder ( ) {
268273 opacity = 0 ;
269274 isplaceholder = true ;
270275 txt = placeholderText ;
271- fullLayout . _infolayer . select ( '.' + title )
276+ fullLayout . _infolayer . select ( '.' + title )
272277 . attr ( { 'data-unformatted' : txt } )
273278 . text ( txt )
274- . on ( 'mouseover.opacity' , function ( ) {
279+ . on ( 'mouseover.opacity' , function ( ) {
275280 d3 . select ( this ) . transition ( )
276- . duration ( 100 ) . style ( 'opacity' , 1 ) ;
281+ . duration ( 100 ) . style ( 'opacity' , 1 ) ;
277282 } )
278- . on ( 'mouseout.opacity' , function ( ) {
283+ . on ( 'mouseout.opacity' , function ( ) {
279284 d3 . select ( this ) . transition ( )
280- . duration ( 1000 ) . style ( 'opacity' , 0 ) ;
285+ . duration ( 1000 ) . style ( 'opacity' , 0 ) ;
281286 } ) ;
282287 }
283288
@@ -288,17 +293,18 @@ Titles.draw = function(gd, title) {
288293 . on ( 'edit' , function ( text ) {
289294 if ( colorbar ) {
290295 var trace = gd . _fullData [ cbnum ] ;
291- if ( plots . traceIs ( trace , 'markerColorscale' ) ) {
296+ if ( Plots . traceIs ( trace , 'markerColorscale' ) ) {
292297 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 ) ;
294300 }
295301 else Plotly . relayout ( gd , prop , text ) ;
296302 } )
297- . on ( 'cancel' , function ( ) {
303+ . on ( 'cancel' , function ( ) {
298304 this . text ( this . attr ( 'data-unformatted' ) )
299305 . call ( titleLayout ) ;
300306 } )
301- . on ( 'input' , function ( d ) {
307+ . on ( 'input' , function ( d ) {
302308 this . text ( d || ' ' ) . attr ( options )
303309 . selectAll ( 'tspan.line' )
304310 . attr ( options ) ;
@@ -307,5 +313,5 @@ Titles.draw = function(gd, title) {
307313 else if ( ! txt || txt . match ( / C l i c k t o e n t e r .+ t i t l e / ) ) {
308314 el . remove ( ) ;
309315 }
310- el . classed ( 'js-placeholder' , isplaceholder ) ;
316+ el . classed ( 'js-placeholder' , isplaceholder ) ;
311317} ;
0 commit comments