detach* and remove*Endpoint functions are not consistent

[GoogleCodeExporter]

When you need to detach a connection from an endpoint using jsPlumb.detach, 
depending on the type of parameters you passed the connection canvas is not 
destroyed. 

Tracing the function calls showed that Endpoint.detach is called, and it does 
not handle the connection removal. But I also remarked that Endpoint.detach is 
sometimes used in a case where we want to keep the connection, like dragging 
contexts. 

The jsPlumb.removeEveryEndpoint and removeEndpoint functions do not delete 
connectors also.

A lot of duplicated code is there in the previous mentioned functions, 
reorganizing it in these areas can solve the issue.

Original issue reported on code.google.com by sylvain....@gmail.com on 20 Oct 2010 at 7:12

[GoogleCodeExporter]

it's true about that code...it's organically grown into a mess.  one of the 
problems is that i have been trying to maintain backwards compatibility with 
older versions; i'm not going to continue doing that now.

so, to be clear:

- detach calls will detach Connections only, leaving Endpoints in place.
- removeEndpoint will remove an Endpoint and detach any Connections it had.
- removeEveryEndpoint will remove every Endpoint and all of their associated 
connections.

can you clarify what you mean by this:

"But I also remarked that Endpoint.detach is sometimes used in a case where we 
want to keep the connection, like dragging contexts. "

...do you mean inside the code this method is called?  or you are using it like 
this somehow?

Original comment by simon.po...@gmail.com on 21 Oct 2010 at 9:21

[GoogleCodeExporter]

Actually I was referring to a call to the alias removeConnection in the start() 
drag function, when a connection already exists (l.1146 of 1.2.3, jQuery).

If I understood the logic we detach the connection from its original endpoint 
to be able to drag it wherever we want. So the connection should not be 
deleted, but most of the times we want the connection to be deleted when we 
call detach.

Imo an optional boolean 'keepConnection' in the parameters of detach (the 
Endpoint one) and you're done.

Original comment by sylvain....@gmail.com on 22 Oct 2010 at 12:41

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I've had success in "myNewConnectionListener( data)" with:

jsPlumb.detach( { source:data.sourceId, target:data.targetId } );

As was written in earlier comments, I discover that this leaves the endPoints 
laying around, so I want to explicitly delete the Connection's sourceEndpoint, 
but not its targetEndpoint.

Below is what I tried, which doesn't seem to work, not even the part Simon 
wrote above about, "removeEndpoint will remove an Endpoint and detach any 
Connections it had."

Please advise on what I can do differently to successfully delete a specific 
endpoint on a specific DOM Element.

Here's what I'm trying at present in "myNewConnectionListener( data)":

var connectionsDict =
    jsPlumb.getConnections( { source:data.sourceId, target:data.targetId } );  

var i, numConnections = connectionsDict.DEFAULT.length, thisConnection, 
thisEndpoint;
var targetEndpoint;

for (i = 0 ; i < numConnections ; i++)
{
    thisConnection = connectionsDict.DEFAULT[i];
    thisEndpoint = thisConnection.sourceEndpoint;
    targetEndpoint = thisConnection.targetEndpoint;

    thisEndpoint.detach( thisConnection);
    thisEndpoint.detachAll();
    thisEndpoint.detachFrom( targetEndpoint);
    jsPlumb.removeEndpoint( data.sourceId, thisEndpoint);
    jsPlumb.removeAllEndpoints( data.sourceId);
}

In myNewConnectionListener(), I want to delete the new connection (I also 
re-create it with a different look inside this Listener), and also delete the 
sourceEndpoint, but not the targetEndpoint.

Are any the above the correct way to go, and are currently broken, or is there 
a different approach I can use to delete a specific endPoint on a specific DOM 
Element?

Thanks,

=Cliff Olling

Original comment by tobu...@gmail.com on 24 Nov 2010 at 8:44

[GoogleCodeExporter]

On my side, jsPlumb.removeEndpoint(data.sourceId, thisEndpoint) is what I use 
when I want to delete an Endpoint and its Connections. 

Also, take a look at issue 35 if you are using version 1.2.3, basically this 
issue was about sourceEndpoint being the dragged Endpoint, not the actual 
Endpoint.

Original comment by sylvain....@gmail.com on 25 Nov 2010 at 12:18

[GoogleCodeExporter]

there is actually a bug with deletion of endpoints - if registered using UUIDs, 
they are never deleted.  what's missing is a 
jsPlumb.deleteEndpoint(uuid/Endpoint) method.  and this method should be clever 
enough to unregister the endpoint from all the elements using it first.

Original comment by simon.po...@gmail.com on 26 Nov 2010 at 5:49

• Added labels: Priority-High
• Removed labels: Priority-Medium

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

these will be the methods and what each one does:

jsPlumb.detach(params)

  where params may be:

        {connection:<Connection>} - detaches the given Connection

        {sourceEndpoint:<sourceEndpoint>, targetEndpoint:<targetEndpoint>} - detaches all Connections between the two Endpoints

        {source:<string or element>, target:<string or element>} - detaches all Connections that exist between any Endpoints on the two elements, where the elements may have been passed in as element ids or actual element objects.

jsPlumb.removeEndpoint(el, endpoint) - kept for backwards compatibility, but 
will be wired to jsPlumb.deleteEndpoint, which takes only an Endpoint as 
argument.  Endpoints can only be registered on one element anyway, so this 
method was kind of misleading.  removeEndpoint will be deprecated in 1.2.4 and 
removed in 1.3.

jsPlumb.removeAllEndpoints(el) - deletes all Endpoints from the given element, 
which may be specified as a string id or as an element object.  this call 
simply iterates through every Endpoint registered for the element and calls 
jsPlumb.deleteEndpoint on it.

jsPlumb.removeEveryEndpoint() - also kept for backwards compatibility, but 
deprecated and wired to jsPlumb.reset(), which is what the effect of removing 
every Endpoint really is: all connections are detached and all endpoints 
deleted.

jsPlumb.deleteEndpoint(endpoint) - deletes the given Endpoint, detaching any 
Connections is was part of, and freeing it from the UUID lookup table if it had 
a UUID.  The Endpoint ceases to exist from jsPlumb's point of view after this 
method is called. 

jsPlumb.reset() - this method exists already but i wanted to call your 
attention to it.  it's the way to make jsPlumb forget everything and start 
afresh.

Endpoint.detach(connection) - detaches the given Connection from the Endpoint, 
removing it from jsPlumb's knowledge.  

Endpoint.detachAll() - detaches all Connections from the Endpoint

Endpoint.detachFrom(endpoint) - detached all Connection from the Endpoint to 
the given Endpoint.

jsPlumb.detachAll(el) - detaches all Connections from the given element 
(specified as a string id or element object). leaves Endpoints in place.

jsPlumb.detachEverything() - detaches every Connection jsPlumb knows about, 
leaving Endpoints in place.

Original comment by simon.po...@gmail.com on 27 Nov 2010 at 1:23

• Changed state: Fixed

[GoogleCodeExporter]

Original comment by simon.po...@gmail.com on 27 Nov 2010 at 1:24

• Changed state: Verified