Rendering

Rendering is based on the HTML5 canvas or possible WebGL or SVG. The Provided API is close to the HTML5 Canvas and extends it with additional primitives. Besides immediate mode, where a visual can be rendered directly on a context, retained mode can be supported as well using a rendering state, represented by a vector buffer. A reference to the vector buffer can be saved in a client visual and used multiple times. For HTML canvas retained mode gives the same performance, but it greatly speeds up WebGL, where a vector buffer can be organized as a set of vertex object buffers (VBO). RenderingState can be a command buffer or a vector buffer.

The class diagram below shows class diagram of the rendering architecture.

It is better to group styles in three general groups: a line style, a fill style, and a text style. Each node implementation can have from zero to N styles and they can be shared between different nodes. The diagram below shows a schematic class diagram of the styles.

• A Surface is an abstraction that represents an off-screen buffer to render graphics.
• The interface Graphics provides access to rendering API. It has methods to render primitives to either a rendering state or a rendering context.
• The RenderingContext is a parameter of the method render of a Node, which is passed to nodes during rendering. RenderingContext provides methods to create a RenderingState.
• The RenderingState is a vector buffer, which can be prepared once for the current context and used multiple times.
• Canvas and PDF export have their own implementations of RenderingState, Surface and RenderingContext.

The sequence diagram below represents rendering in retained mode, where a state is used to keep the graphic primitives for optimized rendering.

In this diagram the “plot” is a decorator of HTML5 Canvas, which keeps a root node and creates a node visitor. The following sequence diagram represents rendering in immediate mode.

In this mode a node sends rendering commands such as drawRectange, or drawLine, to render context each time a node should be rendered.