2014-12-10 00:02:31 +00:00
|
|
|
import _ from 'lodash';
|
|
|
|
|
2014-11-30 19:10:27 +00:00
|
|
|
export default {
|
2014-12-10 00:02:31 +00:00
|
|
|
getBBox() {
|
|
|
|
return this.container.getBBox();
|
|
|
|
},
|
|
|
|
|
2014-12-09 23:08:40 +00:00
|
|
|
renderLabel(container, text) {
|
2014-11-30 19:10:27 +00:00
|
|
|
var group = container.group();
|
|
|
|
|
2014-12-04 01:02:56 +00:00
|
|
|
group.rect();
|
2014-11-30 19:10:27 +00:00
|
|
|
|
|
|
|
group.text().attr({
|
|
|
|
text: text
|
|
|
|
});
|
|
|
|
|
|
|
|
return group;
|
|
|
|
},
|
|
|
|
|
2014-12-09 23:08:40 +00:00
|
|
|
positionLabel(group) {
|
2014-11-30 19:10:27 +00:00
|
|
|
var text = group.select('text'),
|
|
|
|
rect = group.select('rect'),
|
|
|
|
box = text.getBBox(),
|
|
|
|
margin = 5;
|
|
|
|
|
|
|
|
text.transform(Snap.matrix()
|
|
|
|
.translate(margin, box.height + margin));
|
|
|
|
|
|
|
|
rect.attr({
|
|
|
|
width: box.width + 2 * margin,
|
|
|
|
height: box.height + 2 * margin
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2014-11-30 20:36:53 +00:00
|
|
|
render_bbox(container, box) {
|
2014-12-03 00:15:19 +00:00
|
|
|
container.path(box.path)
|
2014-12-04 01:20:08 +00:00
|
|
|
.addClass('bounding-box');
|
2014-11-30 20:36:53 +00:00
|
|
|
},
|
|
|
|
|
2014-12-03 23:59:59 +00:00
|
|
|
render() {
|
2014-12-06 21:03:58 +00:00
|
|
|
console.log(this);
|
|
|
|
|
2014-12-04 01:20:08 +00:00
|
|
|
this.container.addClass('placeholder');
|
2014-11-30 19:10:27 +00:00
|
|
|
|
2014-12-09 23:08:40 +00:00
|
|
|
this.label = this.renderLabel(this.container, this.textValue);
|
2014-12-04 01:02:56 +00:00
|
|
|
|
|
|
|
this.label.select('rect').attr({
|
|
|
|
rx: 10,
|
|
|
|
ry: 10
|
|
|
|
});
|
2014-11-30 19:10:27 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
position() {
|
2014-12-09 23:08:40 +00:00
|
|
|
this.positionLabel(this.label);
|
2014-12-10 00:02:31 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
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));
|
|
|
|
});
|
2014-11-30 19:10:27 +00:00
|
|
|
}
|
|
|
|
};
|