Customise BPMN elements while use library connections

Bender · February 16, 2022, 4:35pm

Hello guys, I’ve successfully revived an old topic BPMN-Connection for custom-elements and I’m sorry.
But since then I’ve think a bit, so here is the new one!

What I want to achieve is next:
I want to be able to model a signal path through the devices.
To do so, I suppose, I need to customise BPMN elements, for instance I want to create a device representation, it could look like this
Such element should be available as a whole custom element - just get it from palette, place it and you are good.
So here is my first question - how to create such composite element and do not allow user to change it internals.

Next, to be able to model a whole path I need to create some custom elements, like “internet”. I was playing with custom elements repo but I’ve found any custom element can’t be connected with regular connection.
Here is my second question - as I was planing to ad “internet” elements as such custom I need to understand how to implement such behaviour.

Thank you!

Martin · February 17, 2022, 3:11pm

Hi!

This sounds like a cool project, I’ll try to give you some hints

So here is my first question - how to create such composite element

Have a look at how we create expanded Subprocesses:
Recording 2022-02-17 at 15.58.45

It is a composite of 2 elements, you can easily expand on it to include more elements. Here is a link to github:

github.com

bpmn-io/bpmn-js/blob/6214772b8519cb82f61c4867b16c112bc6344922/lib/features/palette/PaletteProvider.js#L76-L96


      
          function createSubprocess(event) {
            var subProcess = elementFactory.createShape({
              type: 'bpmn:SubProcess',
              x: 0,
              y: 0,
              isExpanded: true
            });
          
            var startEvent = elementFactory.createShape({
              type: 'bpmn:StartEvent',
              x: 40,
              y: 82,
              parent: subProcess
            });
          
            create.start(event, [ subProcess, startEvent ], {
              hints: {
                autoSelect: [ subProcess ]
              }
            });
          }

and do not allow user to change it internals.

You can add custom rules that restrict movement. For example, check out the MoveRules or, for a more complex example, BpmnRules. These rules also define which elements can be connected to each other.

Bender · February 17, 2022, 6:23pm

Great hint on expanded Subprocesses - I’ll take a look, and another one with move rules is also great, thank you very much!

I’ll update this thread with example, once I’ll have something working, for anyone with same requirements to start from.

philippfromme · February 18, 2022, 8:24am

First question: How is this related to BPMN? If it’s not then I’d argue bpmn-js isn’t the right tool. Maybe a custom editor based on diagram-js would be a better choice.

Bender · February 21, 2022, 12:45pm

well, here is my point:

signal flow could be described with terms of BPM (start/process/end)
a lot of needed features (grid alignment, labels, connections) already implemented within bpmn.js and not in diagram.js
export/import abilities
ability to bind modelling events to actual actions

I was thinking, at first, to start from diagram-js but lack of documentation is an issue there so I thought it would better to use bpmn-js instead.

philippfromme · February 22, 2022, 9:46am

Given these requirements, I’d definitely build it with diagram-js. You can still look at how certain features were built in bpmn-js as inspiration. I’d argue that something like start and end semantics isn’t enough to justify using bpmn-js. All the basics of snapping, grid snapping, etc. are part of diagram-js.

Niklas_Kiefer · February 22, 2022, 9:48am

There is postit-js as another example of how to create stuff upon diagram-js, but it did take bpmn-js as an inspiration.