Arrows Wireframe Variables

Template variables exposed by the Arrows feature — read them with velt-data, velt-if, and velt-class once wireframe-tag interpolation ships.

Limited support. Arrows do not currently expose <velt-...-wireframe> tags, so velt-data / velt-if / velt-class interpolation is not yet available on this feature. Until wireframe-tag registration ships, customize Arrows through CSS — see Parts, Variables, and Custom Button. The variables below are documented for completeness so you know what the runtime model looks like.

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

Overview

The Arrows feature draws directional arrow annotations on the page. Once wireframe-tag registration ships, the variables below will be available inside any <velt-arrow-...-wireframe> tag via three forms:

You want to…	Use	Example
Display a value as text	<velt-data field="var" />	<velt-data field="componentConfig.arrowPinAnnotation.from.name" />
Hide / show conditionally	velt-if="{var}"	velt-if="{componentConfig.annotationDragging}"
Toggle a CSS class	velt-class="'cls': {var}"	velt-class="'is-dragging': {componentConfig.annotationDragging}"

This feature uses the flat-config access pattern — variables are referenced via the explicit componentConfig.<path> form. The variables below are documented for completeness; wireframe-tag interpolation is not yet supported (see warning above).

Component Config

Variable	Type	Description	Example
componentConfig.arrowPinAnnotation	ArrowAnnotation	The arrow annotation data — includes start / end positions, colour, and author.	<velt-data field="componentConfig.arrowPinAnnotation.from.name" />
componentConfig.user	User	Currently identified end-user.	<velt-data field="componentConfig.user.name" />
componentConfig.targetElement	HTMLElement	DOM target the arrow is anchored to.	Internal — DOM reference.
componentConfig.annotationDragging	boolean	Arrow is currently being dragged.	velt-class="'is-dragging': {componentConfig.annotationDragging}"
componentConfig.dragPosition	{ top: number; left: number } | null	Live drag position used to compute inline style.	Internal — used to compute inline style.
componentConfig.offsetTop	number	Vertical position offset.	Internal — used to compute inline style.
componentConfig.offsetLeft	number	Horizontal position offset.	Internal — used to compute inline style.
componentConfig.selectedAnnotationsMap	SelectedAnnotationsMap	Map keyed by annotationId → CommentAnnotation. Truthy when that annotation is selected.	velt-class="'is-selected': {componentConfig.selectedAnnotationsMap[componentConfig.arrowPinAnnotation.annotationId]}"

Type Reference

Types referenced by the variables above:

Type	Description
User	Identified end-user object.
ArrowAnnotation	Arrow-annotation data — start / end positions, colour, author, and metadata.
SelectedAnnotationsMap	Selection-state map keyed by annotationId.

Subcomponents

The four primitives below make up the Arrows feature. None of them currently expose a <velt-...-wireframe> registration — see the warning at the top of the page.

arrows-tool

The trigger to draw a new arrow.

• Public element: <velt-arrows-tool>

Property	Value
Wireframe tag	No <velt-...-wireframe> registration available — see warning at top of page.

---

arrow-pin

A placed arrow on the document.

• Public element: <velt-arrow-pin>

Property	Value
Wireframe tag	No <velt-...-wireframe> registration available — see warning at top of page.

---

arrow-pin-portal

The per-pin overlay portal that renders the arrow visual.

• Public element: <velt-arrow-pin-portal>

Property	Value
Wireframe tag	No <velt-...-wireframe> registration available — see warning at top of page.

---

arrows-container

The per-document orchestrator that hosts every placed arrow.

• Public element: <velt-arrows-container>

Property	Value
Wireframe tag	No <velt-...-wireframe> registration available — see warning at top of page.

Related

• Arrows — Parts — CSS ::part(...) hooks for the arrow tool button.
• Arrows — Variables — CSS variables for the arrow visual.
• Arrows — Custom Button — full custom-button overrides.
• Template Variables — overview of the velt-data / velt-if / velt-class system.