How to add Multidiagram functionality on BPMN

Good morning,
I saw that there is a new function that allows to access multiple diagrams on bpmn canvas. I would like to contribute adding three new buttons to manipulate diagrams:

  • Add diagram
  • Remove diagram
  • Switch between them

I tried to make this functionality on Camunda modeler, and it works well but I think that was a rough solution, It’s better to make it directly on bpmn-js project, but I am not really certain of where to begin.
If I understood well the project, I need to make a handler on modeling -> behaviour -> cmd to handle the execution of three new commands, adding the new prototype methods on the Modeling object. Is it right?
And how can I make the new buttons on canvas? Do I need to work also on diagram-js project?
Thank you very much for your answers and your help.

Hi @Ichigo85, welcome back!

Our DMN toolkit offers multi-view capabilities for quite a while:

image

What we did there is to do two things:

  • Provide the infrastructure in the editor core (did that in bpmn-js, too)
  • Provide an official example how the infrastructure is being used, cf. dmn-js-examples/modeler

As you see in the example we did not ship switching controls with the DMN toolkit. It remains the responsibility of the embedding tool to show these (and map them to modeling actions).

I suggest you to contribute a minimal showing view switching in bpmn-js first. Afterwards we can think of providing the missing tools to the editor core.

Best,
Nico


Regarding your questions:

If I understood well the project, I need to make a handler on modeling -> behaviour -> cmd to handle the execution of three new commands, adding the new prototype methods on the Modeling object. Is it right?

For creating new views in bpmn-js you’d indeed need to create a new command. You can do so without touching modeling. CommandStack#registerHandler + a command implementation is all you need.

And how can I make the new buttons on canvas? Do I need to work also on diagram-js project?

Canvas#getContainer provides access to the enclosing HTML element. This is typically the place where you’d add new buttons within a bpmn-js instance. As mentioned above, I’d prefer to have switching controls outside the core toolkit though (similarily how we do it in dmn-js).

1 Like

Hello @nikku , thank you for your answer!
I already made new commands implementations on our fork :slight_smile: and, following what you wrote, I wrote an example of modeler with all the switching controls outside the core toolkit.
In fact, I already added this functions also to camunda modeler on our branch.
You can take a look at it, if you want :slight_smile:

1 Like

Cool. I’ll see if I can have a look :heart:.