Skip to content

Commit e11b0bf

Browse files
archmojarchmoj
authored
Merge pull request #6019 from plotly/reusable-colorbar-vars-for-hor
rename colorbar internal variables - preparation for horizontal orientation
2 parents 5c8fcf7 + ed04458 commit e11b0bf

File tree

1 file changed

+35
-37
lines changed

1 file changed

+35
-37
lines changed

‎src/components/colorbar/draw.js‎

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -219,20 +219,19 @@ function drawColorBar(g, opts, gd) {
219219

220220
// x positioning: do it initially just for left anchor,
221221
// then fix at the end (since we don't know the width yet)
222-
var xLeft = Math.round(optsX * gs.w + xpad);
222+
var uPx = Math.round(optsX * gs.w + xpad);
223223
// for dragging... this is getting a little muddled...
224-
var xLeftFrac = optsX - thickFrac * ({center: 0.5, right: 1}[xanchor] || 0);
224+
var uFrac = optsX - thickFrac * ({center: 0.5, right: 1}[xanchor] || 0);
225225

226226
// y positioning we can do correctly from the start
227-
var yBottomFrac = optsY + lenFrac * (({top: -0.5, bottom: 0.5}[yanchor] || 0) - 0.5);
228-
var yBottomPx = Math.round(gs.h * (1 - yBottomFrac));
229-
var yTopPx = yBottomPx - lenPx;
227+
var vFrac = optsY + lenFrac * (({top: -0.5, bottom: 0.5}[yanchor] || 0) - 0.5);
228+
var vPx = Math.round(gs.h * (1 - vFrac));
230229

231230
// stash a few things for makeEditable
232231
opts._lenFrac = lenFrac;
233232
opts._thickFrac = thickFrac;
234-
opts._xLeftFrac = xLeftFrac;
235-
opts._yBottomFrac = yBottomFrac;
233+
opts._uFrac = uFrac;
234+
opts._vFrac = vFrac;
236235

237236
// stash mocked axis for contour label formatting
238237
var ax = opts._axis = mockColorBarAxis(gd, opts, zrange);
@@ -244,15 +243,15 @@ function drawColorBar(g, opts, gd) {
244243
if(['top', 'bottom'].indexOf(titleSide) !== -1) {
245244
ax.title.side = titleSide;
246245
ax.titlex = optsX + xpadFrac;
247-
ax.titley = yBottomFrac + (title.side === 'top' ? lenFrac - ypadFrac : ypadFrac);
246+
ax.titley = vFrac + (title.side === 'top' ? lenFrac - ypadFrac : ypadFrac);
248247
}
249248

250249
if(line.color && opts.tickmode === 'auto') {
251250
ax.tickmode = 'linear';
252251
ax.tick0 = levelsIn.start;
253252
var dtick = levelsIn.size;
254253
// expand if too many contours, so we don't get too many ticks
255-
var autoNtick = Lib.constrain((yBottomPx - yTopPx) / 50, 4, 15) + 1;
254+
var autoNtick = Lib.constrain(lenPx / 50, 4, 15) + 1;
256255
var dtFactor = (zrange[1] - zrange[0]) / ((opts.nticks || autoNtick) * dtick);
257256
if(dtFactor > 1) {
258257
var dtexp = Math.pow(10, Math.floor(Math.log(dtFactor) / Math.LN10));
@@ -270,8 +269,8 @@ function drawColorBar(g, opts, gd) {
270269
// set domain after init, because we may want to
271270
// allow it outside [0,1]
272271
ax.domain = [
273-
yBottomFrac + ypadFrac,
274-
yBottomFrac + lenFrac - ypadFrac
272+
vFrac + ypadFrac,
273+
vFrac + lenFrac - ypadFrac
275274
];
276275

277276
ax.setScale();
@@ -317,10 +316,10 @@ function drawColorBar(g, opts, gd) {
317316
var y;
318317

319318
if(titleSide === 'top') {
320-
y = (1 - (yBottomFrac + lenFrac - ypadFrac)) * gs.h +
319+
y = (1 - (vFrac + lenFrac - ypadFrac)) * gs.h +
321320
gs.t + 3 + fontSize * 0.75;
322321
} else {
323-
y = (1 - (yBottomFrac + ypadFrac)) * gs.h +
322+
y = (1 - (vFrac + ypadFrac)) * gs.h +
324323
gs.t - 3 - fontSize * 0.25;
325324
}
326325
drawTitle(ax._id + 'title', {
@@ -431,7 +430,7 @@ function drawColorBar(g, opts, gd) {
431430
// Colorbar cannot currently support opacities so we
432431
// use an opaque fill even when alpha channels present
433432
var fillEl = d3.select(this).attr({
434-
x: xLeft,
433+
x: uPx,
435434
width: Math.max(thickPx, 2),
436435
y: d3.min(z),
437436
height: Math.max(d3.max(z) - d3.min(z), 2),
@@ -455,15 +454,15 @@ function drawColorBar(g, opts, gd) {
455454
lines.exit().remove();
456455
lines.each(function(d) {
457456
d3.select(this)
458-
.attr('d', 'M' + xLeft + ',' +
457+
.attr('d', 'M' + uPx + ',' +
459458
(Math.round(ax.c2p(d)) + (line.width / 2) % 1) + 'h' + thickPx)
460459
.call(Drawing.lineGroupStyle, line.width, lineColormap(d), line.dash);
461460
});
462461

463462
// force full redraw of labels and ticks
464463
axLayer.selectAll('g.' + ax._id + 'tick,path').remove();
465464

466-
var shift = xLeft + thickPx +
465+
var shift = uPx + thickPx +
467466
(outlinewidth || 0) / 2 - (opts.ticks === 'outside' ? 1 : 0);
468467

469468
var vals = Axes.calcTicks(ax);
@@ -489,9 +488,9 @@ function drawColorBar(g, opts, gd) {
489488
// TODO: why are we redrawing multiple times now with this?
490489
// I guess autoMargin doesn't like being post-promise?
491490
function positionCB() {
492-
var innerWidth = thickPx + outlinewidth / 2;
491+
var innerThickness = thickPx + outlinewidth / 2;
493492
if(ax.ticklabelposition.indexOf('inside') === -1) {
494-
innerWidth += Drawing.bBox(axLayer.node()).width;
493+
innerThickness += Drawing.bBox(axLayer.node()).width;
495494
}
496495

497496
titleEl = titleCont.select('text');
@@ -506,29 +505,28 @@ function drawColorBar(g, opts, gd) {
506505
// (except for top/bottom mathjax, above)
507506
// but the weird gs.l is because the titleunshift
508507
// transform gets removed by Drawing.bBox
509-
titleWidth = Drawing.bBox(titleCont.node()).right - xLeft - gs.l;
508+
titleWidth = Drawing.bBox(titleCont.node()).right - uPx - gs.l;
510509
}
511-
innerWidth = Math.max(innerWidth, titleWidth);
510+
innerThickness = Math.max(innerThickness, titleWidth);
512511
}
513512

514-
var outerwidth = 2 * xpad + innerWidth + borderwidth + outlinewidth / 2;
515-
var outerheight = yBottomPx - yTopPx;
513+
var outerThickness = 2 * xpad + innerThickness + borderwidth + outlinewidth / 2;
516514

517515
g.select('.' + cn.cbbg).attr({
518-
x: xLeft - xpad - (borderwidth + outlinewidth) / 2,
519-
y: yTopPx - yExtraPx,
520-
width: Math.max(outerwidth, 2),
521-
height: Math.max(outerheight + 2 * yExtraPx, 2)
516+
x: uPx - xpad - (borderwidth + outlinewidth) / 2,
517+
y: vPx - lenPx - yExtraPx,
518+
width: Math.max(outerThickness, 2),
519+
height: Math.max(lenPx + 2 * yExtraPx, 2)
522520
})
523521
.call(Color.fill, opts.bgcolor)
524522
.call(Color.stroke, opts.bordercolor)
525523
.style('stroke-width', borderwidth);
526524

527525
g.selectAll('.' + cn.cboutline).attr({
528-
x: xLeft,
529-
y: yTopPx + ypad + (titleSide === 'top' ? titleHeight : 0),
526+
x: uPx,
527+
y: vPx - lenPx + ypad + (titleSide === 'top' ? titleHeight : 0),
530528
width: Math.max(thickPx, 2),
531-
height: Math.max(outerheight - 2 * ypad - titleHeight, 2)
529+
height: Math.max(lenPx - 2 * ypad - titleHeight, 2)
532530
})
533531
.call(Color.stroke, opts.outlinecolor)
534532
.style({
@@ -537,7 +535,7 @@ function drawColorBar(g, opts, gd) {
537535
});
538536

539537
// fix positioning for xanchor!='left'
540-
var xoffset = ({center: 0.5, right: 1}[xanchor] || 0) * outerwidth;
538+
var xoffset = ({center: 0.5, right: 1}[xanchor] || 0) * outerThickness;
541539
g.attr('transform', strTranslate(gs.l - xoffset, gs.t));
542540

543541
// auto margin adjustment
@@ -546,8 +544,8 @@ function drawColorBar(g, opts, gd) {
546544
var bFrac = FROM_BR[yanchor];
547545
if(lenmode === 'pixels') {
548546
marginOpts.y = optsY;
549-
marginOpts.t = outerheight * tFrac;
550-
marginOpts.b = outerheight * bFrac;
547+
marginOpts.t = lenPx * tFrac;
548+
marginOpts.b = lenPx * bFrac;
551549
} else {
552550
marginOpts.t = marginOpts.b = 0;
553551
marginOpts.yt = optsY + len * tFrac;
@@ -558,10 +556,10 @@ function drawColorBar(g, opts, gd) {
558556
var rFrac = FROM_BR[xanchor];
559557
if(thicknessmode === 'pixels') {
560558
marginOpts.x = optsX;
561-
marginOpts.l = outerwidth * lFrac;
562-
marginOpts.r = outerwidth * rFrac;
559+
marginOpts.l = outerThickness * lFrac;
560+
marginOpts.r = outerThickness * rFrac;
563561
} else {
564-
var extraThickness = outerwidth - thickPx;
562+
var extraThickness = outerThickness - thickPx;
565563
marginOpts.l = extraThickness * lFrac;
566564
marginOpts.r = extraThickness * rFrac;
567565
marginOpts.xl = optsX - thickness * lFrac;
@@ -596,9 +594,9 @@ function makeEditable(g, opts, gd) {
596594
moveFn: function(dx, dy) {
597595
g.attr('transform', t0 + strTranslate(dx, dy));
598596

599-
xf = dragElement.align(opts._xLeftFrac + (dx / gs.w), opts._thickFrac,
597+
xf = dragElement.align(opts._uFrac + (dx / gs.w), opts._thickFrac,
600598
0, 1, opts.xanchor);
601-
yf = dragElement.align(opts._yBottomFrac - (dy / gs.h), opts._lenFrac,
599+
yf = dragElement.align(opts._vFrac - (dy / gs.h), opts._lenFrac,
602600
0, 1, opts.yanchor);
603601

604602
var csr = dragElement.getCursor(xf, yf, opts.xanchor, opts.yanchor);

0 commit comments

Comments
 (0)