Clever Geek Handbook

JsPlumb New connection handler: how to get endpoint anchor position?

Yes, that's why I played around 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 this event using the function below. My question is how to get the pivot position for the endpoints? I am getting Source and TargetEndpoint objects, but looking at the documentation I don't see a way to get the anchor position ...

thank!

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
                          */
});
+3


source to share


2 answers


connectionInfo.connection.endpoints[0].anchor.type

is the starting position. connectionInfo.connection.endpoints[1].anchor.type

- target position.



+4


source


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



Given the x and y coordinates of the endpoints, I know the position of the anchor and can use that to recreate the diagram.

+1


source






More articles:


All Articles