How to overwrite BpmnLayouter?


I want to override BpmnLayouter in order to have straight lines.

I did the following:

created a CustomLayouter similar to BpmnLayouter - below is the part of the code

export default function CustomLayouter() {
  console.log("EXPORT CUSTOM LAYOUTER");
inherits(CustomLayouter, BaseLayouter);
CustomLayouter.prototype.layoutConnection = function(connection, hints) {
  if (!hints) {
    hints = {};
  console.log("CONNECTION", connection);

I added it in an export module like this

export default {
  __init__: [
  customRules: [ 'type', CustomRules ],
  customLayouter : [ 'type', CustomLayouter ],

and added the module in Diagram like this

        bpmnModeler = new BpmnModeler({
            container: containerEl,
            propertiesPanel: {
                parent: propertiesDiv
            additionalModules: [
            keyboard: {
                bindTo: document
            moddleExtensions: {
                camunda: camundaModdleDescriptor
    }, [])

The customRules module is working - meaning the rules are loaded and applied but when trying with the customLayouter all I get is the first console.log from the export. I don’t get errors, or warnings or anything of such sort.
The second one with console.log("CONNECTION", connection); doesn’t seem to be triggered when I try to add new connections, which leads me to believe that the function is not invoked.

What I’m doing wrong here? Is there an example of how to override BpmnLayouter ?


Your custom layouter should have the same module name as the BpmnLayouter in order to shadow it. Try this:

export default {
  __init__: [
- 'customLayouter'
+ 'layouter'
  customRules: [ 'type', CustomRules ],
- customLayouter : [ 'type', CustomLayouter ],
+ layouter: [ 'type', CustomLayouter ]
1 Like