First pass for getting flow lines in place

This could use some refactoring
This commit is contained in:
Jeff Avallone 2014-11-30 21:20:03 -05:00
parent f8cded8eac
commit 5afb4fa717
3 changed files with 38 additions and 5 deletions

View File

@ -28,6 +28,12 @@
dominant-baseline: text-after-edge;
}
path {
fill: transparent;
stroke-width: 2px;
stroke: #000;
}
circle.anchor {
fill: #6b6659;
stroke-width: 2px;

View File

@ -3,7 +3,7 @@ import Snap from 'snapsvg';
// Testing code
(function() {
var result = parser.parse('test expr|other expr'),
var result = parser.parse('test expr|other expr|foo'),
svg = Snap('#regexp-render svg'),
container;

View File

@ -3,6 +3,7 @@ import Base from './base.js';
export default _.extend({}, Base, {
render(container) {
this.container = container;
this.contents = _.map(this.matches(), match => {
var content = container.group();
match.render(content);
@ -12,7 +13,10 @@ export default _.extend({}, Base, {
position() {
var center,
positions;
positions,
container = this.container,
totalHeight,
verticalCenter;
_.invoke(this.matches(), 'position');
@ -24,12 +28,35 @@ export default _.extend({}, Base, {
return Math.max(center, pos.box.cx);
}, 0).value();
positions.reduce((offset, pos) => {
totalHeight = positions.reduce((offset, pos) => {
pos.content.transform(Snap.matrix()
.translate(center - pos.box.cx, offset));
.translate(center - pos.box.cx + 20, offset));
return offset + pos.box.height + 5;
}, 0);
}, 0).value() - 5;
verticalCenter = totalHeight / 2
positions.each(pos => {
var box = pos.content.getBBox(),
direction = box.cy > verticalCenter ? 1 : -1,
pathStr,
path;
pathStr = (verticalCenter === box.cy) ?
'M0,{center}H{side}' :
'M0,{center}q10,0 10,{d}V{target}q0,{d} 10,{d}H{side}';
path = container.path(Snap.format(pathStr, {
center: verticalCenter,
target: box.cy - 10 * direction,
side: box.x,
d: 10 * direction
}));
path.clone().transform(Snap.matrix()
.scale(-1, 1, center + 20, 0));
});
},
matches() {