function Outline(eventBus, styles) {

  this._eventBus = eventBus;

  this.offset = 5;

  var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);

  var self = this;

  /**
   * @param {SVGElement} gfx
   *
   * @return {SVGElement} outline
   */
  function createOutline(gfx) {
    var outline = svgCreate('rect');

    svgAttr(outline, assign({
      x: 0,
      y: 0,
      rx: 4,
      width: 100,
      height: 100
    }, OUTLINE_STYLE));

    return outline;
  }

  // A low priortity is necessary, because outlines of labels have to be updated
  // after the label bounds have been updated in the renderer.
  eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY, function(event) {
    var element = event.element,
        gfx = event.gfx;

    var outline = domQuery('.djs-outline', gfx);

    if (!outline) {
      outline = self.getOutline(element) || createOutline(gfx);
      svgAppend(gfx, outline);
    }

    self.updateShapeOutline(outline, element);
  });

  eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
    var element = event.element,
        gfx = event.gfx;

    var outline = domQuery('.djs-outline', gfx);

    if (!outline) {
      outline = createOutline(gfx);
      svgAppend(gfx, outline);
    }

    self.updateConnectionOutline(outline, element);
  });
}
@class

A plugin that adds an outline to shapes and connections that may be activated and styled
via CSS classes.

@param {EventBus} eventBus
@param {Styles} styles