jsPlumb New Connection Handler: How to get the Endpoint anchor position?

Question

Yeah, so I've been playing with jsPlumb. Let's say I have a div with two endpoints; one TopCenter, one BottomCenter.

When a new connection is created, I can bind to that event with the function below. My question is, how do I get the anchor position for the endpoints? I do get the Source and TargetEndpoint objects, but looking at the documentation, I don't see a way to get the anchor position...

thanks!

jsPlumb.bind("jsPlumbConnection", function(connectionInfo) {
 /*
                         connection         :   the new Connection.  you can register listeners on this etc.
                        sourceId        :   id of the source element in the Connection
                          targetId      :   id of the target element in the Connection
                          source        :   the source element in the Connection
                          target        :   the target element in the Connection
                          sourceEndpoint    :   the source Endpoint in the Connection
                          targetEndpoint    :   the targetEndpoint in the Connection
                          */
});

score 5 · Answer 1 · edited Mar 19 '13 at 16:32

5

connectionInfo.connection.endpoints[0].anchor.type is the source position. connectionInfo.connection.endpoints[1].anchor.type is the target position.

edited Mar 19 '13 at 16:32

meyumer

5,063
1
17
21

answered Mar 19 '13 at 16:08

Jaime

51
2

score 1 · Answer 2 · answered Feb 03 '13 at 14:21

I found the following solution to the problem: console.log('anchors: %o %o',connectionInfo.sourceEndpoint.anchor.x, connectionInfo.sourceEndpoint.anchor.y);

By getting the x and y coordinates of the endpoints I know the position of the anchor and can use that to recreate a diagram.

jsPlumb New Connection Handler: How to get the Endpoint anchor position?

2 Answers2

Linked