Hi,
I am trying to create an editor for custom diagrams with diagram-js and created a custom renderer, for drawing the elements. But I am stuck at enabling components from “diagram-js/features/” like the selection.
Doing the following enables my renderer:
var Diagram = require('diagram-js');
var renderer = require('./lib/draw/MyRenderer');
var diagram = new Diagram
({
canvas:
{
container: document.getElementById(‘js-canvas’)
}
});
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');
Many thanks for your detailed answer.
The modules are now loaded correctly and even my renderer module is initialized in this way.
But now I have a problem with the selection. The markers in SelectionVisuals are created, when “selection.changed” is fired. But I think, that the selection has to be drawn in some kind of way. I took a look at the BpmnRenderer, which has some functions for the markers. I just copied them, but they are not called.
Is the drawing of the selection in diagram-js implemented, or do I have to provide this feature myself?