Skip to content

Commit 3c56243

Browse files
alexcjohnsonalexcjohnson
committed
only add _private attrs to legend after supplyDefaults
width and height looked to Plotly.react like attributes -> _width, _height
1 parent 698fa4f commit 3c56243

File tree

3 files changed

+53
-41
lines changed

3 files changed

+53
-41
lines changed

‎src/components/legend/draw.js

+43-40
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ var handleClick = require('./handle_click');
2222

2323
var constants = require('./constants');
2424
var interactConstants = require('../../constants/interactions');
25-
var LINE_SPACING = require('../../constants/alignment').LINE_SPACING;
25+
var alignmentConstants = require('../../constants/alignment');
26+
var LINE_SPACING = alignmentConstants.LINE_SPACING;
27+
var FROM_TL = alignmentConstants.FROM_TL;
28+
var FROM_BR = alignmentConstants.FROM_BR;
2629

2730
var getLegendData = require('./get_legend_data');
2831
var style = require('./style');
@@ -141,7 +144,7 @@ module.exports = function draw(gd) {
141144

142145
computeLegendDimensions(gd, groups, traces);
143146

144-
if(opts.height > lyMax) {
147+
if(opts._height > lyMax) {
145148
// If the legend doesn't fit in the plot area,
146149
// do not expand the vertical margins.
147150
expandHorizontalMargin(gd);
@@ -157,21 +160,21 @@ module.exports = function draw(gd) {
157160
ly = gs.t + gs.h * (1 - opts.y);
158161

159162
if(anchorUtils.isRightAnchor(opts)) {
160-
lx -= opts.width;
163+
lx -= opts._width;
161164
}
162165
else if(anchorUtils.isCenterAnchor(opts)) {
163-
lx -= opts.width / 2;
166+
lx -= opts._width / 2;
164167
}
165168

166169
if(anchorUtils.isBottomAnchor(opts)) {
167-
ly -= opts.height;
170+
ly -= opts._height;
168171
}
169172
else if(anchorUtils.isMiddleAnchor(opts)) {
170-
ly -= opts.height / 2;
173+
ly -= opts._height / 2;
171174
}
172175

173176
// Make sure the legend left and right sides are visible
174-
var legendWidth = opts.width,
177+
var legendWidth = opts._width,
175178
legendWidthMax = gs.w;
176179

177180
if(legendWidth > legendWidthMax) {
@@ -181,13 +184,13 @@ module.exports = function draw(gd) {
181184
else {
182185
if(lx + legendWidth > lxMax) lx = lxMax - legendWidth;
183186
if(lx < lxMin) lx = lxMin;
184-
legendWidth = Math.min(lxMax - lx, opts.width);
187+
legendWidth = Math.min(lxMax - lx, opts._width);
185188
}
186189

187190
// Make sure the legend top and bottom are visible
188191
// (legends with a scroll bar are not allowed to stretch beyond the extended
189192
// margins)
190-
var legendHeight = opts.height,
193+
var legendHeight = opts._height,
191194
legendHeightMax = gs.h;
192195

193196
if(legendHeight > legendHeightMax) {
@@ -197,7 +200,7 @@ module.exports = function draw(gd) {
197200
else {
198201
if(ly + legendHeight > lyMax) ly = lyMax - legendHeight;
199202
if(ly < lyMin) ly = lyMin;
200-
legendHeight = Math.min(lyMax - ly, opts.height);
203+
legendHeight = Math.min(lyMax - ly, opts._height);
201204
}
202205

203206
// Set size and position of all the elements that make up a legend:
@@ -207,11 +210,11 @@ module.exports = function draw(gd) {
207210
var scrollBarYMax = legendHeight -
208211
constants.scrollBarHeight -
209212
2 * constants.scrollBarMargin,
210-
scrollBoxYMax = opts.height - legendHeight,
213+
scrollBoxYMax = opts._height - legendHeight,
211214
scrollBarY,
212215
scrollBoxY;
213216

214-
if(opts.height <= legendHeight || gd._context.staticPlot) {
217+
if(opts._height <= legendHeight || gd._context.staticPlot) {
215218
// if scrollbar should not be shown.
216219
bg.attr({
217220
width: legendWidth - opts.borderwidth,
@@ -533,8 +536,8 @@ function computeLegendDimensions(gd, groups, traces) {
533536

534537
var extraWidth = 0;
535538

536-
opts.width = 0;
537-
opts.height = 0;
539+
opts._width = 0;
540+
opts._height = 0;
538541

539542
if(helpers.isVertical(opts)) {
540543
if(isGrouped) {
@@ -550,23 +553,23 @@ function computeLegendDimensions(gd, groups, traces) {
550553

551554
Drawing.setTranslate(this,
552555
borderwidth,
553-
(5 + borderwidth + opts.height + textHeight / 2));
556+
(5 + borderwidth + opts._height + textHeight / 2));
554557

555-
opts.height += textHeight;
556-
opts.width = Math.max(opts.width, textWidth);
558+
opts._height += textHeight;
559+
opts._width = Math.max(opts._width, textWidth);
557560
});
558561

559-
opts.width += 45 + borderwidth * 2;
560-
opts.height += 10 + borderwidth * 2;
562+
opts._width += 45 + borderwidth * 2;
563+
opts._height += 10 + borderwidth * 2;
561564

562565
if(isGrouped) {
563-
opts.height += (opts._lgroupsLength - 1) * opts.tracegroupgap;
566+
opts._height += (opts._lgroupsLength - 1) * opts.tracegroupgap;
564567
}
565568

566569
extraWidth = 40;
567570
}
568571
else if(isGrouped) {
569-
var groupXOffsets = [opts.width],
572+
var groupXOffsets = [opts._width],
570573
groupData = groups.data();
571574

572575
for(var i = 0, n = groupData.length; i < n; i++) {
@@ -576,9 +579,9 @@ function computeLegendDimensions(gd, groups, traces) {
576579

577580
var groupWidth = 40 + Math.max.apply(null, textWidths);
578581

579-
opts.width += opts.tracegroupgap + groupWidth;
582+
opts._width += opts.tracegroupgap + groupWidth;
580583

581-
groupXOffsets.push(opts.width);
584+
groupXOffsets.push(opts._width);
582585
}
583586

584587
groups.each(function(d, i) {
@@ -601,11 +604,11 @@ function computeLegendDimensions(gd, groups, traces) {
601604
groupHeight += textHeight;
602605
});
603606

604-
opts.height = Math.max(opts.height, groupHeight);
607+
opts._height = Math.max(opts._height, groupHeight);
605608
});
606609

607-
opts.height += 10 + borderwidth * 2;
608-
opts.width += borderwidth * 2;
610+
opts._height += 10 + borderwidth * 2;
611+
opts._width += borderwidth * 2;
609612
}
610613
else {
611614
var rowHeight = 0,
@@ -631,7 +634,7 @@ function computeLegendDimensions(gd, groups, traces) {
631634
if((borderwidth + offsetX + traceGap + traceWidth) > (fullLayout.width - (fullLayout.margin.r + fullLayout.margin.l))) {
632635
offsetX = 0;
633636
rowHeight = rowHeight + maxTraceHeight;
634-
opts.height = opts.height + maxTraceHeight;
637+
opts._height = opts._height + maxTraceHeight;
635638
// reset for next row
636639
maxTraceHeight = 0;
637640
}
@@ -640,22 +643,22 @@ function computeLegendDimensions(gd, groups, traces) {
640643
(borderwidth + offsetX),
641644
(5 + borderwidth + legendItem.height / 2) + rowHeight);
642645

643-
opts.width += traceGap + traceWidth;
644-
opts.height = Math.max(opts.height, legendItem.height);
646+
opts._width += traceGap + traceWidth;
647+
opts._height = Math.max(opts._height, legendItem.height);
645648

646649
// keep track of tallest trace in group
647650
offsetX += traceGap + traceWidth;
648651
maxTraceHeight = Math.max(legendItem.height, maxTraceHeight);
649652
});
650653

651-
opts.width += borderwidth * 2;
652-
opts.height += 10 + borderwidth * 2;
654+
opts._width += borderwidth * 2;
655+
opts._height += 10 + borderwidth * 2;
653656

654657
}
655658

656659
// make sure we're only getting full pixels
657-
opts.width = Math.ceil(opts.width);
658-
opts.height = Math.ceil(opts.height);
660+
opts._width = Math.ceil(opts._width);
661+
opts._height = Math.ceil(opts._height);
659662

660663
traces.each(function(d) {
661664
var legendItem = d[0],
@@ -664,7 +667,7 @@ function computeLegendDimensions(gd, groups, traces) {
664667
bg.call(Drawing.setRect,
665668
0,
666669
-legendItem.height / 2,
667-
(gd._context.edits.legendText ? 0 : opts.width) + extraWidth,
670+
(gd._context.edits.legendText ? 0 : opts._width) + extraWidth,
668671
legendItem.height
669672
);
670673
});
@@ -694,10 +697,10 @@ function expandMargin(gd) {
694697
Plots.autoMargin(gd, 'legend', {
695698
x: opts.x,
696699
y: opts.y,
697-
l: opts.width * ({right: 1, center: 0.5}[xanchor] || 0),
698-
r: opts.width * ({left: 1, center: 0.5}[xanchor] || 0),
699-
b: opts.height * ({top: 1, middle: 0.5}[yanchor] || 0),
700-
t: opts.height * ({bottom: 1, middle: 0.5}[yanchor] || 0)
700+
l: opts._width * (FROM_TL[xanchor]),
701+
r: opts._width * (FROM_BR[xanchor]),
702+
b: opts._height * (FROM_BR[yanchor]),
703+
t: opts._height * (FROM_TL[yanchor])
701704
});
702705
}
703706

@@ -717,8 +720,8 @@ function expandHorizontalMargin(gd) {
717720
Plots.autoMargin(gd, 'legend', {
718721
x: opts.x,
719722
y: 0.5,
720-
l: opts.width * ({right: 1, center: 0.5}[xanchor] || 0),
721-
r: opts.width * ({left: 1, center: 0.5}[xanchor] || 0),
723+
l: opts._width * (FROM_TL[xanchor]),
724+
r: opts._width * (FROM_BR[xanchor]),
722725
b: 0,
723726
t: 0
724727
});

‎src/constants/alignment.js

+9
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,15 @@ module.exports = {
2929
middle: 0.5,
3030
top: 0
3131
},
32+
// from bottom right: sometimes you just need the opposite of ^^
33+
FROM_BR: {
34+
left: 1,
35+
center: 0.5,
36+
right: 0,
37+
bottom: 0,
38+
middle: 0.5,
39+
top: 1
40+
},
3241
// multiple of fontSize to get the vertical offset between lines
3342
LINE_SPACING: 1.3,
3443

‎test/jasmine/tests/legend_scroll_test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ describe('The legend', function() {
7979
var legend = getLegend(),
8080
scrollBox = getScrollBox(),
8181
legendHeight = getLegendHeight(gd),
82-
scrollBoxYMax = gd._fullLayout.legend.height - legendHeight,
82+
scrollBoxYMax = gd._fullLayout.legend._height - legendHeight,
8383
scrollBarYMax = legendHeight -
8484
constants.scrollBarHeight -
8585
2 * constants.scrollBarMargin,

0 commit comments

Comments
 (0)