From 5757a028d650ccef58bd0f4106e9d317b4f40a8d Mon Sep 17 00:00:00 2001 From: godyaev Date: Tue, 17 Sep 2024 00:50:00 +0300 Subject: [PATCH 1/5] Fix legend size calculations when it is anchored to container. --- src/components/legend/draw.js | 65 ++++++++++++++++++++++++----------- 1 file changed, 44 insertions(+), 21 deletions(-) diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 8e7abcf29fa..62b1f99e52e 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -774,18 +774,30 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { var endPad = 2 * (bw + itemGap); var yanchor = getYanchor(legendObj); - var isBelowPlotArea = legendObj.y < 0 || (legendObj.y === 0 && yanchor === 'top'); - var isAbovePlotArea = legendObj.y > 1 || (legendObj.y === 1 && yanchor === 'bottom'); + var isBelowPlotArea; + var isAbovePlotArea; var traceGroupGap = legendObj.tracegroupgap; var legendGroupWidths = {}; - // - if below/above plot area, give it the maximum potential margin-push value - // - otherwise, extend the height of the plot area - legendObj._maxHeight = Math.max( - (isBelowPlotArea || isAbovePlotArea) ? fullLayout.height / 2 : gs.h, - 30 - ); + if (legendObj.yref === 'paper') { + isBelowPlotArea = legendObj.y < 0 || (legendObj.y === 0 && yanchor === 'top'); + isAbovePlotArea = legendObj.y > 1 || (legendObj.y === 1 && yanchor === 'bottom'); + // - if below/above plot area, give it the maximum potential margin-push value + // - otherwise, extend the height of the plot area + legendObj._maxHeight = Math.max( + (isBelowPlotArea || isAbovePlotArea) ? fullLayout.height / 2 : gs.h, + 30 + ); + } else { + if (yanchor === 'top') + legendObj._maxHeight = legendObj.y * fullLayout.height; + else if (yanchor === 'bottom') + legendObj._maxHeight = (1 - legendObj.y) * fullLayout.height; + else // if (yanchor === 'middle') + legendObj._maxHeight = 2 * Math.min(1 - legendObj.y, legendObj.y) * fullLayout.height; + legendObj._maxHeight = Math.max(legendObj._maxHeight, 30); + } var toggleRectWidth = 0; legendObj._width = 0; @@ -815,19 +827,30 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { } } else { var xanchor = getXanchor(legendObj); - var isLeftOfPlotArea = legendObj.x < 0 || (legendObj.x === 0 && xanchor === 'right'); - var isRightOfPlotArea = legendObj.x > 1 || (legendObj.x === 1 && xanchor === 'left'); - var isBeyondPlotAreaY = isAbovePlotArea || isBelowPlotArea; - var hw = fullLayout.width / 2; - - // - if placed within x-margins, extend the width of the plot area - // - else if below/above plot area and anchored in the margin, extend to opposite margin, - // - otherwise give it the maximum potential margin-push value - legendObj._maxWidth = Math.max( - isLeftOfPlotArea ? ((isBeyondPlotAreaY && xanchor === 'left') ? gs.l + gs.w : hw) : - isRightOfPlotArea ? ((isBeyondPlotAreaY && xanchor === 'right') ? gs.r + gs.w : hw) : - gs.w, - 2 * textGap); + if (legendObj.xref === 'paper') { + var isLeftOfPlotArea = legendObj.x < 0 || (legendObj.x === 0 && xanchor === 'right'); + var isRightOfPlotArea = legendObj.x > 1 || (legendObj.x === 1 && xanchor === 'left'); + var isBeyondPlotAreaY = isAbovePlotArea || isBelowPlotArea; + var hw = fullLayout.width / 2; + + // - if placed within x-margins, extend the width of the plot area + // - else if below/above plot area and anchored in the margin, extend to opposite margin, + // - otherwise give it the maximum potential margin-push value + legendObj._maxWidth = Math.max( + isLeftOfPlotArea ? ((isBeyondPlotAreaY && xanchor === 'left') ? gs.l + gs.w : hw) : + isRightOfPlotArea ? ((isBeyondPlotAreaY && xanchor === 'right') ? gs.r + gs.w : hw) : + gs.w, + 2 * textGap); + } else { + if (xanchor === 'right') + legendObj._maxWidth = legendObj.x * fullLayout.width; + else if (xanchor === 'left') + legendObj._maxWidth = (1 - legendObj.x) * fullLayout.width; + else // if (xanchor === 'center') + legendObj._maxWidth = 2 * Math.min(1 - legendObj.x, legendObj.x) * fullLayout.width; + legendObj._maxWidth = Math.max(legendObj._maxWidth, 2 * textGap); + } + var maxItemWidth = 0; var combinedItemWidth = 0; traces.each(function(d) { From d5e9935b3facd7d8e4e3ec848e3301f0231a7ff5 Mon Sep 17 00:00:00 2001 From: godyaev Date: Tue, 17 Sep 2024 01:03:44 +0300 Subject: [PATCH 2/5] Add draftlog for PR 7072 --- draftlogs/7072-fix.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 draftlogs/7072-fix.md diff --git a/draftlogs/7072-fix.md b/draftlogs/7072-fix.md new file mode 100644 index 00000000000..f837fc49392 --- /dev/null +++ b/draftlogs/7072-fix.md @@ -0,0 +1 @@ +Fix maximum dimensions for legend that is anchored to container [[#7072](https://github.com/plotly/plotly.js/pull/7072)] \ No newline at end of file From 1fc426683642a7292c24b157a9c177f2eac0a5f7 Mon Sep 17 00:00:00 2001 From: godyaev Date: Tue, 17 Sep 2024 12:49:29 +0300 Subject: [PATCH 3/5] Code formatting. --- src/components/legend/draw.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 62b1f99e52e..e7b4af77491 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -780,7 +780,7 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { var traceGroupGap = legendObj.tracegroupgap; var legendGroupWidths = {}; - if (legendObj.yref === 'paper') { + if(legendObj.yref === 'paper') { isBelowPlotArea = legendObj.y < 0 || (legendObj.y === 0 && yanchor === 'top'); isAbovePlotArea = legendObj.y > 1 || (legendObj.y === 1 && yanchor === 'bottom'); // - if below/above plot area, give it the maximum potential margin-push value @@ -790,9 +790,9 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { 30 ); } else { - if (yanchor === 'top') + if(yanchor === 'top') legendObj._maxHeight = legendObj.y * fullLayout.height; - else if (yanchor === 'bottom') + else if(yanchor === 'bottom') legendObj._maxHeight = (1 - legendObj.y) * fullLayout.height; else // if (yanchor === 'middle') legendObj._maxHeight = 2 * Math.min(1 - legendObj.y, legendObj.y) * fullLayout.height; @@ -827,7 +827,7 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { } } else { var xanchor = getXanchor(legendObj); - if (legendObj.xref === 'paper') { + if(legendObj.xref === 'paper') { var isLeftOfPlotArea = legendObj.x < 0 || (legendObj.x === 0 && xanchor === 'right'); var isRightOfPlotArea = legendObj.x > 1 || (legendObj.x === 1 && xanchor === 'left'); var isBeyondPlotAreaY = isAbovePlotArea || isBelowPlotArea; @@ -842,9 +842,9 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { gs.w, 2 * textGap); } else { - if (xanchor === 'right') + if(xanchor === 'right') legendObj._maxWidth = legendObj.x * fullLayout.width; - else if (xanchor === 'left') + else if(xanchor === 'left') legendObj._maxWidth = (1 - legendObj.x) * fullLayout.width; else // if (xanchor === 'center') legendObj._maxWidth = 2 * Math.min(1 - legendObj.x, legendObj.x) * fullLayout.width; From 68980a4227f570e713533c862c5af52f5b87cbfc Mon Sep 17 00:00:00 2001 From: godyaev Date: Tue, 17 Sep 2024 13:04:39 +0300 Subject: [PATCH 4/5] Calculate flags isBelowPlotArea/isAbovePlotArea when legend yref is container. Need these for the case yref === 'container' && xref === 'paper' --- src/components/legend/draw.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index e7b4af77491..67710c3bfc8 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -790,6 +790,8 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { 30 ); } else { + isBelowPlotArea = legendObj.y * fullLayout.height < gs.b || (legendObj.y * fullLayout.height === gs.b && yanchor === 'top'); + isAbovePlotArea = legendObj.y * fullLayout.height > gs.b + gs.h || (legendObj.y * fullLayout.height === gs.b + gs.h && yanchor === 'bottom'); if(yanchor === 'top') legendObj._maxHeight = legendObj.y * fullLayout.height; else if(yanchor === 'bottom') From 1d5aea2f7e60a670c26ea9914eb806fb782ba0ff Mon Sep 17 00:00:00 2001 From: Mojtaba Samimi <33888540+archmoj@users.noreply.github.com> Date: Mon, 16 Dec 2024 13:22:18 -0500 Subject: [PATCH 5/5] Update draftlogs/7072-fix.md --- draftlogs/7072-fix.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/draftlogs/7072-fix.md b/draftlogs/7072-fix.md index f837fc49392..f363f589e40 100644 --- a/draftlogs/7072-fix.md +++ b/draftlogs/7072-fix.md @@ -1 +1,2 @@ -Fix maximum dimensions for legend that is anchored to container [[#7072](https://github.com/plotly/plotly.js/pull/7072)] \ No newline at end of file + - Fix maximum dimensions for legend that is anchored to container [[#7072](https://github.com/plotly/plotly.js/pull/7072)], + with thanks to @attatrol for the contribution! \ No newline at end of file