JSPlumb - setting connection ID

Question

We're working on a project that uses JSPlumb for workflow rendering and maintaining a separate data model that includes nodes (id, position, text etc.) and connections, keeping this in sync with events using jsPlumb.bind

When I come to recreate my connections I'm calling jsPlumb.connect with source and destination parameters but it seems that the ID is created behind the scenes and therefore doesn't match what was loaded from the data model. This would be fine except on detatching I wan't to remove that connection by ID from the model...

Is there any way to set the ID of a connector manually?

Thanks

score 4 · Answer 1 · edited Jul 07 '15 at 15:18

4

You can set the id directly from the connection:

var conn=jsPlumb.getConnections({
  scope:'myScope", 
  source:"mySourceElement", 
  target:"myTargetElement"
});

conn.id=elem.connectionId;

edited Jul 07 '15 at 15:18

MeanGreen

3,098
5
37
63

answered Jul 07 '15 at 14:42

Santhosh

41
2

MrNobody007 · Answer 2 · 2014-02-18T12:34:13.170

From the API Documents I couldn't find function for getting Connections with attribute ID, even though you can set ID to connection using setParameter(API DOC). Instead you can remove the connection with sourceId and targetId rather than by connection ID.

var conn=jsPlumb.getConnections({
  scope:'myScope", 
  source:"mySourceElement", 
  target:"myTargetElement"
});
jsPlumb.detach(conn,param)  //by default param is false which defines whether to fire event on connection detach

score 1 · Answer 3 · answered Apr 28 '15 at 20:13

I had a routine that would save and then restore the entire flowchart. Here's how I was able to set the id of the connector programmatically.

var connections = flowChart.connections;
$.each(connections, function( index, elem ) {
    var connection1 = jsPlumb.connect({
        source: elem.pageSourceId,
        target: elem.pageTargetId,
        label: elem.connectionLabel,
        id: elem.connectionId,
        connector: "Flowchart",
        anchors: ["BottomCenter", [0.75, 0, 0, -1]],
        overlays:[ 
            "PlainArrow", 
            [ "Label", { location:1,
            id:"arrow",
            length:12,
            foldback:1,
            width:12,
            cssClass:"aLabel"
            }]
        ],
        connectorOverlays:[ 
            [ "Arrow", { width:10, length:30, location:1 } ],
            [ "Label", { label:"foo" } ]
        ],
    });

score 0 · Answer 4 · answered Apr 27 '15 at 08:46

var c = instance.connect({
     source: sourceNodeId,
     target: targetNodeId                   
});
$(c).attr('id', connection_id);

When you create the connection between two nodes, you can store it in a variable. After that Id is easily addable with jQuery.

score 0 · Answer 5 · answered Sep 10 '20 at 08:56

0

var connection = jsPlumb.connect({
     source: source,
     target: target
});
$(connection.canvas).attr('id', id);

Note the connection.canvas which is different from @chabeee answer.

answered Sep 10 '20 at 08:56

Adam

1,054
1
12
26

JSPlumb - setting connection ID

5 Answers5