Extracting code to layout elements vertically

src/js/parser/javascript/base.js

@@ -82,5 +82,35 @@ export default {
         .add(element.transform().localMatrix)
         .translate(0, verticalCenter - item.getBBox().cy));
     });
+  },
+
+  spaceVertically(items, options) {
+    var horizontalCenter = 0;
+
+    _.defaults(options, {
+      padding: 0
+    });
+
+    _.reduce(items, (offset, item) => {
+      var element = item.container || item,
+          box;
+
+      element.transform(Snap.matrix()
+        .translate(0, offset));
+
+      box = item.getBBox();
+
+      horizontalCenter = Math.max(horizontalCenter, box.cx);
+
+      return offset + options.padding + box.height;
+    }, 0);
+
+    _.each(items, item => {
+      var element = item.container || item;
+
+      element.transform(Snap.matrix()
+        .add(element.transform().localMatrix)
+        .translate(horizontalCenter - item.getBBox().cx, 0));
+    });
   }
 };

src/js/parser/javascript/charset.js

@@ -29,31 +29,16 @@ export default _.extend({}, Base, {
   },
 
   position() {
-    var box, offset = 0;
+    var box;
 
-    _.each(this.parts.elements, (part => {
+    _.invoke(this.parts.elements, 'position');
-      var box;
 
-      part.position();
+    this.spaceVertically(this.parts.elements, {
-
+      padding: 5
-      part.container.transform(Snap.matrix()
+    });
-        .translate(0, offset));
-
-      box = part.getBBox();
-
-      offset += box.height + 5;
-    }).bind(this));
 
     box = this.partContainer.getBBox();
 
-    _.each(this.parts.elements, (part => {
-      var partBox = part.getBBox();
-
-      part.container.transform(Snap.matrix()
-        .add(part.container.transform().localMatrix)
-        .translate(box.cx - partBox.cx, 0));
-    }).bind(this));
-
     this.box.attr({
       width: box.width + 10,
       height: box.height + 10

src/js/parser/javascript/regexp.js

@@ -7,66 +7,65 @@ export default _.extend({}, Base, {
   render() {
     var self = this;
 
+    this.matchContainer = this.container.group();
+
     _.each(this.matches(), match => {
-      match.container = self.container.group();
+      match.container = self.matchContainer.group();
       match.render();
       return match.container;
     });
   },
 
   position() {
-    var self = this,
+    var matches = this.matches(),
-        center,
-        positions,
-        totalHeight,
-        verticalCenter,
-        matches = this.matches(),
         includeLines = (matches.length > 1),
-        paths = [];
+        containerBox,
+        paths;
 
     _.invoke(matches, 'position');
 
-    positions = _.chain(matches)
+    this.spaceVertically(matches, {
-      .map(match => {
+      padding: 5
-        return {
+    });
-          match,
-          box: match.getBBox()
-        };
-      });
-    center = positions.reduce((center, pos) => {
-      return Math.max(center, pos.box.cx);
-    }, 0).value();
-
-    totalHeight = positions.reduce((offset, pos) => {
-      pos.match.container.transform(Snap.matrix()
-        .translate(center - pos.box.cx + (includeLines ? 20 : 0), offset));
-
-      return offset + pos.box.height + 5;
-    }, 0).value() - 5;
-
-    verticalCenter = totalHeight / 2
 
     if (includeLines) {
-      positions.each(pos => {
+      this.matchContainer.transform(Snap.matrix()
-        var box = pos.match.getBBox(),
+        .translate(20, 0));
-            direction = box.cy > verticalCenter ? 1 : -1,
+
+      containerBox = this.getBBox();
+      paths = _.map(matches, match => {
+        var box = match.getBBox(),
+            direction = box.cy > containerBox.cy ? 1 : -1,
+            distance = Math.abs(box.cy - containerBox.cy),
             pathStr;
 
-        pathStr = (verticalCenter === box.cy) ?
+        if (distance >= 15) {
-          'M0,{center}H{side}' :
+          pathStr = 'M10,{box.cy}m0,{shift}q0,{curve} 10,{curve}h{box.x}';
-          'M0,{center}q10,0 10,{d}V{target}q0,{d} 10,{d}H{side}';
+        } else {
+          pathStr = 'M0,{containerBox.cy}c20,0 20,{anchor.y} {anchor.x},{anchor.y}';
+        }
 
-        paths.push(Snap.format(pathStr, {
+        return Snap.format(pathStr, {
-          center: verticalCenter,
+          containerBox,
-          target: box.cy - 10 * direction,
+          box,
-          side: box.x,
+          shift: -10 * direction,
-          d: 10 * direction
+          curve: 10 * direction,
-        }));
+          anchor: {
+            x: box.x + 20,
+            y: box.cy - containerBox.cy
+          }
+        });
       });
 
-      this.container.path(paths.join(''))
+      paths.push(Snap.format('M0,{box.cy}q10,0 10,-10V{top}M0,{box.cy}q10,0 10,10V{bottom}', {
-        .clone().transform(Snap.matrix()
+        box: containerBox,
-          .scale(-1, 1, center + 20, 0));
+        top: _.first(matches).getBBox().cy + 10,
+        bottom: _.last(matches).getBBox().cy - 10
+      }));
+
+      this.container.prepend(this.container.path(paths.join('')));
+      this.container.prepend(this.container.path(paths.join(''))
+        .transform(Snap.matrix().scale(-1, 1, containerBox.cx, 0)));
     }
   },