community-edition
community-edition copied to clipboard
Programatically created connections vs drag and drop ones
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.
Same problem here
Sorry I never got a solution for this even after spending a few days on this. Just decided to live with it unfortunately.
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.
@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.
Same problem here.
on drag n drop ...
programatically ...
Any tips will be of great help.
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 ...