jsPlumb

Passing extra parameters to a jsPlumb connection

This is a question I’ve had a few times now - if I have several different source Endpoints that can all connect to some target Endpoint, how do I know which one has made a Connection?

The concept of ‘scope’ does not, unfortunately, provide the answer, as it is limited to a single scope per Endpoint (having said that, one open issue on the Google Code site for jsPlumb is to introduce support for multiple scopes).

One suggestion has been to support a “parameters” member in the parameters to a jsPlumb.addEndpoint call, like this:

var ep = jsPlumb.addEndpoint("someDiv", {   
  endpoint:"Rectangle",   
  isSource:true,   
  parameters: {     
    "myParam":"myParamValue",     
    "myOtherParam":789   
  } 
}); 

Whenever a Connection is made with the given Endpoint as source, all of the parameters in that block would be copied into the Connection and made available via a couple of new methods:

var myParam = connection.getParameter("myParam");  

or  

var allParams = connection.getParameters(); 

This hasn’t yet been fully thought through - all comments/suggestions welcome. If it gets enough support it might make it into a future release.

For now, though, there is a simple hack you can do to achieve the same functionality - just set values directly on your source Endpoint after having created it:

var ep = jsPlumb.addEndpoint("someDiv", {   
  endpoint:"Rectangle",   
  isSource:true 
}); 
ep["myParam"] = "myParamValue"; 
ep["myOtherParam"] = 789; 

Then to access these through a Connection, you would do this:

var myParam = connection.endpoints[0]["myParam"]; 

where endpoints[0] references the first element in the Connection’s ‘endpoints’ array - the source Endpoint. Note that you can also access the target Endpoint with endpoints[1].