Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
Use this file to discover all available pages before exploring further.
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. 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.
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. |
