From 4c99aeb1a1b860bb39fa029c27f8ecc69e43dd7a Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 11 Nov 2021 09:38:06 -0500 Subject: [PATCH 1/8] rename xLeft to u --- src/components/colorbar/draw.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js index de551a4e2cc..707b842cd98 100644 --- a/src/components/colorbar/draw.js +++ b/src/components/colorbar/draw.js @@ -219,9 +219,9 @@ function drawColorBar(g, opts, gd) { // x positioning: do it initially just for left anchor, // then fix at the end (since we don't know the width yet) - var xLeft = Math.round(optsX * gs.w + xpad); + var u = Math.round(optsX * gs.w + xpad); // for dragging... this is getting a little muddled... - var xLeftFrac = optsX - thickFrac * ({center: 0.5, right: 1}[xanchor] || 0); + var uFrac = optsX - thickFrac * ({center: 0.5, right: 1}[xanchor] || 0); // y positioning we can do correctly from the start var yBottomFrac = optsY + lenFrac * (({top: -0.5, bottom: 0.5}[yanchor] || 0) - 0.5); @@ -231,7 +231,7 @@ function drawColorBar(g, opts, gd) { // stash a few things for makeEditable opts._lenFrac = lenFrac; opts._thickFrac = thickFrac; - opts._xLeftFrac = xLeftFrac; + opts._uFrac = uFrac; opts._yBottomFrac = yBottomFrac; // stash mocked axis for contour label formatting @@ -431,7 +431,7 @@ function drawColorBar(g, opts, gd) { // Colorbar cannot currently support opacities so we // use an opaque fill even when alpha channels present var fillEl = d3.select(this).attr({ - x: xLeft, + x: u, width: Math.max(thickPx, 2), y: d3.min(z), height: Math.max(d3.max(z) - d3.min(z), 2), @@ -455,7 +455,7 @@ function drawColorBar(g, opts, gd) { lines.exit().remove(); lines.each(function(d) { d3.select(this) - .attr('d', 'M' + xLeft + ',' + + .attr('d', 'M' + u + ',' + (Math.round(ax.c2p(d)) + (line.width / 2) % 1) + 'h' + thickPx) .call(Drawing.lineGroupStyle, line.width, lineColormap(d), line.dash); }); @@ -463,7 +463,7 @@ function drawColorBar(g, opts, gd) { // force full redraw of labels and ticks axLayer.selectAll('g.' + ax._id + 'tick,path').remove(); - var shift = xLeft + thickPx + + var shift = u + thickPx + (outlinewidth || 0) / 2 - (opts.ticks === 'outside' ? 1 : 0); var vals = Axes.calcTicks(ax); @@ -506,7 +506,7 @@ function drawColorBar(g, opts, gd) { // (except for top/bottom mathjax, above) // but the weird gs.l is because the titleunshift // transform gets removed by Drawing.bBox - titleWidth = Drawing.bBox(titleCont.node()).right - xLeft - gs.l; + titleWidth = Drawing.bBox(titleCont.node()).right - u - gs.l; } innerWidth = Math.max(innerWidth, titleWidth); } @@ -515,7 +515,7 @@ function drawColorBar(g, opts, gd) { var outerheight = yBottomPx - yTopPx; g.select('.' + cn.cbbg).attr({ - x: xLeft - xpad - (borderwidth + outlinewidth) / 2, + x: u - xpad - (borderwidth + outlinewidth) / 2, y: yTopPx - yExtraPx, width: Math.max(outerwidth, 2), height: Math.max(outerheight + 2 * yExtraPx, 2) @@ -525,7 +525,7 @@ function drawColorBar(g, opts, gd) { .style('stroke-width', borderwidth); g.selectAll('.' + cn.cboutline).attr({ - x: xLeft, + x: u, y: yTopPx + ypad + (titleSide === 'top' ? titleHeight : 0), width: Math.max(thickPx, 2), height: Math.max(outerheight - 2 * ypad - titleHeight, 2) @@ -596,7 +596,7 @@ function makeEditable(g, opts, gd) { moveFn: function(dx, dy) { g.attr('transform', t0 + strTranslate(dx, dy)); - xf = dragElement.align(opts._xLeftFrac + (dx / gs.w), opts._thickFrac, + xf = dragElement.align(opts._uFrac + (dx / gs.w), opts._thickFrac, 0, 1, opts.xanchor); yf = dragElement.align(opts._yBottomFrac - (dy / gs.h), opts._lenFrac, 0, 1, opts.yanchor); From b10a169edcdc1f29194113927b0785897f66d1b3 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 11 Nov 2021 09:39:07 -0500 Subject: [PATCH 2/8] rename yBottom to v --- src/components/colorbar/draw.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js index 707b842cd98..4e0fcab075a 100644 --- a/src/components/colorbar/draw.js +++ b/src/components/colorbar/draw.js @@ -224,15 +224,15 @@ function drawColorBar(g, opts, gd) { var uFrac = optsX - thickFrac * ({center: 0.5, right: 1}[xanchor] || 0); // y positioning we can do correctly from the start - var yBottomFrac = optsY + lenFrac * (({top: -0.5, bottom: 0.5}[yanchor] || 0) - 0.5); - var yBottomPx = Math.round(gs.h * (1 - yBottomFrac)); - var yTopPx = yBottomPx - lenPx; + var vFrac = optsY + lenFrac * (({top: -0.5, bottom: 0.5}[yanchor] || 0) - 0.5); + var vPx = Math.round(gs.h * (1 - vFrac)); + var yTopPx = vPx - lenPx; // stash a few things for makeEditable opts._lenFrac = lenFrac; opts._thickFrac = thickFrac; opts._uFrac = uFrac; - opts._yBottomFrac = yBottomFrac; + opts._vFrac = vFrac; // stash mocked axis for contour label formatting var ax = opts._axis = mockColorBarAxis(gd, opts, zrange); @@ -244,7 +244,7 @@ function drawColorBar(g, opts, gd) { if(['top', 'bottom'].indexOf(titleSide) !== -1) { ax.title.side = titleSide; ax.titlex = optsX + xpadFrac; - ax.titley = yBottomFrac + (title.side === 'top' ? lenFrac - ypadFrac : ypadFrac); + ax.titley = vFrac + (title.side === 'top' ? lenFrac - ypadFrac : ypadFrac); } if(line.color && opts.tickmode === 'auto') { @@ -252,7 +252,7 @@ function drawColorBar(g, opts, gd) { ax.tick0 = levelsIn.start; var dtick = levelsIn.size; // expand if too many contours, so we don't get too many ticks - var autoNtick = Lib.constrain((yBottomPx - yTopPx) / 50, 4, 15) + 1; + var autoNtick = Lib.constrain((vPx - yTopPx) / 50, 4, 15) + 1; var dtFactor = (zrange[1] - zrange[0]) / ((opts.nticks || autoNtick) * dtick); if(dtFactor > 1) { var dtexp = Math.pow(10, Math.floor(Math.log(dtFactor) / Math.LN10)); @@ -270,8 +270,8 @@ function drawColorBar(g, opts, gd) { // set domain after init, because we may want to // allow it outside [0,1] ax.domain = [ - yBottomFrac + ypadFrac, - yBottomFrac + lenFrac - ypadFrac + vFrac + ypadFrac, + vFrac + lenFrac - ypadFrac ]; ax.setScale(); @@ -317,10 +317,10 @@ function drawColorBar(g, opts, gd) { var y; if(titleSide === 'top') { - y = (1 - (yBottomFrac + lenFrac - ypadFrac)) * gs.h + + y = (1 - (vFrac + lenFrac - ypadFrac)) * gs.h + gs.t + 3 + fontSize * 0.75; } else { - y = (1 - (yBottomFrac + ypadFrac)) * gs.h + + y = (1 - (vFrac + ypadFrac)) * gs.h + gs.t - 3 - fontSize * 0.25; } drawTitle(ax._id + 'title', { @@ -512,7 +512,7 @@ function drawColorBar(g, opts, gd) { } var outerwidth = 2 * xpad + innerWidth + borderwidth + outlinewidth / 2; - var outerheight = yBottomPx - yTopPx; + var outerheight = vPx - yTopPx; g.select('.' + cn.cbbg).attr({ x: u - xpad - (borderwidth + outlinewidth) / 2, @@ -598,7 +598,7 @@ function makeEditable(g, opts, gd) { xf = dragElement.align(opts._uFrac + (dx / gs.w), opts._thickFrac, 0, 1, opts.xanchor); - yf = dragElement.align(opts._yBottomFrac - (dy / gs.h), opts._lenFrac, + yf = dragElement.align(opts._vFrac - (dy / gs.h), opts._lenFrac, 0, 1, opts.yanchor); var csr = dragElement.getCursor(xf, yf, opts.xanchor, opts.yanchor); From 073e6efdaa275fe6f9fbba35918843fb0657f0b3 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 11 Nov 2021 09:50:59 -0500 Subject: [PATCH 3/8] u -> uPx --- src/components/colorbar/draw.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js index 4e0fcab075a..536c03c50d6 100644 --- a/src/components/colorbar/draw.js +++ b/src/components/colorbar/draw.js @@ -219,7 +219,7 @@ function drawColorBar(g, opts, gd) { // x positioning: do it initially just for left anchor, // then fix at the end (since we don't know the width yet) - var u = Math.round(optsX * gs.w + xpad); + var uPx = Math.round(optsX * gs.w + xpad); // for dragging... this is getting a little muddled... var uFrac = optsX - thickFrac * ({center: 0.5, right: 1}[xanchor] || 0); @@ -431,7 +431,7 @@ function drawColorBar(g, opts, gd) { // Colorbar cannot currently support opacities so we // use an opaque fill even when alpha channels present var fillEl = d3.select(this).attr({ - x: u, + x: uPx, width: Math.max(thickPx, 2), y: d3.min(z), height: Math.max(d3.max(z) - d3.min(z), 2), @@ -455,7 +455,7 @@ function drawColorBar(g, opts, gd) { lines.exit().remove(); lines.each(function(d) { d3.select(this) - .attr('d', 'M' + u + ',' + + .attr('d', 'M' + uPx + ',' + (Math.round(ax.c2p(d)) + (line.width / 2) % 1) + 'h' + thickPx) .call(Drawing.lineGroupStyle, line.width, lineColormap(d), line.dash); }); @@ -463,7 +463,7 @@ function drawColorBar(g, opts, gd) { // force full redraw of labels and ticks axLayer.selectAll('g.' + ax._id + 'tick,path').remove(); - var shift = u + thickPx + + var shift = uPx + thickPx + (outlinewidth || 0) / 2 - (opts.ticks === 'outside' ? 1 : 0); var vals = Axes.calcTicks(ax); @@ -506,7 +506,7 @@ function drawColorBar(g, opts, gd) { // (except for top/bottom mathjax, above) // but the weird gs.l is because the titleunshift // transform gets removed by Drawing.bBox - titleWidth = Drawing.bBox(titleCont.node()).right - u - gs.l; + titleWidth = Drawing.bBox(titleCont.node()).right - uPx - gs.l; } innerWidth = Math.max(innerWidth, titleWidth); } @@ -515,7 +515,7 @@ function drawColorBar(g, opts, gd) { var outerheight = vPx - yTopPx; g.select('.' + cn.cbbg).attr({ - x: u - xpad - (borderwidth + outlinewidth) / 2, + x: uPx - xpad - (borderwidth + outlinewidth) / 2, y: yTopPx - yExtraPx, width: Math.max(outerwidth, 2), height: Math.max(outerheight + 2 * yExtraPx, 2) @@ -525,7 +525,7 @@ function drawColorBar(g, opts, gd) { .style('stroke-width', borderwidth); g.selectAll('.' + cn.cboutline).attr({ - x: u, + x: uPx, y: yTopPx + ypad + (titleSide === 'top' ? titleHeight : 0), width: Math.max(thickPx, 2), height: Math.max(outerheight - 2 * ypad - titleHeight, 2) From 4ba402dad0760c4c39dbaad8b0e8b2c13a2fe781 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 11 Nov 2021 09:55:14 -0500 Subject: [PATCH 4/8] use (vPx - lenPx) in place of vTopPx --- src/components/colorbar/draw.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js index 536c03c50d6..af1c4c8abde 100644 --- a/src/components/colorbar/draw.js +++ b/src/components/colorbar/draw.js @@ -226,7 +226,6 @@ function drawColorBar(g, opts, gd) { // y positioning we can do correctly from the start var vFrac = optsY + lenFrac * (({top: -0.5, bottom: 0.5}[yanchor] || 0) - 0.5); var vPx = Math.round(gs.h * (1 - vFrac)); - var yTopPx = vPx - lenPx; // stash a few things for makeEditable opts._lenFrac = lenFrac; @@ -252,7 +251,7 @@ function drawColorBar(g, opts, gd) { ax.tick0 = levelsIn.start; var dtick = levelsIn.size; // expand if too many contours, so we don't get too many ticks - var autoNtick = Lib.constrain((vPx - yTopPx) / 50, 4, 15) + 1; + var autoNtick = Lib.constrain((vPx - (vPx - lenPx)) / 50, 4, 15) + 1; var dtFactor = (zrange[1] - zrange[0]) / ((opts.nticks || autoNtick) * dtick); if(dtFactor > 1) { var dtexp = Math.pow(10, Math.floor(Math.log(dtFactor) / Math.LN10)); @@ -512,11 +511,11 @@ function drawColorBar(g, opts, gd) { } var outerwidth = 2 * xpad + innerWidth + borderwidth + outlinewidth / 2; - var outerheight = vPx - yTopPx; + var outerheight = vPx - (vPx - lenPx); g.select('.' + cn.cbbg).attr({ x: uPx - xpad - (borderwidth + outlinewidth) / 2, - y: yTopPx - yExtraPx, + y: (vPx - lenPx) - yExtraPx, width: Math.max(outerwidth, 2), height: Math.max(outerheight + 2 * yExtraPx, 2) }) @@ -526,7 +525,7 @@ function drawColorBar(g, opts, gd) { g.selectAll('.' + cn.cboutline).attr({ x: uPx, - y: yTopPx + ypad + (titleSide === 'top' ? titleHeight : 0), + y: (vPx - lenPx) + ypad + (titleSide === 'top' ? titleHeight : 0), width: Math.max(thickPx, 2), height: Math.max(outerheight - 2 * ypad - titleHeight, 2) }) From ace3525a2eb05d2347506f06f255e7eaafd35f15 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 11 Nov 2021 10:01:08 -0500 Subject: [PATCH 5/8] simplify equations without yTopPx --- src/components/colorbar/draw.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js index af1c4c8abde..a4890f06197 100644 --- a/src/components/colorbar/draw.js +++ b/src/components/colorbar/draw.js @@ -251,7 +251,7 @@ function drawColorBar(g, opts, gd) { ax.tick0 = levelsIn.start; var dtick = levelsIn.size; // expand if too many contours, so we don't get too many ticks - var autoNtick = Lib.constrain((vPx - (vPx - lenPx)) / 50, 4, 15) + 1; + var autoNtick = Lib.constrain(lenPx / 50, 4, 15) + 1; var dtFactor = (zrange[1] - zrange[0]) / ((opts.nticks || autoNtick) * dtick); if(dtFactor > 1) { var dtexp = Math.pow(10, Math.floor(Math.log(dtFactor) / Math.LN10)); @@ -511,11 +511,11 @@ function drawColorBar(g, opts, gd) { } var outerwidth = 2 * xpad + innerWidth + borderwidth + outlinewidth / 2; - var outerheight = vPx - (vPx - lenPx); + var outerheight = lenPx; g.select('.' + cn.cbbg).attr({ x: uPx - xpad - (borderwidth + outlinewidth) / 2, - y: (vPx - lenPx) - yExtraPx, + y: vPx - lenPx - yExtraPx, width: Math.max(outerwidth, 2), height: Math.max(outerheight + 2 * yExtraPx, 2) }) @@ -525,7 +525,7 @@ function drawColorBar(g, opts, gd) { g.selectAll('.' + cn.cboutline).attr({ x: uPx, - y: (vPx - lenPx) + ypad + (titleSide === 'top' ? titleHeight : 0), + y: vPx - lenPx + ypad + (titleSide === 'top' ? titleHeight : 0), width: Math.max(thickPx, 2), height: Math.max(outerheight - 2 * ypad - titleHeight, 2) }) From 19fb1f37180ed10ff7e99bc30150d54ad97b0a57 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 11 Nov 2021 10:12:12 -0500 Subject: [PATCH 6/8] use lenPx in place of outerheight --- src/components/colorbar/draw.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js index a4890f06197..119b7058ddf 100644 --- a/src/components/colorbar/draw.js +++ b/src/components/colorbar/draw.js @@ -511,13 +511,12 @@ function drawColorBar(g, opts, gd) { } var outerwidth = 2 * xpad + innerWidth + borderwidth + outlinewidth / 2; - var outerheight = lenPx; g.select('.' + cn.cbbg).attr({ x: uPx - xpad - (borderwidth + outlinewidth) / 2, y: vPx - lenPx - yExtraPx, width: Math.max(outerwidth, 2), - height: Math.max(outerheight + 2 * yExtraPx, 2) + height: Math.max(lenPx + 2 * yExtraPx, 2) }) .call(Color.fill, opts.bgcolor) .call(Color.stroke, opts.bordercolor) @@ -527,7 +526,7 @@ function drawColorBar(g, opts, gd) { x: uPx, y: vPx - lenPx + ypad + (titleSide === 'top' ? titleHeight : 0), width: Math.max(thickPx, 2), - height: Math.max(outerheight - 2 * ypad - titleHeight, 2) + height: Math.max(lenPx - 2 * ypad - titleHeight, 2) }) .call(Color.stroke, opts.outlinecolor) .style({ @@ -545,8 +544,8 @@ function drawColorBar(g, opts, gd) { var bFrac = FROM_BR[yanchor]; if(lenmode === 'pixels') { marginOpts.y = optsY; - marginOpts.t = outerheight * tFrac; - marginOpts.b = outerheight * bFrac; + marginOpts.t = lenPx * tFrac; + marginOpts.b = lenPx * bFrac; } else { marginOpts.t = marginOpts.b = 0; marginOpts.yt = optsY + len * tFrac; From 97d1c33eca613312418ff857583cd3f3f51c74f5 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 11 Nov 2021 10:13:41 -0500 Subject: [PATCH 7/8] rename outerwidth to outerThickness --- src/components/colorbar/draw.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js index 119b7058ddf..27516bfbcbd 100644 --- a/src/components/colorbar/draw.js +++ b/src/components/colorbar/draw.js @@ -510,12 +510,12 @@ function drawColorBar(g, opts, gd) { innerWidth = Math.max(innerWidth, titleWidth); } - var outerwidth = 2 * xpad + innerWidth + borderwidth + outlinewidth / 2; + var outerThickness = 2 * xpad + innerWidth + borderwidth + outlinewidth / 2; g.select('.' + cn.cbbg).attr({ x: uPx - xpad - (borderwidth + outlinewidth) / 2, y: vPx - lenPx - yExtraPx, - width: Math.max(outerwidth, 2), + width: Math.max(outerThickness, 2), height: Math.max(lenPx + 2 * yExtraPx, 2) }) .call(Color.fill, opts.bgcolor) @@ -535,7 +535,7 @@ function drawColorBar(g, opts, gd) { }); // fix positioning for xanchor!='left' - var xoffset = ({center: 0.5, right: 1}[xanchor] || 0) * outerwidth; + var xoffset = ({center: 0.5, right: 1}[xanchor] || 0) * outerThickness; g.attr('transform', strTranslate(gs.l - xoffset, gs.t)); // auto margin adjustment @@ -556,10 +556,10 @@ function drawColorBar(g, opts, gd) { var rFrac = FROM_BR[xanchor]; if(thicknessmode === 'pixels') { marginOpts.x = optsX; - marginOpts.l = outerwidth * lFrac; - marginOpts.r = outerwidth * rFrac; + marginOpts.l = outerThickness * lFrac; + marginOpts.r = outerThickness * rFrac; } else { - var extraThickness = outerwidth - thickPx; + var extraThickness = outerThickness - thickPx; marginOpts.l = extraThickness * lFrac; marginOpts.r = extraThickness * rFrac; marginOpts.xl = optsX - thickness * lFrac; From ed04458dcfaffb6da91ba52372cc25bcd69eab45 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 11 Nov 2021 10:16:23 -0500 Subject: [PATCH 8/8] rename innerWidth to innerThickness --- src/components/colorbar/draw.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js index 27516bfbcbd..5648db320c9 100644 --- a/src/components/colorbar/draw.js +++ b/src/components/colorbar/draw.js @@ -488,9 +488,9 @@ function drawColorBar(g, opts, gd) { // TODO: why are we redrawing multiple times now with this? // I guess autoMargin doesn't like being post-promise? function positionCB() { - var innerWidth = thickPx + outlinewidth / 2; + var innerThickness = thickPx + outlinewidth / 2; if(ax.ticklabelposition.indexOf('inside') === -1) { - innerWidth += Drawing.bBox(axLayer.node()).width; + innerThickness += Drawing.bBox(axLayer.node()).width; } titleEl = titleCont.select('text'); @@ -507,10 +507,10 @@ function drawColorBar(g, opts, gd) { // transform gets removed by Drawing.bBox titleWidth = Drawing.bBox(titleCont.node()).right - uPx - gs.l; } - innerWidth = Math.max(innerWidth, titleWidth); + innerThickness = Math.max(innerThickness, titleWidth); } - var outerThickness = 2 * xpad + innerWidth + borderwidth + outlinewidth / 2; + var outerThickness = 2 * xpad + innerThickness + borderwidth + outlinewidth / 2; g.select('.' + cn.cbbg).attr({ x: uPx - xpad - (borderwidth + outlinewidth) / 2,