From bb6051097da808d7a14791a264059f2c776e4bcf Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Fri, 22 Jul 2016 10:52:35 -0800 Subject: [PATCH 1/6] Might fix #769 - added check for pushing past plot margin and starting new row of legend items --- src/components/legend/draw.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 4a81fb12f1d..1fe9906932a 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -568,18 +568,33 @@ function computeLegendDimensions(gd, groups, traces) { else { opts.width = 0; opts.height = 0; + var rowHeight = 0; + var maxTraceHeight = 0; + var startX = 0; traces.each(function(d) { + var legendItem = d[0], traceWidth = 40 + legendItem.width, traceGap = opts.tracegroupgap || 5; - Lib.setTranslate(this, - (borderwidth + opts.width), - (5 + borderwidth + legendItem.height / 2)); + if((borderwidth + startX + traceGap + traceWidth) > fullLayout.width - fullLayout.margin.r) { + startX = 0; + rowHeight = rowHeight + maxTraceHeight; + opts.height = opts.height + maxTraceHeight; + } opts.width += traceGap + traceWidth; opts.height = Math.max(opts.height, legendItem.height); + + Lib.setTranslate(this, + (borderwidth + startX), + (5 + borderwidth + legendItem.height / 2) + rowHeight); + + + //keep track of tallest trace in group + startX += traceGap + traceWidth; + maxTraceHeight = (legendItem.height > maxTraceHeight) ? legendItem.height : maxTraceHeight; }); opts.width += borderwidth * 2; From 5f385957f0a0ca860720a06c0df33bae52503923 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Fri, 22 Jul 2016 11:23:44 -0800 Subject: [PATCH 2/6] linted --- src/components/legend/draw.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 1fe9906932a..79e83cfe99b 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -579,9 +579,9 @@ function computeLegendDimensions(gd, groups, traces) { traceGap = opts.tracegroupgap || 5; if((borderwidth + startX + traceGap + traceWidth) > fullLayout.width - fullLayout.margin.r) { - startX = 0; - rowHeight = rowHeight + maxTraceHeight; - opts.height = opts.height + maxTraceHeight; + startX = 0; + rowHeight = rowHeight + maxTraceHeight; + opts.height = opts.height + maxTraceHeight; } opts.width += traceGap + traceWidth; From 5b5a102874974be5d726bc7ef6edf54c16746de7 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Fri, 22 Jul 2016 11:27:33 -0800 Subject: [PATCH 3/6] code in original order --- src/components/legend/draw.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 79e83cfe99b..5d0f928fa0d 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -584,13 +584,12 @@ function computeLegendDimensions(gd, groups, traces) { opts.height = opts.height + maxTraceHeight; } - opts.width += traceGap + traceWidth; - opts.height = Math.max(opts.height, legendItem.height); - Lib.setTranslate(this, (borderwidth + startX), (5 + borderwidth + legendItem.height / 2) + rowHeight); + opts.width += traceGap + traceWidth; + opts.height = Math.max(opts.height, legendItem.height); //keep track of tallest trace in group startX += traceGap + traceWidth; From d0934f3d3f42c05e13f941e0604101ac5484fdac Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Mon, 25 Jul 2016 10:58:48 -0800 Subject: [PATCH 4/6] changes based on @n-riesco comments --- src/components/legend/draw.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 5d0f928fa0d..62d2d842845 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -568,9 +568,9 @@ function computeLegendDimensions(gd, groups, traces) { else { opts.width = 0; opts.height = 0; - var rowHeight = 0; - var maxTraceHeight = 0; - var startX = 0; + var rowHeight = 0, + maxTraceHeight = 0, + offsetX = 0; traces.each(function(d) { @@ -578,22 +578,24 @@ function computeLegendDimensions(gd, groups, traces) { traceWidth = 40 + legendItem.width, traceGap = opts.tracegroupgap || 5; - if((borderwidth + startX + traceGap + traceWidth) > fullLayout.width - fullLayout.margin.r) { - startX = 0; + if((borderwidth + offsetX + traceGap + traceWidth) > fullLayout.width - fullLayout.margin.r) { + offsetX = 0; rowHeight = rowHeight + maxTraceHeight; opts.height = opts.height + maxTraceHeight; + //reset for next row + maxTraceHeight = 0; } Lib.setTranslate(this, - (borderwidth + startX), + (borderwidth + offsetX), (5 + borderwidth + legendItem.height / 2) + rowHeight); opts.width += traceGap + traceWidth; opts.height = Math.max(opts.height, legendItem.height); //keep track of tallest trace in group - startX += traceGap + traceWidth; - maxTraceHeight = (legendItem.height > maxTraceHeight) ? legendItem.height : maxTraceHeight; + offsetX += traceGap + traceWidth; + maxTraceHeight = Math.max(legendItem.height, maxTraceHeight); }); opts.width += borderwidth * 2; From e7a286fc4abdbd04da39ee21e5b4e6977a1719db Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Mon, 25 Jul 2016 13:57:01 -0800 Subject: [PATCH 5/6] need both margins for proper wrapping --- src/components/legend/draw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 62d2d842845..8321e4072e5 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -578,7 +578,7 @@ function computeLegendDimensions(gd, groups, traces) { traceWidth = 40 + legendItem.width, traceGap = opts.tracegroupgap || 5; - if((borderwidth + offsetX + traceGap + traceWidth) > fullLayout.width - fullLayout.margin.r) { + if((borderwidth + offsetX + traceGap + traceWidth) > (fullLayout.width - (fullLayout.margin.r + fullLayout.margin.l))) { offsetX = 0; rowHeight = rowHeight + maxTraceHeight; opts.height = opts.height + maxTraceHeight; From 91d384ba0c3cd958366f6000445b34b316673fa4 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Tue, 26 Jul 2016 09:50:22 -0800 Subject: [PATCH 6/6] put horizontal legend traces in columns --- src/components/legend/draw.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 8321e4072e5..1a7a063d470 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -570,12 +570,18 @@ function computeLegendDimensions(gd, groups, traces) { opts.height = 0; var rowHeight = 0, maxTraceHeight = 0, + maxTraceWidth = 0, offsetX = 0; + //calculate largest width for traces and use for width of all legend items + traces.each(function(d) { + maxTraceWidth = Math.max(40 + d[0].width, maxTraceWidth); + }); + traces.each(function(d) { var legendItem = d[0], - traceWidth = 40 + legendItem.width, + traceWidth = maxTraceWidth, traceGap = opts.tracegroupgap || 5; if((borderwidth + offsetX + traceGap + traceWidth) > (fullLayout.width - (fullLayout.margin.r + fullLayout.margin.l))) {