Defining Bounding Boxes

Modified on Sat, 23 Nov 2019 at 10:27 AM

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.

Boolean: falseDefault 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.
clippingThe element will be clipped into the bounding box.
limitModifyThe element can only be transformed inside the bounding box.
noneThe 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.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article