# Diorama

<div align="left"><img src="https://963067965-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIJW5nbmYRaSNWePAac%2F-MIxu2KP4MClY9gv_q2W%2F-MIxukRaJsvp9V0KuXVD%2FProperty-Diorama.png?alt=media&#x26;token=16709609-acd8-480b-9bff-5f51b82e250e" 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="https://963067965-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIJW5nbmYRaSNWePAac%2F-MIxu2KP4MClY9gv_q2W%2F-MIxukRbQTUE4L3bbMU8%2FProperty-Diorama-Mask.png?alt=media&#x26;token=a3a113ca-c0f5-4289-bcc5-91884b6c3bc0" 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> |
