Centralizing some of the layout code
This commit is contained in:
parent
7ed865ecdb
commit
cd11b7e6e5
@ -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));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
@ -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)
|
||||
|
@ -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
|
||||
});
|
||||
}
|
||||
});
|
||||
|
@ -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() {
|
||||
|
@ -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({
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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))
|
||||
|
@ -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
|
||||
}));
|
||||
}
|
||||
|
@ -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({
|
||||
|
Loading…
Reference in New Issue
Block a user