Skip to content

Commit c09fe29

Browse files
archmojarchmoj
authored
Merge pull request #5254 from plotly/lib-transform-funcs
Centralize transform functions
2 parents c638fd6 + 15c4fa0 commit c09fe29

File tree

34 files changed

+252
-207
lines changed

34 files changed

+252
-207
lines changed

‎src/components/annotations/draw.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ var d3 = require('d3');
1313
var Registry = require('../../registry');
1414
var Plots = require('../../plots/plots');
1515
var Lib = require('../../lib');
16+
var strTranslate = Lib.strTranslate;
1617
var Axes = require('../../plots/cartesian/axes');
1718
var Color = require('../color');
1819
var Drawing = require('../drawing');
@@ -583,7 +584,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
583584
.classed('cursor-move', true)
584585
.attr({
585586
d: 'M3,3H-3V-3H3ZM0,0L' + (tailX - arrowDragHeadX) + ',' + (tailY - arrowDragHeadY),
586-
transform: 'translate(' + arrowDragHeadX + ',' + arrowDragHeadY + ')'
587+
transform: strTranslate(arrowDragHeadX, arrowDragHeadY)
587588
})
588589
.style('stroke-width', (strokewidth + 6) + 'px')
589590
.call(Color.stroke, 'rgba(0,0,0,0)')
@@ -630,7 +631,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
630631
modifyItem('ay', shiftPosition(ya, dy, 'ay', gs, options));
631632
}
632633

633-
arrowGroup.attr('transform', 'translate(' + dx + ',' + dy + ')');
634+
arrowGroup.attr('transform', strTranslate(dx, dy));
634635
annTextGroup.attr({
635636
transform: 'rotate(' + textangle + ',' +
636637
xcenter + ',' + ycenter + ')'
@@ -715,7 +716,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
715716
} else return;
716717

717718
annTextGroup.attr({
718-
transform: 'translate(' + dx + ',' + dy + ')' + baseTextTransform
719+
transform: strTranslate(dx, dy) + baseTextTransform
719720
});
720721

721722
setCursor(annTextGroupInner, csr);

‎src/components/annotations/draw_arrow_head.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ var Color = require('../color');
1515

1616
var ARROWPATHS = require('./arrow_paths');
1717

18+
var Lib = require('../../lib');
19+
var strScale = Lib.strScale;
20+
var strRotate = Lib.strRotate;
21+
var strTranslate = Lib.strTranslate;
22+
1823
/**
1924
* Add arrowhead(s) to a path or line element
2025
*
@@ -134,9 +139,9 @@ module.exports = function drawArrowHead(el3, ends, options) {
134139
'class': el3.attr('class'),
135140
d: arrowHeadStyle.path,
136141
transform:
137-
'translate(' + p.x + ',' + p.y + ')' +
138-
(rot ? 'rotate(' + (rot * 180 / Math.PI) + ')' : '') +
139-
'scale(' + arrowScale + ')'
142+
strTranslate(p.x, p.y) +
143+
strRotate(rot * 180 / Math.PI) +
144+
strScale(arrowScale)
140145
})
141146
.style({
142147
fill: Color.rgb(options.arrowcolor),

‎src/components/colorbar/draw.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ var Registry = require('../../registry');
1616
var Axes = require('../../plots/cartesian/axes');
1717
var dragElement = require('../dragelement');
1818
var Lib = require('../../lib');
19+
var strTranslate = Lib.strTranslate;
1920
var extendFlat = require('../../lib/extend').extendFlat;
2021
var setCursor = require('../../lib/setcursor');
2122
var Drawing = require('../drawing');
@@ -270,10 +271,10 @@ function drawColorBar(g, opts, gd) {
270271

271272
ax.setScale();
272273

273-
g.attr('transform', 'translate(' + Math.round(gs.l) + ',' + Math.round(gs.t) + ')');
274+
g.attr('transform', strTranslate(Math.round(gs.l), Math.round(gs.t)));
274275

275276
var titleCont = g.select('.' + cn.cbtitleunshift)
276-
.attr('transform', 'translate(-' + Math.round(gs.l) + ',-' + Math.round(gs.t) + ')');
277+
.attr('transform', strTranslate(-Math.round(gs.l), -Math.round(gs.t)));
277278

278279
var axLayer = g.select('.' + cn.cbaxis);
279280
var titleEl;
@@ -385,15 +386,15 @@ function drawColorBar(g, opts, gd) {
385386
titleTrans[1] += (1 - nlines) * lineSize;
386387
}
387388

388-
titleGroup.attr('transform', 'translate(' + titleTrans + ')');
389+
titleGroup.attr('transform', strTranslate(titleTrans[0], titleTrans[1]));
389390
ax.setScale();
390391
}
391392
}
392393

393394
g.selectAll('.' + cn.cbfills + ',.' + cn.cblines)
394-
.attr('transform', 'translate(0,' + Math.round(gs.h * (1 - ax.domain[1])) + ')');
395+
.attr('transform', strTranslate(0, Math.round(gs.h * (1 - ax.domain[1]))));
395396

396-
axLayer.attr('transform', 'translate(0,' + Math.round(-gs.t) + ')');
397+
axLayer.attr('transform', strTranslate(0, Math.round(-gs.t)));
397398

398399
var fills = g.select('.' + cn.cbfills)
399400
.selectAll('rect.' + cn.cbfill)
@@ -529,7 +530,7 @@ function drawColorBar(g, opts, gd) {
529530

530531
// fix positioning for xanchor!='left'
531532
var xoffset = ({center: 0.5, right: 1}[opts.xanchor] || 0) * outerwidth;
532-
g.attr('transform', 'translate(' + (gs.l - xoffset) + ',' + gs.t + ')');
533+
g.attr('transform', strTranslate(gs.l - xoffset, gs.t));
533534

534535
// auto margin adjustment
535536
var marginOpts = {};
@@ -585,7 +586,7 @@ function makeEditable(g, opts, gd) {
585586
setCursor(g);
586587
},
587588
moveFn: function(dx, dy) {
588-
g.attr('transform', t0 + ' ' + 'translate(' + dx + ',' + dy + ')');
589+
g.attr('transform', t0 + strTranslate(dx, dy));
589590

590591
xf = dragElement.align(opts._xLeftFrac + (dx / gs.w), opts._thickFrac,
591592
0, 1, opts.xanchor);

‎src/components/drawing/index.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ var Registry = require('../../registry');
1717
var Color = require('../color');
1818
var Colorscale = require('../colorscale');
1919
var Lib = require('../../lib');
20+
var strTranslate = Lib.strTranslate;
2021
var svgTextUtils = require('../../lib/svg_text_utils');
2122

2223
var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
@@ -78,7 +79,7 @@ drawing.translatePoint = function(d, sel, xa, ya) {
7879
if(sel.node().nodeName === 'text') {
7980
sel.attr('x', x).attr('y', y);
8081
} else {
81-
sel.attr('transform', 'translate(' + x + ',' + y + ')');
82+
sel.attr('transform', strTranslate(x, y));
8283
}
8384
} else {
8485
return false;
@@ -704,7 +705,7 @@ function textPointPosition(s, textPosition, fontSize, markerRadius) {
704705

705706
// fix the overall text group position
706707
s.attr('text-anchor', h);
707-
group.attr('transform', 'translate(' + dx + ',' + dy + ')');
708+
group.attr('transform', strTranslate(dx, dy));
708709
}
709710

710711
function extracTextFontSize(d, trace) {
@@ -1095,7 +1096,7 @@ drawing.setTranslate = function(element, x, y) {
10951096
y = y || 0;
10961097

10971098
transform = transform.replace(re, '').trim();
1098-
transform += ' translate(' + x + ', ' + y + ')';
1099+
transform += strTranslate(x, y);
10991100
transform = transform.trim();
11001101

11011102
element[setter]('transform', transform);
@@ -1129,7 +1130,7 @@ drawing.setScale = function(element, x, y) {
11291130
y = y || 1;
11301131

11311132
transform = transform.replace(re, '').trim();
1132-
transform += ' scale(' + x + ', ' + y + ')';
1133+
transform += 'scale(' + x + ',' + y + ')';
11331134
transform = transform.trim();
11341135

11351136
element[setter]('transform', transform);
@@ -1148,7 +1149,7 @@ drawing.setPointGroupScale = function(selection, xScale, yScale) {
11481149
// The same scale transform for every point:
11491150
var scale = (xScale === 1 && yScale === 1) ?
11501151
'' :
1151-
' scale(' + xScale + ',' + yScale + ')';
1152+
'scale(' + xScale + ',' + yScale + ')';
11521153

11531154
selection.each(function() {
11541155
var t = (this.getAttribute('transform') || '').replace(SCALE_RE, '');
@@ -1179,16 +1180,16 @@ drawing.setTextPointsScale = function(selection, xScale, yScale) {
11791180
transforms = [];
11801181
} else {
11811182
transforms = [
1182-
'translate(' + x + ',' + y + ')',
1183+
strTranslate(x, y),
11831184
'scale(' + xScale + ',' + yScale + ')',
1184-
'translate(' + (-x) + ',' + (-y) + ')',
1185+
strTranslate(-x, -y),
11851186
];
11861187
}
11871188

11881189
if(existingTransform) {
11891190
transforms.push(existingTransform);
11901191
}
11911192

1192-
el.attr('transform', transforms.join(' '));
1193+
el.attr('transform', transforms.join(''));
11931194
});
11941195
};

‎src/components/fx/hover.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ var isNumeric = require('fast-isnumeric');
1313
var tinycolor = require('tinycolor2');
1414

1515
var Lib = require('../../lib');
16+
var strTranslate = Lib.strTranslate;
17+
var strRotate = Lib.strRotate;
1618
var Events = require('../../lib/events');
1719
var svgTextUtils = require('../../lib/svg_text_utils');
1820
var overrideCursor = require('../../lib/override_cursor');
@@ -960,7 +962,7 @@ function createHoverText(hoverData, opts, gd) {
960962
Drawing.setClipUrl(ltext, clipPath ? clipId : null, gd);
961963
}
962964

963-
label.attr('transform', 'translate(' + lx + ',' + ly + ')');
965+
label.attr('transform', strTranslate(lx, ly));
964966

965967
// remove the "close but not quite" points
966968
// because of error bars, only take up to a space
@@ -1068,7 +1070,7 @@ function createHoverText(hoverData, opts, gd) {
10681070
ly = outerHeight - txHeight;
10691071
}
10701072
}
1071-
legendContainer.attr('transform', 'translate(' + lx + ',' + ly + ')');
1073+
legendContainer.attr('transform', strTranslate(lx, ly));
10721074

10731075
return legendContainer;
10741076
}
@@ -1217,8 +1219,8 @@ function createHoverText(hoverData, opts, gd) {
12171219

12181220
tx.attr('text-anchor', d.anchor);
12191221
if(tx2width) tx2.attr('text-anchor', d.anchor);
1220-
g.attr('transform', 'translate(' + htx + ',' + hty + ')' +
1221-
(rotateLabels ? 'rotate(' + YANGLE + ')' : ''));
1222+
g.attr('transform', strTranslate(htx, hty) +
1223+
(rotateLabels ? strRotate(YANGLE) : ''));
12221224
});
12231225

12241226
return hoverLabels;

‎src/components/legend/style.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ var d3 = require('d3');
1212

1313
var Registry = require('../../registry');
1414
var Lib = require('../../lib');
15+
var strTranslate = Lib.strTranslate;
1516
var Drawing = require('../drawing');
1617
var Color = require('../color');
1718
var extractOpts = require('../colorscale/helpers').extractOpts;
@@ -34,7 +35,7 @@ module.exports = function style(s, gd, legend) {
3435
var constantItemSizing = legend.itemsizing === 'constant';
3536
var itemWidth = legend.itemwidth;
3637
var centerPos = (itemWidth + constants.itemGap * 2) / 2;
37-
var centerTransform = 'translate(' + centerPos + ',0)';
38+
var centerTransform = strTranslate(centerPos, 0);
3839

3940
var boundLineWidth = function(mlw, cont, max, cst) {
4041
var v;
@@ -63,7 +64,7 @@ module.exports = function style(s, gd, legend) {
6364
} else {
6465
var factor = {top: 1, bottom: -1}[valign];
6566
var markerOffsetY = factor * (0.5 * (lineHeight - height + 3));
66-
layers.attr('transform', 'translate(0,' + markerOffsetY + ')');
67+
layers.attr('transform', strTranslate(0, markerOffsetY));
6768
}
6869

6970
var fill = layers

‎src/components/rangeselector/draw.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ var Plots = require('../../plots/plots');
1515
var Color = require('../color');
1616
var Drawing = require('../drawing');
1717
var Lib = require('../../lib');
18+
var strTranslate = Lib.strTranslate;
1819
var svgTextUtils = require('../../lib/svg_text_utils');
1920
var axisIds = require('../../plots/cartesian/axis_ids');
2021

@@ -195,9 +196,7 @@ function reposition(gd, buttons, opts, axName, selector) {
195196

196197
// TODO add buttongap attribute
197198

198-
button.attr('transform', 'translate(' +
199-
(borderWidth + width) + ',' + borderWidth +
200-
')');
199+
button.attr('transform', strTranslate(borderWidth + width, borderWidth));
201200

202201
rect.attr({
203202
x: 0,
@@ -250,5 +249,5 @@ function reposition(gd, buttons, opts, axName, selector) {
250249
t: height * FROM_TL[yanchor]
251250
});
252251

253-
selector.attr('transform', 'translate(' + lx + ',' + ly + ')');
252+
selector.attr('transform', strTranslate(lx, ly));
254253
}

‎src/components/rangeslider/draw.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ var Registry = require('../../registry');
1414
var Plots = require('../../plots/plots');
1515

1616
var Lib = require('../../lib');
17+
var strTranslate = Lib.strTranslate;
1718
var Drawing = require('../drawing');
1819
var Color = require('../color');
1920
var Titles = require('../titles');
@@ -119,7 +120,7 @@ module.exports = function(gd) {
119120
opts._offsetShift + constants.extraPad
120121
);
121122

122-
rangeSlider.attr('transform', 'translate(' + x + ',' + y + ')');
123+
rangeSlider.attr('transform', strTranslate(x, y));
123124

124125
// update data <--> pixel coordinate conversion methods
125126

@@ -380,10 +381,10 @@ function setPixelRange(rangeSlider, gd, axisOpts, opts, oppAxisOpts, oppAxisRang
380381
var xMax = Math.round(clampHandle(pixelMax - hw2)) + offset;
381382

382383
rangeSlider.select('g.' + constants.grabberMinClassName)
383-
.attr('transform', 'translate(' + xMin + ',' + offset + ')');
384+
.attr('transform', strTranslate(xMin, offset));
384385

385386
rangeSlider.select('g.' + constants.grabberMaxClassName)
386-
.attr('transform', 'translate(' + xMax + ',' + offset + ')');
387+
.attr('transform', strTranslate(xMax, offset));
387388
}
388389

389390
function drawBg(rangeSlider, gd, axisOpts, opts) {
@@ -405,7 +406,7 @@ function drawBg(rangeSlider, gd, axisOpts, opts) {
405406
bg.attr({
406407
width: opts._width + borderCorrect,
407408
height: opts._height + borderCorrect,
408-
transform: 'translate(' + offsetShift + ',' + offsetShift + ')',
409+
transform: strTranslate(offsetShift, offsetShift),
409410
fill: opts.bgcolor,
410411
stroke: opts.bordercolor,
411412
'stroke-width': lw

‎src/components/sliders/draw.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ var Plots = require('../../plots/plots');
1414
var Color = require('../color');
1515
var Drawing = require('../drawing');
1616
var Lib = require('../../lib');
17+
var strTranslate = Lib.strTranslate;
1718
var svgTextUtils = require('../../lib/svg_text_utils');
1819
var arrayEditor = require('../../plot_api/plot_template').arrayEditor;
1920

@@ -572,7 +573,7 @@ function setGripPosition(sliderGroup, sliderOpts, doTransition) {
572573

573574
// Drawing.setTranslate doesn't work here becasue of the transition duck-typing.
574575
// It's also not necessary because there are no other transitions to preserve.
575-
el.attr('transform', 'translate(' + (x - constants.gripWidth * 0.5) + ',' + (sliderOpts._dims.currentValueTotalHeight) + ')');
576+
el.attr('transform', strTranslate(x - constants.gripWidth * 0.5, sliderOpts._dims.currentValueTotalHeight));
576577
}
577578

578579
// Convert a number from [0-1] to a pixel position relative to the slider group container:

‎src/components/titles/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ var isNumeric = require('fast-isnumeric');
1515
var Plots = require('../../plots/plots');
1616
var Registry = require('../../registry');
1717
var Lib = require('../../lib');
18+
var strTranslate = Lib.strTranslate;
1819
var Drawing = require('../drawing');
1920
var Color = require('../color');
2021
var svgTextUtils = require('../../lib/svg_text_utils');
@@ -135,7 +136,7 @@ function draw(gd, titleClass, options) {
135136
transformVal += 'rotate(' + [transform.rotate, attributes.x, attributes.y] + ')';
136137
}
137138
if(transform.offset) {
138-
transformVal += 'translate(0, ' + transform.offset + ')';
139+
transformVal += strTranslate(0, transform.offset);
139140
}
140141
} else {
141142
transformVal = null;
@@ -213,7 +214,7 @@ function draw(gd, titleClass, options) {
213214
top: [0, -shift],
214215
bottom: [0, shift]
215216
}[avoid.side];
216-
titleGroup.attr('transform', 'translate(' + shiftTemplate + ')');
217+
titleGroup.attr('transform', strTranslate(shiftTemplate[0], shiftTemplate[1]));
217218
}
218219
}
219220
}

‎src/lib/index.js

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1195,6 +1195,18 @@ lib.isHidden = function(gd) {
11951195
return !display || display === 'none';
11961196
};
11971197

1198+
lib.strTranslate = function(x, y) {
1199+
return (x || y) ? 'translate(' + x + ',' + y + ')' : '';
1200+
};
1201+
1202+
lib.strRotate = function(a) {
1203+
return a ? 'rotate(' + a + ')' : '';
1204+
};
1205+
1206+
lib.strScale = function(s) {
1207+
return s !== 1 ? 'scale(' + s + ')' : '';
1208+
};
1209+
11981210
/** Return transform text for bar bar-like rectangles and pie-like slices
11991211
* @param {object} transform
12001212
* - targetX: desired position on the x-axis
@@ -1221,13 +1233,11 @@ lib.getTextTransform = function(transform) {
12211233
else if(scale > 1) scale = 1;
12221234

12231235
return (
1224-
'translate(' +
1225-
(targetX - scale * (textX + anchorX)) + ',' +
1226-
(targetY - scale * (textY + anchorY)) +
1227-
')' +
1228-
(scale < 1 ?
1229-
'scale(' + scale + ')' : ''
1236+
lib.strTranslate(
1237+
targetX - scale * (textX + anchorX),
1238+
targetY - scale * (textY + anchorY)
12301239
) +
1240+
lib.strScale(scale) +
12311241
(rotate ?
12321242
'rotate(' + rotate +
12331243
(noCenter ? '' : ' ' + textX + ' ' + textY) +

0 commit comments

Comments
 (0)