Search code examples
javascriptjquerydrag-and-dropjsplumb

jsplumb connect not working

I'm trying to establish a few connection programmatically. The problem is that when the connection is drawn new endpoints are made and the existing endpoints are not clickable anymore. I do have endpoints with draggable behaviour. I can't get the endpoints (created by the connection) to have the same properties as the Original ones.

I've made a working jsFiddle: http://jsfiddle.net/SCSaf/4/

Below in the code the containers are initialized and a connection is drawn

jsPlumb.connect({source: "container1", target: "container2"}, common);

In the common var I tried to combine the properties of the source-endpoints (exampleGreyEndpointOptions) with the end-endpoints (endpointOptions) In common I have paintStyle to make the line/arraw the same as from the draggable ones. The anchors are defined to prevent connections between the containers or square-square connections. As you can see this is going to be used in a very hierarchical datamodel.

I tried to set the new endpoints behaviour by adding more endpoint options (uncomment to test) but that gives somekind of merge error in jsPlumb

var common = {
anchors: ["BottomCenter", "TopCenter"],
//endpoints: [{
//    isSource: true,
//    isTarget: false,
//}, {
//    isSource: false,
//    isTarget: true,
//}],
endpointStyles: [exampleGreyEndpointOptions, endpointOptions],
paintStyle: {strokeStyle: color}
};

I'm out of ideas and have no clue how to resolve the error. The behaviour I want is that it also possible to draw/drag new connections (or remove existing ones) from endpoints with connections draw programmatically

API ref: http://jsplumbtoolkit.com/apidocs/Connection.html

docs: http://jsplumbtoolkit.com/doc/connections#programmatic

Solution

  • In order to retain your endpoint options you need to connect the containers by their endpoints rather than their ID. I have given endpoints uuid based on their container and connected them. for example container0 has endpoints uuid container0sr(source) and container0tr(target).

    I have modified your jsFiddle

    Modifications are:

    $('.stepnode').each(function(){
    InitContainer($(this));
});

    Giving uuid for endpoint of each container:

    uuid:el.attr("id")+"sr" //for source endpoint options
uuid:el.attr("id")+"tr" //for target endpoint options
jsPlumb.connect({uuids:["container1sr","container2tr"]}); //for connecting based on endpoint uuid