JsPlumb programmatically created connect hides endpoint

Question

I'm trying to do the following using jsPlumb 1.3.16. 1. Add endpoints to two divs 2. Create a connection programmatically (see below).

The issue I'm having is that the connection seems to create it's own endpoints which are now hiding the original endpoints. As a result, I can't create any more connections from those endpoints. It seems like a z-index issue.

var connectorOptions = {    
    uniqueEndpoint:false,       
    maxConnections:-1,
    newConnection:true,     
    endpoint: ["Rectangle", {
        width: 15,
        height: 15
    }],
    endpointStyle: {
        fillStyle: "rgba(255,255,255,50)", 
        outlineColor: "#ccc", 
        outlineWidth: 1
    },
    setDragAllowedWhenFull: true,
    connector: ["Straight"],
    paintStyle: {
        strokeStyle: "#ec51bb", 
        lineWidth: 4
    },
    connectorStyle: {
        lineWidth: 4,
        fillStyle: "#ec51bb"
    },
    overlays: [
        ["Arrow", {
            width: 14,
            length: 14,
            foldback: 1,
            location: 1,
            id: "arrow"
        }]
    ]
};


var endpointOptions = {
    maxConnections:-1, 
    uniqueEndpoint:false,
    isSource:true, 
    isTarget:true, 
    endpoint:["Rectangle", {
        width:15,
        height:15,
        cssClass: "endPointStyle",
        hoverClass: "endPointHoverStyle"
    }], 
    setDragAllowedWhenFull:true,
    paintStyle:{
        strokeStyle: "#9f9f9f"
    },
    connectorStyle : {
        lineWidth: 4, 
        strokeStyle:"#ec51bb"
    },
    connector:[ "Straight"],
    connectorOverlays:[ 
        [ "Arrow", {
            width:14, 
            length:10, 
            foldback: 1,  
            location:1, 
            id:"arrow"
        } ], 
        [ "Label", {
            label:"", 
            id:"label"
        } ]
    ]
};


jsPlumb.addEndpoint(itemId1,{  anchor:[ 0.5, -0.05, 0, 1, 0, -4 ] }, endpointOptions);
jsPlumb.addEndpoint(itemId2,{  anchor:[ 0.5, -0.05, 0, 1, 0, -4 ] }, endpointOptions);

var anchors= [[ 0.5, -0.05, 0, 1, 0, -4 ], [ 0.5, -0.05, 0, 1, 0, -4 ]];

var newConnection = jsPlumb.connect({
    source: itemId1,
    target: itemId2,
    anchor: anchors
    },
    connectorOptions
);

Answer 1

Try this. Now its 2 endpoints on each element and you can use them for connecting to another elements without creation new endpoints. You only need add maxConections property to endpoint declaration.

var windows = jsPlumb.getSelector(".chart-demo .window");
            for (var i = 0; i < windows.length; i++) {
                instance.addEndpoint(windows[i], {
                    uuid:windows[i].getAttribute("id") + "-bottom",
                    anchor:"Bottom",
                    maxConnections:-1
                });
                instance.addEndpoint(windows[i], {
                    uuid:windows[i].getAttribute("id") + "-top",
                    anchor:"Top",
                    maxConnections:-1
                });
            }

            instance.connect({uuids:["chartWindow3-bottom", "chartWindow6-top" ], overlays:overlays});
            instance.connect({uuids:["chartWindow1-bottom", "chartWindow2-top" ], overlays:overlays});
            instance.connect({uuids:["chartWindow1-bottom", "chartWindow3-top" ], overlays:overlays});
            instance.connect({uuids:["chartWindow2-bottom", "chartWindow4-top" ], overlays:overlays});
            instance.connect({uuids:["chartWindow2-bottom", "chartWindow5-top" ], overlays:overlays});