8000 Legend scroll fix by alexcjohnson · Pull Request #2426 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

Legend scroll fix #2426

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 6 commits into from
Mar 1, 2018
Merged

Legend scroll fix #2426

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f75f5ba
fix #2387 - prevent legend scrolling from scrollBox drag or right click
alexcjohnson Feb 28, 2018
ec42784
grab the legend scrollbar at the cursor, not at its middle
alexcjohnson Feb 28, 2018
246b77f
make legend scrollbar scale to the visible fraction
alexcjohnson Feb 28, 2018
569b378
fix #808 - update scrollBar when changing other legend attributes
alexcjohnson Mar 1, 2018
5660bf5
:hocho: `call` when not in a chain
alexcjohnson Mar 1, 2018
f2d8cfd
turn `scrollBoxY` into a positive number
alexcjohnson Mar 1, 2018
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
Prev Previous commit
Next Next commit
make legend scrollbar scale to the visible fraction 
fixes the legend part of #1859
  • Loading branch information
@alexcjohnson
alexcjohnson committed Feb 28, 2018
commit 246b77fb563c21176df56aad31bf366c734530a3
2 changes: 1 addition & 1 deletion src/components/legend/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

module.exports = {
scrollBarWidth: 6,
scrollBarHeight: 20,
scrollBarMinHeight: 20,
scrollBarColor: '#808BA4',
scrollBarMargin: 4
};
28 changes: 14 additions & 14 deletions src/components/legend/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,13 +207,6 @@ module.exports = function draw(gd) {
// legend, background and border, scroll box and scroll bar
Drawing.setTranslate(legend, lx, ly);

var scrollBarYMax = legendHeight -
constants.scrollBarHeight -
2 * constants.scrollBarMargin,
scrollBoxYMax = opts._height - legendHeight,
scrollBarY,
scrollBoxY;

if(opts._height <= legendHeight || gd._context.staticPlot) {
// if scrollbar should not be shown.
bg.attr({
Expand All @@ -235,8 +228,15 @@ module.exports = function draw(gd) {
scrollBox.call(Drawing.setClipUrl, clipId);
}
else {
scrollBarY = constants.scrollBarMargin,
scrollBoxY = scrollBox.attr('data-scroll') || 0;
var scrollBarHeight = Math.max(constants.scrollBarMinHeight,
legendHeight * legendHeight / opts._height);
var scrollBarYMax = legendHeight -
scrollBarHeight -
2 * constants.scrollBarMargin;
var scrollBoxYMax = opts._height - legendHeight;

var scrollBarY = constants.scrollBarMargin;
var scrollBoxY = scrollBox.attr('data-scroll') || 0;

// increase the background and clip-path width
// by the scrollbar width and margin
Expand All @@ -262,7 +262,7 @@ module.exports = function draw(gd) {

scrollBox.c 8000 all(Drawing.setClipUrl, clipId);

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

legend.on('wheel', null); // to be safe, remove previous listeners
legend.on('wheel', function() {
Expand All @@ -272,7 +272,7 @@ module.exports = function draw(gd) {
-scrollBoxYMax, 0);
scrollBarY = constants.scrollBarMargin -
scrollBoxY / scrollBoxYMax * scrollBarYMax;
scrollHandler(scrollBarY, scrollBoxY);
scrollHandler(scrollBarY, scrollBoxY, scrollBarHeight);
if(scrollBoxY !== 0 && scrollBoxY !== -scrollBoxYMax) {
d3.event.preventDefault();
}
Expand All @@ -299,14 +299,14 @@ module.exports = function draw(gd) {
constants.scrollBarMargin + scrollBarYMax);
scrollBoxY = - (scrollBarY - constants.scrollBarMargin) /
scrollBarYMax * scrollBoxYMax;
scrollHandler(scrollBarY, scrollBoxY);
scrollHandler(scrollBarY, scrollBoxY, scrollBarHeight);
});

scrollBar.call(drag);
}


function scrollHandler(scrollBarY, scrollBoxY) {
function scrollHandler(scrollBarY, scrollBoxY, scrollBarHeight) {
scrollBox
.attr('data-scroll', scrollBoxY)
.call(Drawing.setTranslate, 0, scrollBoxY);
Expand All @@ -316,7 +316,7 @@ module.exports = function draw(gd) {
legendWidth,
scrollBarY,
constants.scrollBarWidth,
constants.scrollBarHeight
scrollBarHeight
);
clipPath.select('rect').attr({
y: opts.borderwidth - scrollBoxY
Expand Down
30 changes: 19 additions & 11 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 @@ -138,27 +138,30 @@ describe('The legend', function() {
var finalDataScroll = dragScroll(getScrollBar());
var scrollBox = getScrollBox();

expect(scrollBox.getAttribute('data-scroll')).toBe(finalDataScroll);
var dataScroll = scrollBox.getAttribute('data-scroll');
expect(dataScroll).toBeCloseTo(finalDataScroll, 3);
expect(scrollBox.getAttribute('transform')).toBe(
'translate(0, ' + finalDataScroll + ')');
'translate(0, ' + dataScroll + ')');
});

it('should not scroll on dragging the scrollbox', function() {
var scrollBox = getScrollBox();
var finalDataScroll = dragScroll(scrollBox);

expect(scrollBox.getAttribute('data-scroll')).not.toBe(finalDataScroll);
expect(scrollBox.getAttribute('transform')).not.toBe(
'translate(0, ' + finalDataScroll + ')');
var dataScroll = scrollBox.getAttribute('data-scroll');
expect(dataScroll).not.toBeCloseTo(finalDataScroll, 3);
expect(scrollBox.getAttribute('transform')).toBe(
'translate(0, ' + dataScroll + ')');
});

it('should not scroll on dragging the scrollbar with a right click', function() {
var finalDataScroll = dragScroll(getScrollBar(), true);
var scrollBox = getScrollBox();

expect(scrollBox.getAttribute('data-scroll')).not.toBe(finalDataScroll);
expect(scrollBox.getAttribute('transform')).not.toBe(
'translate(0, ' + finalDataScroll + ')');
var dataScroll = scrollBox.getAttribute('data-scroll');
expect(dataScroll).not.toBeCloseTo(finalDataScroll, 3);
expect(scrollBox.getAttribute('transform')).toBe(
'translate(0, ' + dataScroll + ')');
});

it('should keep the scrollbar position after a toggle event', function(done) {
Expand Down Expand Up @@ -237,13 +240,18 @@ describe('The legend', function() {
scrollBar = getScrollBar(),
legendHeight = getLegendHeight(gd);

// The scrollbar is 20px tall and has 4px margins
// The scrollbar is >20px tall and has 4px margins
var scrollBarHeight = scrollBar.getBoundingClientRect().height;
// in this mock there are 22 traces, and 13 are visible in the legend
// at any given time
expect(scrollBarHeight).toBeCloseTo(legendHeight * 13 / 22, -1);

legend.dispatchEvent(scrollTo(-1000));
expect(+scrollBar.getAttribute('y')).toBe(4);
expect(+scrollBar.getAttribute('y')).toBeCloseTo(4, 3);

legend.dispatchEvent(scrollTo(10000));
expect(+scrollBar.getAttribute('y')).toBe(legendHeight - 4 - 20);
expect(+scrollBar.getAttribute('y'))
.toBeCloseTo(legendHeight - 4 - scrollBarHeight, 3);
});

it('should be removed from DOM when \'showlegend\' is relayout\'ed to false', function(done) {
Expand Down
0