Skip to content

Commit 5c8fcf7

Browse files
archmojarchmoj
authored
Merge pull request #6018 from plotly/refactor-drawColorBar-opts
store options in variables within drawColorBar
2 parents 6ba114a + 811965f commit 5c8fcf7

File tree

1 file changed

+46
-33
lines changed

1 file changed

+46
-33
lines changed

‎src/components/colorbar/draw.js

+46-33
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,19 @@ function makeColorBarData(gd) {
167167
}
168168

169169
function drawColorBar(g, opts, gd) {
170+
var len = opts.len;
171+
var lenmode = opts.lenmode;
172+
var thickness = opts.thickness;
173+
var thicknessmode = opts.thicknessmode;
174+
var outlinewidth = opts.outlinewidth;
175+
var borderwidth = opts.borderwidth;
176+
var xanchor = opts.xanchor;
177+
var yanchor = opts.yanchor;
178+
var xpad = opts.xpad;
179+
var ypad = opts.ypad;
180+
var optsX = opts.x;
181+
var optsY = opts.y;
182+
170183
var fullLayout = gd._fullLayout;
171184
var gs = fullLayout._size;
172185

@@ -196,22 +209,22 @@ function drawColorBar(g, opts, gd) {
196209
// when the colorbar itself is pushing the margins.
197210
// but then the fractional size is calculated based on the
198211
// actual graph size, so that the axes will size correctly.
199-
var thickPx = Math.round(opts.thickness * (opts.thicknessmode === 'fraction' ? gs.w : 1));
212+
var thickPx = Math.round(thickness * (thicknessmode === 'fraction' ? gs.w : 1));
200213
var thickFrac = thickPx / gs.w;
201-
var lenPx = Math.round(opts.len * (opts.lenmode === 'fraction' ? gs.h : 1));
214+
var lenPx = Math.round(len * (lenmode === 'fraction' ? gs.h : 1));
202215
var lenFrac = lenPx / gs.h;
203-
var xpadFrac = opts.xpad / gs.w;
204-
var yExtraPx = (opts.borderwidth + opts.outlinewidth) / 2;
205-
var ypadFrac = opts.ypad / gs.h;
216+
var xpadFrac = xpad / gs.w;
217+
var yExtraPx = (borderwidth + outlinewidth) / 2;
218+
var ypadFrac = ypad / gs.h;
206219

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

213226
// y positioning we can do correctly from the start
214-
var yBottomFrac = opts.y + lenFrac * (({top: -0.5, bottom: 0.5}[opts.yanchor] || 0) - 0.5);
227+
var yBottomFrac = optsY + lenFrac * (({top: -0.5, bottom: 0.5}[yanchor] || 0) - 0.5);
215228
var yBottomPx = Math.round(gs.h * (1 - yBottomFrac));
216229
var yTopPx = yBottomPx - lenPx;
217230

@@ -226,11 +239,11 @@ function drawColorBar(g, opts, gd) {
226239

227240
// position can't go in through supplyDefaults
228241
// because that restricts it to [0,1]
229-
ax.position = opts.x + xpadFrac + thickFrac;
242+
ax.position = optsX + xpadFrac + thickFrac;
230243

231244
if(['top', 'bottom'].indexOf(titleSide) !== -1) {
232245
ax.title.side = titleSide;
233-
ax.titlex = opts.x + xpadFrac;
246+
ax.titlex = optsX + xpadFrac;
234247
ax.titley = yBottomFrac + (title.side === 'top' ? lenFrac - ypadFrac : ypadFrac);
235248
}
236249

@@ -299,7 +312,7 @@ function drawColorBar(g, opts, gd) {
299312
// draw the title so we know how much room it needs
300313
// when we squish the axis. This one only applies to
301314
// top or bottom titles, not right side.
302-
var x = gs.l + (opts.x + xpadFrac) * gs.w;
315+
var x = gs.l + (optsX + xpadFrac) * gs.w;
303316
var fontSize = ax.title.font.size;
304317
var y;
305318

@@ -346,7 +359,7 @@ function drawColorBar(g, opts, gd) {
346359
// squish the axis top to make room for the title
347360
var titleGroup = g.select('.' + cn.cbtitle);
348361
var titleText = titleGroup.select('text');
349-
var titleTrans = [-opts.outlinewidth / 2, opts.outlinewidth / 2];
362+
var titleTrans = [-outlinewidth / 2, outlinewidth / 2];
350363
var mathJaxNode = titleGroup
351364
.select('.h' + ax._id + 'title-math-group')
352365
.node();
@@ -451,7 +464,7 @@ function drawColorBar(g, opts, gd) {
451464
axLayer.selectAll('g.' + ax._id + 'tick,path').remove();
452465

453466
var shift = xLeft + thickPx +
454-
(opts.outlinewidth || 0) / 2 - (opts.ticks === 'outside' ? 1 : 0);
467+
(outlinewidth || 0) / 2 - (opts.ticks === 'outside' ? 1 : 0);
455468

456469
var vals = Axes.calcTicks(ax);
457470
var tickSign = Axes.getTickSigns(ax)[2];
@@ -476,7 +489,7 @@ function drawColorBar(g, opts, gd) {
476489
// TODO: why are we redrawing multiple times now with this?
477490
// I guess autoMargin doesn't like being post-promise?
478491
function positionCB() {
479-
var innerWidth = thickPx + opts.outlinewidth / 2;
492+
var innerWidth = thickPx + outlinewidth / 2;
480493
if(ax.ticklabelposition.indexOf('inside') === -1) {
481494
innerWidth += Drawing.bBox(axLayer.node()).width;
482495
}
@@ -498,61 +511,61 @@ function drawColorBar(g, opts, gd) {
498511
innerWidth = Math.max(innerWidth, titleWidth);
499512
}
500513

501-
var outerwidth = 2 * opts.xpad + innerWidth + opts.borderwidth + opts.outlinewidth / 2;
514+
var outerwidth = 2 * xpad + innerWidth + borderwidth + outlinewidth / 2;
502515
var outerheight = yBottomPx - yTopPx;
503516

504517
g.select('.' + cn.cbbg).attr({
505-
x: xLeft - opts.xpad - (opts.borderwidth + opts.outlinewidth) / 2,
518+
x: xLeft - xpad - (borderwidth + outlinewidth) / 2,
506519
y: yTopPx - yExtraPx,
507520
width: Math.max(outerwidth, 2),
508521
height: Math.max(outerheight + 2 * yExtraPx, 2)
509522
})
510523
.call(Color.fill, opts.bgcolor)
511524
.call(Color.stroke, opts.bordercolor)
512-
.style('stroke-width', opts.borderwidth);
525+
.style('stroke-width', borderwidth);
513526

514527
g.selectAll('.' + cn.cboutline).attr({
515528
x: xLeft,
516-
y: yTopPx + opts.ypad + (titleSide === 'top' ? titleHeight : 0),
529+
y: yTopPx + ypad + (titleSide === 'top' ? titleHeight : 0),
517530
width: Math.max(thickPx, 2),
518-
height: Math.max(outerheight - 2 * opts.ypad - titleHeight, 2)
531+
height: Math.max(outerheight - 2 * ypad - titleHeight, 2)
519532
})
520533
.call(Color.stroke, opts.outlinecolor)
521534
.style({
522535
fill: 'none',
523-
'stroke-width': opts.outlinewidth
536+
'stroke-width': outlinewidth
524537
});
525538

526539
// fix positioning for xanchor!='left'
527-
var xoffset = ({center: 0.5, right: 1}[opts.xanchor] || 0) * outerwidth;
540+
var xoffset = ({center: 0.5, right: 1}[xanchor] || 0) * outerwidth;
528541
g.attr('transform', strTranslate(gs.l - xoffset, gs.t));
529542

530543
// auto margin adjustment
531544
var marginOpts = {};
532-
var tFrac = FROM_TL[opts.yanchor];
533-
var bFrac = FROM_BR[opts.yanchor];
534-
if(opts.lenmode === 'pixels') {
535-
marginOpts.y = opts.y;
545+
var tFrac = FROM_TL[yanchor];
546+
var bFrac = FROM_BR[yanchor];
547+
if(lenmode === 'pixels') {
548+
marginOpts.y = optsY;
536549
marginOpts.t = outerheight * tFrac;
537550
marginOpts.b = outerheight * bFrac;
538551
} else {
539552
marginOpts.t = marginOpts.b = 0;
540-
marginOpts.yt = opts.y + opts.len * tFrac;
541-
marginOpts.yb = opts.y - opts.len * bFrac;
553+
marginOpts.yt = optsY + len * tFrac;
554+
marginOpts.yb = optsY - len * bFrac;
542555
}
543556

544-
var lFrac = FROM_TL[opts.xanchor];
545-
var rFrac = FROM_BR[opts.xanchor];
546-
if(opts.thicknessmode === 'pixels') {
547-
marginOpts.x = opts.x;
557+
var lFrac = FROM_TL[xanchor];
558+
var rFrac = FROM_BR[xanchor];
559+
if(thicknessmode === 'pixels') {
560+
marginOpts.x = optsX;
548561
marginOpts.l = outerwidth * lFrac;
549562
marginOpts.r = outerwidth * rFrac;
550563
} else {
551564
var extraThickness = outerwidth - thickPx;
552565
marginOpts.l = extraThickness * lFrac;
553566
marginOpts.r = extraThickness * rFrac;
554-
marginOpts.xl = opts.x - opts.thickness * lFrac;
555-
marginOpts.xr = opts.x + opts.thickness * rFrac;
567+
marginOpts.xl = optsX - thickness * lFrac;
568+
marginOpts.xr = optsX + thickness * rFrac;
556569
}
557570

558571
Plots.autoMargin(gd, opts._id, marginOpts);

0 commit comments

Comments
 (0)