DOM container

source/Object2D.js

@@ -452,8 +452,9 @@ Object2D.prototype.updateMatrix = function(context)
  * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
  * @param {Viewport} viewport Viewport applied to the canvas.
  * @param {Element} canvas DOM canvas element where the content is being drawn.
+ * @param {Renderer} renderer Renderer object being used to draw the object into the canvas.
  */
-Object2D.prototype.transform = function(context, viewport, canvas)
+Object2D.prototype.transform = function(context, viewport, canvas, renderer)
 {
 	this.globalMatrix.tranformContext(context);
 };

source/Renderer.js

@@ -30,13 +30,28 @@ function Renderer(canvas, options)
 	 * Canvas DOM element, the user needs to manage the canvas state.
 	 *
 	 * The canvas size (width and height) should always match its actual display size (adjusted for the device pixel ratio).
+	 *
+	 * @type {Element}
 	 */
 	this.canvas = canvas;
 
+	/**
+	 * Division where DOM and SVG objects should be placed at. This division should be perfectly aligned whit the canvas element.
+	 *
+	 * If no division is defined the canvas parent element is used by default to place these objects.
+	 *
+	 * The DOM container to be used can be obtained using the getDomContainer() method.
+	 *
+	 * @type {Element}
+	 */
+	this.container = null;
+
 	/**
 	 * Canvas 2D rendering context used to draw content.
 	 *
 	 * The options passed thought the constructor are applied to the context created.
+	 *
+	 * @type {CanvasRenderingContext2D}
 	 */
 	this.context = this.canvas.getContext("2d", {alpha: options.alpha});
 	this.context.imageSmoothingEnabled = options.imageSmoothingEnabled;
@@ -47,6 +62,8 @@ function Renderer(canvas, options)
 	 * Pointer input handler object, automatically updated by the renderer.
 	 *
 	 * The pointer is attached to the DOM window and to the canvas provided by the user.
+	 *
+	 * @type {Pointer}
 	 */
 	this.pointer = new Pointer(window, this.canvas);
 
@@ -54,10 +71,24 @@ function Renderer(canvas, options)
 	 * Indicates if the canvas should be automatically cleared before new frame is drawn.
 	 *
 	 * If set to false the user should clear the frame before drawing.
+	 *
+	 * @type {boolean}
 	 */
 	this.autoClear = true;
 }
 
+/**
+ * Get the DOM container to be used to store DOM and SVG objects.
+ *
+ * Can be set using the container attribute, by default the canvas parent element is used.
+ *
+ * @returns {Element} DOM element selected for objects.
+ */
+Renderer.prototype.getDomContainer = function()
+{
+	return this.container !== null ? this.container : this.canvas.parentElement;
+};
+
 /**
  * Creates a infinite render loop to render the group into a viewport each frame.
  *
@@ -309,7 +340,7 @@ Renderer.prototype.update = function(object, viewport)
 				viewport.matrix.setContextTransform(this.context);
 			}
 
-			masks[j].transform(this.context, viewport, this.canvas);
+			masks[j].transform(this.context, viewport, this.canvas, this);
 			masks[j].clip(this.context, viewport, this.canvas);
 		}
 
@@ -324,7 +355,7 @@ Renderer.prototype.update = function(object, viewport)
 		}
 
 		// Apply the object transform to the canvas context
-		objects[i].transform(this.context, viewport, this.canvas);
+		objects[i].transform(this.context, viewport, this.canvas, this);
 
 		// Style the canvas context
 		if(objects[i].style !== null)

source/controls/ViewportControls.js

@@ -12,6 +12,8 @@ function ViewportControls(viewport)
 {
 	/**
 	 * Viewport being controlled by this object.
+	 *
+	 * @type {Viewport}
 	 */
 	this.viewport = viewport;
 
@@ -19,6 +21,8 @@ function ViewportControls(viewport)
 	 * Button used to drag and viewport around.
 	 *
 	 * On touch enabled devices the touch event is represented as a LEFT button.
+	 *
+	 * @type {number}
 	 */
 	this.dragButton = Pointer.RIGHT;
 
@@ -26,6 +30,8 @@ function ViewportControls(viewport)
 	 * Is set to true allow the viewport to be scalled.
 	 *
 	 * Scaling is performed using the pointer scroll.
+	 *
+	 * @type {boolean}
 	 */
 	this.allowScale = true;
 
@@ -33,6 +39,8 @@ function ViewportControls(viewport)
 	 * Flag to indicate if the viewport should move when scalling.
 	 *
 	 * For some application its easier to focus the target if the viewport moves to the pointer location while scalling.
+	 *
+	 * @type {boolean}
 	 */
 	this.moveOnScale = false;
 
@@ -40,6 +48,8 @@ function ViewportControls(viewport)
 	 * If true allows the viewport to be rotated.
 	 *
 	 * Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating around the initial point.
+	 *
+	 * @type {boolean}
 	 */
 	this.allowRotation = true;
 
@@ -47,11 +57,15 @@ function ViewportControls(viewport)
 	 * Value of the initial point of rotation if the viewport is being rotated.
 	 *
 	 * Is set to null when the viewport is not being rotated.
+	 *
+	 * @type {Vector2 | null}
 	 */
 	this.rotationPoint = null;
 
 	/**
 	 * Initial rotation of the viewport.
+	 *
+	 * @type {number}
 	 */
 	this.rotationInitial = 0;
 }
@@ -61,7 +75,7 @@ function ViewportControls(viewport)
  *
  * Should be called every frame before rendering.
  *
- * @param {Pointer} pointer
+ * @param {Pointer} pointer Pointer used to control the viewport.
  */
 ViewportControls.prototype.update = function(pointer)
 {	
@@ -103,9 +117,9 @@ ViewportControls.prototype.update = function(pointer)
 		}
 		else
 		{
-			var pointer = pointer.position.clone();
-			pointer.sub(this.rotationPoint);
-			this.viewport.rotation = this.rotationInitial + pointer.angle();
+			var point = pointer.position.clone();
+			point.sub(this.rotationPoint);
+			this.viewport.rotation = this.rotationInitial + point.angle();
 			this.viewport.matrixNeedsUpdate = true;
 		}
 	}

source/input/Key.js

@@ -7,16 +7,22 @@ function Key()
 {
 	/**
 	 * Indicates if this key is currently pressed.
+	 *
+	 * @type {boolean}
 	 */
 	this.pressed = false;
 
 	/**
 	 * Indicates if this key was just pressed.
+	 *
+	 * @type {boolean}
 	 */
 	this.justPressed = false;
 	
 	/**
 	 * Indicates if this key was just released.
+	 *
+	 * @type {boolean}
 	 */
 	this.justReleased = false;
 }
@@ -29,6 +35,8 @@ Key.prototype.constructor = Key;
 
 /**
  * Update Key status based on new key state.
+ *
+ * @param {number} action Key action that was performed.
  */
 Key.prototype.update = function(action)
 {

source/input/Pointer.js

@@ -24,36 +24,54 @@ function Pointer(domElement, canvas)
 
 	/**
 	 * Array with pointer buttons status.
+	 *
+	 * @type {number[]}
 	 */
 	this.keys = new Array(5);
 
 	/**
 	 * Pointer position inside of the window (coordinates in window space).
+	 *
+	 * This value is accumulated from multiple mouse triggered events between updated.
+	 *
+	 * @type {Vector2}
 	 */
 	this.position = new Vector2(0, 0);
 
 	/**
-	 * Pointer movement (coordinates in window space).
+	 * Pointer movement (coordinates in window space). Since the last update.
+	 *
+	 * This value is accumulated from multiple mouse triggered events between updated.
+	 *
+	 * @type {Vector2}
 	 */
 	this.delta = new Vector2(0, 0);
 
 	/**
-	 * Pointer scroll wheel movement.
+	 * Pointer scroll wheel movement, since the last update.
+	 *
+	 * @type {number}
 	 */
 	this.wheel = 0;
 	
 	/**
 	 * Indicates a button of the pointer was double clicked.
+	 *
+	 * @type {boolean}
 	 */
 	this.doubleClicked = new Array(5);
 
 	/**
 	 * DOM element where to attach the pointer events.
+	 *
+	 * @type {Element}
 	 */
 	this.domElement = (domElement !== undefined) ? domElement : window;
 
 	/**
 	 * Canvas attached to this pointer instance used to calculate position and delta in element space coordinates.
+	 *
+	 * @type {Element}
 	 */
 	this.canvas = null;
 	if(canvas !== undefined)
@@ -64,9 +82,11 @@ function Pointer(domElement, canvas)
 	/**
 	 * Event manager responsible for updating the raw data variables.
 	 *
-	 * Diferent events are used depending on the host platform.
+	 * Different events are used depending on the host platform.
 	 *
 	 * When the update method is called the raw data is reset.
+	 *
+	 * @type {EventManager}
 	 */
 	this.events = new EventManager();
 
@@ -186,26 +206,41 @@ Pointer.prototype.constructor = Pointer;
 
 /**
  * Left pointer button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.LEFT = 0;
 
 /**
  * Middle pointer button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.MIDDLE = 1;
 
 /**
  * Right pointer button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.RIGHT = 2;
 
 /**
  * Back pointer navigation button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.BACK = 3;
 
 /**
  * Forward pointer navigation button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.FORWARD = 4;
 
@@ -287,8 +322,6 @@ Pointer.buttonJustReleased = function(button)
 
 /**
  * Update pointer position.
- *
- * Automatically called by the runtime.
  * 
  * @param {Number} x
  * @param {Number} y
@@ -312,8 +345,6 @@ Pointer.updatePosition = function(x, y, xDiff, yDiff)
 
 /**
  * Update a pointer button.
- * 
- * Automatically called by the runtime.
  *
  * @param {Number} button
  * @param {Number} action
@@ -328,6 +359,8 @@ Pointer.updateKey = function(button, action)
 
 /**
  * Update pointer buttons state, position, wheel and delta synchronously.
+ *
+ * Should be called every frame on the update loop before reading any values from the pointer.
  */
 Pointer.update = function()
 {
@@ -385,7 +418,9 @@ Pointer.update = function()
 };
 
 /**
- * Create pointer events.
+ * Create pointer events to collect input data.
+ *
+ * Should be called before using the pointer object.
  */
 Pointer.create = function()
 {
@@ -393,7 +428,9 @@ Pointer.create = function()
 };
 
 /**
- * Dispose pointer events.
+ * Dispose pointer events, should be called after the objects is no longer required.
+ *
+ * If not called leaves the window events created leaving a memory/code leak.
  */
 Pointer.dispose = function()
 {

source/objects/DOM.js

@@ -74,12 +74,12 @@ DOM.prototype.onRemove = function()
 	}
 };
 
-DOM.prototype.transform = function(context, viewport, canvas)
+DOM.prototype.transform = function(context, viewport, canvas, renderer)
 {
 	// Check if the DOM element parent is null
 	if(this.parentElement === null)
 	{
-		this.parentElement = canvas.parentElement;
+		this.parentElement = renderer.getDomContainer();
 		this.parentElement.appendChild(this.element);
 	}