Optimizing spaceHorizontall and spaceVertically methods
Each method was transforming each item twice, and I found that Snap appears to generate at least one timer per transform. Reducing it to one transform per item.
This commit is contained in:
parent
d918f956ef
commit
0fdd210741
@ -36,34 +36,32 @@ function normalizeBBox(box) {
|
|||||||
// - __items__ - Array of items to be positioned
|
// - __items__ - Array of items to be positioned
|
||||||
// - __options.padding__ - Number of pixels to leave between items
|
// - __options.padding__ - Number of pixels to leave between items
|
||||||
function spaceHorizontally(items, options) {
|
function spaceHorizontally(items, options) {
|
||||||
var verticalCenter = 0;
|
var verticalCenter,
|
||||||
|
values;
|
||||||
|
|
||||||
options = _.defaults(options || {}, {
|
options = _.defaults(options || {}, {
|
||||||
padding: 0
|
padding: 0
|
||||||
});
|
});
|
||||||
|
|
||||||
// Set horizontal position of items with padding between them, and calculate
|
values = _.map(items, item => {
|
||||||
// where the axis points should be positioned vertically.
|
return {
|
||||||
_.reduce(items, (offset, item) => {
|
box: normalizeBBox(item.getBBox()),
|
||||||
var box;
|
item
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calculate where the axis points should be positioned vertically.
|
||||||
|
verticalCenter = _.reduce(values, (center, { box }) => {
|
||||||
|
return Math.max(center, box.ay);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
// Position items with padding between them and aligned their axis points.
|
||||||
|
_.reduce(values, (offset, { item, box }) => {
|
||||||
item.transform(Snap.matrix()
|
item.transform(Snap.matrix()
|
||||||
.translate(offset, 0));
|
.translate(offset, verticalCenter - box.ay));
|
||||||
|
|
||||||
box = normalizeBBox(item.getBBox());
|
|
||||||
verticalCenter = Math.max(verticalCenter, box.ay);
|
|
||||||
|
|
||||||
return offset + options.padding + box.width;
|
return offset + options.padding + box.width;
|
||||||
}, 0);
|
}, 0);
|
||||||
|
|
||||||
// Set vertical position of items to align their axis points.
|
|
||||||
for (var item of items) {
|
|
||||||
let box = normalizeBBox(item.getBBox());
|
|
||||||
|
|
||||||
item.transform(Snap.matrix()
|
|
||||||
.add(item.transform().localMatrix)
|
|
||||||
.translate(0, verticalCenter - box.ay));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Positions a collection of items centered horizontally in a vertical stack.
|
// Positions a collection of items centered horizontally in a vertical stack.
|
||||||
@ -71,33 +69,32 @@ function spaceHorizontally(items, options) {
|
|||||||
// - __items__ - Array of items to be positioned
|
// - __items__ - Array of items to be positioned
|
||||||
// - __options.padding__ - Number of pixels to leave between items
|
// - __options.padding__ - Number of pixels to leave between items
|
||||||
function spaceVertically(items, options) {
|
function spaceVertically(items, options) {
|
||||||
var horizontalCenter = 0;
|
var horizontalCenter,
|
||||||
|
values;
|
||||||
|
|
||||||
options = _.defaults(options || {}, {
|
options = _.defaults(options || {}, {
|
||||||
padding: 0
|
padding: 0
|
||||||
});
|
});
|
||||||
|
|
||||||
// Set vertical position of items with padding between them, and calculate
|
values = _.map(items, item => {
|
||||||
// where the center of each item should be positioned horizontally.
|
return {
|
||||||
_.reduce(items, (offset, item) => {
|
box: item.getBBox(),
|
||||||
var box;
|
item
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calculate where the center of each item should be positioned horizontally.
|
||||||
|
horizontalCenter = _.reduce(values, (center, { box }) => {
|
||||||
|
return Math.max(center, box.cx);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
// Position items with padding between them and align their centers.
|
||||||
|
_.reduce(values, (offset, { item, box }) => {
|
||||||
item.transform(Snap.matrix()
|
item.transform(Snap.matrix()
|
||||||
.translate(0, offset));
|
.translate(horizontalCenter - box.cx, offset));
|
||||||
|
|
||||||
box = item.getBBox();
|
|
||||||
|
|
||||||
horizontalCenter = Math.max(horizontalCenter, box.cx);
|
|
||||||
|
|
||||||
return offset + options.padding + box.height;
|
return offset + options.padding + box.height;
|
||||||
}, 0);
|
}, 0);
|
||||||
|
|
||||||
// Set horizontal position of items to align their centers.
|
|
||||||
for (var item of items) {
|
|
||||||
item.transform(Snap.matrix()
|
|
||||||
.add(item.transform().localMatrix)
|
|
||||||
.translate(horizontalCenter - item.getBBox().cx, 0));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Creates a Promise that will be resolved after a specified delay.
|
// Creates a Promise that will be resolved after a specified delay.
|
||||||
|
Loading…
Reference in New Issue
Block a user