Skip to content

Rendering

This section will discuss rendering 2D objects in the layout.

Layers

The DOM is divided into layers, with lower layers being rendered first and higher layers rendered on top of them. The current layers are, in order:

  1. floor_layer - for objects that are meant to serve as a floor (stage, carpet, etc.)
  2. objects_layer - the main layer for objects
  3. top_objects_layer - for objects that are meant to be rendered on top of normal objects (pillows, cutlery, etc.)
  4. notes_layer - for text objects
  5. table_numbers_layer - for table numbers
  6. objects_data - miscellaneous data about objects (dimensions, etc.)
  7. ceremony_chairs_data - data about ceremony chairs (row number, etc.)

DisplayOrder

Each object has a displayOrder, which is used to determine the order in which objects are rendered within a layer.

This is done in OrderManager.

MainSprite and AdditionalGraphics

Each object has a main layer, which is decided by its data (type and subtype). In the absence of these, it is decided by the class of the object.

This is retrieved through mainLayer getter.

The default value for an object is objects_layer, and can be overriden through the defaultLayer getter.

The main sprite, which represents the object itself, is rendered in the main layer.

A sprite can optionally have additional graphics in other layers, usually to show data about it, such as a table number for a table.

Rendering

Objects are rendered by LayoutObjectManager, which listens for changes in layoutObjectDataStore for object additions and removals.

The initial rendering function is getObjectGraphics, which returns a map of layers to sprites for the object. LayoutObjectManager then adds these sprites to the appropriate layers.

Each individual object observes changes on its graphicProperties, and redraws itself when they change. Additionally, the object listens to changes in its transformProperties to update its position and rotation.

It is recommended to update an object's data to cause a redraw, rather than changing the object itself, because there are other reactions that depend on the data changing, such as saving.

untranslatedPosition

The position of an object on the screen might not be the same as the position that should be saved in the data. Currently this happens when the floorplan is a "Smart Floorplan" (a floorplan that can have parts of it turned on and off).

When setting the position in an object's data, use untranslatedPosition instead of the sprite's position.