VueCraft NPM

Выделение и доступность ​

С включённым interaction.selectable соединения становятся удобными для клавиатуры и скринридеров: каждое — это фокусируемая кнопка, которую можно выделить, а Delete просит приложение удалить его. Библиотека никогда не меняет ваши данные — она только сообщает, что сделал пользователь.

ts
const linker = createVisualLinker(el, { interaction: { selectable: true } })

linker.on('connection:selectionchange', ({ selectedIds }) => {})
linker.on('connection:delete-request', ({ connections }) => {}) // удаляете вы — или не удаляете
linker.setSelectedConnections(['a-b']) // управляемое использование; событие не отправляется

Как это работает ​

  • Каждое соединение фокусируется. Порядок Tab — порядок в connections.
  • Клик или Enter / Space на сфокусированной линии выделяет только эту линию.
  • Ctrl, Cmd или Shift вместе с кликом или клавишей переключает линию в мультивыделении.
  • Escape или нажатие указателя в любом месте вне линий снимает выделение.
  • Выделяемая линия показывает курсор-указатель — и с interaction.hover, и без него.
  • Соединение, которое исчезло, выпадает из выделения.
  • Delete или Backspace отправляет connection:delete-request с выделенными соединениями — или, если сфокусированная линия не выделена, только с ней. Ничего не удаляется.

Внешний вид ​

Выделенная линия получает ту же прибавку к толщине, что и при наведении, и ореол. Изменить это можно через состояние selected — у него те же поля, что у hover. Оно лежит между базовым стилем и hover: пока линия и выделена, и под курсором, побеждает наведение. Цвет ореола — selectedHalo темы (--vl-selected-color), цвет кольца фокуса на сфокусированной линии — focusRing (--vl-focus-color). Состояние selected есть и у маркеров, портов и подписей — см. Визуальные состояния.

selected ​

{ color?; width?; dashed?; opacity? } · по умолчанию: — (не задано, вид выделения по умолчанию)

В style соединения. См. Стилизация соединений.

Доступность ​

Каждая видимая линия несёт role="img" и aria-label. Без interaction.selectable невидимый путь наведения скрыт от вспомогательных технологий. С ним путь наведения получает tabindex="0", role="button" и aria-pressed, а фокус рисуется на видимой линии.

ariaLabel ​

string · по умолчанию: "Connection: {id блока from} → {id блока to}"

В ConnectionDescriptor. Доступное имя линии.

Опции, методы и события ​

interaction.selectable ​

boolean · по умолчанию: false

В группе interaction конфигурации. По умолчанию выключено, чтобы у существующих диаграмм внезапно не появились новые остановки Tab.

setSelectedConnections(ids: readonly string[]): void ​

Метод движка. Заменяет выделение. Id, которых нет среди текущих соединений, игнорируются. Событие не отправляется, поэтому приложение может управлять выделением без петель обратной связи.

connection:selectionchange ​

{ selectedIds: string[] }

Набор выделенных соединений изменился из-за действия пользователя.

connection:delete-request ​

{ connections: ConnectionDescriptor[] }

На сфокусированном соединении нажали Delete или Backspace.

В Vue ​

<VisualLinker> принимает выделение как проп selected — массив id соединений, который можно использовать с v-model:selected. Оставьте его незаданным, чтобы выделением владел движок. @connection-selectionchange получает тот же массив, а @connection-delete-request — соединения для удаления.

vue
<VisualLinker
  v-model:selected="selected"
  :connections="connections"
  :config="{ interaction: { selectable: true } }"
  @connection-delete-request="(requested) => remove(requested)"
>
  …
</VisualLinker>

См. Компонент VisualLinker.