The renderer contains a set of view objects that inject themselves with subviews that are rendered in specific ways depending on the environment. After the parser is complete, it then passes the completed objects into the renderer's main view, called {\tt TEX} located inside of {\tt renderer.js}.


Upon initialization of the {\tt TEX} view, it stores the current scroll position of the document, to enable flawless real-time editing upon re-render, which we will discuss more in detail later. Once the {\tt TEX} view's {\tt render} method is called, this triggers the {\tt beforeRender} method, which multiplexes the injection of various views depending on the environment, and passes in the appropriate contexts. 


It is within these subviews where the magic happens. The view associated with a {\tt verbatim} environment will wrap the text in {\tt pre} tags, for example, and the view associated with the {\tt enumerate} environment will iterate over the items and generate the HTML elements {\tt ul} and {\tt li} to render lists.


The views have access to their representation in the DOM via a variable {\tt this.el}. The math environment will simply make a call to MathJax in its {\tt afterRender} method. This method means that {\tt this.el} exists in the DOM, thanks to the layout manager. The view specifically calls the MathJax {\tt Typeset} method for {\it only} that DOM element. This controls the rendering so that we do not attempt to render the entire page, which we do not want. It is this fine grained control that enables the system to function as expected. 


The more advanced view is probably for the PSTricks environment, however. Upon initialization, the PSTricks view will store a reference to the environment and execution context that was passed in. It then creates a new SVG element based on these parameters, and then registers touch and mouse events that call a user event function to trigger re-rendering of various graphical elements when the user interacts with the SVG.


In the PSTricks view's {\tt afterRender} method, it iterates over all objects that are not {\tt rput} first, rendering those using the graphing function that matches the hash inside of the {\tt psgraph.js} file. For example, a {\tt psline} expression that may be defined in the {\tt Expressions} object inside of {\tt expressions.js} corresponds to a {\tt psline} function defined inside of {\tt psgraph.js}. So the corresponding graph function is called, and the context of the environment is passed along, as well as the reference to the SVG element. 


The various functions within the {\tt Functions} object inside of {\tt psgraph.js} contain the drawing commands for the respective PSTricks commands. Most employ turtle drawing to create {\tt svg:path} elements using notation such as: 

\begin{verbatim}
M 0 150 L 0 3 4 5 6 6
\end{verbatim}
What this means is move to position {\tt (0,150)}, then draw a line to {\tt (0,3)}, then draw a line to {\tt (4,5)}, and so on. Then the associated styles and settings are applied, for example, if there is a fillcolor or a stroke width specified. 


Before the {\tt afterRender} method is complete, the {\tt rput} elements are ``absolutely relatively'' positioned on top of the {\tt this.el} which is enabled because it's parent's {\tt width} is set, and it
s parent's {\tt position} is set to {\tt relative}. The {\tt rput} method defined in {\tt psgraph.js} generates a new {\tt div} element, and sets the CSS properties to be {\tt position:absolute}, and {\tt top} and {\tt left} properties mapped {\tt this.x} and {\tt this.y}, which are the transformed coordinates specified form the original {\tt rput} command written in text. The second to last step is calling the MathJax {\tt Typeset} method on the DOM element for math rendering.


Because {\tt rput}'s definition is that it is centered at the specified position, and we require the MathJax rendering to be complete to get the width of the resulting div element, we use a {\tt setTimeout} of 0 milliseconds, which is a trick to get access to the DOM element during the next repaint of the browser. Think of it as an {\tt afterAfterRender} method. If this code could be included in the MathJax library, perhaps this step would be unnecessary. It is in this critical step where we get the width and height of the div, and offset the {\tt top} and {\tt left} CSS parameters by half of the height and width respectively. 


In totality, this system of managing the rendering of DOM and SVG elements enables us to fully control the rendering of math and any related graphics or diagrams, so that they can be rendered on the Web, and match those graphics that are output to PostScript, PDF, or paper. 

Rendering and Graphing