Fallback Ends

A connection whose block is missing from setBlocks() is skipped. That is a problem when the block is only temporarily absent: a row of a collapsed tree node, a row that a virtualized list has not rendered. The connection should not disappear — it should go to the nearest block that is visible, for example the collapsed parent.

An end can list those blocks in fallback:

{
  id: 'first>fullName',
  from: { blockId: 'user.name.first', fallback: ['user.name', 'user'] },
  to: { blockId: 'person.fullName' },
}

Rules

• If the end's own block is not registered, the first registered block of fallback is used instead. A fallback entry is a block id, or { blockId, portId? }.
• If the own block is registered but its port is scrolled out of view (and clipToScrollParents is 'pin' or 'hide'), the first fallback block that is in view is used instead of pinning the line to the edge. When no fallback is in view either, the usual pinning or hiding applies.
• If nothing in the chain is registered, the connection is skipped, as before.
• An end that needed no fallback is drawn exactly as without the field.

The proxied state

A connection that uses a fallback is in the proxied state, so that you can show it differently — dashed, paler. It sits above the base look and below selected, highlight, hover and focus:

lines: { proxied: { dashed: true, opacity: 0.55 } },
// or on one connection
style: { proxied: { color: '#9aa0b8' } },

proxied is a bucket of every state-aware group (lines, markers, ports, labels), like hover.

What the engine reports

• The layout event gives each ConnectionLayout a proxied: { from?: boolean; to?: boolean } when an end was moved.
• getStats().proxied counts such connections.
• Labels and markers follow the usual rules; nothing else is drawn for a proxied end.

In Vue

The field goes through the connections prop unchanged. A tree whose collapsed rows are removed from the DOM:

function endpoint(side: 'source' | 'target', id: string) {
  return {
    blockId: `${side}:${id}`,
    fallback: ancestorsOf(id).map((parent) => `${side}:${parent}`),
  }
}

See the demo page "Mapping" in the repository's playground.