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

import _ from 'lodash';

export default {
  setContainer(container) {
    this.container = container;
    this.container.addClass(this.type);
  },

  getBBox() {
    return this.container.getBBox();
  },

  renderLabel(container, text) {
    var group = container.group();

    group.rect();

    group.text().attr({
      text: text
    });

    return group;
  },

  positionLabel(group) {
    var text = group.select('text'),
        rect = group.select('rect'),
        box = text.getBBox(),
        margin = 5;

    text.transform(Snap.matrix()
      .translate(margin, box.height + margin));

    rect.attr({
      width: box.width + 2 * margin,
      height: box.height + 2 * margin
    });
  },

  render() {
    console.log(this);

    this.container.addClass('placeholder');

    this.label = this.renderLabel(this.container, this.textValue);

    this.label.select('rect').attr({
      rx: 10,
      ry: 10
    });
  },

  position() {
    this.positionLabel(this.label);
  },

  spaceHorizontally(items, options) {
    var verticalCenter = 0;

    _.defaults(options, {
      padding: 0
    });

    _.reduce(items, (offset, item) => {
      var element = item.container || item,
          box;

      element.transform(Snap.matrix()
        .translate(offset, 0));

      box = item.getBBox();

      verticalCenter = Math.max(verticalCenter, box.cy);

      return offset + options.padding + box.width;
    }, 0);

    _.each(items, item => {
      var element = item.container || item;

      element.transform(Snap.matrix()
        .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));
    });
  }
};