jsPlumb - How to get anchor's position

Question

I'm trying to save and load a jsPlumb flowchart, but I'm having a problem when recreating the connections. They are overlapping each other when I try to load it. Image 1 shows how I saved the flowchart and Image 2 shows how it is loaded.

I've seen this topic and this one and using endpoint.anchor.x and endpoint.anchor.y or connectionInfo.sourceEndpoint.anchor.x or connectionInfo.sourceEndpoint.anchor.y simple doesn't work. If I print it with console.log it shows undefined . I don't know if it's something about version or whatever but it looks like 'anchor' doesn't have 'x' and 'y'. I'm using jsPlumb 1.5.5

score 2 · Accepted Answer · edited May 09 '14 at 09:23

2

I printed my connection with console.log to see its properties and I solved my problem using connection.endpoints[0].endpoint.x connection.endpoints[0].endpoint.y connection.endpoints[1].endpoint.x connection.endpoints[1].endpoint.y

where: 0 is the source endpoint; 1 is the target endpoint; x and y are their respectives X and Y coordinates

UPDATE The details are now contained within anchor object of endpoint as :

connection.endpoints[0].anchor.x connection.endpoints[0].anchor.y connection.endpoints[1].anchor.x connection.endpoints[1].anchor.y

edited May 09 '14 at 09:23

coding_idiot

13,526
10
65
116

answered Mar 12 '14 at 12:24

lucasdc

1,032
2
20
42

how do you redraw the connections with anchors x & y ? Can you please share some code! – coding_idiot Apr 06 '14 at 06:16
@coding_idiot First I recreate the connection: connection = instance.connect({ source: sourceId, target: targetId }); and then I set it with : connection.endpoints[0].endpoint.x = xSource; connection.endpoints[0].endpoint.y = ySource; connection.endpoints[1].endpoint.x = xTarget; connection.endpoints[1].endpoint.y = yTarget; If you want me to be more clearer don't bother to ask I'll be happy to help you – lucasdc Apr 08 '14 at 20:37
I was able to do the same. Currently, I'm facing this issue - We have a flow-chart, there are 2 end-points in each component, we of course not use both end-points. But then when we restore the diagram, we should show those un-used empty endpoints. I quickly went through http://jsplumbtoolkit.com/doc/connect-examples but found no help. – coding_idiot Apr 09 '14 at 05:29
I didn't get it straight. What you mean by "show those un-used empty endpoints"? I also use FlowChart but with only 1 endpoint and I don't see a problem if using more than 1.. I'm recreating my component using instance.makeSource(...) and instance.makeTarget(...), so that I'll have my component with 1 endpoint (there wouldn't be a problem if there were more), and then I set the connections using the code I wrote above – lucasdc Apr 09 '14 at 11:22
`makeSource` and `makeTarget` works fine, but then we can't drag appropriately. Anyways, I was able to figure out the solution, thanks! – coding_idiot Apr 09 '14 at 12:13

score 0 · Answer 2 · answered Jan 20 '16 at 03:21

See my jsplumb here: http://jsfiddle.net/m7nercLh/2/

You can create a flowchart, and save the json. Reload the page, paste in the saved json, and click load, and it will recreate your flowchart, saving the co-ordinates of all your objects and connections.

The code to get the anchors position is here:

    $.each(jsPlumb.getConnections(), function (idx, connection) {
    connections.push({
        connectionId: connection.id,
        pageSourceId: connection.sourceId,
        pageTargetId: connection.targetId,
        anchors: $.map(connection.endpoints, function(endpoint) {

            return [[endpoint.anchor.x, 
            endpoint.anchor.y, 
            endpoint.anchor.getOrientation()[0], 
            endpoint.anchor.getOrientation()[1],
            endpoint.anchor.offsets[0],
            endpoint.anchor.offsets[1]
        ]];

  })
    });
});

jsPlumb - How to get anchor's position

2 Answers2