Area Wireframe Variables

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

Overview

The Area feature draws rectangle “area annotations” used to highlight regions of the page (often paired with a comment). The Area feature has limited wireframe support — no dedicated *-wireframe tag is registered for its primitives. The variables below describe the componentConfig exposed by <velt-area-pin-portal>:

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

This feature uses the flat-config access pattern — variables are referenced via the explicit componentConfig.<path> form.

Component Config

Variable	Type	Description	Example
`componentConfig.areaPinAnnotation`	`AreaAnnotation`	The area annotation data — geometry, colour, author, and metadata.	`<velt-data field="componentConfig.areaPinAnnotation.from.name" />`
`componentConfig.areaPinAnnotationOnResize`	`AreaAnnotation`	Mid-resize snapshot of the annotation.	Internal — set during resize.
`componentConfig.commentPinAnnotation`	`CommentAnnotation`	Optional linked comment annotation.	`<velt-data field="componentConfig.commentPinAnnotation.comments.length" />`
`componentConfig.user`	`User`	Currently identified end-user.	`<velt-data field="componentConfig.user.name" />`
`componentConfig.selected`	`boolean`	Pin is currently selected.	`velt-class="'is-selected': {componentConfig.selected}"`
`componentConfig.hideAreaAnnotation`	`boolean`	Hide the area visual.	`velt-class="'is-hidden': {componentConfig.hideAreaAnnotation}"`
`componentConfig.areaAnnotationColor`	`string`	Border / overlay colour (default `'#625DF5'`).	Internal — used to compute inline style.
`componentConfig.areaProperties`	`AreaProperty`	Geometry data — `top` / `left` / `width` / `height`.	Internal — used to compute inline style.
`componentConfig.isResizing`	`boolean`	User is currently resizing this pin.	`velt-class="'is-resizing': {componentConfig.isResizing}"`
`componentConfig.resizingOffset.top`	`number`	Vertical resize-handle offset.	Internal — used to compute inline style.
`componentConfig.resizingOffset.left`	`number`	Horizontal resize-handle offset.	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.

Type Reference

Types referenced by the variables above:

Type	Description
`User`	Identified end-user object.
`CommentAnnotation`	Linked comment-annotation thread (when the area is paired with a comment).
`AreaAnnotation`	Area-annotation data — geometry (`top`, `left`, `width`, `height`), colour, author, and metadata.
`AreaProperty`	Geometry shape used by `componentConfig.areaProperties`.

Subcomponents

The Area feature has three customer-facing primitives. Only area-pin-portal registers a wireframe tag.

`area-pin-portal`

The rendered area-pin overlay — the only Area primitive with a wireframe tag.

Public element: <velt-area-pin-portal>

Property	Value
Wireframe tag	No direct wireframe slot — the area-pin renders through its portal. Per-pin visual customization is not currently exposed via a dedicated `*-wireframe` tag.

`area-tool`

The trigger to draw a new area.

Public element: <velt-area-tool>

Property	Value
Wireframe tag	No `<velt-...-wireframe>` registration available on this primitive.

`area-container`

The per-document container that orchestrates all area pins.

Public element: <velt-area-container>

Property	Value
Wireframe tag	No `<velt-...-wireframe>` registration available on this primitive.

Template Variables — overview of the velt-data / velt-if / velt-class system.

Concepts

Async Collaboration

Realtime Collaboration

Area Wireframe Variables

Overview

Component Config

Type Reference

Subcomponents

`area-pin-portal`

`area-tool`

`area-container`

​Overview

​Component Config

​Type Reference

​Subcomponents

​area-pin-portal

​area-tool

​area-container

​Related

Overview

Component Config

Type Reference

Subcomponents

`area-pin-portal`

`area-tool`

`area-container`

Related