Diagram-js with connectors

Hi, I am playing with diagram-js and I found one example in girhub.

I downloaded this example. When I execute this I see 3 shapes and 1 connector drawn on the canvas.
But connector is not actually connecting the elements. When I move the shapes, connector is not aligning itself automatically between source and target.
How do we connect 2 shapes programatically with a connector ?

Thanks in advance

Hi @ykumar,

the connection does not automatically align since the connection has no target and source property. It is just connected visually, but the connection isn’t really related to the elements. You can do this by giving the target + source on connection-creation:

var connection1 = elementFactory.createConnection({
  waypoints: [
    { x: 250, y: 180 },
    { x: 290, y: 220 }
  source: shape1,
  target: shape2

I think we should consider adding it to the example to avoid confusion. Thanks for sharing!

I opened a pull request for this.

Thanks a lot. Solved my problem…

1 Like