VueCraft NPM

Visual Linker ​

0.3.0 ​

2026-10-01

  • New (core): selectable option — connections become focusable buttons (Tab order = the order of connections) that can be selected by click or Enter/Space, with Ctrl/Cmd/Shift toggling within a multi-selection; Escape or a pointer press elsewhere clears the selection. Delete/Backspace emits connection:delete-request and never removes data itself. New: setSelectedConnections(ids), the connection:selectionchange event, ConnectionStyle.selectedStyle and the --vl-selected-color / --vl-focus-color CSS variables. Every line now carries role="img" and an aria-label (ConnectionDescriptor.ariaLabel, by default "Connection: a → b"). See Selection & Accessibility.
  • New (core): ConnectionDescriptor.labels — any number of labels anywhere along a line (position: 'start', 'middle', 'end' or a 0..1 fraction; offset, rotate, className). A label with text is drawn by the library as an SVG pill (--vl-label-bg, --vl-label-border, --vl-label-color); one without is only a position. ConnectionLayout.labels carries every label's resolved point and angle. New types: ConnectionLabel, LabelLayout. See Connection Labels.
  • New (core): ConnectionStyle.animated / defaultAnimated — a pattern of dashes or dots travelling along a line (speed, direction, shape, dash, gap, color, width), drawn as a separate CSS-only overlay and switched off for prefers-reduced-motion. New type: ConnectionFlow. See Animated Flow.
  • New (core): avoidObstacles / obstaclePadding (and ConnectionStyle.avoidObstacles) — smoothstep lines are routed around other blocks instead of through them, re-routing live while blocks are dragged; a line whose plain route is already clear is unchanged, and when no route exists the plain one is kept. See Routing and Crossings.
  • New (core): jumps (and ConnectionStyle.jumps) — a smoothstep line makes a small semicircular hop where it crosses another connection's line, like on electrical schematics. New type: JumpsOption. See Routing and Crossings.
  • New (core): clipToScrollParents — a port scrolled out of view inside a clipping ancestor (a row in a scrolling list, overflow: hidden) no longer leaves a line dangling over other content: by default 'pin' pulls that end to the edge of the visible area and drops its marker and port dot, 'hide' hides the connection, false restores the previous behavior. ConnectionLayout gains fromClipped / toClipped. See Scrolling Containers.
  • New (core): port spreading — BlockDescriptor.portSpread, PortDescriptor.spread and defaultPortSpread (true or { gap, padding }, defaults 16 and 8) give every connection that shares a port side its own virtual port, ordered so the lines don't cross. New types: PortSpread, PortSpreadOptions. See Port Spreading.
  • New (Vue): the selected prop (v-model:selected) and the connection-selectionchange, connection-delete-request and update:selected events.
  • New (Vue): #connection-label is called once per label that has no text — { connection, label, point, angle, rotation, from, to } — and positions the label at its point, rotated by rotation. Without labels it behaves as before: one label at the line's midpoint.
  • New (Vue): portSpread on v-vl-block and the blocks entries, spread on v-vl-port, and the data-vl-port-spread / data-vl-spread attributes ("" or "true" on, "false" off, "24" for the gap, "24 4" for the gap and padding).
  • Changed (Vue): the #marker slot is not rendered for a connection end pinned to the edge of a scrolling container.
  • New (Nuxt): the module options portSpread, clipToScrollParents, animated, avoidObstacles, obstaclePadding and jumps, applied as defaults to every <VisualLinker>.