[diagram-js] Use create-service with multiple shapes and source


I’m working on modeling tool with just diagram-js and no bpmn-js at all. So far my users may create nodes and connections in the diagram. “Nodes” consist of one or more shapes (the node “body” and some optional “port” shapes). I heavily use the context pad to offer all node creation capabilities to the end users.

For example: this._create.start(event, this._elementFactory.create('write'), { source: element })

Unfortunately, this isn’t working anymore since this._elementFactory.create('write') returns an array of shapes (body with ports as children). Depending on whether I set the source element or not only the first shape is created (no “port”-shapes) or no connection is created.

The problem seems to be this if-else. Depending on whether connect is given either the first shape is “appended” or all elements are “created”. Is it somehow possible to achieve both effects?

Of course I could create my own create-service and a related modeling command, but this seems to be quite cumbersome.

Generally, creating multiple elements via the Create API should work. Can you describe your use case a bit? Why are you supposed to set the source prop? It is only required when creating connections or appending one shape.

I guess appending multiple shapes is currently not possible via this API. You could create a feature request and illustrate, what you want to achieve.

Thank you very much for the quick response!

I made a little picture to illustrate my problem: diagram

I want to use the context pad of node “A” to create node “B” as well as its ports (connected as “children”) and the arrow. To be precise, only the “root” nodes need to be connected.

Hence, I think the source attribute is the right way to (auto-)generate the connection. But if source = true node B is rendered without its ports (and the diagram behaves somewhat buggy). If I change the element factory to create B without ports everything works fine.

So, what I want to achieve is to create a (automatically connected) multi-shape structure.

I think that’s not currently possible, since the AutoPlace feature only allows one shape. By good reason, because appending is also only possible with one shape. I guess that’s also causing the implementation inside the Create API, as you mentioned.

I think you’ll have to build something on your own, or create a feature request. We will then see how to tackle this in a near future or not.

Ok, thank you very much! :slight_smile: