From 197f7fa1cf4bb903fade6e44a2c9322546ee9eff Mon Sep 17 00:00:00 2001 From: timelyportfolio Date: Wed, 23 Mar 2016 17:14:39 -0500 Subject: [PATCH 1/3] change legend scrollbar drag to d3 drag behavior --- src/components/legend/draw.js | 53 ++++++++++++++++------------------- 1 file changed, 24 insertions(+), 29 deletions(-) diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 896e3ef1dbe..0ecbf99ed0f 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -231,15 +231,19 @@ module.exports = function draw(gd) { width: opts.width + constants.scrollBarWidth }); + if(gd.firstRender){ + // Move scrollbar to starting position + scrollBar.call( + Drawing.setRect, + opts.width - (constants.scrollBarWidth + constants.scrollBarMargin), + constants.scrollBarMargin, + constants.scrollBarWidth, + constants.scrollBarHeight + ); + scrollBox.attr('data-scroll',0) + } - // Move scrollbar to starting position - scrollBar.call( - Drawing.setRect, - opts.width - (constants.scrollBarWidth + constants.scrollBarMargin), - constants.scrollBarMargin, - constants.scrollBarWidth, - constants.scrollBarHeight - ); + scrollHandler(0,scrollheight); legend.on('wheel',null); @@ -249,33 +253,24 @@ module.exports = function draw(gd) { scrollHandler(e.deltaY / 20, scrollheight); }) - scrollBar.on('mousedown',null); - - scrollBar.on('mousedown', function(){ - var e = d3.event; - e.preventDefault(); - - function mMove(e) { - if(e.buttons === 1) { - scrollHandler(e.movementY, scrollheight); - } - } - - function mUp() { - scrollBar.node().removeEventListener('mousemove', mMove); - window.removeEventListener('mouseup', mUp); - } - - window.addEventListener('mousemove', mMove); - window.addEventListener('mouseup', mUp); - }); + scrollBar.on(".drag",null); + scrollBox.on(".drag",null); + var drag = d3.behavior.drag() + .on('drag', function(d){ + scrollHandler( d3.event.dy, scrollheight); + }); + + scrollBar.call(drag); + scrollBox.call(drag); + } + function scrollHandler(delta, scrollheight) { var scrollBarTrack = scrollheight - constants.scrollBarHeight - 2 * constants.scrollBarMargin, translateY = scrollBox.attr('data-scroll'), - scrollBoxY = Lib.constrain(translateY - delta, Math.min(scrollheight - opts.height, 0), 0), + scrollBoxY = Lib.constrain(translateY - delta, scrollheight-opts.height, 0), scrollBarY = -scrollBoxY / (opts.height - scrollheight) * scrollBarTrack + constants.scrollBarMargin; scrollBox.attr('data-scroll', scrollBoxY); From 94bd5fffce7b0b4055ea7f7604a5569cf794e1ee Mon Sep 17 00:00:00 2001 From: timelyportfolio Date: Thu, 24 Mar 2016 13:16:52 -0500 Subject: [PATCH 2/3] lint --- src/components/legend/draw.js | 36 +++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 0ecbf99ed0f..592620c3820 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -57,7 +57,7 @@ module.exports = function draw(gd) { var clipPath = fullLayout._topdefs.selectAll('#' + clipId) .data([0]); - + clipPath.enter().append('clipPath') .attr('id', clipId) .append('rect'); @@ -222,7 +222,7 @@ module.exports = function draw(gd) { // If scrollbar should be shown. if(opts.height - scrollheight > 0 && !gd._context.staticPlot) { - + bg.attr({ width: opts.width - 2 * opts.borderwidth + constants.scrollBarWidth }); @@ -230,8 +230,8 @@ module.exports = function draw(gd) { clipPath.attr({ width: opts.width + constants.scrollBarWidth }); - - if(gd.firstRender){ + + if(gd.firstRender) { // Move scrollbar to starting position scrollBar.call( Drawing.setRect, @@ -240,31 +240,31 @@ module.exports = function draw(gd) { constants.scrollBarWidth, constants.scrollBarHeight ); - scrollBox.attr('data-scroll',0) + scrollBox.attr('data-scroll',0); } - + scrollHandler(0,scrollheight); - + legend.on('wheel',null); - legend.on('wheel', function(){ + legend.on('wheel', function() { var e = d3.event; e.preventDefault(); - scrollHandler(e.deltaY / 20, scrollheight); - }) - - scrollBar.on(".drag",null); - scrollBox.on(".drag",null); + scrollHandler(e.deltaY / 20, scrollheight); + }); + + scrollBar.on('.drag',null); + scrollBox.on('.drag',null); var drag = d3.behavior.drag() - .on('drag', function(d){ - scrollHandler( d3.event.dy, scrollheight); + .on('drag', function() { + scrollHandler(d3.event.dy, scrollheight); }); - + scrollBar.call(drag); scrollBox.call(drag); - + } - + function scrollHandler(delta, scrollheight) { From 3e6b949354b2f9e6f906d9879f716699d9d27221 Mon Sep 17 00:00:00 2001 From: timelyportfolio Date: Tue, 29 Mar 2016 15:55:56 -0500 Subject: [PATCH 3/3] add tests for legend resize and this forum [post](http://community.plot.ly/t/default-showlegend-changed-with-update/708) --- test/jasmine/tests/legend_scroll_test.js | 46 +++++++++++++++++++++--- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/test/jasmine/tests/legend_scroll_test.js b/test/jasmine/tests/legend_scroll_test.js index 5bdf05d8e62..607a97bdd6c 100644 --- a/test/jasmine/tests/legend_scroll_test.js +++ b/test/jasmine/tests/legend_scroll_test.js @@ -20,6 +20,11 @@ describe('The legend', function() { return gd._fullLayout._topdefs.selectAll('#legend' + uid).size(); } + function getPlotHeight(gd) { + return gd._fullLayout.height - gd._fullLayout.margin.t - gd._fullLayout.margin.b; + } + + describe('when plotted with many traces', function() { beforeEach(function() { gd = createGraph(); @@ -30,10 +35,9 @@ describe('The legend', function() { afterEach(destroyGraph); it('should not exceed plot height', function() { - var legendHeight = getBBox(legend).height, - plotHeight = gd._fullLayout.height - gd._fullLayout.margin.t - gd._fullLayout.margin.b; + var legendHeight = getBBox(legend).height; - expect(+legendHeight).toBe(plotHeight); + expect(+legendHeight).toBe(getPlotHeight(gd)); }); it('should insert a scrollbar', function() { @@ -88,10 +92,29 @@ describe('The legend', function() { done(); }); }); + + it('should resize when relayout\'ed with new height', function(done) { + var origLegendHeight = getBBox(legend).height; + + Plotly.relayout(gd, {'height': gd._fullLayout.height/2}).then(function() { + var legendHeight = getBBox(legend).height; + + //legend still exists and not duplicated + expect(countLegendGroups(gd)).toBe(1); + expect(countLegendClipPaths(gd)).toBe(1); + + // clippath resized to new height less than new plot height + expect(+legendHeight).toBe(getPlotHeight(gd)); + expect(+legendHeight).toBeLessThan(+origLegendHeight); + + done(); + }); + }); }); + describe('when plotted with few traces', function() { - var gd; + var gd, legend; beforeEach(function() { gd = createGraph(); @@ -122,6 +145,21 @@ describe('The legend', function() { done(); }); }); + + it('should resize when traces added', function(done) { + legend = document.getElementsByClassName('legend')[0]; + var origLegendHeight = getBBox(legend).height; + + Plotly.addTrace(gd, { x: [1,2,3], y: [4,3,2], name: 'Test2' }).then(function() { + var legend = document.getElementsByClassName('legend')[0]; + var legendHeight = getBBox(legend).height; + // clippath resized to show new trace + expect(+legendHeight).toBeCloseTo(+origLegendHeight+18, 0); + + done(); + }); + + }); }); });