community-edition icon indicating copy to clipboard operation
community-edition copied to clipboard

Programatically created connections vs drag and drop ones

Open orioza opened this issue 6 years ago • 6 comments

Hopefully somebody can help with this problem in jsPlumb. When I programmatically create connections the behaviour is different from creating a connection with drag and drop.

When the connection has been created programmatically: When I drag from the source to add a connection to another new element it "breaks" existing connections first when dragging. When I then connect them up again and add a second new element it immediately creates the link (without breaking the previous connections).

When connections are made by dragging and dropping this never happens. The code I use to create a connection programmatically is:

var common = { connector: ["Straight"], endpoint: ["Dot", { radius: 10 }], anchors: ["Right", "Left"], connectorOverlays: [ ["Arrow", { width: 10, length: 15, location: 0.5, id: "arrow" }] ] };

jsPlumb.connect({ source: "NewItem_0", target: "NewItem_1" }, common);

I want the programmatically created connections to behave the same as creating them with drag and drop. As this is an editor I want to load a previous design and then add to it but the problem is when dragging new connections it always wants to break the old ones. I work only with Many to 1 connections. So the problem is on the many side. If I wanted to break a connection I would do it on the one side if that makes sense.

orioza avatar Feb 27 '18 09:02 orioza

Same problem here

kaliif avatar May 12 '18 14:05 kaliif

Sorry I never got a solution for this even after spending a few days on this. Just decided to live with it unfortunately.

orioza avatar May 14 '18 12:05 orioza

I just realised I've been adding the connections to the wrong element. Once I sorted that out, I got them moving as expected. Sorry for the noise.

kaliif avatar May 14 '18 20:05 kaliif

@orioza if you can supply some pictures i may be able to help. one thing i note is that the 'connect' call will create an endpoint automatically, and the default behaviour for endpoints is to allow at most one connection. when you subsequently drag from an endpoint that is already "full" it will start dragging the connection. if you first create an endpoint via addEndpoint and set maxConnections:-1 on it, then you'll have an endpoint that supports unlimited connections, and an existing one will not be dragged when you try to drag a new one. perhaps this is the situation you are experiencing.

sporritt avatar May 14 '18 21:05 sporritt

Same problem here.

on drag n drop ... save

programatically ... load

Any tips will be of great help.

wesleyabelini avatar Aug 16 '22 16:08 wesleyabelini

I solved the problem. The problem was with the anchor.

When the connection was created, I had the anchor ​​like : Right, Top, Left ... But, when it was created pragrammatically, I had the anchor ​​like [[0,0.5,0,0,0,0],[0.5,0,0,0,0,0]], because these were the values ​​I had in the endpoint before saving.

To solve, just make sure that in both cases they are like: Right, Top, Left ...

wesleyabelini avatar Aug 17 '22 12:08 wesleyabelini