VueCraft NPM

Scrolling Containers ​

A port can sit inside an element that scrolls or clips — a row in a scrolling list, a card with overflow: hidden. When that port scrolls out of view, a line drawn all the way to it would dangle over unrelated content. The interaction.clipToScrollParents option decides what happens instead.

ts
createVisualLinker(el, { interaction: { clipToScrollParents: 'pin' } }) // the default

What it does ​

For a port, the engine looks up the chain of ancestors that clip (overflow other than visible), from the port's own element up to the container. The visible area is the overlap of their boxes along the axes they clip. A port outside it is "clipped":

  • 'pin' — the end is pulled to the edge of the visible area. The line "continues off-screen", so the connection stays visible. The marker and the port dot of that end are dropped.
  • 'hide' — the whole connection is hidden.
  • false — clipping is ignored, and the line is drawn all the way to the invisible block.

A port exactly on the edge, within 1px, is not considered clipped. The chain is measured from the port's element, not its block, so a row inside a scrolling block is clipped properly.

interaction.clipToScrollParents ​

boolean | 'pin' | 'hide' · default: 'pin'

In the interaction group of the configuration. true means 'pin'.

Anchored ports ​

A port with anchorBlockId or anchorEl draws its point on the border of that block, while the question "is it clipped?" is asked about the port's own element: its center must lie inside the visible area. A row that is visible keeps its point on the anchor's border, even when that border lies outside a clipping wrapper — a rounded segmented control with overflow: hidden inside a padded block, for instance. A row that has scrolled out of view is pinned like any other port: the end is pulled to the edge of the visible area, with no marker and no port dot.

Knowing which end is pinned ​

The layout event marks the pinned ends on each ConnectionLayout:

fromClipped ​

boolean · default: — (unset)

from was pulled to the edge of a clipping ancestor, so the real port is out of view.

toClipped ​

boolean · default: — (unset)

The same, for to.

The Vue #marker slot is not rendered for a pinned end, so a custom marker does not appear on the edge of a scroller. Use the flags the same way if you draw your own markers from the layout event.

In Vue ​

With scope="page" the drawing layer is a fixed layer over the whole viewport, where the problem is most visible — the default 'pin' handles it without any extra work.