Skip to content

Commit 86a88e2

Browse files
rmoestlrmoestl
committed
Move legend's anchor_utils to Lib and use them in title alignment [882]
1 parent c2b4c10 commit 86a88e2

File tree

8 files changed

+112
-80
lines changed

8 files changed

+112
-80
lines changed

‎src/components/legend/draw.js

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ var FROM_BR = alignmentConstants.FROM_BR;
3030
var getLegendData = require('./get_legend_data');
3131
var style = require('./style');
3232
var helpers = require('./helpers');
33-
var anchorUtils = require('./anchor_utils');
3433

3534
var DBLCLICKDELAY = interactConstants.DBLCLICKDELAY;
3635

@@ -154,17 +153,17 @@ module.exports = function draw(gd) {
154153
lx = gs.l + gs.w * opts.x,
155154
ly = gs.t + gs.h * (1 - opts.y);
156155

157-
if(anchorUtils.isRightAnchor(opts)) {
156+
if(Lib.isRightAnchor(opts)) {
158157
lx -= opts._width;
159158
}
160-
else if(anchorUtils.isCenterAnchor(opts)) {
159+
else if(Lib.isCenterAnchor(opts)) {
161160
lx -= opts._width / 2;
162161
}
163162

164-
if(anchorUtils.isBottomAnchor(opts)) {
163+
if(Lib.isBottomAnchor(opts)) {
165164
ly -= opts._height;
166165
}
167-
else if(anchorUtils.isMiddleAnchor(opts)) {
166+
else if(Lib.isMiddleAnchor(opts)) {
168167
ly -= opts._height / 2;
169168
}
170169

@@ -699,18 +698,18 @@ function expandMargin(gd) {
699698
opts = fullLayout.legend;
700699

701700
var xanchor = 'left';
702-
if(anchorUtils.isRightAnchor(opts)) {
701+
if(Lib.isRightAnchor(opts)) {
703702
xanchor = 'right';
704703
}
705-
else if(anchorUtils.isCenterAnchor(opts)) {
704+
else if(Lib.isCenterAnchor(opts)) {
706705
xanchor = 'center';
707706
}
708707

709708
var yanchor = 'top';
710-
if(anchorUtils.isBottomAnchor(opts)) {
709+
if(Lib.isBottomAnchor(opts)) {
711710
yanchor = 'bottom';
712711
}
713-
else if(anchorUtils.isMiddleAnchor(opts)) {
712+
else if(Lib.isMiddleAnchor(opts)) {
714713
yanchor = 'middle';
715714
}
716715

@@ -730,10 +729,10 @@ function expandHorizontalMargin(gd) {
730729
opts = fullLayout.legend;
731730

732731
var xanchor = 'left';
733-
if(anchorUtils.isRightAnchor(opts)) {
732+
if(Lib.isRightAnchor(opts)) {
734733
xanchor = 'right';
735734
}
736-
else if(anchorUtils.isCenterAnchor(opts)) {
735+
else if(Lib.isCenterAnchor(opts)) {
737736
xanchor = 'center';
738737
}
739738

‎src/components/rangeselector/draw.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ var Drawing = require('../drawing');
1717
var Lib = require('../../lib');
1818
var svgTextUtils = require('../../lib/svg_text_utils');
1919
var axisIds = require('../../plots/cartesian/axis_ids');
20-
var anchorUtils = require('../legend/anchor_utils');
2120

2221
var alignmentConstants = require('../../constants/alignment');
2322
var LINE_SPACING = alignmentConstants.LINE_SPACING;
@@ -218,21 +217,21 @@ function reposition(gd, buttons, opts, axName, selector) {
218217
var ly = graphSize.t + graphSize.h * (1 - opts.y);
219218

220219
var xanchor = 'left';
221-
if(anchorUtils.isRightAnchor(opts)) {
220+
if(Lib.isRightAnchor(opts)) {
222221
lx -= width;
223222
xanchor = 'right';
224223
}
225-
if(anchorUtils.isCenterAnchor(opts)) {
224+
if(Lib.isCenterAnchor(opts)) {
226225
lx -= width / 2;
227226
xanchor = 'center';
228227
}
229228

230229
var yanchor = 'top';
231-
if(anchorUtils.isBottomAnchor(opts)) {
230+
if(Lib.isBottomAnchor(opts)) {
232231
ly -= height;
233232
yanchor = 'bottom';
234233
}
235-
if(anchorUtils.isMiddleAnchor(opts)) {
234+
if(Lib.isMiddleAnchor(opts)) {
236235
ly -= height / 2;
237236
yanchor = 'middle';
238237
}

‎src/components/sliders/draw.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ var Color = require('../color');
1515
var Drawing = require('../drawing');
1616
var Lib = require('../../lib');
1717
var svgTextUtils = require('../../lib/svg_text_utils');
18-
var anchorUtils = require('../legend/anchor_utils');
1918
var arrayEditor = require('../../plot_api/plot_template').arrayEditor;
2019

2120
var constants = require('./constants');
@@ -207,21 +206,21 @@ function findDimensions(gd, sliderOpts) {
207206
dims.height = dims.currentValueTotalHeight + constants.tickOffset + sliderOpts.ticklen + constants.labelOffset + dims.labelHeight + sliderOpts.pad.t + sliderOpts.pad.b;
208207

209208
var xanchor = 'left';
210-
if(anchorUtils.isRightAnchor(sliderOpts)) {
209+
if(Lib.isRightAnchor(sliderOpts)) {
211210
dims.lx -= dims.outerLength;
212211
xanchor = 'right';
213212
}
214-
if(anchorUtils.isCenterAnchor(sliderOpts)) {
213+
if(Lib.isCenterAnchor(sliderOpts)) {
215214
dims.lx -= dims.outerLength / 2;
216215
xanchor = 'center';
217216
}
218217

219218
var yanchor = 'top';
220-
if(anchorUtils.isBottomAnchor(sliderOpts)) {
219+
if(Lib.isBottomAnchor(sliderOpts)) {
221220
dims.ly -= dims.height;
222221
yanchor = 'bottom';
223222
}
224-
if(anchorUtils.isMiddleAnchor(sliderOpts)) {
223+
if(Lib.isMiddleAnchor(sliderOpts)) {
225224
dims.ly -= dims.height / 2;
226225
yanchor = 'middle';
227226
}

‎src/components/updatemenus/draw.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ var Color = require('../color');
1616
var Drawing = require('../drawing');
1717
var Lib = require('../../lib');
1818
var svgTextUtils = require('../../lib/svg_text_utils');
19-
var anchorUtils = require('../legend/anchor_utils');
2019
var arrayEditor = require('../../plot_api/plot_template').arrayEditor;
2120

2221
var LINE_SPACING = require('../../constants/alignment').LINE_SPACING;
@@ -566,21 +565,21 @@ function findDimensions(gd, menuOpts) {
566565
dims.ly = graphSize.t + graphSize.h * (1 - menuOpts.y);
567566

568567
var xanchor = 'left';
569-
if(anchorUtils.isRightAnchor(menuOpts)) {
568+
if(Lib.isRightAnchor(menuOpts)) {
570569
dims.lx -= paddedWidth;
571570
xanchor = 'right';
572571
}
573-
if(anchorUtils.isCenterAnchor(menuOpts)) {
572+
if(Lib.isCenterAnchor(menuOpts)) {
574573
dims.lx -= paddedWidth / 2;
575574
xanchor = 'center';
576575
}
577576

578577
var yanchor = 'top';
579-
if(anchorUtils.isBottomAnchor(menuOpts)) {
578+
if(Lib.isBottomAnchor(menuOpts)) {
580579
dims.ly -= paddedHeight;
581580
yanchor = 'bottom';
582581
}
583-
if(anchorUtils.isMiddleAnchor(menuOpts)) {
582+
if(Lib.isMiddleAnchor(menuOpts)) {
584583
dims.ly -= paddedHeight / 2;
585584
yanchor = 'middle';
586585
}

‎src/lib/anchor_utils.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* Copyright 2012-2018, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
10+
'use strict';
11+
12+
13+
/**
14+
* Determine the position anchor property of x/y xanchor/yanchor components.
15+
*
16+
* - values < 1/3 align the low side at that fraction,
17+
* - values [1/3, 2/3] align the center at that fraction,
18+
* - values > 2/3 align the right at that fraction.
19+
*/
20+
21+
22+
exports.isLeftAnchor = function isLeftAnchor(opts) {
23+
return (
24+
opts.xanchor === 'left' ||
25+
(opts.xanchor === 'auto' && opts.x <= 1 / 3)
26+
);
27+
};
28+
29+
exports.isCenterAnchor = function isCenterAnchor(opts) {
30+
return (
31+
opts.xanchor === 'center' ||
32+
(opts.xanchor === 'auto' && opts.x > 1 / 3 && opts.x < 2 / 3)
33+
);
34+
};
35+
36+
exports.isRightAnchor = function isRightAnchor(opts) {
37+
return (
38+
opts.xanchor === 'right' ||
39+
(opts.xanchor === 'auto' && opts.x >= 2 / 3)
40+
);
41+
};
42+
43+
exports.isTopAnchor = function isTopAnchor(opts) {
44+
return (
45+
opts.yanchor === 'top' ||
46+
(opts.yanchor === 'auto' && opts.y >= 2 / 3)
47+
);
48+
};
49+
50+
exports.isMiddleAnchor = function isMiddleAnchor(opts) {
51+
return (
52+
opts.yanchor === 'middle' ||
53+
(opts.yanchor === 'auto' && opts.y > 1 / 3 && opts.y < 2 / 3)
54+
);
55+
};
56+
57+
exports.isBottomAnchor = function isBottomAnchor(opts) {
58+
return (
59+
opts.yanchor === 'bottom' ||
60+
(opts.yanchor === 'auto' && opts.y <= 1 / 3)
61+
);
62+
};

‎src/lib/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,14 @@ lib.pathArc = anglesModule.pathArc;
100100
lib.pathSector = anglesModule.pathSector;
101101
lib.pathAnnulus = anglesModule.pathAnnulus;
102102

103+
var anchorUtils = require('./anchor_utils');
104+
lib.isLeftAnchor = anchorUtils.isLeftAnchor;
105+
lib.isCenterAnchor = anchorUtils.isCenterAnchor;
106+
lib.isRightAnchor = anchorUtils.isRightAnchor;
107+
lib.isTopAnchor = anchorUtils.isTopAnchor;
108+
lib.isMiddleAnchor = anchorUtils.isMiddleAnchor;
109+
lib.isBottomAnchor = anchorUtils.isBottomAnchor;
110+
103111
var geom2dModule = require('./geometry2d');
104112
lib.segmentsIntersect = geom2dModule.segmentsIntersect;
105113
lib.segmentDistance = geom2dModule.segmentDistance;

‎src/plot_api/subroutines.js

Lines changed: 16 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -515,62 +515,29 @@ function getMainTitleY(fullLayout, dy) {
515515
}
516516

517517
function getMainTitleTextAnchor(fullLayout) {
518-
var xanchor = fullLayout.title.xanchor;
519-
520-
switch(xanchor) {
521-
case 'auto':
522-
return calcTextAnchor(fullLayout.title.x);
523-
case 'left':
524-
return SVG_TEXT_ANCHOR_START;
525-
case 'right':
526-
return SVG_TEXT_ANCHOR_END;
527-
case 'center':
528-
default:
529-
return SVG_TEXT_ANCHOR_MIDDLE;
530-
}
531-
532-
function calcTextAnchor(x) {
533-
if(x < 1 / 3) {
534-
return SVG_TEXT_ANCHOR_START;
535-
} else if(x > 2 / 3) {
536-
return SVG_TEXT_ANCHOR_END;
537-
}
518+
var title = fullLayout.title;
538519

539-
return SVG_TEXT_ANCHOR_MIDDLE;
520+
var textAnchor = SVG_TEXT_ANCHOR_MIDDLE;
521+
if(Lib.isRightAnchor(title)) {
522+
textAnchor = SVG_TEXT_ANCHOR_END;
523+
} else if(Lib.isLeftAnchor(title)) {
524+
textAnchor = SVG_TEXT_ANCHOR_START;
540525
}
526+
527+
return textAnchor;
541528
}
542529

543530
function getMainTitleDy(fullLayout) {
544-
var yanchor = fullLayout.title.yanchor;
545-
switch(yanchor) {
546-
case 'auto':
547-
return calcDy(fullLayout.title.y);
548-
case 'middle':
549-
return alignmentConstants.MID_SHIFT + 'em';
550-
case 'top':
551-
return alignmentConstants.CAP_SHIFT + 'em';
552-
case 'bottom':
553-
default:
554-
return '0em';
555-
}
556-
557-
function calcDy(y) {
558-
559-
// Imitate behavior before "chart title alignment" was introduced
560-
if(y === 'auto') {
561-
return '0em';
562-
} else if(typeof y === 'number') {
563-
if(y < 1 / 3) {
564-
return '0em';
565-
} else if(y > 2 / 3) {
566-
return alignmentConstants.CAP_SHIFT + 'em';
567-
}
568-
569-
return alignmentConstants.MID_SHIFT + 'em';
570-
}
531+
var title = fullLayout.title;
571532

572-
return 0;
533+
var dy = '0em';
534+
if(Lib.isTopAnchor(title)) {
535+
dy = alignmentConstants.CAP_SHIFT + 'em';
536+
} else if(Lib.isMiddleAnchor(title)) {
537+
dy = alignmentConstants.MID_SHIFT + 'em';
573538
}
539+
540+
return dy;
574541
}
575542

576543
exports.doTraceStyle = function(gd) {

‎test/jasmine/tests/legend_test.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ var DBLCLICKDELAY = require('@src/constants/interactions').DBLCLICKDELAY;
66
var Legend = require('@src/components/legend');
77
var getLegendData = require('@src/components/legend/get_legend_data');
88
var helpers = require('@src/components/legend/helpers');
9-
var anchorUtils = require('@src/components/legend/anchor_utils');
109

1110
var d3 = require('d3');
1211
var failTest = require('../assets/fail_test');
@@ -501,7 +500,7 @@ describe('legend anchor utils:', function() {
501500
'use strict';
502501

503502
describe('isRightAnchor', function() {
504-
var isRightAnchor = anchorUtils.isRightAnchor;
503+
var isRightAnchor = Lib.isRightAnchor;
505504
var threshold = 2 / 3;
506505

507506
it('should return true when \'xanchor\' is set to \'right\'', function() {
@@ -522,7 +521,7 @@ describe('legend anchor utils:', function() {
522521
});
523522

524523
describe('isCenterAnchor', function() {
525-
var isCenterAnchor = anchorUtils.isCenterAnchor;
524+
var isCenterAnchor = Lib.isCenterAnchor;
526525
var threshold0 = 1 / 3;
527526
var threshold1 = 2 / 3;
528527

@@ -544,7 +543,7 @@ describe('legend anchor utils:', function() {
544543
});
545544

546545
describe('isBottomAnchor', function() {
547-
var isBottomAnchor = anchorUtils.isBottomAnchor;
546+
var isBottomAnchor = Lib.isBottomAnchor;
548547
var threshold = 1 / 3;
549548

550549
it('should return true when \'yanchor\' is set to \'right\'', function() {
@@ -565,7 +564,7 @@ describe('legend anchor utils:', function() {
565564
});
566565

567566
describe('isMiddleAnchor', function() {
568-
var isMiddleAnchor = anchorUtils.isMiddleAnchor;
567+
var isMiddleAnchor = Lib.isMiddleAnchor;
569568
var threshold0 = 1 / 3;
570569
var threshold1 = 2 / 3;
571570

0 commit comments

Comments
 (0)