Draggable / Rotatable / Resizable / Deletable

ohyay can be configured to allow all users to manipulate the elements within a Room, and all these changes will be shown in realtime to all other users in the Room. This can facilitate all kinds of fun and/or useful interactions such as jigsaw puzzles, post-it notes brainstorming, crossword puzzles, card games, etc.

Dragging

The most basic of interactions is making the elements draggable. To do this, simply enable the Draggable property under the Interaction category:

You can limit the draggable area for the element by specifying the Draggable Limits property:

And tuning the Draggable Min X, Draggable Max X, Draggable Min X, and Draggable Max Y properties (in the coordinate space of the Room).

You can also force the dragging to snap to a pixel-based grid within the space by specifying the Draggable Snap to Grid X and Draggable Snap to Grid Y:

This is very useful for puzzles where elements need to be aligned with each other.

Note: Resizing will modify the X and Y properties of an element.

---

Resizing

You can also allow users to resize the elements in a Room. You can do this by enabling the Resizable setting under Interaction:

Now users can hover over the element and use the drag handles to resize the element:

You can constrain how much the element can be resized by setting the Resizable Min Height, Resizable Min Width, Resizable Max Height, and Resizable Max Width properties:

Note: Resizing will modify the X, Y, W, and H properties of an element.

---

Rotation

You can give users the ability to rotate an element by checking the Rotatable property:

Now users can grab the rotate handle and spin the element:

Note: this will modify the Rotate Z property of the element.

---

Deletable

Finally, you can give users the ability to delete elements in the Room by enabling the Deleteable property:

Then users can drag the element down to a trash can at the bottom right of the Room: