Move connections behind shapes

[Shiralizadeh]

Hi everyone,
I’m using diagram.js in one of my projects. Whenever I connect two objects to each other using modeling.connect(source, target) method. The connection line appears on top of shapes. ex:

How can I move these elements to the top?

[nikku]

In a nutshell, there is two things you can do:

• Implement an ordering provider that ensures connections are always drawn behind elements
• Integrate cropping connection docking that cuts of the connections visually at source and target shape boundaries.

Integrate cropping connection docking like this:

const layoutModule = { 
  connectionDocking: CroppingConnectionDocking
};

const diagram = new Diagram({
  modules: [
    ...,
    layoutModule
  ]
});

Checkout this test case for reference, too.

[Shiralizadeh]

Thank you, Nico. The Ordering Provider solution works for me.