The X Toolkit API

X.renderer2D

/**
* Create a 2D renderer inside a given DOM Element.
*
* @constructor
* @extends X.renderer
*/

var r = new X.renderer2D();

/**
* The animation frame ID.
*
* @type {!number}
* @protected
*/

r._AnimationFrameID = $_ANIMATIONFRAMEID;

/**
* The camera of this renderer.
*
* @type {?X.camera}
* @protected
*/

r._camera = $_CAMERA;

/**
* The Canvas of this renderer.
*
* @type {?Element}
* @public
*/

r._canvas = $_CANVAS;

/**
* The className of this class.
*
* @type {string}
* @protected
*/

r._classname = $_CLASSNAME;

/**
* The configuration of this renderer.
*
* @enum {boolean}
*/

r._config = $_CONFIG;

/**
* The HTML container of this renderer, E.g. a .
*
* @type {!Element|HTMLBodyElement}
* @protected
*/

r._container = $_CONTAINER;

/**
* The rendering context of this renderer.
*
* @type {?Object}
* @protected
*/

r._context = $_CONTEXT;

/**
* The buffer of the current slice index.
*
* @type {!number}
* @protected
*/

r._currentSlice = $_CURRENTSLICE;

/**
* The 'dirty' flag of this object.
*
* @type {boolean}
* @protected
*/

r._dirty = $_DIRTY;

/**
* A frame buffer for slice data.
*
* @type {?Element}
* @protected
*/

r._frameBuffer = $_FRAMEBUFFER;

/**
* The rendering context of the slice frame buffer.
*
* @type {?Object}
* @protected
*/

r._frameBufferContext = $_FRAMEBUFFERCONTEXT;

/**
* The height of this renderer.
*
* @type {!number}
* @public
*/

r._height = $_HEIGHT;

/**
* The uniqueId of this instance. Each class instance in XTK has a uniqueId.
*
* @type {number}
* @protected
*/

r._id = $_ID;

/**
* The interactor of this renderer.
*
* @type {?X.interactor}
* @protected
*/

r._interactor = $_INTERACTOR;

/**
* A frame buffer for label data.
*
* @type {?Element}
* @protected
*/

r._labelFrameBuffer = $_LABELFRAMEBUFFER;

/**
* The rendering context of the label frame buffer.
*
* @type {?Object}
* @protected
*/

r._labelFrameBufferContext = $_LABELFRAMEBUFFERCONTEXT;

/**
* The loader associated with this renderer.
*
* @type {?X.loader}
* @protected
*/

r._loader = $_LOADER;

/**
* A flag to show if the initial loading was completed.
*
* @type {boolean}
* @protected
*/

r._loadingCompleted = $_LOADINGCOMPLETED;

/**
* A locked flag for synchronizing.
*
* @type {boolean}
* @protected
*/

r._locked = $_LOCKED;

/**
* The buffer of the current lower threshold.
*
* @type {!number}
* @protected
*/

r._lowerThreshold = $_LOWERTHRESHOLD;

/**
* An X.array containing the displayable objects of this renderer. The object
* reflects the rendering order for the associated objects.
*
* @type {!X.array}
* @protected
*/

r._objects = $_OBJECTS;

/**
* A flag to indicate that the onShowtime callback is about to be called.
*
* @type {boolean}
* @protected
*/

r._onShowtime = $_ONSHOWTIME;

/**
* The orientation of this renderer.
*
* @type {?string}
* @protected
*/

r._orientation = $_ORIENTATION;

/**
* The progressBar of this renderer.
*
* @type {?X.progressbar}
* @protected
*/

r._progressBar = $_PROGRESSBAR;

/**
* The current rotation factor. This is positive to rotate clockwise and
* negative to rotate counter-clockwise. The factor is multiplied by 90
* degrees.
*
* @type {number}
* @protected
*/

r._rotation = $_ROTATION;

/**
* The current slice height.
*
* @type {number}
* @protected
*/

r._sliceHeight = $_SLICEHEIGHT;

/**
* The current slice height spacing.
*
* @type {number}
* @protected
*/

r._sliceHeightSpacing = $_SLICEHEIGHTSPACING;

/**
* The current slice width.
*
* @type {number}
* @protected
*/

r._sliceWidth = $_SLICEWIDTH;

/**
* The current slice width spacing.
*
* @type {number}
* @protected
*/

r._sliceWidthSpacing = $_SLICEWIDTHSPACING;

/**
* An array containing the topLevel objects (which do not have parents) of
* this renderer.
*
* @type {!Array}
* @protected
*/

r._topLevelObjects = $_TOPLEVELOBJECTS;

/**
* The buffer of the current upper threshold.
*
* @type {!number}
* @protected
*/

r._upperThreshold = $_UPPERTHRESHOLD;

/**
* The width of this renderer.
*
* @type {!number}
* @public
*/

r._width = $_WIDTH;

/**
* The buffer of the current w/l high value.
*
* @type {!number}
* @protected
*/

r._windowHigh = $_WINDOWHIGH;

/**
* The buffer of the current w/l low value.
*
* @type {!number}
* @protected
*/

r._windowLow = $_WINDOWLOW;

/**
* Get the camera of this renderer. The camera is null until this renderer is
* initialized.
*
* @return {?X.camera} The camera.
*/

var _camera = r.camera;

/**
* Get the className of this object.
*
* @return {string} The className of this object.
* @public
*/

var _classname = r.classname;

/**
* Access the configuration of this renderer. Possible settings and there
* default values are:
*
* 
* config.PROGRESSBAR_ENABLED: true
* 
*
* @return {Object} The configuration.
*/

var _config = r.config;

/**
* Get the container of this renderer.
*
* @return {!Element|HTMLBodyElement} The container of this renderer.
* @public
*/

var _container = r.container;

/**
* Set the container for this renderer. This has to happen before
* X.renderer.init() is called.
*
* @param {!string|Element|HTMLBodyElement} container Either an ID to a DOM
*          container or the DOM element itself.
* @throws {Error} An error, if the given container is invalid.
* @public
*/

r.container = $CONTAINER;

/**
* Get the id of this instance.
*
* @return {string} The className of this object.
* @public
*/

var _id = r.id;

/**
* Get the interactor of this renderer. The interactor is null until this
* renderer is initialized.
*
* @return {?X.interactor} The interactor.
*/

var _interactor = r.interactor;

/**
* Check if the initial loading of all objects was completed. This value gets
* set immediately after the onShowtime function is executed.
*
* @return {boolean} TRUE if all objects were completely loaded, FALSE else
*         wise.
*/

var _loadingCompleted = r.loadingCompleted;

/**
* Get the orientation of this renderer. Valid orientations are 'x','y','z' or
* null.
*
* @return {?string} The orientation of this renderer.
*/

var _orientation = r.orientation;

/**
* Set the orientation for this renderer. Valid orientations are 'x','y' or 'z'.
*
* @param {!string} orientation The orientation for this renderer: 'x','y' or
*          'z'.
* @throws {Error} An error, if the given orientation was wrong.
*/

r.orientation = $ORIENTATION;

/**
* Add a new object to this renderer. The renderer has to be initialized before
* doing so. A X.renderer.render() call has to be initiated to display added
* objects.
*
* @param {!X.object} object The object to add to this renderer.
* @throws {Error} An exception if something goes wrong.
*/

r.add($OBJECT);

/**
* Adjust the zoom (scale) to best fit the current slice.
*/

r.autoScale_();

/**
* Destroy this renderer.
*
* @public
*/

r.destroy();

/**
* Recursively loop through a hierarchy tree of objects and print it.
*
* @param {!X.object} object The starting point object.
* @param {number} level The current level in the scene hierarchy.
* @protected
*/

r.generateTree_($OBJECT, $LEVEL);

/**
* Get the existing X.object with the given id.
*
* @param {!number} id The object's id.
* @return {?X.object} The requested X.object or null if it was not found.
* @throws {Error} If the given id was invalid.
* @public
*/

var get = r.get($ID);

/**
* Hides the loading progress bar.
*
* @protected
*/

r.hideProgressBar_();

/**
* Create the canvas of this renderer inside the configured container and using
* attributes like width, height etc. Then, initialize the rendering context and
* attach all necessary objects (e.g. camera, shaders..). Finally, initialize
* the event listeners.
*
* @param {string} _contextName The name of the context to create.
* @throws {Error} An exception if there were problems during initialization.
* @protected
*/

r.init($_CONTEXTNAME);

/**
* The callback for X.event.events.HOVER events which indicate a hovering over
* the viewport.
*
* @param {!X.event.HoverEvent} event The hover event pointing to the relevant
*          screen coordinates.
* @throws {Error} An error if the given event is invalid.
* @protected
*/

r.onHover_($EVENT);

/**
* The callback for X.event.events.MODIFIED events which re-configures the
* object for rendering. This does not trigger re-rendering.
*
* @param {!X.event.ModifiedEvent} event The modified event pointing to the
*          modified object.
* @public
*/

r.onModified($EVENT);

/**
* The callback for X.event.events.PROGRESS events which indicate progress
* updates during loading.
*
* @param {!X.event.ProgressEvent} event The progress event holding the total
*          progress value.
* @public
*/

r.onProgress($EVENT);

/**
* Overload this function to execute code on each rendering call.
*
* @public
*/

r.onRender();

/**
* @protected
*/

r.onResize_();

/**
* Overload this function to execute code after scrolling has completed and just
* before the next rendering call.
*
* @public
*/

r.onScroll();

/**
* The callback for X.event.events.SCROLL events which indicate scrolling of the
* viewport.
*
* @param {!X.event.ScrollEvent} event The scroll event indicating the scrolling
*          direction.
* @throws {Error} An error if the given event is invalid.
* @protected
*/

r.onScroll_($EVENT);

/**
* Overload this function to execute code after all initial loading (files,
* textures..) has completed and just before the first real rendering call.
*
* @public
*/

r.onShowtime();

/**
* Overload this function to execute code after window/level adjustment has
* completed and just before the next rendering call.
*
* @public
*/

r.onWindowLevel();

/**
* Performs window/level adjustment for the currently loaded volume.
*
* @param {!X.event.WindowLevelEvent} event The window/level event from the
*          camera.
*/

r.onWindowLevel_($EVENT);

/**
* Print the full hierarchy tree of objects.
*
* @public
*/

r.printScene();

/**
* (Re-)render all associated displayable objects of this renderer. This method
* clears the viewport and re-draws everything by looping through the tree of
* objects. The current camera is used to setup the world space.
*
* @public
*/

r.render();

/**
* Internal function to perform the actual rendering by looping through all
* associated X.objects.
*
* @param {boolean} picking If TRUE, perform picking - if FALSE render to the
*          canvas viewport.
* @param {?boolean=} invoked If TRUE, the render counts as invoked and f.e.
*          statistics are generated.
* @throws {Error} If anything goes wrong.
* @protected
*/

r.render_($PICKING, $INVOKED);

/**
* Resets the view according to the global bounding box of all associated
* objects, the configured camera position as well as its focus _and_ triggers
* re-rendering.
*/

r.resetViewAndRender();

/**
* Rotate the current view clock-wise.
*/

r.rotate();

/**
* Rotate the current view counter clock-wise.
*/

r.rotateCounter();

/**
* Shows the loading progress bar by modifying the DOM tree.
*
* @protected
*/

r.showProgressBar_();

/**
* Configure a displayable object within this renderer. The object can be a
* newly created one or an existing one. A X.renderer.render() call has to be
* initiated to display the object.
*
* @param {!X.object} object The displayable object to setup within this
*          renderer.
* @throws {Error} An exception if something goes wrong.
* @protected
*/

r.update_($OBJECT);