jsPlumb - How do you get all of the actual connections from a scrollable list when some connected elements are scrolled out of view?

Question

I need to allow mapping between two long scrollable lists and I want to be able to get a list of all the connections created. Using the demo code off the jsPlumb community website I can create the lists, and connect items. But when I try to get a list of all the connections, any item that has had it's connector "collapsed" to an upper or lower corner of the list container doesn't show the actual connection. For example:

List 1, Item 5 is connected to List 2, Item 2. If I query all connections:

const connections = this.jsPlumbInstance.getAllConnections();
console.log(connections);

And drill into the object I can see the source and target are correct:

If I then scroll List 2, Item 2 out of view and get all connections again:

I now get:

Somewhere, the connection to L2I2 is being maintained - because it "reconnects" when scrolled back into view, but I want to programmatically extract all connected items without resorting to scrolling the lists. Where can I find the "real" mappings between items regardless of their visibility and the connector stacking? Thanks!

Answer 1

I think in fact this information is not readily available. Connections are maintained in the background via a "proxy" concept, handled by the proxyConnection method of JsPlumbInstance (it's the same method that is used when collapsing a group and moving child connections to the collapsed group, incidentally). This method manipulates a proxies array on each connection it is managing.

So, theoretically, you could examine the connections in the return value of getAllConnections() and find the real connection via the proxies array. It could be a bit annoying though. A better solution might be for the list manager to expose a method, maybe? We could follow this up on Github if you like.