diff --git a/src/index.html b/src/index.html
index 6c53ef4..acfaa0b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -28,6 +28,12 @@
dominant-baseline: text-after-edge;
}
+ path {
+ fill: transparent;
+ stroke-width: 2px;
+ stroke: #000;
+ }
+
circle.anchor {
fill: #6b6659;
stroke-width: 2px;
diff --git a/src/js/main.js b/src/js/main.js
index cba180a..3f4bcca 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -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;
diff --git a/src/js/parser/javascript/regexp.js b/src/js/parser/javascript/regexp.js
index b67f715..97b6e2c 100644
--- a/src/js/parser/javascript/regexp.js
+++ b/src/js/parser/javascript/regexp.js
@@ -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() {