Create Custom Connection programmatically

Developers
1

Hi,

could somebody help me figure out how to create a custom connection programmatically? I already tried to debug it.

I am using the custom elements example:

And yes i am aware that this wont produce BPMN 2.0 compatible xml.

My use-case is that when a certain element is created i want to create a connection between the new shape and one that already exists. All i need to know is how can i call modeling.connect or modeling.createConnection the right way.

import CommandInterceptor from "diagram-js/lib/command/CommandInterceptor.js";
import { getAllElements } from "../app";

const HIGH_PRIORITY = 2000;

export default class CustomerInsertHandler extends CommandInterceptor {
    constructor(eventBus, modeling, elementRegistry) {
      super(eventBus);
      this.postExecuted("shape.create", HIGH_PRIORITY,  context => {
        const shape  = context.shape;

        //Example of connecting element customer and accountant after create
        //If the other shape already exists
        let elements = getAllElements();

        let element;

        if(shape.type === 'custom:accountant') {
            element = elements.find(element => element.type === 'custom:customer');
            if(element !== undefined) {
                //modeling.connect(shape, element);
                modeling.createConnection(shape, element, {tpye: 'custom:connection'})
            }
        }
        if(shape.type === 'custom:customer') {
            element = elements.find(element => element.type === 'custom:accountant');
            if(element !== undefined) {
            
            }
        }
        },
        true
        );
    }
}

CommandInterceptor.$inject = ["eventBus", "modeling", "elementRegistry"];

Thanks in advance!

2

From the BPMN editor perspective you’d call the higher level API Modeling#connect, connected via a pre or post execute (or executed) hook as you proposed.

I’d suggest you to look into existing usage patterns that exist around that API. We also welcome contributions to add API documentation.