2014-11-30 22:54:12 +00:00
|
|
|
import _ from 'lodash';
|
2014-12-13 14:09:58 +00:00
|
|
|
import Q from 'q';
|
2014-11-30 22:54:12 +00:00
|
|
|
|
2014-12-17 16:53:04 +00:00
|
|
|
export default {
|
2014-12-03 01:10:56 +00:00
|
|
|
type: 'match',
|
2014-12-03 02:02:48 +00:00
|
|
|
|
2014-12-17 21:04:55 +00:00
|
|
|
definedProperties: {
|
|
|
|
_anchor: {
|
|
|
|
get: function() {
|
|
|
|
var start = this.normalizeBBox(_.first(this.items).getBBox()),
|
|
|
|
end = this.normalizeBBox(_.last(this.items).getBBox()),
|
|
|
|
matrix = this.transform().localMatrix;
|
|
|
|
|
|
|
|
return {
|
|
|
|
ax: matrix.x(start.ax, start.ay),
|
|
|
|
ax2: matrix.x(end.ax2, end.ay),
|
|
|
|
ay: matrix.y(start.ax, start.ay)
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2014-12-11 00:01:57 +00:00
|
|
|
_render() {
|
2014-12-13 17:28:16 +00:00
|
|
|
var start, end,
|
|
|
|
partPromises;
|
2014-12-03 02:02:48 +00:00
|
|
|
|
2014-12-17 19:44:48 +00:00
|
|
|
if (this.anchorStart) {
|
2014-12-13 18:42:55 +00:00
|
|
|
start = this.renderLabel('Start of line')
|
|
|
|
.invoke('addClass', 'anchor');
|
2014-12-11 00:58:36 +00:00
|
|
|
}
|
2014-12-10 21:52:57 +00:00
|
|
|
|
2014-12-17 19:44:48 +00:00
|
|
|
if (this.anchorEnd) {
|
2014-12-13 18:42:55 +00:00
|
|
|
end = this.renderLabel('End of line')
|
|
|
|
.invoke('addClass', 'anchor');
|
2014-12-11 00:58:36 +00:00
|
|
|
}
|
2014-12-03 02:02:48 +00:00
|
|
|
|
2014-12-17 20:12:04 +00:00
|
|
|
partPromises = _.map(this.parts, part => {
|
|
|
|
return part.render(this.container.group());
|
|
|
|
});
|
2014-12-15 02:37:56 +00:00
|
|
|
|
2014-12-17 20:12:04 +00:00
|
|
|
return Q.all(_([start, partPromises, end]).flatten().compact().value())
|
|
|
|
.then(items => {
|
|
|
|
var prev, next, paths;
|
2014-12-15 02:37:56 +00:00
|
|
|
|
2014-12-17 20:12:04 +00:00
|
|
|
this.items = items;
|
|
|
|
this.spaceHorizontally(items, {
|
|
|
|
padding: 10
|
|
|
|
});
|
2014-12-15 02:37:56 +00:00
|
|
|
|
2014-12-17 20:12:04 +00:00
|
|
|
prev = this.normalizeBBox(_.first(items).getBBox());
|
|
|
|
paths = _.map(items.slice(1), item => {
|
|
|
|
var path;
|
2014-12-15 02:37:56 +00:00
|
|
|
|
2014-12-17 20:12:04 +00:00
|
|
|
next = this.normalizeBBox(item.getBBox());
|
|
|
|
path = `M${prev.ax2},${prev.ay}H${next.ax}`;
|
|
|
|
prev = next;
|
2014-12-15 02:37:56 +00:00
|
|
|
|
2014-12-17 20:12:04 +00:00
|
|
|
return path;
|
2014-12-16 03:00:24 +00:00
|
|
|
});
|
2014-12-17 20:12:04 +00:00
|
|
|
|
|
|
|
this.container.prepend(
|
|
|
|
this.container.path(paths.join('')));
|
|
|
|
});
|
2014-12-03 02:02:48 +00:00
|
|
|
},
|
|
|
|
|
2014-12-17 19:44:48 +00:00
|
|
|
setup() {
|
|
|
|
this.parts = _.reduce(this.properties.parts.elements, function(result, node) {
|
2014-12-11 01:11:51 +00:00
|
|
|
var last = _.last(result);
|
|
|
|
|
2014-12-17 19:56:02 +00:00
|
|
|
if (last && node.canMerge && last.canMerge) {
|
|
|
|
last.elements[0].merge(node.elements[0]);
|
2014-12-11 01:11:51 +00:00
|
|
|
} else {
|
|
|
|
result.push(node);
|
2014-12-03 02:02:48 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return result;
|
|
|
|
}, []);
|
2014-12-15 00:08:14 +00:00
|
|
|
|
2014-12-17 19:44:48 +00:00
|
|
|
this.anchorStart = this.properties.anchor_start.textValue !== '';
|
|
|
|
this.anchorEnd = this.properties.anchor_end.textValue !== '';
|
2014-12-17 20:12:04 +00:00
|
|
|
|
|
|
|
if (!this.anchorStart && !this.anchorEnd && this.parts.length === 1) {
|
|
|
|
this.proxy = this.parts[0];
|
|
|
|
}
|
2014-12-03 02:02:48 +00:00
|
|
|
}
|
2014-12-17 16:53:04 +00:00
|
|
|
};
|