Skip to content

Issue 578 (keep legend scrollbar position after toggle) #584

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jun 6, 2016
Merged

Issue 578 (keep legend scrollbar position after toggle) #584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8f05316
legend: keep scrollbar position after toggle
n-riesco May 30, 2016
9b6baa8
test: legend scrollbar keeps position after toggle
n-riesco May 30, 2016
1021272
test: hiding and showing back a legend
n-riesco Jun 1, 2016
17d07c0
legend: ensure event listeners are registered
n-riesco Jun 1, 2016
12c7604
test: legend scrollbar is restored after relayout
n-riesco Jun 2, 2016
ce7f8d8
legend: restore scrollbar after relayout
n-riesco Jun 2, 2016
3ebb324
test: legend scrollbox after relayout
n-riesco Jun 3, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 41 additions & 38 deletions src/components/legend/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,6 @@ module.exports = function draw(gd) {
return;
}

if(typeof gd.firstRender === 'undefined') gd.firstRender = true;
else if(gd.firstRender) gd.firstRender = false;

var legend = fullLayout._infolayer.selectAll('g.legend')
.data([0]);

Expand Down Expand Up @@ -122,7 +119,8 @@ module.exports = function draw(gd) {
.call(setupTraceToggle, gd);
});

if(gd.firstRender) {
var firstRender = legend.enter().size() !== 0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nicely done.

if(firstRender) {
computeLegendDimensions(gd, groups, traces);
expandMargin(gd);
}
Expand Down Expand Up @@ -198,60 +196,64 @@ module.exports = function draw(gd) {
// legend, background and border, scroll box and scroll bar
Lib.setTranslate(legend, lx, ly);

bg.attr({
width: legendWidth - opts.borderwidth,
height: legendHeight - opts.borderwidth,
x: opts.borderwidth / 2,
y: opts.borderwidth / 2
});
var scrollBarYMax = legendHeight -
constants.scrollBarHeight -
2 * constants.scrollBarMargin,
scrollBoxYMax = opts.height - legendHeight,
scrollBarY,
scrollBoxY;

var scrollPosition = scrollBox.attr('data-scroll') || 0;
if(opts.height <= legendHeight || gd._context.staticPlot) {
// if scrollbar should not be shown.
bg.attr({
width: legendWidth - opts.borderwidth,
height: legendHeight - opts.borderwidth,
x: opts.borderwidth / 2,
y: opts.borderwidth / 2
});

Lib.setTranslate(scrollBox, 0, scrollPosition);
Lib.setTranslate(scrollBox, 0, 0);

clipPath.select('rect').attr({
width: legendWidth - 2 * opts.borderwidth,
height: legendHeight - 2 * opts.borderwidth,
x: opts.borderwidth - scrollPosition,
y: opts.borderwidth
});

scrollBox.call(Drawing.setClipUrl, clipId);
clipPath.select('rect').attr({
width: legendWidth - 2 * opts.borderwidth,
height: legendHeight - 2 * opts.borderwidth,
x: opts.borderwidth,
y: opts.borderwidth
});

// If scrollbar should be shown.
if(opts.height - legendHeight > 0 && !gd._context.staticPlot) {
scrollBox.call(Drawing.setClipUrl, clipId);
}
else {
scrollBarY = constants.scrollBarMargin,
scrollBoxY = scrollBox.attr('data-scroll') || 0;

// increase the background and clip-path width
// by the scrollbar width and margin
bg.attr({
width: legendWidth -
2 * opts.borderwidth +
constants.scrollBarWidth +
constants.scrollBarMargin
constants.scrollBarMargin,
height: legendHeight - opts.borderwidth,
x: opts.borderwidth / 2,
y: opts.borderwidth / 2
});

clipPath.select('rect').attr({
width: legendWidth -
2 * opts.borderwidth +
constants.scrollBarWidth +
constants.scrollBarMargin
constants.scrollBarMargin,
height: legendHeight - 2 * opts.borderwidth,
x: opts.borderwidth,
y: opts.borderwidth - scrollBoxY
});

if(gd.firstRender) {
// Move scrollbar to starting position
scrollHandler(constants.scrollBarMargin, 0);
}

var scrollBarYMax = legendHeight -
constants.scrollBarHeight -
2 * constants.scrollBarMargin,
scrollBoxYMax = opts.height - legendHeight,
scrollBarY = constants.scrollBarMargin,
scrollBoxY = 0;
scrollBox.call(Drawing.setClipUrl, clipId);

scrollHandler(scrollBarY, scrollBoxY);
if(firstRender) scrollHandler(scrollBarY, scrollBoxY);

legend.on('wheel', null);
legend.on('wheel', null); // to be safe, remove previous listeners
legend.on('wheel', function() {
scrollBoxY = Lib.constrain(
scrollBox.attr('data-scroll') -
Expand All @@ -263,8 +265,10 @@ module.exports = function draw(gd) {
d3.event.preventDefault();
});

// to be safe, remove previous listeners
scrollBar.on('.drag', null);
scrollBox.on('.drag', null);

var drag = d3.behavior.drag().on('drag', function() {
scrollBarY = Lib.constrain(
d3.event.y - constants.scrollBarHeight / 2,
Expand All @@ -277,7 +281,6 @@ module.exports = function draw(gd) {

scrollBar.call(drag);
scrollBox.call(drag);

}


Expand Down
51 changes: 51 additions & 0 deletions test/jasmine/tests/legend_scroll_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,57 @@ describe('The legend', function() {
'translate(0, ' + finalDataScroll + ')');
});

it('should keep the scrollbar position after a toggle event', function() {
var scrollBox = legend.getElementsByClassName('scrollbox')[0],
toggle = legend.getElementsByClassName('legendtoggle')[0],
wheelDeltaY = 100;

legend.dispatchEvent(scrollTo(wheelDeltaY));

var dataScroll = scrollBox.getAttribute('data-scroll');
toggle.dispatchEvent(new MouseEvent('click'));
expect(+toggle.parentNode.style.opacity).toBeLessThan(1);
expect(scrollBox.getAttribute('data-scroll')).toBe(dataScroll);
expect(scrollBox.getAttribute('transform')).toBe(
'translate(0, ' + dataScroll + ')');
});

it('should be restored and functional after relayout', function() {
var wheelDeltaY = 100,
legend = document.getElementsByClassName('legend')[0],
scrollBox,
scrollBar,
scrollBarX,
scrollBarY,
toggle;

legend.dispatchEvent(scrollTo(wheelDeltaY));
scrollBar = legend.getElementsByClassName('scrollbar')[0];
scrollBarX = scrollBar.getAttribute('x'),
scrollBarY = scrollBar.getAttribute('y');

Plotly.relayout(gd, 'showlegend', false);
Plotly.relayout(gd, 'showlegend', true);

legend = document.getElementsByClassName('legend')[0];
scrollBox = legend.getElementsByClassName('scrollbox')[0];
scrollBar = legend.getElementsByClassName('scrollbar')[0];
toggle = legend.getElementsByClassName('legendtoggle')[0];

legend.dispatchEvent(scrollTo(wheelDeltaY));
expect(scrollBar.getAttribute('x')).toBe(scrollBarX);
expect(scrollBar.getAttribute('y')).toBe(scrollBarY);

var dataScroll = scrollBox.getAttribute('data-scroll');
toggle.dispatchEvent(new MouseEvent('click'));
expect(+toggle.parentNode.style.opacity).toBeLessThan(1);
expect(scrollBox.getAttribute('data-scroll')).toBe(dataScroll);
expect(scrollBox.getAttribute('transform')).toBe(
'translate(0, ' + dataScroll + ')');
expect(scrollBar.getAttribute('width')).toBeGreaterThan(0);
expect(scrollBar.getAttribute('height')).toBeGreaterThan(0);
});

it('should constrain scrolling to the contents', function() {
var scrollBox = legend.getElementsByClassName('scrollbox')[0];

Expand Down