function Overlays(config, eventBus, canvas, elementRegistry) {
  this._eventBus = eventBus;
  this._canvas = canvas;
  this._elementRegistry = elementRegistry;

  this._ids = ids;

  /**
   * @type {OverlaysConfigDefault}
   */
  this._overlayDefaults = assign({

    // no show constraints
    show: null,

    // always scale
    scale: true
  }, config && config.defaults);

  /**
   * @type {Record<string, Overlay>}
   */
  this._overlays = {};

  /**
   * @type {OverlayContainer[]}
   */
  this._overlayContainers = [];

  /**
   * @type {HTMLElement}
   */
  this._overlayRoot = createRoot(canvas.getContainer());

  this._init();
}
A service that allows users to attach overlays to diagram elements.

The overlay service will take care of overlay positioning during updates.

@example

```javascript
// add a pink badge on the top left of the shape

overlays.add(someShape, {
  position: {
    top: -5,
    left: -5
  },
  html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>'
});

// or add via shape id

overlays.add('some-element-id', {
  position: {
    top: -5,
    left: -5
  }
  html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>'
});

// or add with optional type

overlays.add(someShape, 'badge', {
  position: {
    top: -5,
    left: -5
  }
  html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>'
});
```

```javascript
// remove an overlay

var id = overlays.add(...);
overlays.remove(id);


You may configure overlay defaults during tool by providing a `config` module
with `overlays.defaults` as an entry:

{
  overlays: {
    defaults: {
      show: {
        minZoom: 0.7,
        maxZoom: 5.0
      },
      scale: {
        min: 1
      }
    }
}
```

@param {OverlaysConfig} config
@param {EventBus} eventBus
@param {Canvas} canvas
@param {ElementRegistry} elementRegistry