jsPlumb remove endpoints on connection detached

Question

I'm creating a matching widget of two columns using jsPlumb.

The jsPlumb instance is created as :

var container = $element.find('.match-widget .widget-output:not(.edit)');

jsPlumb.getInstance({
        PaintStyle: {
          lineWidth: 6,
          strokeStyle: '#567567',
          outlineColor: 'black',
          outlineWidth: 1
        },
        MaxConnections: -1,
        LogEnabled: true,
        Anchors: ['Center', 'Center'],
        DragOptions: {
          cursor: 'pointer',
          zIndex: 2000
        },
        Connector: ['Bezier', {
          curviness: 30
        }],
        Endpoints: [
          ['Dot', {
            radius: 11
          }],
          ['Dot', {
            radius: 11
          }]
        ],
        EndpointStyles: [{
          fillStyle: '#FF7D19'
        }, {
          fillStyle: '#FF7D19'
        }],
        Container: container
});

I've created the source and target like:

jsPlumb.makeSource($(element[0]).find('.match-source-anchor')[0], {
    maxConnections: 1,
    uniqueEndpoint: true,
    isSource: true,
    enabled: true
 });

 jsPlumb.makeTarget($(element[0]).find('.match-target-anchor')[0], {
    uniqueEndpoint: true,
    isTarget: true,
    maxConnections: 1,
    enabled: true
 });

The connection process works properly. But the issues after making one connection if I remove the connection, the connection end point is still visible.

I tried to add the config "_deleteOnDetach" and I also tried to delete the endpoint on the connectionDetach. In both cases the end point is removed but in I try to connect the same element then it gets error.

So can anybody please help me how to fix it?

Demo : jsfiddle

Answer 1

Usually when removing a connection, it's end-points are usually deleted with it. There is one exception to this, in cases where the end-point is set as unique, in which case the endpoint isn't deleted.

See this from the jsPlumb code:

// if unique endpoint and it's already been created, push it onto the endpoint we create. at the end
// of a successful connection we'll switch to that endpoint.
// TODO this is the same code as the programmatic endpoints create on line 1050 ish
if (def.uniqueEndpoint) {
  if (!def.endpoint) {
    def.endpoint = ep;
    ep._deleteOnDetach = false;
    ep._doNotDeleteOnDetach = true;
  }
  else
    ep.finalEndpoint = def.endpoint;
}