Skip to content

[WIP] nitty gritty details of rendering

Xiaohan Zhang edited this page Mar 14, 2017 · 1 revision

The methods that matter are:

redraw()

redraw() tells the Root Component to schedule itself for computeLayout followed by a renderImmediately (both of which will happen in the next animation frame after redraw() is called). Redrawing multiple different components (e.g. an axis and a plot) both belonging to the same tree will have no effect - in both cases it gets delegated to the Root Component (e.g. the Table containing both of them) which schedules itself.

Many public methods that modify how a Component might render (e.g. axis tick length) internally call redraw() automatically.

render()

render() simply adds the Component to the "set of Components to renderImmediately() next animation frame". Table and Group calls render on all its children. The end result should be that only leaf nodes are put on the renderImmediately() queue. (This isn't actually true since redraw() will put the Root Component on the render queue as well).

renderImmediately()

renderImmediately() actually commits to the DOM and assumes the Component has been laid out.