Skip to content

Commit c4e706e

Browse files
hannahkerhannahker
committed
Merge branch 'automargin-title-dev' into automargin-title
2 parents 90bd374 + 158791f commit c4e706e

File tree

4 files changed

+48
-44
lines changed

4 files changed

+48
-44
lines changed

‎src/plot_api/subroutines.js

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ var doAutoRange = require('../plots/cartesian/autorange').doAutoRange;
2424
var SVG_TEXT_ANCHOR_START = 'start';
2525
var SVG_TEXT_ANCHOR_MIDDLE = 'middle';
2626
var SVG_TEXT_ANCHOR_END = 'end';
27-
var LINE_SPACING = alignmentConstants.LINE_SPACING;
2827

2928
exports.layoutStyles = function(gd) {
3029
return Lib.syncOrAsync([Plots.doAutoMargin, lsInner], gd);
@@ -405,40 +404,52 @@ exports.drawMainTitle = function(gd) {
405404
var textAnchor = getMainTitleTextAnchor(fullLayout);
406405
var dy = getMainTitleDy(fullLayout);
407406
var y = getMainTitleY(fullLayout, dy);
407+
var x = getMainTitleX(fullLayout, textAnchor);
408408

409-
if(title.text && title.automargin) {
410-
var pushMargin = needsMarginPush(gd, title);
411-
if(pushMargin > 0) {
412-
setDflts(title, getDflts(title)[0], getDflts(title)[1]);
413-
// Recalculate these since the defaults have changed
414-
dy = getMainTitleDy(fullLayout);
415-
y = getMainTitleY(fullLayout, dy);
416-
applyTitleAutoMargin(gd, y, pushMargin);
417-
}
418-
}
419-
409+
// Draw title without positioning to get size
420410
Titles.draw(gd, 'gtitle', {
421411
propContainer: fullLayout,
422412
propName: 'title.text',
423413
placeholder: fullLayout._dfltTitle.plot,
424-
attributes: {
425-
x: getMainTitleX(fullLayout, textAnchor),
414+
attributes: ({
415+
x: x,
426416
y: y,
427417
'text-anchor': textAnchor,
428418
dy: dy
429-
}
419+
})
430420
});
421+
422+
if(title.text && title.automargin) {
423+
var titleObj = d3.selectAll('.gtitle');
424+
var titleHeight = Drawing.bBox(titleObj.node()).height;
425+
var pushMargin = needsMarginPush(gd, title, titleHeight);
426+
if(pushMargin > 0) {
427+
setDflts(title, getDflts(title)[0], getDflts(title)[1]);
428+
// Recalculate these since the defaults have changed
429+
dy = getMainTitleDy(fullLayout);
430+
y = getMainTitleY(fullLayout, dy);
431+
applyTitleAutoMargin(gd, y, pushMargin, titleHeight);
432+
433+
// Position the title once we know where it needs to be
434+
titleObj.attr({
435+
x: x,
436+
y: y,
437+
'text-anchor': textAnchor,
438+
dy: dy
439+
}).call(svgTextUtils.positionText, x, y);
440+
}
441+
}
431442
};
432443

433444

434-
function isOutsideContainer(gd, title, position, y) {
445+
function isOutsideContainer(gd, title, position, y, titleHeight) {
435446
var plotHeight = title.yref === 'paper' ? gd._fullLayout._size.h : gd._fullLayout.height;
436-
var yPosTop = Lib.isTopAnchor(title) ? y : y - getTitleDepth(title); // Standardize to the top of the title
447+
var yPosTop = Lib.isTopAnchor(title) ? y : y - titleHeight; // Standardize to the top of the title
437448
var yPosRel = position === 'b' ? plotHeight - yPosTop : yPosTop; // Position relative to the top or bottom of plot
438449
if((Lib.isTopAnchor(title) && position === 't') || Lib.isBottomAnchor(title) && position === 'b') {
439450
return false;
440451
} else {
441-
return yPosRel < getTitleDepth(title);
452+
return yPosRel < titleHeight;
442453
}
443454
}
444455

@@ -471,13 +482,6 @@ function setDflts(title, titleY, titleYanchor) {
471482
title.yanchor = titleYanchor;
472483
}
473484

474-
function getTitleDepth(title) {
475-
var fontSize = title.font.size;
476-
var extraLines = (title.text.match(svgTextUtils.BR_TAG_ALL) || []).length;
477-
return extraLines ?
478-
fontSize * (extraLines + 1) * LINE_SPACING :
479-
fontSize;
480-
}
481485

482486
function containerPushVal(position, titleY, titleYanchor, height, titleDepth) {
483487
var push = 0;
@@ -498,21 +502,21 @@ function containerPushVal(position, titleY, titleYanchor, height, titleDepth) {
498502
return push;
499503
}
500504

501-
function needsMarginPush(gd, title) {
505+
function needsMarginPush(gd, title, titleHeight) {
502506
var titleY = getDflts(title)[0];
503507
var titleYanchor = getDflts(title)[1];
504508
var position = titleY > 0.5 ? 't' : 'b';
505509
var curMargin = gd._fullLayout.margin[position];
506510
var pushMargin = 0;
507511
if(title.yref === 'paper') {
508512
pushMargin = (
509-
getTitleDepth(title) +
513+
titleHeight +
510514
title.pad.t +
511515
title.pad.b
512516
);
513517
} else if(title.yref === 'container') {
514518
pushMargin = (
515-
containerPushVal(position, titleY, titleYanchor, gd._fullLayout.height, getTitleDepth(title)) +
519+
containerPushVal(position, titleY, titleYanchor, gd._fullLayout.height, titleHeight) +
516520
title.pad.t +
517521
title.pad.b
518522
);
@@ -523,7 +527,7 @@ function needsMarginPush(gd, title) {
523527
return 0;
524528
}
525529

526-
function applyTitleAutoMargin(gd, y, pushMargin) {
530+
function applyTitleAutoMargin(gd, y, pushMargin, titleHeight) {
527531
var titleID = 'title.automargin';
528532
var title = gd._fullLayout.title;
529533
var position = title.y > 0.5 ? 't' : 'b';
@@ -535,7 +539,7 @@ function applyTitleAutoMargin(gd, y, pushMargin) {
535539
};
536540
var reservedPush = {};
537541

538-
if(title.yref === 'paper' && isOutsideContainer(gd, title, position, y)) {
542+
if(title.yref === 'paper' && isOutsideContainer(gd, title, position, y, titleHeight)) {
539543
push[position] = pushMargin;
540544
} else if(title.yref === 'container') {
541545
reservedPush[position] = pushMargin;

‎test/image/baselines/zzz-automargin-title-container.png

-1.3 KB
Loading

‎test/image/baselines/zzz-automargin-title-paper.png

1.75 KB
Loading

‎test/jasmine/tests/titles_test.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1097,16 +1097,16 @@ describe('Title automargining', function() {
10971097
expect(gd._fullLayout.title.automargin).toBe(true);
10981098
expect(gd._fullLayout.title.y).toBe(1);
10991099
expect(gd._fullLayout.title.yanchor).toBe('bottom');
1100-
expect(gd._fullLayout._size.t).toBe(24);
1101-
expect(gd._fullLayout._size.h).toBe(276);
1100+
expect(gd._fullLayout._size.t).toBeCloseTo(33, -1);
1101+
expect(gd._fullLayout._size.h).toBeCloseTo(267, -1);
11021102
return Plotly.relayout(gd, 'title.pad.t', 10);
11031103
}).then(function() {
1104-
expect(gd._fullLayout._size.t).toBe(34);
1105-
expect(gd._fullLayout._size.h).toBe(266);
1104+
expect(gd._fullLayout._size.t).toBeCloseTo(43, -1);
1105+
expect(gd._fullLayout._size.h).toBeCloseTo(257, -1);
11061106
return Plotly.relayout(gd, 'title.pad.b', 10);
11071107
}).then(function() {
1108-
expect(gd._fullLayout._size.h).toBe(256);
1109-
expect(gd._fullLayout._size.t).toBe(44);
1108+
expect(gd._fullLayout._size.h).toBeCloseTo(247, -1);
1109+
expect(gd._fullLayout._size.t).toBeCloseTo(53, -1);
11101110
return Plotly.relayout(gd, 'title.yanchor', 'top');
11111111
}).then(function() {
11121112
expect(gd._fullLayout._size.t).toBe(0);
@@ -1127,8 +1127,8 @@ describe('Title automargining', function() {
11271127
}).then(function() {
11281128
return Plotly.relayout(gd, {'title.automargin': true, 'title.y': 0});
11291129
}).then(function() {
1130-
expect(gd._fullLayout._size.b).toBe(24);
1131-
expect(gd._fullLayout._size.h).toBe(276);
1130+
expect(gd._fullLayout._size.b).toBeCloseTo(33, -1);
1131+
expect(gd._fullLayout._size.h).toBeCloseTo(267, -1);
11321132
expect(gd._fullLayout.title.yanchor).toBe('top');
11331133
}).then(done, done.fail);
11341134
});
@@ -1145,14 +1145,14 @@ describe('Title automargining', function() {
11451145
automargin: true
11461146
}
11471147
}).then(function() {
1148-
expect(gd._fullLayout._size.t).toBe(24);
1149-
expect(gd._fullLayout._size.h).toBe(276);
1148+
expect(gd._fullLayout._size.t).toBeCloseTo(33, -1);
1149+
expect(gd._fullLayout._size.h).toBeCloseTo(267, -1);
11501150
expect(gd._fullLayout.title.y).toBe(1);
11511151
expect(gd._fullLayout.title.yanchor).toBe('top');
11521152
return Plotly.relayout(gd, 'title.y', 0.6);
11531153
}).then(function() {
1154-
expect(gd._fullLayout._size.t).toBe(144);
1155-
expect(gd._fullLayout._size.h).toBe(156);
1154+
expect(gd._fullLayout._size.t).toBeCloseTo(153, -1);
1155+
expect(gd._fullLayout._size.h).toBeCloseTo(147, -1);
11561156
}).then(done, done.fail);
11571157
});
11581158

@@ -1173,8 +1173,8 @@ describe('Title automargining', function() {
11731173
y: 0
11741174
}
11751175
}).then(function() {
1176-
expect(gd._fullLayout._size.b).toBeCloseTo(55, -1);
1177-
expect(gd._fullLayout._size.h).toBeCloseTo(245, -1);
1176+
expect(gd._fullLayout._size.b).toBeCloseTo(64, -1);
1177+
expect(gd._fullLayout._size.h).toBeCloseTo(236, -1);
11781178
}).then(done, done.fail);
11791179
});
11801180
});

0 commit comments

Comments
 (0)