2014-12-20 15:25:32 +00:00
|
|
|
import util from '../../util.js';
|
2014-12-10 00:02:31 +00:00
|
|
|
import _ from 'lodash';
|
2014-12-13 14:09:58 +00:00
|
|
|
import Q from 'q';
|
2014-12-10 00:02:31 +00:00
|
|
|
|
2014-12-17 16:53:04 +00:00
|
|
|
export default class Node {
|
|
|
|
constructor(textValue, offset, elements, properties) {
|
2014-12-17 17:07:25 +00:00
|
|
|
this.textValue = textValue;
|
|
|
|
this.offset = offset;
|
|
|
|
this.elements = elements || [];
|
|
|
|
|
|
|
|
this.properties = properties;
|
2014-12-18 16:13:15 +00:00
|
|
|
|
|
|
|
this.state = Node.state;
|
2014-12-17 16:53:04 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
set module(mod) {
|
|
|
|
_.extend(this, mod);
|
2014-12-17 21:04:55 +00:00
|
|
|
|
2014-12-17 16:53:04 +00:00
|
|
|
if (this.setup) {
|
|
|
|
this.setup();
|
|
|
|
}
|
2014-12-17 21:04:55 +00:00
|
|
|
|
|
|
|
_.forOwn(this.definedProperties || {}, (methods, name) => {
|
|
|
|
Object.defineProperty(this, name, methods);
|
|
|
|
});
|
2014-12-17 16:53:04 +00:00
|
|
|
}
|
|
|
|
|
2014-12-17 20:14:33 +00:00
|
|
|
set container(container) {
|
|
|
|
this._container = container;
|
|
|
|
this._container.addClass(this.type);
|
|
|
|
}
|
|
|
|
|
|
|
|
get container() {
|
|
|
|
return this._container;
|
2014-12-17 16:53:04 +00:00
|
|
|
}
|
2014-12-10 21:57:42 +00:00
|
|
|
|
2014-12-17 20:24:27 +00:00
|
|
|
get anchor() {
|
|
|
|
var box;
|
|
|
|
|
2014-12-17 20:12:04 +00:00
|
|
|
if (this.proxy) {
|
2014-12-17 20:24:27 +00:00
|
|
|
return this.proxy.anchor;
|
2014-12-13 16:35:01 +00:00
|
|
|
} else {
|
2014-12-17 20:24:27 +00:00
|
|
|
box = this.container.getBBox();
|
|
|
|
|
|
|
|
return _.extend({
|
|
|
|
ax: box.x,
|
|
|
|
ax2: box.x2,
|
|
|
|
ay: box.cy
|
|
|
|
}, this._anchor || {});
|
2014-12-13 16:35:01 +00:00
|
|
|
}
|
2014-12-17 16:53:04 +00:00
|
|
|
}
|
2014-12-13 16:35:01 +00:00
|
|
|
|
2014-12-10 00:02:31 +00:00
|
|
|
getBBox() {
|
2014-12-17 20:24:27 +00:00
|
|
|
return _.extend(this.container.getBBox(), this.anchor);
|
2014-12-17 16:53:04 +00:00
|
|
|
}
|
2014-12-10 00:02:31 +00:00
|
|
|
|
2014-12-11 01:28:02 +00:00
|
|
|
transform(matrix) {
|
|
|
|
return this.container.transform(matrix);
|
2014-12-17 16:53:04 +00:00
|
|
|
}
|
2014-12-11 01:28:02 +00:00
|
|
|
|
2014-12-18 00:24:33 +00:00
|
|
|
deferredStep() {
|
2014-12-13 17:28:16 +00:00
|
|
|
var deferred = Q.defer(),
|
2014-12-18 00:24:33 +00:00
|
|
|
result = arguments;
|
|
|
|
|
|
|
|
setTimeout(() => {
|
2014-12-18 16:13:15 +00:00
|
|
|
if (this.state.cancelRender) {
|
2014-12-18 00:24:33 +00:00
|
|
|
deferred.reject('Render cancelled');
|
|
|
|
} else {
|
|
|
|
deferred.resolve.apply(this, result);
|
|
|
|
}
|
|
|
|
}, 1);
|
|
|
|
|
|
|
|
return deferred.promise;
|
|
|
|
}
|
|
|
|
|
|
|
|
renderLabel(text) {
|
|
|
|
var group = this.container.group()
|
2014-12-13 17:28:16 +00:00
|
|
|
.addClass('label'),
|
|
|
|
rect = group.rect(),
|
2014-12-15 12:54:55 +00:00
|
|
|
text = group.text(0, 0, _.flatten([text]));
|
2014-12-13 17:28:16 +00:00
|
|
|
|
2014-12-18 00:24:33 +00:00
|
|
|
return this.deferredStep(group)
|
|
|
|
.then(group => {
|
|
|
|
var box = text.getBBox(),
|
|
|
|
margin = 5;
|
2014-12-13 17:28:16 +00:00
|
|
|
|
2014-12-18 00:24:33 +00:00
|
|
|
text.transform(Snap.matrix()
|
|
|
|
.translate(margin, box.height / 2 + 2 * margin));
|
2014-12-13 17:28:16 +00:00
|
|
|
|
2014-12-18 00:24:33 +00:00
|
|
|
rect.attr({
|
|
|
|
width: box.width + 2 * margin,
|
|
|
|
height: box.height + 2 * margin
|
|
|
|
});
|
2014-11-30 19:10:27 +00:00
|
|
|
|
2014-12-18 00:24:33 +00:00
|
|
|
return group;
|
|
|
|
});
|
2014-12-17 16:53:04 +00:00
|
|
|
}
|
2014-11-30 19:10:27 +00:00
|
|
|
|
2014-12-15 19:20:04 +00:00
|
|
|
startRender() {
|
2014-12-18 16:13:15 +00:00
|
|
|
this.state.renderCounter++;
|
2014-12-17 16:53:04 +00:00
|
|
|
}
|
2014-12-15 19:20:04 +00:00
|
|
|
|
|
|
|
doneRender() {
|
2014-12-18 16:13:15 +00:00
|
|
|
if (this.state.maxCounter === 0) {
|
|
|
|
this.state.maxCounter = this.state.renderCounter;
|
2014-12-15 19:20:04 +00:00
|
|
|
}
|
|
|
|
|
2014-12-18 16:13:15 +00:00
|
|
|
this.state.renderCounter--;
|
2014-12-15 23:06:16 +00:00
|
|
|
|
2014-12-20 15:25:32 +00:00
|
|
|
document.body.dispatchEvent(util.customEvent('updateStatus', {
|
2014-12-18 16:13:15 +00:00
|
|
|
percentage: (this.state.maxCounter - this.state.renderCounter) / this.state.maxCounter
|
2014-12-19 15:24:45 +00:00
|
|
|
}));
|
2014-12-15 19:20:04 +00:00
|
|
|
|
2014-12-18 00:24:33 +00:00
|
|
|
return this.deferredStep();
|
2014-12-17 16:53:04 +00:00
|
|
|
}
|
2014-12-15 19:20:04 +00:00
|
|
|
|
2014-12-11 00:31:07 +00:00
|
|
|
render(container) {
|
|
|
|
if (container) {
|
2014-12-17 20:14:33 +00:00
|
|
|
this.container = container;
|
2014-12-11 00:31:07 +00:00
|
|
|
}
|
|
|
|
|
2014-12-17 20:12:04 +00:00
|
|
|
if (this.proxy) {
|
2014-12-17 22:18:46 +00:00
|
|
|
return this.proxy.render(this.container);
|
2014-12-17 20:12:04 +00:00
|
|
|
} else {
|
|
|
|
this.startRender();
|
|
|
|
return this._render()
|
|
|
|
.then(this.doneRender.bind(this))
|
|
|
|
.then(_.constant(this));
|
|
|
|
}
|
2014-12-17 16:53:04 +00:00
|
|
|
}
|
2014-12-13 14:09:58 +00:00
|
|
|
|
2014-12-13 18:26:43 +00:00
|
|
|
renderLabeledBox(label, content, options) {
|
2014-12-19 16:48:09 +00:00
|
|
|
var label = this.container.text(0, 0, label)
|
|
|
|
.addClass([this.type, 'label'].join('-')),
|
2014-12-13 18:26:43 +00:00
|
|
|
box = this.container.rect()
|
|
|
|
.addClass([this.type, 'box'].join('-'))
|
|
|
|
.attr({
|
|
|
|
rx: 3,
|
|
|
|
ry: 3
|
|
|
|
});
|
2014-12-10 23:27:07 +00:00
|
|
|
|
2014-12-19 16:48:09 +00:00
|
|
|
options = _.defaults(options || {}, {
|
2014-12-10 23:27:07 +00:00
|
|
|
padding: 0
|
|
|
|
});
|
|
|
|
|
2014-12-13 18:26:43 +00:00
|
|
|
this.container.prepend(label);
|
|
|
|
this.container.prepend(box);
|
2014-12-10 23:27:07 +00:00
|
|
|
|
2014-12-18 00:24:33 +00:00
|
|
|
return this.deferredStep()
|
|
|
|
.then(() => {
|
|
|
|
var labelBox = label.getBBox(),
|
|
|
|
contentBox = content.getBBox();
|
2014-12-13 18:26:43 +00:00
|
|
|
|
2014-12-18 00:24:33 +00:00
|
|
|
label.transform(Snap.matrix()
|
|
|
|
.translate(0, labelBox.height));
|
2014-12-13 18:26:43 +00:00
|
|
|
|
2014-12-18 00:24:33 +00:00
|
|
|
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
|
|
|
|
});
|
2014-12-10 23:27:07 +00:00
|
|
|
|
2014-12-18 00:24:33 +00:00
|
|
|
content.transform(Snap.matrix()
|
|
|
|
.translate(box.getBBox().cx - contentBox.cx, labelBox.height + options.padding));
|
|
|
|
});
|
2014-11-30 19:10:27 +00:00
|
|
|
}
|
|
|
|
};
|