How to overwrite BpmnLayouter?

Developers
1

Hello!

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',
  'customLayouter'
],
  customRules: [ 'type', CustomRules ],
  customLayouter : [ 'type', CustomLayouter ],
};

and added the module in Diagram like this

        bpmnModeler = new BpmnModeler({
            container: containerEl,
            propertiesPanel: {
                parent: propertiesDiv
            },
            additionalModules: [
                customModule,
                propertiesPanelModule,
                propertiesProviderModule,
                bpmnPropertiesProviderModule
            ],
            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 ?

Thanks,
Saby

2

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

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