Visual Linker

Рисует умные, автоматически прокладываемые SVG-линии между DOM-блоками, которые уже находятся под вашим контролем — для vanilla JS, Vue 3 и Nuxt. Позиционирование блоков остаётся за вами, пакет только измеряет их и рисует соединения.

Возможности

• Автоматический выбор стороны подключения — каждое соединение само решает, с какой стороны блока входить/выходить, на основе положения второго конца; FixedSide[] сужает этот выбор до подмножества сторон, а ограниченный наклон угла может подтягивать угол входа/выхода в сторону реального направления на цель
• Три типа кривых — bezier (настраиваемые кривизна, минимальный/максимальный вылет, наклон угла), smoothstep (ортогональная трассировка со скруглёнными углами и групповыми точками ветвления для соединений, делящих один порт) и straight
• Перетаскивание блоков — перетаскивание указателем с опциональной ручкой захвата, привязкой к px-сетке и границами, ограниченными контейнером, элементом или отступом внутрь; каждое связанное соединение отслеживает перетаскиваемый блок в реальном времени
• Типизированный API событий — block:dragstart/drag/dragend, block:mouseenter/mouseleave, connection:click/mouseenter/mouseleave/selectionchange/delete-request, и событие layout на каждый рендер с посчитанной геометрией всех соединений и портов
• Стилизация каждого соединения по отдельности — цвет, толщина, пунктир, маркеры начала/конца (четыре встроенные формы или произвольный SVG, по желанию — со стрелкой направления, пристыкованной к фигуре), и отдельный стиль при наведении — всё переопределяемо для конкретного соединения поверх настроек по умолчанию на уровне инстанса
• Аккуратные диаграммы — линии smoothstep можно прокладывать в обход других блоков (lines.routing.avoidObstacles), и они перепрыгивают через линии, которые пересекают (lines.jumps); соединения, делящие сторону порта, могут получать каждое свой виртуальный порт (ports.spread)
• Подписи, поток и выделение — любое число подписей в любом месте линии (нарисованных библиотекой или вашим содержимым), анимированный штриховой или точечный поток, показывающий направление, и выделяемые соединения, доступные с клавиатуры и скринридерам, которые просят приложение удалить, а не удаляют себя сами
• Прокручиваемые контейнеры — порт, уехавший из обрезающего предка, прижимает свою линию к видимому краю (или скрывает её), а не висит над посторонним содержимым
• Одна структурированная конфигурация — единый VisualLinkerConfig (theme, lines, markers, ports, labels, blocks, interaction) для движка, компонента Vue и модуля Nuxt; style соединения имеет ту же форму, что и группа lines, а всю конфигурацию можно менять во время работы
• Визуальные состояния — highlight, hover, selected и focus для линий, маркеров, портов и подписей, у каждого свои поля: маркер может превратиться из точки в ромб при наведении, а линия — быть приглушённой в покое и набирать полную силу под курсором; hover и highlight включаются по запросу (interaction.hover, interaction.highlight)
• Темы — токены цветов, записываемые в CSS-переменные, с lightTheme, darkTheme и defineTheme() для своих; одна тема для всех диаграмм приложения Vue или проекта Nuxt переключается одним присваиванием
• Реакция на resize и scroll — каждое соединение пересчитывает себя при изменении размера блока или контейнера, а также при прокрутке страницы — без ручной подписки на события
• Компонент, composable и модуль Nuxt — <VisualLinker> вокруг вашей собственной разметки (блоки помечаются через v-vl-block/data-vl-block на любой глубине или где угодно на странице со scope="page"), низкоуровневый composable useVisualLinker(), и модуль Nuxt с автоимпортами, зарегистрированными директивами и дефолтами уровня конфига для рендеринга кривых/портов
• Рецепты — полные проверенные примеры для чистого JavaScript, Vue и Nuxt: ER-диаграмма, редактор потоков, сопоставление полей между списками с прокруткой, редактируемая диаграмма с сохранённой раскладкой, переключение тем и карта сервисов в реальном времени; начните со страницы Схема базы данных (ER-диаграмма)

Управление созданием соединений мышью и режим авто-раскладки пока в планах — полный список вех смотрите в docs/TECH_SPEC.md самого пакета. Всё перечисленное выше уже реализовано и протестировано.