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

Melanoma

Answer 1

You can set the id directly from the connection:

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

conn.id=elem.connectionId;

Grapery

Answer 2

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

Subbase

Answer 3

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" } ]
        ],
    });

Rummel

Answer 4

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.

Hypallage

Answer 5

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

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

Lepidopteran