Enable components like selection or drag and drop with diagram-js

Developers
2

A quick note on naming in the bpmn.io sphere: We talk about modules as chunks that provide certain functionality to the diagram. A service is an individual piece inside the diagram that does the actual work and has to be provided by a module. eventBus for instance is a service, provided by the diagram-js/lib/core module.

Modules Basics

When building your own modeler based on diagram-js the bpmn-js Viewer can serve as good examples. Basically you have to instantiate the diagram with the modules option that specifies which features to include:

var diagram = new Diagram({
  modules: [
    require('diagram-js/lib/features/selection'),
    ...
  ]
});

Some modules, namely everything in diagram-js/lib/core are always available.

Providing new Modules + Services

You have to define new modules in the proper way, i.e. each as a plain object with service names as keys and an injectable service definition as the value:

// service implementation to be instantiated via new Foo(...)
function Foo(eventBus) {
  eventBus.emit('i-am-instantiated'); 
}

// module exposing service
var fooModule = {
  foo: [ 'type', Foo ]
};

// diagram that provides the foo service
var extendedDiagram = new Diagram({
  modules: [
    selectionModule,
    fooModule,
    ...
  ]
}):

// accessing the singleton instance of foo
var foo = diagram.get('foo');