Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit e606a82

Browse files
n-riescon-riesco
committed
Fix overlap of legend border and scroll box
* Moved clip-path from legend to scrollbox. * Shifted bg half a border-width to ensure it doesn't overlap with the scroll box. * Updated the method to compute the legend height used in `legend_scroll_test.js` to account for the legend clip-path being one border-witdh smaller. * Updated the baseline images for `17.json, `20.json`, `legend_scroll.json`, `legend_style` and `text_export`. The differences were due to the overlap and the border shift.
1 parent d117e92 commit e606a82

File tree

7 files changed

+35
-25
lines changed

7 files changed

+35
-25
lines changed

‎src/components/legend/draw.js

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -223,28 +223,29 @@ module.exports = function draw(gd) {
223223
legendHeight = Math.min(lyMax - ly, opts.height);
224224
}
225225

226-
// Deal with scrolling
226+
// Set size and position of all the elements that make up a legend:
227+
// legend, background and border, scroll box and scroll bar
228+
legend.attr('transform', 'translate(' + lx + ',' + ly + ')');
229+
230+
bg.attr({
231+
width: opts.width - opts.borderwidth,
232+
height: legendHeight - opts.borderwidth,
233+
x: opts.borderwidth / 2,
234+
y: opts.borderwidth / 2
235+
});
236+
227237
var scrollPosition = scrollBox.attr('data-scroll') || 0;
228238

229239
scrollBox.attr('transform', 'translate(0, ' + scrollPosition + ')');
230240

231-
bg.attr({
241+
clipPath.select('rect').attr({
232242
width: opts.width - 2 * opts.borderwidth,
233243
height: legendHeight - 2 * opts.borderwidth,
234-
x: opts.borderwidth,
244+
x: opts.borderwidth - scrollPosition,
235245
y: opts.borderwidth
236246
});
237247

238-
legend.attr('transform', 'translate(' + lx + ',' + ly + ')');
239-
240-
clipPath.select('rect').attr({
241-
width: opts.width,
242-
height: legendHeight,
243-
x: 0,
244-
y: 0
245-
});
246-
247-
legend.call(Drawing.setClipUrl, clipId);
248+
scrollBox.call(Drawing.setClipUrl, clipId);
248249

249250
// If scrollbar should be shown.
250251
if(opts.height - legendHeight > 0 && !gd._context.staticPlot) {
@@ -259,7 +260,8 @@ module.exports = function draw(gd) {
259260
});
260261

261262
clipPath.select('rect').attr({
262-
width: opts.width +
263+
width: opts.width -
264+
2 * opts.borderwidth +
263265
constants.scrollBarWidth +
264266
constants.scrollBarMargin
265267
});
@@ -318,6 +320,9 @@ module.exports = function draw(gd) {
318320
constants.scrollBarWidth,
319321
constants.scrollBarHeight
320322
);
323+
clipPath.select('rect').attr({
324+
y: opts.borderwidth - scrollBoxY
325+
});
321326
}
322327

323328
if(gd._context.editable) {

‎test/image/baselines/17.png

-49 Bytes
Loading

‎test/image/baselines/20.png

-3 Bytes
Loading

‎test/image/baselines/legend_scroll.png

-93 Bytes
Loading

‎test/image/baselines/legend_style.png

16 Bytes
Loading

‎test/image/baselines/text_export.png

14 Bytes
Loading

‎test/jasmine/tests/legend_scroll_test.js

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ var mock = require('../../image/mocks/legend_scroll.json');
1111
describe('The legend', function() {
1212
'use strict';
1313

14-
var gd, legend;
14+
var gd, legend, bg;
1515

1616
function countLegendGroups(gd) {
1717
return gd._fullLayout._toppaper.selectAll('g.legend').size();
@@ -27,6 +27,9 @@ describe('The legend', function() {
2727
return gd._fullLayout.height - gd._fullLayout.margin.t - gd._fullLayout.margin.b;
2828
}
2929

30+
function getLegendHeight() {
31+
return gd._fullLayout.legend.borderwidth + getBBox(bg).height;
32+
}
3033

3134
describe('when plotted with many traces', function() {
3235
beforeEach(function(done) {
@@ -36,14 +39,15 @@ describe('The legend', function() {
3639

3740
Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(function() {
3841
legend = document.getElementsByClassName('legend')[0];
42+
bg = document.getElementsByClassName('bg')[0];
3943
done();
4044
});
4145
});
4246

4347
afterEach(destroyGraph);
4448

4549
it('should not exceed plot height', function() {
46-
var legendHeight = getBBox(legend).height;
50+
var legendHeight = getLegendHeight();
4751

4852
expect(+legendHeight).toBe(getPlotHeight(gd));
4953
});
@@ -57,7 +61,7 @@ describe('The legend', function() {
5761

5862
it('should scroll when there\'s a wheel event', function() {
5963
var scrollBox = legend.getElementsByClassName('scrollbox')[0],
60-
legendHeight = getBBox(legend).height,
64+
legendHeight = getLegendHeight(),
6165
scrollBoxYMax = gd._fullLayout.legend.height - legendHeight,
6266
scrollBarYMax = legendHeight -
6367
constants.scrollBarHeight -
@@ -87,7 +91,7 @@ describe('The legend', function() {
8791

8892
it('should scale the scrollbar movement from top to bottom', function() {
8993
var scrollBar = legend.getElementsByClassName('scrollbar')[0],
90-
legendHeight = getBBox(legend).height;
94+
legendHeight = getLegendHeight();
9195

9296
// The scrollbar is 20px tall and has 4px margins
9397

@@ -111,10 +115,10 @@ describe('The legend', function() {
111115
});
112116

113117
it('should resize when relayout\'ed with new height', function(done) {
114-
var origLegendHeight = getBBox(legend).height;
118+
var origLegendHeight = getLegendHeight();
115119

116120
Plotly.relayout(gd, 'height', gd._fullLayout.height / 2).then(function() {
117-
var legendHeight = getBBox(legend).height;
121+
var legendHeight = getLegendHeight();
118122

119123
//legend still exists and not duplicated
120124
expect(countLegendGroups(gd)).toBe(1);
@@ -164,14 +168,15 @@ describe('The legend', function() {
164168
});
165169

166170
it('should resize when traces added', function(done) {
167-
var origLegend = document.getElementsByClassName('legend')[0];
168-
var origLegendHeight = getBBox(origLegend).height;
171+
legend = document.getElementsByClassName('legend')[0];
172+
bg = document.getElementsByClassName('bg')[0];
173+
var origLegendHeight = getLegendHeight();
169174

170175
Plotly.addTraces(gd, { x: [1,2,3], y: [4,3,2], name: 'Test2' }).then(function() {
171-
var legend = document.getElementsByClassName('legend')[0];
172-
var legendHeight = getBBox(legend).height;
176+
legend = document.getElementsByClassName('legend')[0];
177+
bg = document.getElementsByClassName('bg')[0];
178+
var legendHeight = getLegendHeight();
173179

174-
// clippath resized to show new trace
175180
expect(+legendHeight).toBeCloseTo(+origLegendHeight + 19, 0);
176181

177182
done();

0 commit comments

Comments
 (0)