> For the complete documentation index, see [llms.txt](https://docs.flipabit.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flipabit.dev/api/widget/diorama.md).

# Diorama

<div align="left"><img src="/files/-MIxukRaJsvp9V0KuXVD" alt=""></div>

| Property      | Function                                                                                                                                                                                                          | Type     |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Background    | <p>Background image<br><br><strong>Actions editor:</strong><br><code>Property > Diorama > Background</code><br><strong>Code:</strong><br><code>widget.content.backgroundImage</code></p>                          | `string` |
| Movable       | <p>Allow drag pin<br><br><strong>Actions editor:</strong><br><code>Property > Diorama > Movable</code><br><strong>Code:</strong><br><code>widget.content.movable</code></p>                                       | `bool`   |
| Show labels   | <p>Display text description when clicking on pin<br><br><strong>Actions editor:</strong><br><code>Property > Diorama > Show labels</code><br><strong>Code:</strong><br><code>widget.content.showLabels</code></p> | `bool`   |
| Min scale     | <p>Minimum scale value<br><br><strong>Actions editor:</strong><br><code>Property > Diorama > Min scale</code><br><strong>Code:</strong><br><code>widget.content.minScale</code></p>                               | `double` |
| Max scale     | <p>Maximum scale value<br><br><strong>Actions editor:</strong><br><code>Property > Diorama > Max scale</code><br><strong>Code:</strong><br><code>widget.content.maxScale</code></p>                               | `double` |
| Enable pan    | <p>Enable pan<br><br><strong>Actions editor:</strong><br><code>Property > Diorama > Enable pan</code><br><strong>Code:</strong><br><code>widget.content.enablePan</code></p>                                      | `bool`   |
| Current label | <p>Current label text<br><br><strong>Actions editor:</strong><br><code>Property > Diorama > Current label</code><br><strong>Code:</strong><br><code>widget.content.currentLabel</code></p>                        | `string` |
| Current index | <p>Current label index<br><br><strong>Actions editor:</strong><br><code>Property > Diorama > Current index</code><br><strong>Code:</strong><br><code>widget.content.currentIndex</code></p>                       | `int`    |

## Mask

<div align="left"><img src="/files/-MIxukRbQTUE4L3bbMU8" alt=""></div>

| Property | Function                                                                                                                                                                                  | Type     |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Image    | <p>Mask image<br><br><strong>Actions editor:</strong><br><code>Property > Diorama > Mask > Image</code><br><strong>Code:</strong><br><code>widget.content.mapMask</code></p>              | `string` |
| Width    | <p>Mask width<br><br><strong>Actions editor:</strong><br><code>Property > Diorama > Mask > Width</code><br><strong>Code:</strong><br><code>widget.content.mapWidth</code></p>             | `double` |
| Height   | <p>Mask height<br><br><strong>Actions editor:</strong><br><code>Property > Diorama > Mask > Height</code><br><strong>Code:</strong><br><code>widget.content.mapHeight</code></p>          | `double` |
| Border   | <p>Mask border size<br><br><strong>Actions editor:</strong><br><code>Property > Diorama > Mask > Border</code><br><strong>Code:</strong><br><code>widget.content.mapBorderSize</code></p> | `int`    |
| Radius   | <p>Mask radius<br><br><strong>Actions editor:</strong><br><code>Property > Diorama > Mask > Radius</code><br><strong>Code:</strong><br><code>widget.content.mapRadius</code></p>          | `int`    |

## Actions

| Property        | Function                                                                                                                                                                                           |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Center on point | <p><strong>Actions editor:</strong><br><code>Actions > Common > Center on point</code><br><strong>Code:</strong><br><code>widget.content.script.actionCenterOnPoint(double x, double y)</code></p> |
| Show label      | <p><strong>Actions editor:</strong><br><code>Actions > Common > Show label</code><br><strong>Code:</strong><br><code>widget.content.script.actionCenterOnItem(int index)</code></p>                |
| Zoom            | <p><strong>Actions editor:</strong><br><code>Actions > Common > Zoom</code><br><strong>Code:</strong><br><code>widget.content.script.actionZoom(int zoom)</code></p>                               |
| Unselect All    | <p><strong>Actions editor:</strong><br><code>Actions > Common > Unselect All</code><br><strong>Code:</strong><br><code>widget.content.script.actionUnselectAll()</code></p>                        |

## Events

| Property   | Function                                                                                                                                                                                       |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Item index | <p>Event when pin is clicked<br><br><strong>Actions editor:</strong><br><code>Event > Item index</code><br><strong>Code:</strong><br><code>widget.content.script.eventItemClicked()</code></p> |