VueCraft NPM

Visual Linker ​

0.2.0 ​

2026-09-30

  • Breaking (Vue): <VisualLinker> больше не рендерит обёртку <div class="vl-block"> вокруг слота #block-<id> для каждого блока. Теперь он оборачивает вашу собственную разметку в default-слоте, а блоки находятся в ней на любой глубине, внутри любых компонентов-обёрток. Для миграции перенесите содержимое слотов в default-слот и пометьте каждый элемент-блок через v-vl-block="id" (или data-vl-block="id"):

    vue
    <!-- 0.1.x -->
<VisualLinker :blocks="blocks" :connections="connections">
  <template v-for="b in blocks" #[`block-${b.id}`]="{}" :key="b.id">
    <MyCard :data="b" />
  </template>
</VisualLinker>

<!-- 0.2.0 -->
<VisualLinker :connections="connections">
  <MyCard v-for="b in blocks" :key="b.id" v-vl-block="b.id" :data="b" />
</VisualLinker>

  • Breaking (Vue): проп blocks стал необязательным. Запись может напрямую зарегистрировать элемент через новое поле el (template ref, геттер, элемент или CSS-селектор) либо — без el — лишь добавить конфигурацию (порты, настройки перетаскивания) блоку, уже помеченному в шаблоне.

  • Новое (Vue): директивы v-vl-block / v-vl-port, экспортируются как vVlBlock / vVlPort. Порт привязывается к ближайшему блоку вокруг него или к блоку, указанному в его опции block.

  • Новое (Vue): обычные data-vl-* атрибуты — способ пометить блоки и порты вообще без JavaScript (data-vl-block, data-vl-draggable, data-vl-drag-handle, data-vl-drag-bounds, data-vl-port, data-vl-port-block, data-vl-side, data-vl-offset, data-vl-anchor, data-vl-linker); имена экспортируются как VL_ATTR.

  • Новое (Vue): живое обнаружение — блоки и порты, добавленные, удалённые или перепомеченные после монтирования (v-if, v-for, сторонняя разметка), подхватываются автоматически.

  • Новое (Vue): проп scope — 'container' (по умолчанию) или 'page': связывает элементы в любом месте документа и рисует в слое position: fixed, телепортированном в <body>.

  • Новое (Vue): проп name вместе с опцией linker у директив / атрибутом data-vl-linker — чтобы закрепить элемент за конкретным <VisualLinker>; проп zIndex для слоя отрисовки. Прочие атрибуты, переданные в <VisualLinker>, теперь попадают на его корневой элемент.

  • Новое (Vue): VisualLinkerPlugin — app.use() глобально регистрирует <VisualLinker> и обе директивы. Также экспортируются типы VisualLinkerScope, BlockDirectiveOptions, BlockDirectiveValue, PortDirectiveOptions, PortDirectiveValue, RefFriendlyDragBounds и RefFriendlyElement.

  • Изменено (Vue): слой отрисовки рендерится только на клиенте после монтирования — серверный рендер совпадает с проходом гидратации.

  • Новое (Nuxt): v-vl-block / v-vl-port регистрируются универсальным плагином — в том числе на сервере, так что data-vl-* атрибуты уже есть в серверном HTML.

  • Новое (core): MarkerConfig.arrow — true или { color?, gap? } (новый тип MarkerArrowConfig) рисует наконечник стрелки прямо перед маркером circle/square/diamond, острие которого упирается ровно во внешний край фигуры с учётом обводки. Маркер со стрелкой всегда использует orient: 'auto'.

  • Изменено (core): подсвеченное соединение рисуется поверх соседних, а другие соединения, заканчивающиеся в той же точке, скрывают там свой маркер — маркеры обычного размера больше не перекрывают подсвеченный.

  • Исправлено (core): соединение с явным style.width теряло утолщение при наведении/подсветке — явная инлайн-ширина перебивала CSS-правило. Теперь утолщение тоже применяется инлайн.

  • Изменено (core): перетаскивание сдвигает блок через отдельное CSS-свойство translate вместо transform — сдвиг складывается с уже имеющейся у блока трансформацией, а не затирает её.