regexper-static/src/js/parser/javascript/regexp.js

import _ from 'lodash';
import Base from './base.js';

export default _.extend({}, Base, {
  type: 'regexp',

  render() {
    var self = this;

    this.matchContainer = this.container.group();

    _.each(this.matches(), match => {
      match.container = self.matchContainer.group();
      match.render();
      return match.container;
    });
  },

  position() {
    var matches = this.matches(),
        includeLines = (matches.length > 1),
        containerBox,
        paths;

    _.invoke(matches, 'position');

    this.spaceVertically(matches, {
      padding: 5
    });

    if (includeLines) {
      this.matchContainer.transform(Snap.matrix()
        .translate(20, 0));

      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;

        if (distance >= 15) {
          pathStr = 'M10,{box.cy}m0,{shift}q0,{curve} 10,{curve}h{box.x}';
        } else {
          pathStr = 'M0,{containerBox.cy}c20,0 20,{anchor.y} {anchor.x},{anchor.y}';
        }

        return Snap.format(pathStr, {
          containerBox,
          box,
          shift: -10 * direction,
          curve: 10 * direction,
          anchor: {
            x: box.x + 20,
            y: box.cy - containerBox.cy
          }
        });
      });

      paths.push(Snap.format('M0,{box.cy}q10,0 10,-10V{top}M0,{box.cy}q10,0 10,10V{bottom}', {
        box: containerBox,
        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)));
    }
  },

  matches() {
    return [this._match].concat(_.map(this._alternates.elements, _.property('match')));
  }
});