2014-12-10 00:02:31 +00:00
|
|
|
import _ from 'lodash';
|
|
|
|
|
2014-11-30 19:10:27 +00:00
|
|
|
export default {
|
2014-12-10 21:57:42 +00:00
|
|
|
setContainer(container) {
|
|
|
|
this.container = container;
|
|
|
|
this.container.addClass(this.type);
|
|
|
|
},
|
|
|
|
|
2014-12-10 00:02:31 +00:00
|
|
|
getBBox() {
|
|
|
|
return this.container.getBBox();
|
|
|
|
},
|
|
|
|
|
2014-12-11 00:12:17 +00:00
|
|
|
renderLabel(text) {
|
|
|
|
var group = this.container.group()
|
2014-12-10 22:00:04 +00:00
|
|
|
.addClass('label');
|
2014-11-30 19:10:27 +00:00
|
|
|
|
2014-12-04 01:02:56 +00:00
|
|
|
group.rect();
|
2014-11-30 19:10:27 +00:00
|
|
|
|
|
|
|
group.text().attr({
|
|
|
|
text: text
|
|
|
|
});
|
|
|
|
|
2014-12-11 00:16:21 +00:00
|
|
|
this._labelGroups.push(group);
|
|
|
|
|
2014-11-30 19:10:27 +00:00
|
|
|
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-12-03 23:59:59 +00:00
|
|
|
render() {
|
2014-12-11 00:16:21 +00:00
|
|
|
this._labelGroups = [];
|
2014-12-11 00:01:57 +00:00
|
|
|
this._render();
|
|
|
|
},
|
|
|
|
|
|
|
|
position() {
|
|
|
|
if (this._proxy) {
|
|
|
|
this._proxy.position();
|
|
|
|
} else {
|
2014-12-11 00:16:21 +00:00
|
|
|
_.each(this._labelGroups, this.positionLabel.bind(this));
|
2014-12-11 00:01:57 +00:00
|
|
|
this._position();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
proxy(node) {
|
|
|
|
this._proxy = node;
|
|
|
|
this._proxy.setContainer(this.container);
|
|
|
|
this._proxy.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
_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-11 00:23:14 +00:00
|
|
|
this.renderLabel(this.textValue)
|
|
|
|
.select('rect').attr({
|
|
|
|
rx: 10,
|
|
|
|
ry: 10
|
|
|
|
});
|
2014-11-30 19:10:27 +00:00
|
|
|
},
|
|
|
|
|
2014-12-11 00:01:57 +00:00
|
|
|
_position() {
|
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-12-10 01:08:34 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
spaceVertically(items, options) {
|
|
|
|
var horizontalCenter = 0;
|
|
|
|
|
|
|
|
_.defaults(options, {
|
|
|
|
padding: 0
|
|
|
|
});
|
|
|
|
|
|
|
|
_.reduce(items, (offset, item) => {
|
|
|
|
var element = item.container || item,
|
|
|
|
box;
|
|
|
|
|
|
|
|
element.transform(Snap.matrix()
|
|
|
|
.translate(0, offset));
|
|
|
|
|
|
|
|
box = item.getBBox();
|
|
|
|
|
|
|
|
horizontalCenter = Math.max(horizontalCenter, box.cx);
|
|
|
|
|
|
|
|
return offset + options.padding + box.height;
|
|
|
|
}, 0);
|
|
|
|
|
|
|
|
_.each(items, item => {
|
|
|
|
var element = item.container || item;
|
|
|
|
|
|
|
|
element.transform(Snap.matrix()
|
|
|
|
.add(element.transform().localMatrix)
|
|
|
|
.translate(horizontalCenter - item.getBBox().cx, 0));
|
|
|
|
});
|
2014-12-10 23:27:07 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
renderLabeledBox(label) {
|
|
|
|
this.label = this.container.text()
|
|
|
|
.addClass([this.type, 'label'].join('-'))
|
|
|
|
.attr({
|
|
|
|
text: label
|
|
|
|
});
|
|
|
|
|
|
|
|
this.box = this.container.rect()
|
|
|
|
.addClass([this.type, 'box'].join('-'))
|
|
|
|
.attr({
|
|
|
|
rx: 3,
|
|
|
|
ry: 3
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
positionLabeledBox(content, options) {
|
|
|
|
var labelBox, contentBox;
|
|
|
|
|
|
|
|
_.defaults(options, {
|
|
|
|
padding: 0
|
|
|
|
});
|
|
|
|
|
|
|
|
labelBox = this.label.getBBox();
|
|
|
|
contentBox = content.getBBox();
|
|
|
|
|
|
|
|
this.label.transform(Snap.matrix()
|
|
|
|
.translate(0, labelBox.height));
|
|
|
|
|
|
|
|
this.box
|
|
|
|
.transform(Snap.matrix()
|
|
|
|
.translate(0, labelBox.height))
|
|
|
|
.attr({
|
|
|
|
width: Math.max(contentBox.width + options.padding * 2, labelBox.width),
|
|
|
|
height: contentBox.height + options.padding * 2
|
|
|
|
});
|
|
|
|
|
|
|
|
content.transform(Snap.matrix()
|
|
|
|
.translate(this.box.getBBox().cx - contentBox.cx, labelBox.height + options.padding));
|
2014-11-30 19:10:27 +00:00
|
|
|
}
|
|
|
|
};
|