Centralizing some of the layout code

This commit is contained in:
Jeff Avallone 2014-12-09 19:02:31 -05:00
parent 7ed865ecdb
commit cd11b7e6e5
9 changed files with 69 additions and 37 deletions

View File

@ -1,4 +1,10 @@
import _ from 'lodash';
export default {
getBBox() {
return this.container.getBBox();
},
renderLabel(container, text) {
var group = container.group();
@ -46,5 +52,35 @@ export default {
position() {
this.positionLabel(this.label);
},
spaceHorizontally(items, options) {
var verticalCenter = 0;
_.defaults(options, {
padding: 0
});
_.reduce(items, (offset, item) => {
var element = item.container || item,
box;
element.transform(Snap.matrix()
.translate(offset, 0));
box = item.getBBox();
verticalCenter = Math.max(verticalCenter, box.cy);
return offset + options.padding + box.width;
}, 0);
_.each(items, item => {
var element = item.container || item;
element.transform(Snap.matrix()
.add(element.transform().localMatrix)
.translate(0, verticalCenter - item.getBBox().cy));
});
}
};

View File

@ -38,7 +38,7 @@ export default _.extend({}, Base, {
part.container.transform(Snap.matrix()
.translate(0, offset));
box = part.container.getBBox();
box = part.getBBox();
offset += box.height + 5;
}).bind(this));
@ -46,7 +46,7 @@ export default _.extend({}, Base, {
box = this.partContainer.getBBox();
_.each(this.parts.elements, (part => {
var partBox = part.container.getBBox();
var partBox = part.getBBox();
part.container.transform(Snap.matrix()
.add(part.container.transform().localMatrix)

View File

@ -23,12 +23,8 @@ export default _.extend({}, Base, {
this.first.position();
this.last.position();
box = this.first.container.getBBox();
this.hyphen.transform(Snap.matrix()
.translate(box.x2 + 5, box.cy - this.hyphen.getBBox().cy));
box = this.hyphen.getBBox();
this.last.container.transform(Snap.matrix()
.translate(box.x2 + 5, 0));
this.spaceHorizontally([this.first, this.hyphen, this.last], {
padding: 5
});
}
});

View File

@ -27,34 +27,34 @@ export default _.extend({}, Base, {
},
position() {
var offset = 0,
path = [];
var items, paths;
if (this.anchorStart()) {
this.positionLabel(this.contents.anchor_start);
offset += this.contents.anchor_start.getBBox().width + 10;
path.push(Snap.format('M{x2},{cy}h10', this.contents.anchor_start.getBBox()));
}
_.each(this.contents.parts, function(part) {
part.position();
part.container.transform(Snap.matrix()
.translate(offset, 0));
offset += part.container.getBBox().width + 10;
path.push(Snap.format('M{x2},{cy}h10', part.container.getBBox()));
});
if (this.anchorEnd()) {
this.positionLabel(this.contents.anchor_end);
this.contents.anchor_end.transform(Snap.matrix()
.translate(offset, 0));
} else {
path.pop();
}
this.container.prepend(
this.container.path(path.join(''))
);
_.invoke(this.contents.parts, 'position');
items = _(this.contents).values().flatten().value();
this.spaceHorizontally(items, {
padding: 10
});
// NOTE:
// item.cy won't work for this in the long run once vertical centers can be
// offset.
paths = _.map(items, item => {
return Snap.format('M{item.x2},{item.cy}h10', {
item: item.getBBox()
});
});
paths.pop();
this.container.prepend(this.container.path(paths.join('')));
},
anchorStart() {

View File

@ -17,7 +17,7 @@ export default _.extend({}, Base, {
if (this._repeat.textValue !== '') {
this._content.container.transform(this._repeat.contentPosition());
box = this._content.container.getBBox();
box = this._content.getBBox();
if (this._repeat.hasSkip()) {
paths.push(Snap.format('M0,{cy}q10,0 10,-10v-{vert}q0,-10 10,-10h{horiz}q10,0 10,10v{vert}q0,10 10,10', _.extend({

View File

@ -29,8 +29,8 @@ export default _.extend({}, Base, {
positions = _.chain(matches)
.map(match => {
return {
box: match.container.getBBox(),
content: match.container
match,
box: match.getBBox()
};
});
center = positions.reduce((center, pos) => {
@ -38,7 +38,7 @@ export default _.extend({}, Base, {
}, 0).value();
totalHeight = positions.reduce((offset, pos) => {
pos.content.transform(Snap.matrix()
pos.match.container.transform(Snap.matrix()
.translate(center - pos.box.cx + (includeLines ? 20 : 0), offset));
return offset + pos.box.height + 5;
@ -48,7 +48,7 @@ export default _.extend({}, Base, {
if (includeLines) {
positions.each(pos => {
var box = pos.content.getBBox(),
var box = pos.match.getBBox(),
direction = box.cy > verticalCenter ? 1 : -1,
pathStr;

View File

@ -22,7 +22,7 @@ export default _.extend({}, Base, {
this.regexp.position();
contentBox = this.regexp.container.getBBox();
contentBox = this.regexp.getBBox();
this.container.prepend(
this.container.path(Snap.format('M0,{cy}h10M{x2},{cy}h10', contentBox))

View File

@ -44,7 +44,7 @@ export default _.extend({}, Base, {
this.regexp.position();
if (this.outline) {
box = this.regexp.container.getBBox();
box = this.regexp.getBBox();
this.outline.attr({
width: box.width + 20,
@ -52,7 +52,7 @@ export default _.extend({}, Base, {
});
this.container.path(Snap.format('M0,{content.cy}h10M{content.x2},{content.cy}H{container.x2}', {
container: this.container.getBBox(),
container: this.getBBox(),
content: box
}));
}

View File

@ -98,7 +98,7 @@ export default class Regexper {
result.position();
box = result.container.getBBox();
box = result.getBBox();
result.container.transform(Snap.matrix()
.translate(padding - box.x, padding - box.y));
snap.attr({