Прокручиваемые контейнеры
Порт может находиться внутри элемента, который прокручивается или обрезает содержимое, — строка в прокручиваемом списке, карточка с overflow: hidden. Когда такой порт уезжает из видимой области, линия, дотянутая до него, повисла бы над посторонним содержимым. Что произойдёт вместо этого, решает опция interaction.clipToScrollParents.
createVisualLinker(el, { interaction: { clipToScrollParents: 'pin' } }) // значение по умолчаниюЧто она делает
Для порта движок строит цепочку предков, которые обрезают содержимое (overflow, отличный от visible), от собственного элемента порта до контейнера. Видимая область — это пересечение их рамок по тем осям, по которым они обрезают. Порт вне неё считается «обрезанным»:
'pin'— конец прижимается к краю видимой области. Линия «продолжается за экран», так что соединение остаётся видимым. Маркер и точка порта на этом конце не рисуются.'hide'— соединение скрывается целиком.false— обрезка игнорируется, линия рисуется до самого невидимого блока.
Порт ровно на границе, в пределах 1px, обрезанным не считается. Цепочка строится от элемента порта, а не от его блока, поэтому строка внутри прокручиваемого блока обрезается правильно.
interaction.clipToScrollParents
boolean | 'pin' | 'hide' · по умолчанию: 'pin'
В группе interaction конфигурации. true означает 'pin'.
Порты с якорем
Порт с anchorBlockId или anchorEl рисует свою точку на границе этого блока, а вопрос «обрезан ли он?» задаётся про собственный элемент порта: его центр должен лежать внутри видимой области. Видимая строка оставляет точку на границе якоря, даже если эта граница лежит вне обрезающей обёртки — например, скруглённого переключателя с overflow: hidden внутри блока с отступами. Строка, ушедшая за край прокрутки, прижимается как любой другой порт: конец подтягивается к краю видимой области, без маркера и без точки порта.
Как узнать, какой конец прижат
Событие layout отмечает прижатые концы в каждом ConnectionLayout:
fromClipped
boolean · по умолчанию: — (не задано)
from прижат к краю обрезающего предка, то есть настоящий порт вне видимой области.
toClipped
boolean · по умолчанию: — (не задано)
То же для to.
Слот Vue #marker для прижатого конца не рендерится, поэтому кастомный маркер не появляется на краю прокручиваемого контейнера. Если вы рисуете собственные маркеры по событию layout, используйте эти флаги так же.
В Vue
С scope="page" слой отрисовки — это фиксированный слой на весь viewport, где проблема заметнее всего; значение по умолчанию 'pin' решает её без дополнительных усилий.