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() {