Render System
This page will describe how the render system for both Edit Mode and Play Mode works as they use largely the same system. Specifically this documentation will explain how objects (such as Konva objects and Custom objects) get rendered with the appropriate settings to the canvasses.
Each page of a simulation can feature three main types of canvas. The group canvas, personal canvas, and overlay canvas. The group and personal canvasses are mandatory while the overlay canvas is optional and there can be multiple overlay canvasses per page. The group canvas is shared by all users of the simulation and changes there are synchronized across all users. The content of overlay canvasses are the same for all users regardless of role type but overlay canvasses are not synchronized between users. The personal canvas contents are determined by a user's role type and the personal canvas is not synced across users.
Each canvas on each page of the simulation uses the same render system described here and the app generally tries to load only one canvas at a time to reduce lag.
Each object loaded onto a canvas is loaded from the state into it's own Konva Layer. Each Konva layer loads into the DOM as an HTML canvas element. This allows the app to use a layering system that work with both custom HTML objects and Konva objects by changing the order of the HTML canvasses in the DOM. For an example I will take you through exactly how the following orange rectangle got rendered to a group canvas.
First the loadObjects function is called from within the Group stage. The loadObjects function can be found on CanvasPage.jsx and it is the main function used to render objects. It takes in 3 parameters: the stage type (group, personal, or overlay), the simulation mode (edit mode or play mode), and a boolean indicating if the canvas is moving or not (only applicable on edit mode). The loadObjects function will then use these parameters in combination with the current state of the game (current level/page, current zoom etc.) to generate the layers to be drawn to the stage with the appropriate settings and returns these layers so they can be rendered in the Konva Stage. In this case the loadObjects would run with the parameters stage = "group", mode = "edit", moving = "false".
First the stage would render the layer groupAreaLayer.main which will contain the grid in the background as well as the draggable Rect which allows for moving around the canvas. Since moving = "false" the grid will be loaded from state since it is only recalculated while moving to be more efficient. Next the objects on the page are rendered in the layer order. In this case we are on the 3rd page in the group stage so the corresponding layer ids would be loaded from pages in state. The layer ids are an array of the object ids on a page. For example layers ids ["ellipses1", "rectangles1", "stars1"] would render the ellipse on the bottom and the star on the top layer (rendered last). Each layer would have a name of the following form groupAreaLayer.ellipses1 or groupAreaLayer.rectangles1 where the layer type is followed by a dot and the object id. In the case of the orange rectangle the layer ids would like like this ["rectangles1"] since it is the only object on the canvas and it would be rendered to a layer with the name groupAreaLayer.rectangles1. The object props are loaded from state so in this case the rectangles state would contain a rectangle with id: rectangles1. This would be an object containing other object properties. The orange rectangle properties are shown in the following image.
These props are put into a Konva Rectangle object and then the object is added to it's own layer. This process repeats in the layer order for any other objects, rendering each object to it's own layer with the appropriate properties that are saved in the related state. Custom objects work mostly the same way with a few differences. To learn more about custom objects click here.
Finally once all the objects are loaded a final layer called groupAreaLayer.other is loaded which contains various things that need to be rendered at the top such as the transformer, selection rectangle, and snapping guides (if applicable).