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


#1

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’)
}
});

diagram.invoke([‘eventBus’, renderer], Object.create(renderer.prototype));

Adding

components: [ ‘selection’, ‘dragVisuals’, ‘bendpoints’ ]

from the bendpoints example does not work. When I try to get ‘selection’, it returns an error that there is no provider for ‘selection’.

My second try was to add the following to the Diagram constructor:

    modules:
    {
                 'selection' : ['type', require('diagram-js/lib/features/selection/Selection')],
    }

Now I can get selection, but I don’t think it is meant to be used this way. And I still can’t select a created shape with this.

  1. How to enable theese modules properly?
  2. How to apply these mechanics to the created shapes, drawn with a custom renderer?

Sorry for the noobish questions. I am new to JS, coming from a C++ world.

Best regards,
Thomas


#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');

Error: No provider for "bpmnFactory"!
#3

Don’t hesitate to ask, if things remain unclear.


#4

Many thanks for your detailed answer. :slight_smile:
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?