First pass for getting flow lines in place
This could use some refactoring
This commit is contained in:
parent
f8cded8eac
commit
5afb4fa717
@ -28,6 +28,12 @@
|
||||
dominant-baseline: text-after-edge;
|
||||
}
|
||||
|
||||
path {
|
||||
fill: transparent;
|
||||
stroke-width: 2px;
|
||||
stroke: #000;
|
||||
}
|
||||
|
||||
circle.anchor {
|
||||
fill: #6b6659;
|
||||
stroke-width: 2px;
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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() {
|
||||
|
Loading…
Reference in New Issue
Block a user