jsPlumb supports the concept of scrollable lists - lists of items which can be connected, and when the list is scrolled, any connections to/from a list item are scrolled too. When a particular list item is scrolled out of the list's viewport, any connections for that item are stacked on the list itself.
Adding a list
To add a list you first need to have added it as an element in the DOM, and that it's behaving list a list does - which probably means its a
dl, or a
div acting as a flex column, with
overflow:auto. It is also a requirement that
position:relative be set on the list element; jsPlumb needs this when calculating the offset of its list items.
This is the most basic call:
jsPlumb will add a
jtk-scrollable-list attribute to
someElement, and attach a scroll handler to it. If you use the
jsplumbtoolkit-defaults.css file, this
jtk-scrollable-list attribute will cause
position:relative to be set on the element. Otherwise just make sure you do it yourself.
With this basic call, when an item scrolls out of the viewport, the behaviour will be:
if the item scrolls out of the top and the endpoint is a source endpoint, the connection will be anchored to the
TopRightof the list, and the endpoint used will be of the same type as the endpoint on the scrolled item.
if the item scrolls out of the top and the endpoint is a target endpoint, the connection will be anchored to the
TopLeftof the list, and the endpoint used will be of the same type as the endpoint on the scrolled item.
Scrolling out of the bottom results in either a
BottomLeft anchor being used.
anchor:AnchorSpecOptional. Supply this to provide the anchor used when any item is scrolled out of the viewport. This option takes precedence over
deriveAnchor:(edge, index, endpoint, connection) => AnchorSpecOptional;
anchortakes precedence. This offers a way for you to dynamically choose an anchor point based on the current situation.
edgeis one of
indexis 0 for a source endpoint and 1 for a target endpoint.
endpoint:EndpointSpecOptional. Supply this to provide the endpoint used when any item is scrolled out of the viewport.
deriveEndpointtakes precedence over this.
deriveEndpoint:(edge, index, endpoint, connection) => AnchorSpecOptional. Takes precedence over