Image Area Selector
An interactive component that allows users to select and define multiple areas within an image. Features customizable dimensions, selectable regions with coordinate tracking, and support for predefined selection areas. Ideal for image annotation, hotspot creation, or region-based image interactions.
Extends: fieldComponent
Fields
Name | Code | Data Type | Description |
|---|---|---|---|
Image URL |
| text | URL or path of the image to be used for area selection |
Height |
| text | Sets the height of the image container (defaults to 200px) |
Label |
| multi-locale | Display label for the area selector |
ID |
| text | Unique identifier for the component |
Style Classes |
| text | CSS classes for styling |
Style |
| text | Custom inline styles |
Width |
| text | Controls component width |
Value |
| text | Selected area coordinates data |
Visible |
| boolean | Controls component visibility |
Enabled |
| boolean | Controls whether component is enabled |
Field Style |
| text | Additional field styling options |
Methods
Name | Description |
|---|---|
| Initializes the area selection functionality with any predefined areas |
| Updates and tracks the coordinates of selected areas when changes occur |
| Generates unique identifier for the image container element |
| Processes incoming value changes and triggers change event |
| Formats area selection data for value updates |
Events
Name | Description |
|---|---|
| Triggered when selected areas are modified |
| Triggered when the area selector loses focus |
| Triggered when the area selector gains focus |