You can define bounding boxes for every element separately or in the plugin options which will apply the bounding box to multiple elements.
How to define a bounding box
The bounding box property accepts 3 different values.
| Value | Explanation |
| Boolean: false | Default value. No bounding box. |
| Object: {width: 100, height: 200, y: 20: x: 50} | An object defining a custom bounding box by setting size and position of the bounding box. |
| String: "ANOTHER_ELEMENT_TITLE" | The title of another element in the same view. This size and position of this element will be used as bounding box. |
Bounding Box Mode
With the property boundingBoxMode you can define how the element is behaving when the element hits the boundaries. Currently there are 4 different modes:
| Value (string) | Explanation |
| inside (default) | As soon as the element is moved outside of the bounding box, a message will display to let the user know, that the element needs to be moved into the bounding box. If an element is outside of the bounding box and the methods getProduct() or getOrder() are called, an alert message will be displayed. |
| clipping | The element will be clipped into the bounding box. |
| limitModify | The element can only be transformed inside the bounding box. |
| none | The bounding box is visible, but the element can be moved outside of the bounding box without any limitation. |
Scale Mode (only images)
The scaleMode property will define how an image element is scaled into the bounding box.
- fit: The image is scaled to fit inside the bounding box. The whole image is visible.
- cover: The image is scaled to cover the whole bounding box.