Skip to content

Centralize transform functions #5254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 5, 2020
Merged

Centralize transform functions #5254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
89666f8
centralize functions for adding 2d translate, uniform scale and simpl…
archmoj Nov 5, 2020
15c4fa0
remove unused condition check
archmoj Nov 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/components/annotations/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ var d3 = require('d3');
var Registry = require('../../registry');
var Plots = require('../../plots/plots');
var Lib = require('../../lib');
var strTranslate = Lib.strTranslate;
var Axes = require('../../plots/cartesian/axes');
var Color = require('../color');
var Drawing = require('../drawing');
Expand Down Expand Up @@ -583,7 +584,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
.classed('cursor-move', true)
.attr({
d: 'M3,3H-3V-3H3ZM0,0L' + (tailX - arrowDragHeadX) + ',' + (tailY - arrowDragHeadY),
transform: 'translate(' + arrowDragHeadX + ',' + arrowDragHeadY + ')'
transform: strTranslate(arrowDragHeadX, arrowDragHeadY)
})
.style('stroke-width', (strokewidth + 6) + 'px')
.call(Color.stroke, 'rgba(0,0,0,0)')
Expand Down Expand Up @@ -630,7 +631,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
modifyItem('ay', shiftPosition(ya, dy, 'ay', gs, options));
}

arrowGroup.attr('transform', 'translate(' + dx + ',' + dy + ')');
arrowGroup.attr('transform', strTranslate(dx, dy));
annTextGroup.attr({
transform: 'rotate(' + textangle + ',' +
xcenter + ',' + ycenter + ')'
Expand Down Expand Up @@ -715,7 +716,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
} else return;

annTextGroup.attr({
transform: 'translate(' + dx + ',' + dy + ')' + baseTextTransform
transform: strTranslate(dx, dy) + baseTextTransform
});

setCursor(annTextGroupInner, csr);
Expand Down
11 changes: 8 additions & 3 deletions src/components/annotations/draw_arrow_head.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ var Color = require('../color');

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

var Lib = require('../../lib');
var strScale = Lib.strScale;
var strRotate = Lib.strRotate;
var strTranslate = Lib.strTranslate;

/**
* Add arrowhead(s) to a path or line element
*
Expand Down Expand Up @@ -134,9 +139,9 @@ module.exports = function drawArrowHead(el3, ends, options) {
'class': el3.attr('class'),
d: arrowHeadStyle.path,
transform:
'translate(' + p.x + ',' + p.y + ')' +
(rot ? 'rotate(' + (rot * 180 / Math.PI) + ')' : '') +
'scale(' + arrowScale + ')'
strTranslate(p.x, p.y) +
strRotate(rot * 180 / Math.PI) +
strScale(arrowScale)
})
.style({
fill: Color.rgb(options.arrowcolor),
Expand Down
15 changes: 8 additions & 7 deletions src/components/colorbar/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ var Registry = require('../../registry');
var Axes = require('../../plots/cartesian/axes');
var dragElement = require('../dragelement');
var Lib = require('../../lib');
var strTranslate = Lib.strTranslate;
var extendFlat = require('../../lib/extend').extendFlat;
var setCursor = require('../../lib/setcursor');
var Drawing = require('../drawing');
Expand Down Expand Up @@ -270,10 +271,10 @@ function drawColorBar(g, opts, gd) {

ax.setScale();

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

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

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

titleGroup.attr('transform', 'translate(' + titleTrans + ')');
titleGroup.attr('transform', strTranslate(titleTrans[0], titleTrans[1]));
ax.setScale();
}
}

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

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

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

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

// auto margin adjustment
var marginOpts = {};
Expand Down Expand Up @@ -585,7 +586,7 @@ function makeEditable(g, opts, gd) {
setCursor(g);
},
moveFn: function(dx, dy) {
g.attr('transform', t0 + ' ' + 'translate(' + dx + ',' + dy + ')');
g.attr('transform', t0 + strTranslate(dx, dy));

xf = dragElement.align(opts._xLeftFrac + (dx / gs.w), opts._thickFrac,
0, 1, opts.xanchor);
Expand Down
17 changes: 9 additions & 8 deletions src/components/drawing/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ var Registry = require('../../registry');
var Color = require('../color');
var Colorscale = require('../colorscale');
var Lib = require('../../lib');
var strTranslate = Lib.strTranslate;
var svgTextUtils = require('../../lib/svg_text_utils');

var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
Expand Down Expand Up @@ -78,7 +79,7 @@ drawing.translatePoint = function(d, sel, xa, ya) {
if(sel.node().nodeName === 'text') {
sel.attr('x', x).attr('y', y);
} else {
sel.attr('transform', 'translate(' + x + ',' + y + ')');
sel.attr('transform', strTranslate(x, y));
}
} else {
return false;
Expand Down Expand Up @@ -704,7 +705,7 @@ function textPointPosition(s, textPosition, fontSize, markerRadius) {

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

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

transform = transform.replace(re, '').trim();
transform += ' translate(' + x + ', ' + y + ')';
transform += strTranslate(x, y);
transform = transform.trim();

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

transform = transform.replace(re, '').trim();
transform += ' scale(' + x + ', ' + y + ')';
transform += 'scale(' + x + ',' + y + ')';
transform = transform.trim();

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

selection.each(function() {
var t = (this.getAttribute('transform') || '').replace(SCALE_RE, '');
Expand Down Expand Up @@ -1179,16 +1180,16 @@ drawing.setTextPointsScale = function(selection, xScale, yScale) {
transforms = [];
} else {
transforms = [
'translate(' + x + ',' + y + ')',
strTranslate(x, y),
'scale(' + xScale + ',' + yScale + ')',
'translate(' + (-x) + ',' + (-y) + ')',
strTranslate(-x, -y),
];
}

if(existingTransform) {
transforms.push(existingTransform);
}

el.attr('transform', transforms.join(' '));
el.attr('transform', transforms.join(''));
});
};
10 changes: 6 additions & 4 deletions src/components/fx/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ var isNumeric = require('fast-isnumeric');
var tinycolor = require('tinycolor2');

var Lib = require('../../lib');
var strTranslate = Lib.strTranslate;
var strRotate = Lib.strRotate;
var Events = require('../../lib/events');
var svgTextUtils = require('../../lib/svg_text_utils');
var overrideCursor = require('../../lib/override_cursor');
Expand Down Expand Up @@ -960,7 +962,7 @@ function createHoverText(hoverData, opts, gd) {
Drawing.setClipUrl(ltext, clipPath ? clipId : null, gd);
}

label.attr('transform', 'translate(' + lx + ',' + ly + ')');
label.attr('transform', strTranslate(lx, ly));

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

return legendContainer;
}
Expand Down Expand Up @@ -1217,8 +1219,8 @@ function createHoverText(hoverData, opts, gd) {

tx.attr('text-anchor', d.anchor);
if(tx2width) tx2.attr('text-anchor', d.anchor);
g.attr('transform', 'translate(' + htx + ',' + hty + ')' +
(rotateLabels ? 'rotate(' + YANGLE + ')' : ''));
g.attr('transform', strTranslate(htx, hty) +
(rotateLabels ? strRotate(YANGLE) : ''));
});

return hoverLabels;
Expand Down
5 changes: 3 additions & 2 deletions src/components/legend/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ var d3 = require('d3');

var Registry = require('../../registry');
var Lib = require('../../lib');
var strTranslate = Lib.strTranslate;
var Drawing = require('../drawing');
var Color = require('../color');
var extractOpts = require('../colorscale/helpers').extractOpts;
Expand All @@ -34,7 +35,7 @@ module.exports = function style(s, gd, legend) {
var constantItemSizing = legend.itemsizing === 'constant';
var itemWidth = legend.itemwidth;
var centerPos = (itemWidth + constants.itemGap * 2) / 2;
var centerTransform = 'translate(' + centerPos + ',0)';
var centerTransform = strTranslate(centerPos, 0);

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

var fill = layers
Expand Down
7 changes: 3 additions & 4 deletions src/components/rangeselector/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ var Plots = require('../../plots/plots');
var Color = require('../color');
var Drawing = require('../drawing');
var Lib = require('../../lib');
var strTranslate = Lib.strTranslate;
var svgTextUtils = require('../../lib/svg_text_utils');
var axisIds = require('../../plots/cartesian/axis_ids');

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

// TODO add buttongap attribute

button.attr('transform', 'translate(' +
(borderWidth + width) + ',' + borderWidth +
')');
button.attr('transform', strTranslate(borderWidth + width, borderWidth));

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

selector.attr('transform', 'translate(' + lx + ',' + ly + ')');
selector.attr('transform', strTranslate(lx, ly));
}
9 changes: 5 additions & 4 deletions src/components/rangeslider/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ var Registry = require('../../registry');
var Plots = require('../../plots/plots');

var Lib = require('../../lib');
var strTranslate = Lib.strTranslate;
var Drawing = require('../drawing');
var Color = require('../color');
var Titles = require('../titles');
Expand Down Expand Up @@ -119,7 +120,7 @@ module.exports = function(gd) {
opts._offsetShift + constants.extraPad
);

rangeSlider.attr('transform', 'translate(' + x + ',' + y + ')');
rangeSlider.attr('transform', strTranslate(x, y));

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

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

rangeSlider.select('g.' + constants.grabberMinClassName)
.attr('transform', 'translate(' + xMin + ',' + offset + ')');
.attr('transform', strTranslate(xMin, offset));

rangeSlider.select('g.' + constants.grabberMaxClassName)
.attr('transform', 'translate(' + xMax + ',' + offset + ')');
.attr('transform', strTranslate(xMax, offset));
}

function drawBg(rangeSlider, gd, axisOpts, opts) {
Expand All @@ -405,7 +406,7 @@ function drawBg(rangeSlider, gd, axisOpts, opts) {
bg.attr({
width: opts._width + borderCorrect,
height: opts._height + borderCorrect,
transform: 'translate(' + offsetShift + ',' + offsetShift + ')',
transform: strTranslate(offsetShift, offsetShift),
fill: opts.bgcolor,
stroke: opts.bordercolor,
'stroke-width': lw
Expand Down
3 changes: 2 additions & 1 deletion src/components/sliders/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ var Plots = require('../../plots/plots');
var Color = require('../color');
var Drawing = require('../drawing');
var Lib = require('../../lib');
var strTranslate = Lib.strTranslate;
var svgTextUtils = require('../../lib/svg_text_utils');
var arrayEditor = require('../../plot_api/plot_template').arrayEditor;

Expand Down Expand Up @@ -572,7 +573,7 @@ function setGripPosition(sliderGroup, sliderOpts, doTransition) {

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

// Convert a number from [0-1] to a pixel position relative to the slider group container:
Expand Down
5 changes: 3 additions & 2 deletions src/components/titles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ var isNumeric = require('fast-isnumeric');
var Plots = require('../../plots/plots');
var Registry = require('../../registry');
var Lib = require('../../lib');
var strTranslate = Lib.strTranslate;
var Drawing = require('../drawing');
var Color = require('../color');
var svgTextUtils = require('../../lib/svg_text_utils');
Expand Down Expand Up @@ -135,7 +136,7 @@ function draw(gd, titleClass, options) {
transformVal += 'rotate(' + [transform.rotate, attributes.x, attributes.y] + ')';
}
if(transform.offset) {
transformVal += 'translate(0, ' + transform.offset + ')';
transformVal += strTranslate(0, transform.offset);
}
} else {
transformVal = null;
Expand Down Expand Up @@ -213,7 +214,7 @@ function draw(gd, titleClass, options) {
top: [0, -shift],
bottom: [0, shift]
}[avoid.side];
titleGroup.attr('transform', 'translate(' + shiftTemplate + ')');
titleGroup.attr('transform', strTranslate(shiftTemplate[0], shiftTemplate[1]));
}
}
}
Expand Down
22 changes: 16 additions & 6 deletions src/lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1195,6 +1195,18 @@ lib.isHidden = function(gd) {
return !display || display === 'none';
};

lib.strTranslate = function(x, y) {
return (x || y) ? 'translate(' + x + ',' + y + ')' : '';
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be able to simplify even more with an optional 3rd argument which is the number of digits to round to - would remove the Math.round and toFixed you have in a few places.


lib.strRotate = function(a) {
return a ? 'rotate(' + a + ')' : '';
};

lib.strScale = function(s) {
return s !== 1 ? 'scale(' + s + ')' : '';
};

/** Return transform text for bar bar-like rectangles and pie-like slices
* @param {object} transform
* - targetX: desired position on the x-axis
Expand All @@ -1221,13 +1233,11 @@ lib.getTextTransform = function(transform) {
else if(scale > 1) scale = 1;

return (
'translate(' +
(targetX - scale * (textX + anchorX)) + ',' +
(targetY - scale * (textY + anchorY)) +
')' +
(scale < 1 ?
'scale(' + scale + ')' : ''
lib.strTranslate(
targetX - scale * (textX + anchorX),
targetY - scale * (textY + anchorY)
) +
lib.strScale(scale) +
(rotate ?
'rotate(' + rotate +
(noCenter ? '' : ' ' + textX + ' ' + textY) +
Expand Down
Loading