Diagram-js -- What are the best practices for building a custom layouter?

Developers Modeler
1

I am building a custom ORM schema builder using diagram-js. I looking to understand what approaches exist or should be followed in writing a custom layouter module.
image

From what I have been able to infer from the codebase, the layouter module has one job, return a ordered sequence of waypoints from source to target. In order to understand what context is available when layouter is called, I did a search on the codebase and captured what I found below.
layouter_inclusion
layouter_call_diagram

It seems like a lot of things interact directly and indirectly with the attribute ‘waypoint’ on connections. For example, the ‘Bendpoints’ modules interacts with the waypoints on a connection but does not call layouter. Also it is a bit odd that default layouter is not compatible with the ‘Bendpoints’ module (I would be happy to offer a PR to make them if interested).

For those that are more experienced with using diagram-js, are there pitfalls I should be aware of? Or is there patterns to use in terms of attributes on the connections opposed to including them in the hints/context for layout purposes?

Thanks in advance for your thoughts and advice.

2

You should be able to replace the default layouter by overriding it with your custom layouter similar to how it’s specified here: bpmn-js/lib/features/modeling/index.js at 601b0f8c0bc68b88b65f522c856f322d20ccc8cb · bpmn-io/bpmn-js · GitHub

3

Thanks Philipp, I had already worked out the steps to override the default layouter. I was more interested in hearing about other experiences in building a custom layouter. Or if there was any reasoning for just modifying the waypoints or using the layouter layoutconnection function. It seems like in the code base uses both usage patterns.