From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 11:52:06 -0700
Subject: Expand tabs

---
 js/helper-classes/3D/draw-utils.js | 2092 ++++++++++++++++++------------------
 1 file changed, 1046 insertions(+), 1046 deletions(-)

(limited to 'js/helper-classes/3D/draw-utils.js')

diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index 235b381e..6f4c287d 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -42,104 +42,104 @@ var StageLine = require("js/helper-classes/3D/StageLine").StageLine;
 
 var DrawUtils = exports.DrawUtils = Montage.create(Component, {
 
-	///////////////////////////////////////////////////////////////////////
-	// Instance variables
-	///////////////////////////////////////////////////////////////////////
+    ///////////////////////////////////////////////////////////////////////
+    // Instance variables
+    ///////////////////////////////////////////////////////////////////////
     viewUtils: { value: null, writable: true },
     snapManager: { value: null },
     ElementPlanes : { value: null, writable: true },
 
-	// the drawing surface (a canvas)
-	_drawingSurfaceElt : { value: null, writable: true },
-	_drawingContext : { value: null, writable: true },
+    // the drawing surface (a canvas)
+    _drawingSurfaceElt : { value: null, writable: true },
+    _drawingContext : { value: null, writable: true },
 
-	// color to draw the lines
-	_lineColor : { value: "black", writable: true},
+    // color to draw the lines
+    _lineColor : { value: "black", writable: true},
 
-	// define a stack for quickly setting graphics states and restoring them
-	_stateArray : { value: [], writable: true },
+    // define a stack for quickly setting graphics states and restoring them
+    _stateArray : { value: [], writable: true },
 
-	// save references to the grid lines for quick redraw
-	_gridLineArray : {value: [], writable: true },
+    // save references to the grid lines for quick redraw
+    _gridLineArray : {value: [], writable: true },
 
-	// state for moveTo, lineTo
-	_curPt : { value: null, writable: true },
-	_curVis : { value: null, writable: true },
+    // state for moveTo, lineTo
+    _curPt : { value: null, writable: true },
+    _curVis : { value: null, writable: true },
 
-	// the element that defines the coordinate system for the displayed lines
-	_sourceSpaceElt  : { value: null, writable: true },
+    // the element that defines the coordinate system for the displayed lines
+    _sourceSpaceElt  : { value: null, writable: true },
 
-	// maintain a list of objects to hide against
-	_eltArray : {value: [], writable: true },
+    // maintain a list of objects to hide against
+    _eltArray : {value: [], writable: true },
 
-	// maintain a list of the planes to test against
-	_planesArray : {value: [], writable: true },
+    // maintain a list of the planes to test against
+    _planesArray : {value: [], writable: true },
 
-	// the working plane.
-	// a grid may be drawn aligned with this working plane
-	_workingPlane : { value: null, writable: true },
+    // the working plane.
+    // a grid may be drawn aligned with this working plane
+    _workingPlane : { value: null, writable: true },
 
-	// save some parameters about the grid.
-	// these parameters are set when the grid is drawn
-	_gridHorizontalSpacing : {value: 50, writable: true },
-	_gridVerticalSpacing : {value: 50, writable: true },
-	_gridHorizontalLineCount : {value:10, writable: true },
-	_gridVerticalLineCount : {value:0, writable: true },
-	_gridOrigin : {value: null, writable: true },
+    // save some parameters about the grid.
+    // these parameters are set when the grid is drawn
+    _gridHorizontalSpacing : {value: 50, writable: true },
+    _gridVerticalSpacing : {value: 50, writable: true },
+    _gridHorizontalLineCount : {value:10, writable: true },
+    _gridVerticalLineCount : {value:0, writable: true },
+    _gridOrigin : {value: null, writable: true },
 
-	drawXY : {value: false, writable: true },
-	drawXZ : {value: false, writable: true },
-	drawYZ : {value: false, writable: true },
+    drawXY : {value: false, writable: true },
+    drawXZ : {value: false, writable: true },
+    drawYZ : {value: false, writable: true },
 
-	drawElementN : {value: false, writable: true },
+    drawElementN : {value: false, writable: true },
 
-	_selectionCtr : {value: null, writable: true },
+    _selectionCtr : {value: null, writable: true },
 
     // Properties that require element planes to be updated
-	_updatePlaneProps : {value: ["matrix", "left", "top", "width", "height"], writable: false },
-	_recalculateScrollOffsets : { value: false },
+    _updatePlaneProps : {value: ["matrix", "left", "top", "width", "height"], writable: false },
+    _recalculateScrollOffsets : { value: false },
 
-	///////////////////////////////////////////////////////////////////////
-	// Property accessors
-	///////////////////////////////////////////////////////////////////////
-	setDrawingSurfaceElement : { value: function( s ) {  this._drawingSurfaceElt = s;  if (s)  this._drawingContext = s.getContext("2d");     }},
-	getDrawingSurfaceElement : { value: function()          {  return this._drawingSurfaceElt;      }},
+    ///////////////////////////////////////////////////////////////////////
+    // Property accessors
+    ///////////////////////////////////////////////////////////////////////
+    setDrawingSurfaceElement : { value: function( s ) {  this._drawingSurfaceElt = s;  if (s)  this._drawingContext = s.getContext("2d");     }},
+    getDrawingSurfaceElement : { value: function()          {  return this._drawingSurfaceElt;      }},
 
-	getDrawingContext : { value: function()			{  return this._drawingContext;			}},
+    getDrawingContext : { value: function()         {  return this._drawingContext;         }},
 
-	setSourceSpaceElement : { value: function(ss)          {  this._sourceSpaceElt = ss;           }},
-	getSourceSpaceElement : { value: function()            {  return this._sourceSpaceElt;         }},
+    setSourceSpaceElement : { value: function(ss)          {  this._sourceSpaceElt = ss;           }},
+    getSourceSpaceElement : { value: function()            {  return this._sourceSpaceElt;         }},
 
-	getWorkingPlane : { value: function()            {  return this._workingPlane;           }},
-	setWorkingPlane : { value: function (wp)			{ this._workingPlane = wp;				}},
+    getWorkingPlane : { value: function()            {  return this._workingPlane;           }},
+    setWorkingPlane : { value: function (wp)            { this._workingPlane = wp;              }},
 
-	getGridHorizontalSpacing : { value: function()	{  return this._gridHorizontalSpacing;		}},
-	getGridVerticalSpacing : { value: function()	{  return this._gridVerticalSpacing;		}},
-	getGridHorizontalLineCount : { value: function()	{  return this._gridHorizontalLineCount;	}},
-	getGridVerticalLineCount : { value: function()	{  return this._gridVerticalLineCount;	}},
-	getGridOrigin : { value: function()	{  return this._gridOrigin.slice(0);			}},
+    getGridHorizontalSpacing : { value: function()  {  return this._gridHorizontalSpacing;      }},
+    getGridVerticalSpacing : { value: function()    {  return this._gridVerticalSpacing;        }},
+    getGridHorizontalLineCount : { value: function()    {  return this._gridHorizontalLineCount;    }},
+    getGridVerticalLineCount : { value: function()  {  return this._gridVerticalLineCount;  }},
+    getGridOrigin : { value: function() {  return this._gridOrigin.slice(0);            }},
 
-	isDrawingGrid : { value: function()			{  return this.drawXY || this.drawYZ || this.drawXZ;	}},
-	isDrawingElementNormal : { value: function()			{  return this.drawElementN	}},
+    isDrawingGrid : { value: function()         {  return this.drawXY || this.drawYZ || this.drawXZ;    }},
+    isDrawingElementNormal : { value: function()            {  return this.drawElementN }},
 
-	getLineColor : { value: function()			{  return this._lineColor;					}},
-	setLineColor : { value: function( color )		{  this._lineColor = color;					}},
+    getLineColor : { value: function()          {  return this._lineColor;                  }},
+    setLineColor : { value: function( color )       {  this._lineColor = color;                 }},
 
-	getLineWidth : { value: function()			{  return this._drawingContext.lineWidth;	}},
-	setLineWidth : { value: function( w )			{  this._drawingContext.lineWidth = w;		}},
+    getLineWidth : { value: function()          {  return this._drawingContext.lineWidth;   }},
+    setLineWidth : { value: function( w )           {  this._drawingContext.lineWidth = w;      }},
 
 
-	initialize: {
-		value: function() {
-			this._gridOrigin = [0,0];	// 2D plane space point
+    initialize: {
+        value: function() {
+            this._gridOrigin = [0,0];   // 2D plane space point
 
             this.eventManager.addEventListener("elementAdded", this, false);
             this.eventManager.addEventListener("elementsRemoved", this, false);
             this.eventManager.addEventListener("elementChange", this, false);
             this.eventManager.addEventListener("elementChanging", this, false);
             this.eventManager.addEventListener("elementReplaced", this, false);
-		}
-	},
+        }
+    },
 
     initializeFromDocument:{
         value:function(adjustScrollOffsets, useStageValues){
@@ -364,502 +364,502 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
         }
     },
 
-	///////////////////////////////////////////////////////////////////////
-	// Methods
-	///////////////////////////////////////////////////////////////////////
-
-	addElement: {
-		value: function( elt ) {
-			// check if we already know about this object
-			var n = this._eltArray.length;
-			for (var i=0;  i<n;  i++) {
-				if (elt == this._eltArray[i]) {
-					return;
-				}
-			}
-
-			this._eltArray.push( elt );
-
-			// create the planes for this element
-			var plane = Object.create(this.ElementPlanes, {});
-			plane.setElement( elt );
-			plane.init();
-			this._planesArray.push( plane );
+    ///////////////////////////////////////////////////////////////////////
+    // Methods
+    ///////////////////////////////////////////////////////////////////////
+
+    addElement: {
+        value: function( elt ) {
+            // check if we already know about this object
+            var n = this._eltArray.length;
+            for (var i=0;  i<n;  i++) {
+                if (elt == this._eltArray[i]) {
+                    return;
+                }
+            }
+
+            this._eltArray.push( elt );
+
+            // create the planes for this element
+            var plane = Object.create(this.ElementPlanes, {});
+            plane.setElement( elt );
+            plane.init();
+            this._planesArray.push( plane );
             elt.elementModel.props3D.elementPlane = plane;
             return plane;
-		}
-	},
+        }
+    },
 
     removeElement: {
         value: function(element) {
-			// check if object exists
-			var _elements = this._eltArray.length;
-			for (var i=0;  i < _elements;  i++) {
-				if (element === this._eltArray[i]) {
-					// First remove the planes for this element
-					this._planesArray.splice(i, 1);
-					// Then remove the element
-					this._eltArray.splice(i, 1);
+            // check if object exists
+            var _elements = this._eltArray.length;
+            for (var i=0;  i < _elements;  i++) {
+                if (element === this._eltArray[i]) {
+                    // First remove the planes for this element
+                    this._planesArray.splice(i, 1);
+                    // Then remove the element
+                    this._eltArray.splice(i, 1);
 
                     // TODO - May need to delete props3D and elementPlane as well
-					return;
-				}
-			}
-		}
-	},
-
-	clear : {
-		value: function() {
-			if (this._drawingContext)
-				this._drawingContext.clearRect( 0, 0, this._drawingSurfaceElt.width,  this._drawingSurfaceElt.height );
-		}
-	},
-
-	updatePlanes : {
-		value: function() {
-			var n = this._planesArray.length;
-
-			for (var i=0;  i<n;  i++)
-			{
-				var plane = this._planesArray[i];
-				plane.init();
-			}
-		}
-	},
-
-	getVisibilityAtPoint:
-	{
-		value: function( targetPt )
-		{
-			// duplicate the point and make sure it has the correct dimension (2)
-			var pt = targetPt.slice(0);
-			while (pt.length > 3)  pt.pop();
-
-			var z = pt[2];
-			var n = this._planesArray.length;
-			var vis = 0;
-			for (var i=0;  i<n;  i++)
-			{
-				var plane = this._planesArray[i];
-
-				// ignore if the point is in front of the polygon
-				if (z > plane.getZMax())  continue;
-
-				// test for containment in the polygon bounds
-				var contain = MathUtils.boundaryContainsPoint( plane.getBoundaryPoints(),  pt,  plane.isBackFacing() );
-				if (contain == MathUtils.OUTSIDE)  continue;
-				if (contain == MathUtils.ON)       continue;
-
-				// shoot a ray from the point in the +Z direction to get the z value of the plane
-				var vec = [0,0,1];
-				var planeEq = plane.getPlaneEq();
-				var ptOnPlane = MathUtils.vecIntersectPlane( pt, vec, planeEq );
-				if (ptOnPlane)
-				{
-					// in keeping with the convention that a point "on" a face is outside the element,
-					// check that case.
-					//if (MathUtils.fpCmp(pt[2], ptOnPlane[2]) == 0)  continue;
-
-					// if the point is behind the plane, increase the visibility
-					if (MathUtils.fpCmp(pt[2],ptOnPlane[2]) <= 0)  vis++;
-				}
-			}
-
-			return vis;
-		}
-	},
-
-	moveTo : {
-		value: function( pt ) {
-			if (this._sourceSpaceElt)
-				pt = this.viewUtils.localToGlobal( pt, this._sourceSpaceElt );
-
-			this._curPt = pt.slice(0);
-			this._curVis = this.getVisibilityAtPoint( pt );
-		}
-	},
-
-	lineTo :
-	{
-		value: function( pt )
-		{
-			if (this._sourceSpaceElt)
-				pt = this.viewUtils.localToGlobal( pt, this._sourceSpaceElt );
-
-			var line = Object.create(StageLine, {});
-			line.setPoints( this._curPt, pt );
-			line.setVisibility( this._curVis );
-
-			// find all the plane intersections
-			this.getLineIntersections( line );
-
-			// draw the line
-			this._curVis = this.drawIntersectedLine( line, this._drawingContext );
-			this._curPt = pt.slice(0);
-		}
-	},
-
-
-	drawLine :
-	{
-		value: function( pt0, pt1 )
-		{
-			if (this._drawingContext)
-			{
-				// transform the points from local object space to world space
-				if (this._sourceSpaceElt)
-				{
-					pt0 = this.viewUtils.localToGlobal( pt0, this._sourceSpaceElt );
-					pt1 = this.viewUtils.localToGlobal( pt1, this._sourceSpaceElt );
-				}
-
-				// create the line structure
-				var line = Object.create(StageLine, {});
-				line.setPoints( pt0, pt1 );
-
-				// find all the plane intersections
-				this.getLineIntersections( line );
-
-				// get the starting visibility
-				var vis = this.getVisibilityAtPoint( pt0 );
-				line.setVisibility( vis );
-
-				// draw the line
-				this._curVis = this.drawIntersectedLine( line, this._drawingContext );
-			}
-		}
-	},
-
-	drawIntersectedLine :
-	{
-		value: function( line )
-		{
-			this._drawingContext.strokeStyle = this._lineColor;
-			this._drawingContext.beginPath();
-
-			//  get the 2 enpoints of the line
-			var pt0 = line.getPoint0(),
-				pt1 = line.getPoint1();
-
-			// find the visibility at the start point
-			var vis = line.getVisibility();
-			if (vis == 0)
-			{
-				this._drawingContext.strokeStyle = this._lineColor;
-				this._drawingContext.beginPath();
-				this._drawingContext.moveTo( pt0[0], pt0[1] );
-			}
-
-			// go through each intersection
-			var n = line.getIntersectionCount();
-			var t = 0.0;
-			var iRec = line.getIntersectionList();
-			for (var i=0;  i<n;  i++)
-			{
-				var tNext = iRec.getT();
-				var dv = iRec.getDeltaVis();
-
-				var tPt = MathUtils.interpolateLine3D( pt0, pt1, tNext );
-
-				if (vis == 0)
-				{
-					this._drawingContext.lineTo( tPt[0], tPt[1] );
-					this._drawingContext.closePath();
-					this._drawingContext.stroke();
-				}
-				else
-				{
-					this._drawingContext.beginPath();
-					this._drawingContext.moveTo( tPt[0], tPt[1] );
-				}
-
-				vis += dv;
-				iRec = iRec.getNext();
-			}
-
-			// handle the end of the line
-			if (vis == 0)
-			{
-				this._drawingContext.lineTo( pt1[0], pt1[1] );
-
-				// draw the line
-				this._drawingContext.closePath();
-				this._drawingContext.stroke();
-			}
-
-			return vis;
-		}
-	},
-
-	getLineIntersections:
-	{
-		value: function( line )
-		{
-			// clip the line against all polygons in the scene
-			var n = this._planesArray.length;
-			for (var i=0;  i<n;  i++)
-			{
-				var plane = this._planesArray[i];
-				line.intersectWithPlane( plane );
-			}
-		}
-	},
-
-	getPlaneToWorldMatrix:
-	{
-		value: function (normal, ptOnPlane)
-		{
-			// 3 coordinate axes for the plane
-			var zAxis = normal.slice(0);
-			MathUtils.makeDimension3(zAxis);
-			zAxis = vecUtils.vecNormalize(3, zAxis);
-
-			// special case the coordinate axes followed by general case
-			var tmp;
-			var xAxis, yAxis;
-			if (MathUtils.fpCmp(Math.abs(zAxis[0]), 1.0) == 0) {
-				yAxis = [0, 1, 0];
-				xAxis = vecUtils.vecCross(3, yAxis, zAxis);
-			}
-			else if (MathUtils.fpCmp(Math.abs(zAxis[1]), 1.0) == 0) {
-				yAxis = [0, 0, 1];
-				//xAxis = yAxis.cross(zAxis);
-				xAxis = vecUtils.vecCross(3, yAxis, zAxis );
-			}
-			else if (MathUtils.fpCmp(Math.abs(zAxis[2]), 1.0) == 0) {
-				yAxis = [0, 1, 0];
-				//xAxis = yAxis.cross(zAxis);
-				xAxis = vecUtils.vecCross(3, yAxis, zAxis );
-			}
-			else
-			{
-				if (Math.abs(zAxis[0]) < Math.abs(zAxis[1]))
-				{
-					if (Math.abs(zAxis[0]) < Math.abs(zAxis[2]))
-						tmp = [1, 0, 0];
-					else
-						tmp = [0, 0, 1];
-				}
-				else
-				{
-					if (Math.abs(zAxis[1]) < Math.abs(zAxis[2]))
-						tmp = [0, 1, 0];
-					else
-						tmp = [0, 0, 1];
-				}
-				//xAxis = tmp.cross(zAxis);
-				xAxis = vecUtils.vecCross(3, tmp, zAxis);
-				//yAxis = zAxis.cross(xAxis);
-				yAxis = vecUtils.vecCross(3, zAxis, xAxis);
-			}
-
-			// create the matrix
-			var mat = Matrix.create(
-				[
-					[xAxis[0], yAxis[0], zAxis[0], ptOnPlane[0]],
-					[xAxis[1], yAxis[1], zAxis[1], ptOnPlane[1]],
-					[xAxis[2], yAxis[2], zAxis[2], ptOnPlane[2]],
-					[0, 0, 0, 1]
-				]
-			);
-
-			return mat;
-		}
-	},
-
-	clearDefaultGridOffset : {
-		value: function() {
-			this.setDefaultGridOffset( [0,0,0] );
-		}
-	},
-
-	drawWorkingPlane:
-	{
-		value: function ()
-		{
+                    return;
+                }
+            }
+        }
+    },
+
+    clear : {
+        value: function() {
+            if (this._drawingContext)
+                this._drawingContext.clearRect( 0, 0, this._drawingSurfaceElt.width,  this._drawingSurfaceElt.height );
+        }
+    },
+
+    updatePlanes : {
+        value: function() {
+            var n = this._planesArray.length;
+
+            for (var i=0;  i<n;  i++)
+            {
+                var plane = this._planesArray[i];
+                plane.init();
+            }
+        }
+    },
+
+    getVisibilityAtPoint:
+    {
+        value: function( targetPt )
+        {
+            // duplicate the point and make sure it has the correct dimension (2)
+            var pt = targetPt.slice(0);
+            while (pt.length > 3)  pt.pop();
+
+            var z = pt[2];
+            var n = this._planesArray.length;
+            var vis = 0;
+            for (var i=0;  i<n;  i++)
+            {
+                var plane = this._planesArray[i];
+
+                // ignore if the point is in front of the polygon
+                if (z > plane.getZMax())  continue;
+
+                // test for containment in the polygon bounds
+                var contain = MathUtils.boundaryContainsPoint( plane.getBoundaryPoints(),  pt,  plane.isBackFacing() );
+                if (contain == MathUtils.OUTSIDE)  continue;
+                if (contain == MathUtils.ON)       continue;
+
+                // shoot a ray from the point in the +Z direction to get the z value of the plane
+                var vec = [0,0,1];
+                var planeEq = plane.getPlaneEq();
+                var ptOnPlane = MathUtils.vecIntersectPlane( pt, vec, planeEq );
+                if (ptOnPlane)
+                {
+                    // in keeping with the convention that a point "on" a face is outside the element,
+                    // check that case.
+                    //if (MathUtils.fpCmp(pt[2], ptOnPlane[2]) == 0)  continue;
+
+                    // if the point is behind the plane, increase the visibility
+                    if (MathUtils.fpCmp(pt[2],ptOnPlane[2]) <= 0)  vis++;
+                }
+            }
+
+            return vis;
+        }
+    },
+
+    moveTo : {
+        value: function( pt ) {
+            if (this._sourceSpaceElt)
+                pt = this.viewUtils.localToGlobal( pt, this._sourceSpaceElt );
+
+            this._curPt = pt.slice(0);
+            this._curVis = this.getVisibilityAtPoint( pt );
+        }
+    },
+
+    lineTo :
+    {
+        value: function( pt )
+        {
+            if (this._sourceSpaceElt)
+                pt = this.viewUtils.localToGlobal( pt, this._sourceSpaceElt );
+
+            var line = Object.create(StageLine, {});
+            line.setPoints( this._curPt, pt );
+            line.setVisibility( this._curVis );
+
+            // find all the plane intersections
+            this.getLineIntersections( line );
+
+            // draw the line
+            this._curVis = this.drawIntersectedLine( line, this._drawingContext );
+            this._curPt = pt.slice(0);
+        }
+    },
+
+
+    drawLine :
+    {
+        value: function( pt0, pt1 )
+        {
+            if (this._drawingContext)
+            {
+                // transform the points from local object space to world space
+                if (this._sourceSpaceElt)
+                {
+                    pt0 = this.viewUtils.localToGlobal( pt0, this._sourceSpaceElt );
+                    pt1 = this.viewUtils.localToGlobal( pt1, this._sourceSpaceElt );
+                }
+
+                // create the line structure
+                var line = Object.create(StageLine, {});
+                line.setPoints( pt0, pt1 );
+
+                // find all the plane intersections
+                this.getLineIntersections( line );
+
+                // get the starting visibility
+                var vis = this.getVisibilityAtPoint( pt0 );
+                line.setVisibility( vis );
+
+                // draw the line
+                this._curVis = this.drawIntersectedLine( line, this._drawingContext );
+            }
+        }
+    },
+
+    drawIntersectedLine :
+    {
+        value: function( line )
+        {
+            this._drawingContext.strokeStyle = this._lineColor;
+            this._drawingContext.beginPath();
+
+            //  get the 2 enpoints of the line
+            var pt0 = line.getPoint0(),
+                pt1 = line.getPoint1();
+
+            // find the visibility at the start point
+            var vis = line.getVisibility();
+            if (vis == 0)
+            {
+                this._drawingContext.strokeStyle = this._lineColor;
+                this._drawingContext.beginPath();
+                this._drawingContext.moveTo( pt0[0], pt0[1] );
+            }
+
+            // go through each intersection
+            var n = line.getIntersectionCount();
+            var t = 0.0;
+            var iRec = line.getIntersectionList();
+            for (var i=0;  i<n;  i++)
+            {
+                var tNext = iRec.getT();
+                var dv = iRec.getDeltaVis();
+
+                var tPt = MathUtils.interpolateLine3D( pt0, pt1, tNext );
+
+                if (vis == 0)
+                {
+                    this._drawingContext.lineTo( tPt[0], tPt[1] );
+                    this._drawingContext.closePath();
+                    this._drawingContext.stroke();
+                }
+                else
+                {
+                    this._drawingContext.beginPath();
+                    this._drawingContext.moveTo( tPt[0], tPt[1] );
+                }
+
+                vis += dv;
+                iRec = iRec.getNext();
+            }
+
+            // handle the end of the line
+            if (vis == 0)
+            {
+                this._drawingContext.lineTo( pt1[0], pt1[1] );
+
+                // draw the line
+                this._drawingContext.closePath();
+                this._drawingContext.stroke();
+            }
+
+            return vis;
+        }
+    },
+
+    getLineIntersections:
+    {
+        value: function( line )
+        {
+            // clip the line against all polygons in the scene
+            var n = this._planesArray.length;
+            for (var i=0;  i<n;  i++)
+            {
+                var plane = this._planesArray[i];
+                line.intersectWithPlane( plane );
+            }
+        }
+    },
+
+    getPlaneToWorldMatrix:
+    {
+        value: function (normal, ptOnPlane)
+        {
+            // 3 coordinate axes for the plane
+            var zAxis = normal.slice(0);
+            MathUtils.makeDimension3(zAxis);
+            zAxis = vecUtils.vecNormalize(3, zAxis);
+
+            // special case the coordinate axes followed by general case
+            var tmp;
+            var xAxis, yAxis;
+            if (MathUtils.fpCmp(Math.abs(zAxis[0]), 1.0) == 0) {
+                yAxis = [0, 1, 0];
+                xAxis = vecUtils.vecCross(3, yAxis, zAxis);
+            }
+            else if (MathUtils.fpCmp(Math.abs(zAxis[1]), 1.0) == 0) {
+                yAxis = [0, 0, 1];
+                //xAxis = yAxis.cross(zAxis);
+                xAxis = vecUtils.vecCross(3, yAxis, zAxis );
+            }
+            else if (MathUtils.fpCmp(Math.abs(zAxis[2]), 1.0) == 0) {
+                yAxis = [0, 1, 0];
+                //xAxis = yAxis.cross(zAxis);
+                xAxis = vecUtils.vecCross(3, yAxis, zAxis );
+            }
+            else
+            {
+                if (Math.abs(zAxis[0]) < Math.abs(zAxis[1]))
+                {
+                    if (Math.abs(zAxis[0]) < Math.abs(zAxis[2]))
+                        tmp = [1, 0, 0];
+                    else
+                        tmp = [0, 0, 1];
+                }
+                else
+                {
+                    if (Math.abs(zAxis[1]) < Math.abs(zAxis[2]))
+                        tmp = [0, 1, 0];
+                    else
+                        tmp = [0, 0, 1];
+                }
+                //xAxis = tmp.cross(zAxis);
+                xAxis = vecUtils.vecCross(3, tmp, zAxis);
+                //yAxis = zAxis.cross(xAxis);
+                yAxis = vecUtils.vecCross(3, zAxis, xAxis);
+            }
+
+            // create the matrix
+            var mat = Matrix.create(
+                [
+                    [xAxis[0], yAxis[0], zAxis[0], ptOnPlane[0]],
+                    [xAxis[1], yAxis[1], zAxis[1], ptOnPlane[1]],
+                    [xAxis[2], yAxis[2], zAxis[2], ptOnPlane[2]],
+                    [0, 0, 0, 1]
+                ]
+            );
+
+            return mat;
+        }
+    },
+
+    clearDefaultGridOffset : {
+        value: function() {
+            this.setDefaultGridOffset( [0,0,0] );
+        }
+    },
+
+    drawWorkingPlane:
+    {
+        value: function ()
+        {
             this.application.ninja.stage.clearGridCanvas();
             this.drawStageOutline();
-			if (!this.isDrawingGrid()) return;
+            if (!this.isDrawingGrid()) return;
 
-			var saveContext = this.getDrawingSurfaceElement();
-			this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas);
+            var saveContext = this.getDrawingSurfaceElement();
+            this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas);
 
-			// 3 coordinate axes for the plane
-			var zAxis = [this._workingPlane[0], this._workingPlane[1], this._workingPlane[2]];
+            // 3 coordinate axes for the plane
+            var zAxis = [this._workingPlane[0], this._workingPlane[1], this._workingPlane[2]];
 
-			// get a point that lies on the plane
-			var ptOnPlane = MathUtils.getPointOnPlane(this._workingPlane);
+            // get a point that lies on the plane
+            var ptOnPlane = MathUtils.getPointOnPlane(this._workingPlane);
 
             // define the grid parameters
             var width = this.snapManager.getStageWidth(),
                 height = this.snapManager.getStageHeight(),
                 nLines = 10;
 
-			// get a matrix from working plane space to the world
-			var mat = this.getPlaneToWorldMatrix(zAxis, ptOnPlane);
-			var tMat = Matrix.Translation( [0.5*width, 0.5*height, 0] );
-			//mat = tMat.multiply(mat);
-			glmat4.multiply( tMat, mat, mat);
-
-			// the positioning of the grid may depend on the view direction.
-			var stage = this.snapManager.getStage();
-			var viewMat = this.viewUtils.getMatrixFromElement(stage);
-			var viewDir = [viewMat[8], viewMat[9], viewMat[10]];
+            // get a matrix from working plane space to the world
+            var mat = this.getPlaneToWorldMatrix(zAxis, ptOnPlane);
+            var tMat = Matrix.Translation( [0.5*width, 0.5*height, 0] );
+            //mat = tMat.multiply(mat);
+            glmat4.multiply( tMat, mat, mat);
 
-			var dx, dy, delta, pt0, pt1;
-			dx = this._gridVerticalSpacing;
-			dy = this._gridHorizontalSpacing;
-			nLines = Math.floor(width / dx) + 1;
-			if (MathUtils.fpCmp(dx*nLines,width) == 0)  nLines--;
+            // the positioning of the grid may depend on the view direction.
+            var stage = this.snapManager.getStage();
+            var viewMat = this.viewUtils.getMatrixFromElement(stage);
+            var viewDir = [viewMat[8], viewMat[9], viewMat[10]];
 
-			var saveColor = this._lineColor;
-			var saveLineWidth = this._drawingContext.lineWidth;
+            var dx, dy, delta, pt0, pt1;
+            dx = this._gridVerticalSpacing;
+            dy = this._gridHorizontalSpacing;
+            nLines = Math.floor(width / dx) + 1;
+            if (MathUtils.fpCmp(dx*nLines,width) == 0)  nLines--;
 
-			// reset the line cache
-			this._gridLineArray = new Array();
+            var saveColor = this._lineColor;
+            var saveLineWidth = this._drawingContext.lineWidth;
 
-			if (this.drawXY) this._lineColor = "red";
-			if (this.drawYZ) this._lineColor = "green";
-			if (this.drawXZ) this._lineColor = "blue";
-			this._drawingContext.lineWidth = 0.25;
+            // reset the line cache
+            this._gridLineArray = new Array();
 
-			// get the two endpoints of the first line with constant X
-			pt0 = [-width / 2.0, height / 2.0, 0];
-			pt1 = [-width / 2.0, -height / 2.0, 0];
-			delta = [dx, 0, 0];
+            if (this.drawXY) this._lineColor = "red";
+            if (this.drawYZ) this._lineColor = "green";
+            if (this.drawXZ) this._lineColor = "blue";
+            this._drawingContext.lineWidth = 0.25;
 
-			this._gridVerticalLineCount = nLines;
-			this._gridOrigin = pt1.slice(0);
+            // get the two endpoints of the first line with constant X
+            pt0 = [-width / 2.0, height / 2.0, 0];
+            pt1 = [-width / 2.0, -height / 2.0, 0];
+            delta = [dx, 0, 0];
 
-			// draw the lines with constant X
-			this.drawGridLines(pt0, pt1, delta, mat, nLines);
+            this._gridVerticalLineCount = nLines;
+            this._gridOrigin = pt1.slice(0);
 
-			// get the two endpoints of the first line with constant Y
-			pt0 = [-width / 2.0, -height / 2.0, 0];
-			pt1 = [width / 2.0, -height / 2.0, 0];
+            // draw the lines with constant X
+            this.drawGridLines(pt0, pt1, delta, mat, nLines);
 
-			delta = [0, dy, 0];
-			nLines = Math.floor(height / dy) + 1;
-			if (MathUtils.fpCmp(dy*nLines,height) == 0)  nLines--;
+            // get the two endpoints of the first line with constant Y
+            pt0 = [-width / 2.0, -height / 2.0, 0];
+            pt1 = [width / 2.0, -height / 2.0, 0];
 
-			this._gridHorizontalLineCount = nLines;
+            delta = [0, dy, 0];
+            nLines = Math.floor(height / dy) + 1;
+            if (MathUtils.fpCmp(dy*nLines,height) == 0)  nLines--;
 
-			// draw the lines with constant Y
-			this.drawGridLines(pt0, pt1, delta, mat, nLines);
+            this._gridHorizontalLineCount = nLines;
 
-			this._lineColor = saveColor;
-			this._drawingContext.lineWidth = saveLineWidth;
+            // draw the lines with constant Y
+            this.drawGridLines(pt0, pt1, delta, mat, nLines);
 
-			// draw the lines
-			this.redrawGridLines();
+            this._lineColor = saveColor;
+            this._drawingContext.lineWidth = saveLineWidth;
 
-			this.setDrawingSurfaceElement(saveContext);
-		}
-	},
+            // draw the lines
+            this.redrawGridLines();
 
-	drawGridLines : {
-		value: function (pt0, pt1, delta, mat, nLines) {
-			// get the drawing context
-			if (this._drawingContext) {
-				var p0 = pt0.slice(0), p1 = pt1.slice(0); // duplicate so we don't change the input.
-				p0[3] = 1; p1[3] = 1;
-				var d = delta.slice(0); d[3] = 1;
+            this.setDrawingSurfaceElement(saveContext);
+        }
+    },
 
-				//var lineArray = new Array;
-				var offset = this.viewUtils.getElementOffset(this._sourceSpaceElt);
-				offset[2] = 0;
-				this.viewUtils.setViewportObj(this._sourceSpaceElt);
+    drawGridLines : {
+        value: function (pt0, pt1, delta, mat, nLines) {
+            // get the drawing context
+            if (this._drawingContext) {
+                var p0 = pt0.slice(0), p1 = pt1.slice(0); // duplicate so we don't change the input.
+                p0[3] = 1; p1[3] = 1;
+                var d = delta.slice(0); d[3] = 1;
+
+                //var lineArray = new Array;
+                var offset = this.viewUtils.getElementOffset(this._sourceSpaceElt);
+                offset[2] = 0;
+                this.viewUtils.setViewportObj(this._sourceSpaceElt);
                 var sourceSpaceMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt );
-				for (var i = 0; i < nLines; i++) {
-					// transform the points from working plane space to world space
-					var t0 = glmat4.multiplyVec3( mat, p0, [] ),
-						t1 = glmat4.multiplyVec3( mat, p1, [] );
-
-					// transform from world space to global screen space
-					if (this._sourceSpaceElt) {
-						t0 = this.viewUtils.localToGlobal2(t0, sourceSpaceMat);
-						t1 = this.viewUtils.localToGlobal2(t1, sourceSpaceMat);
-					}
-
-					// create a line from the endpoints
-					var line = Object.create(StageLine, {});
-					line.setPoints(t0, t1);
-					this._gridLineArray.push(line);
-
-					// find all the intersections
-					this.getLineIntersections(line);
-
-					// get the visibility at the start point
-					var vis = this.getVisibilityAtPoint(line.getPoint0());
-					line.setVisibility(vis);
-
-					// increment the points to the next position
-					p0 = vecUtils.vecAdd(4, p0, d); p0[3] = 1.0;
-					p1 = vecUtils.vecAdd(4, p1, d); p1[3] = 1.0;
-				}
-			}
-		}
-	},
-
-	refreshDisplay : {
-		value: function() {
-			this.redrawGridLines();
-			this.snapManager.drawLastHit();
-		}
-	},
-
-	pushState : {
-		value: function() {
-			var obj = new Object();
-			obj._lineColor = this._lineColor;
-			obj._lineWidth = this._drawingContext.lineWidth;
-
-			this._stateArray.push( obj );
-		}
-	},
-
-	popState  : {
-		value: function() {
-			if (this._stateArray.length <= 0)
-			{
-				throw new Error( "state stack underflow" );
-				return;
-			}
-
-			var obj = this._stateArray.pop();
-			this._lineColor = obj._lineColor;
-			this._drawingContext.lineWidth = obj._lineWidth;
-		}
-	},
-
-
-	redrawGridLines : {
-		value: function() {
-			if (!this.isDrawingGrid()) return;
-
-			this.pushState();
-
-			if (this.drawXY) this._lineColor = "red";
-			if (this.drawYZ) this._lineColor = "green";
-			if (this.drawXZ) this._lineColor = "blue";
-			this._drawingContext.lineWidth = 0.25;
-
-			// draw the lines
+                for (var i = 0; i < nLines; i++) {
+                    // transform the points from working plane space to world space
+                    var t0 = glmat4.multiplyVec3( mat, p0, [] ),
+                        t1 = glmat4.multiplyVec3( mat, p1, [] );
+
+                    // transform from world space to global screen space
+                    if (this._sourceSpaceElt) {
+                        t0 = this.viewUtils.localToGlobal2(t0, sourceSpaceMat);
+                        t1 = this.viewUtils.localToGlobal2(t1, sourceSpaceMat);
+                    }
+
+                    // create a line from the endpoints
+                    var line = Object.create(StageLine, {});
+                    line.setPoints(t0, t1);
+                    this._gridLineArray.push(line);
+
+                    // find all the intersections
+                    this.getLineIntersections(line);
+
+                    // get the visibility at the start point
+                    var vis = this.getVisibilityAtPoint(line.getPoint0());
+                    line.setVisibility(vis);
+
+                    // increment the points to the next position
+                    p0 = vecUtils.vecAdd(4, p0, d); p0[3] = 1.0;
+                    p1 = vecUtils.vecAdd(4, p1, d); p1[3] = 1.0;
+                }
+            }
+        }
+    },
+
+    refreshDisplay : {
+        value: function() {
+            this.redrawGridLines();
+            this.snapManager.drawLastHit();
+        }
+    },
+
+    pushState : {
+        value: function() {
+            var obj = new Object();
+            obj._lineColor = this._lineColor;
+            obj._lineWidth = this._drawingContext.lineWidth;
+
+            this._stateArray.push( obj );
+        }
+    },
+
+    popState  : {
+        value: function() {
+            if (this._stateArray.length <= 0)
+            {
+                throw new Error( "state stack underflow" );
+                return;
+            }
+
+            var obj = this._stateArray.pop();
+            this._lineColor = obj._lineColor;
+            this._drawingContext.lineWidth = obj._lineWidth;
+        }
+    },
+
+
+    redrawGridLines : {
+        value: function() {
+            if (!this.isDrawingGrid()) return;
+
+            this.pushState();
+
+            if (this.drawXY) this._lineColor = "red";
+            if (this.drawYZ) this._lineColor = "green";
+            if (this.drawXZ) this._lineColor = "blue";
+            this._drawingContext.lineWidth = 0.25;
+
+            // draw the lines
             var line,
-			    nLines = this._gridLineArray.length;
+                nLines = this._gridLineArray.length;
 
-			for (var i = 0; i < nLines; i++) {
-				line = this._gridLineArray[i];
-				this.drawIntersectedLine(line, this._drawingContext);
-			}
+            for (var i = 0; i < nLines; i++) {
+                line = this._gridLineArray[i];
+                this.drawIntersectedLine(line, this._drawingContext);
+            }
 
-			this.popState();
-		}
-	},
+            this.popState();
+        }
+    },
 
-	drawSelectionBounds : {
-		value: function( eltArray ) {
-			this._selectionCtr = null;
+    drawSelectionBounds : {
+        value: function( eltArray ) {
+            this._selectionCtr = null;
             var len = eltArray.length,
                 i,
                 j,
@@ -869,364 +869,364 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                 tmpPt,
                 ssMat,
                 elt;
-			
-			if (len === 0)  return;
-			var context = this._drawingContext;
-			if (!context)  return;
+            
+            if (len === 0)  return;
+            var context = this._drawingContext;
+            if (!context)  return;
 
             // TODO - Get values from app settings
-			context.strokeStyle = "#46a1ff";
-			context.lineWidth = 2;
+            context.strokeStyle = "#46a1ff";
+            context.lineWidth = 2;
 
-			// handle the single element case
+            // handle the single element case
             // TODO - Currently, the stage draws its own selection bounds for single selection case
-			if (len === 1)
-			{
-				// single selection case
-				//console.log( "single selection" );
-
-				elt = eltArray[0];
-
-				this.viewUtils.pushViewportObj( elt );
-
-				// get the element bounds in world space
-				bounds3D = this.viewUtils.getElementViewBounds3D( elt );
-				for (j=0;  j<4;  j++) {
-					bounds3D[j] = this.viewUtils.localToGlobal( bounds3D[j],  elt );
-				}
-
-				// draw it
-				context.beginPath();
-				//VV
-				context.strokeStyle = "#46a1ff";
-				context.lineWidth = 2.0;
-
-				context.moveTo( bounds3D[3][0] ,  bounds3D[3][1] );
-				for (var v=0;  v<4;  v++) {
-					context.lineTo( bounds3D[v][0] ,  bounds3D[v][1] );
-				}
-				context.closePath();
-				context.stroke();
-
-				this._selectionCtr = MathUtils.getCenterFromBounds(3, bounds3D);
-//				console.log("selection center, single elt case - ", this._selectionCtr);
-				
-				this.viewUtils.popViewportObj();
-			}
-			else
-			{
-				// get the plane from the first element to compare against the other elements
-				var dot;
-				var flat = true;
-				var plane = this.viewUtils.getUnprojectedElementPlane( eltArray[0] );
-				for (i=1;  i<len;  i++)
-				{
-					elt = eltArray[i];
-					var plane2 = this.viewUtils.getUnprojectedElementPlane( elt );
-					dot = Math.abs( MathUtils.dot3(plane,plane2) );
-					if (MathUtils.fpCmp(dot, 1) != 0)
-					{
-						flat = false;
-						break;
-					}
-
-					// check the offset
-					var d = plane[3],  d2 = plane2[3];
-					if (MathUtils.fpCmp(d,d2) != 0)
-					{
-						flat = false;
-						break;
-					}
-				}
-
-				// if all of the planes are aligned, check if they are aligned with the view direction
-				if (flat)
-				{
-					var stage = this.application.ninja.currentDocument.model.documentRoot;
-					var stageMat = this.viewUtils.getMatrixFromElement(stage);
-					var viewDir = [ stageMat[8], stageMat[9], stageMat[10] ];
-					viewDir = vecUtils.vecNormalize( 3, viewDir );
-					dot = Math.abs( MathUtils.dot3(plane,viewDir) );
-					if (MathUtils.fpCmp(dot, 1) != 0)
-						flat = false;
-				}
-//				console.log( "drawSelectionBounds, flat: " + flat );
-
-				// if all the elements share the same plane, draw the 2D rectangle
-				if (flat)
-				{
-					// make a 2D rectangle on the plane
-					var rect;
-					for (i=0;  i<len;  i++)
-					{
-						elt = eltArray[i];
-
-						// get the element bounds in 'plane' space
-						bounds = this.viewUtils.getElementViewBounds3D( elt );
-						ssMat = this.viewUtils.getLocalToGlobalMatrix( elt );
-						for (j=0;  j<4;  j++)
-						{
-							var localPt = bounds[j];
-							tmpPt = this.viewUtils.localToGlobal2(localPt, ssMat);
-							pt = tmpPt;
-
-							if (!rect)
-							{
-								rect = Object.create(Rectangle, {});
-								rect.setToPoint( pt )
-							}
-							else
-							{
-								rect.unionPoint( pt );
-							}
-						}
-					}
-
-					// draw the rectangle
-					context.beginPath();
-
-					pt = MathUtils.makeDimension3(rect.getPoint(3));
-
-					bounds3D = [[0,0], [0,0], [0,0], [0,0]];
-					this._selectionCtr = pt.slice(0);
-
-					context.moveTo( pt[0],  pt[1] );
-					for (i=0;  i<4;  i++)
-					{
-						pt = rect.getPoint(i);
-						context.lineTo( pt[0],  pt[1] );
-						bounds3D[i] = pt.slice(0);
-					}
-					context.closePath();
-					context.stroke();
-
-					var dir = vecUtils.vecSubtract(2, bounds3D[1], bounds3D[3]);
-					var ctr = vecUtils.vecNormalize(2, dir, vecUtils.vecDist(2, bounds3D[1], bounds3D[3])/2);
-
-					this._selectionCtr[0] += ctr[0] - this.application.ninja.stage.userContentLeft;
-					this._selectionCtr[1] += ctr[1] - this.application.ninja.stage.userContentTop;
-				}
-				else
-				{
-					var minPt,  maxPt;
-
-					// we set the root to "the world".
-					var saveRoot = this.viewUtils.getRootElement();
-					this.viewUtils.setRootElement( this.viewUtils.getStageElement() );
-					ssMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt );
-
-					for (i=0;  i<len;  i++)
-					{
-						elt = eltArray[i];
-						bounds = this.viewUtils.getElementViewBounds3D( elt );
-						var eltMat = this.viewUtils.getLocalToGlobalMatrix( elt );
-						for (j=0;  j<4;  j++)
-						{
-							pt = this.viewUtils.localToGlobal2( bounds[j],  eltMat );
-							var tmpPt = this.viewUtils.localToStageWorld(bounds[j], elt);
-							tmpPt = this.viewUtils.screenToView( tmpPt[0], tmpPt[1], tmpPt[2] );
-							if (!minPt)
-							{
-								minPt = pt.slice(0);
-								maxPt = pt.slice(0);
-							}
-							else
-							{
-								var x = pt[0],  y = pt[1], z = pt[2];
-
-								if (x < minPt[0])    minPt[0] = x;
-								if (x > maxPt[0])    maxPt[0] = x;
-
-								if (y < minPt[1])    minPt[1] = y;
-								if (y > maxPt[1])    maxPt[1] = y;
-
-								if (z < minPt[2])    minPt[2] = z;
-								if (z > maxPt[2])    maxPt[2] = z;
-							}
-						}
-					}
-
-					// restore the root ID
-					this.viewUtils.setRootElement (saveRoot );
-
-					context.beginPath();
-
-					var x0 = minPt[0],  y0 = minPt[1],  z0 = minPt[2],
-						x1 = maxPt[0],  y1 = maxPt[1],  z1 = maxPt[2];
-
-					this._selectionCtr = [x0, y0, z0];
-					this._selectionCtr[0] += (x1-x0)/2;
-					this._selectionCtr[1] += (y1-y0)/2;
-					this._selectionCtr[2] += (z1-z0)/2;
-
-					// get the 8 corners of the parallelpiped in world space
-					var wc = new Array();   // wc == world cube
-					wc.push(  this.viewUtils.localToGlobal2( [x0,y0,z1], ssMat ) );
-					wc.push(  this.viewUtils.localToGlobal2( [x0,y1,z1], ssMat ) );
-					wc.push(  this.viewUtils.localToGlobal2( [x1,y1,z1], ssMat ) );
-					wc.push(  this.viewUtils.localToGlobal2( [x1,y0,z1], ssMat ) );
-					wc.push(  this.viewUtils.localToGlobal2( [x0,y0,z0], ssMat ) );
-					wc.push(  this.viewUtils.localToGlobal2( [x0,y1,z0], ssMat ) );
-					wc.push(  this.viewUtils.localToGlobal2( [x1,y1,z0], ssMat ) );
-					wc.push(  this.viewUtils.localToGlobal2( [x1,y0,z0], ssMat ) );
-
-					// determine the signs of the normals of the faces relative to the view direction.
-					var front	= -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[2],wc[1]), vecUtils.vecSubtract(3,wc[0],wc[1]))[2] ),
-						right   = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[6],wc[2]), vecUtils.vecSubtract(3,wc[3],wc[2]))[2] ),
-						back    = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[5],wc[6]), vecUtils.vecSubtract(3,wc[7],wc[6]))[2] ),
-						left    = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[1],wc[5]), vecUtils.vecSubtract(3,wc[4],wc[5]))[2] ),
-						top     = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[3],wc[0]), vecUtils.vecSubtract(3,wc[4],wc[0]))[2] ),
-						bottom  = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[5],wc[1]), vecUtils.vecSubtract(3,wc[2],wc[1]))[2] );
-
-					// draw the side faces
-					var p;
-
-					//context.strokeStyle = ((front > 0) || (right > 0)) ? dark : light;  context.beginPath();
-					if ((front > 0) || (right > 0)) {
-						context.beginPath();
-						p = this.viewUtils.localToGlobal2( [x1, y0, z1], ssMat );  context.moveTo( p[0], p[1] );
-						p = this.viewUtils.localToGlobal2( [x1, y1, z1], ssMat );  context.lineTo( p[0], p[1] );
-						context.closePath();  context.stroke();
-					}
-
-					//context.strokeStyle = ((right > 0) || (back > 0)) ? dark : light;  context.beginPath();
-					if ((right > 0) || (back > 0)) {
-						context.beginPath();
-						p = this.viewUtils.localToGlobal2( [x1, y0, z0], ssMat );  context.moveTo( p[0], p[1] );
-						p = this.viewUtils.localToGlobal2( [x1, y1, z0], ssMat );  context.lineTo( p[0], p[1] );
-						context.closePath();  context.stroke();
-					}
-
-					//context.strokeStyle = ((back > 0) || (left > 0)) ? dark : light;  context.beginPath();
-					if ((back > 0) || (left > 0)) {
-						context.beginPath();
-						p = this.viewUtils.localToGlobal2( [x0, y0, z0], ssMat );  context.moveTo( p[0], p[1] );
-						p = this.viewUtils.localToGlobal2( [x0, y1, z0], ssMat );  context.lineTo( p[0], p[1] );
-						context.closePath();  context.stroke();
-					}
-
-					//context.strokeStyle = ((left > 0) || (front > 0)) ? dark : light;  context.beginPath();
-					if ((left > 0) || (front > 0)) {
-						context.beginPath();
-						p = this.viewUtils.localToGlobal2( [x0, y0, z1], ssMat );  context.moveTo( p[0], p[1] );
-						p = this.viewUtils.localToGlobal2( [x0, y1, z1], ssMat );  context.lineTo( p[0], p[1] );
-						context.closePath();  context.stroke();
-					}
-
-					// draw the top and bottom faces
-					//context.strokeStyle = ((front > 0) || (top > 0)) ? dark : light;  context.beginPath();
-					if ((front > 0) || (top > 0)) {
-						context.beginPath();
-						p = this.viewUtils.localToGlobal2( [x0, y0, z1], ssMat );  context.moveTo( p[0], p[1] );
-						p = this.viewUtils.localToGlobal2( [x1, y0, z1], ssMat );  context.lineTo( p[0], p[1] );
-						context.closePath();  context.stroke();
-					}
-
-					//context.strokeStyle = ((top > 0) || (back > 0)) ? dark : light;  context.beginPath();
-					if ((top > 0) || (back > 0)) {
-						context.beginPath();
-						p = this.viewUtils.localToGlobal2( [x0, y0, z0], ssMat );  context.moveTo( p[0], p[1] );
-						p = this.viewUtils.localToGlobal2( [x1, y0, z0], ssMat );  context.lineTo( p[0], p[1] );
-						context.closePath();  context.stroke();
-					}
-
-					//context.strokeStyle = ((back > 0) || (bottom > 0)) ? dark : light;  context.beginPath();
-					if ((back > 0) || (bottom > 0)) {
-						context.beginPath();
-						p = this.viewUtils.localToGlobal2( [x0, y1, z0], ssMat );  context.moveTo( p[0], p[1] );
-						p = this.viewUtils.localToGlobal2( [x1, y1, z0], ssMat );  context.lineTo( p[0], p[1] );
-						context.closePath();  context.stroke();
-					}
-
-					//context.strokeStyle = ((bottom > 0) || (front > 0)) ? dark : light;  context.beginPath();
-					if ((bottom > 0) || (front > 0)) {
-						context.beginPath();
-						p = this.viewUtils.localToGlobal2( [x0, y1, z1], ssMat );  context.moveTo( p[0], p[1] );
-						p = this.viewUtils.localToGlobal2( [x1, y1, z1], ssMat );  context.lineTo( p[0], p[1] );
-						context.closePath();  context.stroke();
-					}
-
-					// and the remaining lines - varying Z
-					if ((top > 0) || (right > 0)) {
-						context.beginPath();
-						p = this.viewUtils.localToGlobal2( [x1, y0, z0], ssMat );  context.moveTo( p[0], p[1] );
-						p = this.viewUtils.localToGlobal2( [x1, y0, z1], ssMat );  context.lineTo( p[0], p[1] );
-						context.closePath();  context.stroke();
-					}
-
-					//context.strokeStyle = ((right > 0) || (bottom > 0)) ? dark : light;  context.beginPath();
-					if ((right > 0) || (bottom > 0)) {
-						context.beginPath();
-						p = this.viewUtils.localToGlobal2( [x1, y1, z0], ssMat );  context.moveTo( p[0], p[1] );
-						p = this.viewUtils.localToGlobal2( [x1, y1, z1], ssMat );  context.lineTo( p[0], p[1] );
-						context.closePath();  context.stroke();
-					}
-
-					//context.strokeStyle = ((bottom > 0) || (left > 0)) ? dark : light;  context.beginPath();
-					if ((bottom > 0) || (left > 0)) {
-						context.beginPath();
-						p = this.viewUtils.localToGlobal2( [x0, y1, z0], ssMat );  context.moveTo( p[0], p[1] );
-						p = this.viewUtils.localToGlobal2( [x0, y1, z1], ssMat );  context.lineTo( p[0], p[1] );
-						context.closePath();  context.stroke();
-					}
-
-					//context.strokeStyle = ((left > 0) || (top > 0)) ? dark : light;  context.beginPath();
-					if ((left > 0) || (top > 0)) {
-						context.beginPath();
-						p = this.viewUtils.localToGlobal2( [x0, y0, z0], ssMat );  context.moveTo( p[0], p[1] );
-						p = this.viewUtils.localToGlobal2( [x0, y0, z1], ssMat );  context.lineTo( p[0], p[1] );
-						context.closePath();  context.stroke();
-					}
-				}
-			}
-		}
-	},
-
-
-	drawElementNormal:
-	{
-		value: function( elt )
-		{
-			if (!this.isDrawingElementNormal()) return;
-
-			// set the element to be the viewport object - temporarily
-			this.viewUtils.pushViewportObj( elt );
-
-			// save the source space object and set to the target object
-			var saveSource = this._sourceSpaceElt;
-			this._sourceSpaceElt = elt;
-
-			// temporarily set the line color
-			var saveColor = this._lineColor;
-			this._lineColor = "blue";
-
-			var base = this.viewUtils.getCenterOfProjection();
-			base[2] = 1;   // Z - make it just off the plane to avoid numerical issues
-			var zAxis = base.slice(0);
-			zAxis[2] += 50;
-			this.moveTo( base );
-			this.lineTo( zAxis );
-
-			// draw the arrowhead
-			var headWidth = 6;
-			var head = MathUtils.interpolateLine3D( base, zAxis, 0.7 );
-			var p0 = head.slice(0);  p0[1] += headWidth;  this.drawLine( zAxis, p0 );
-			var p1 = head.slice(0);  p1[0] += headWidth;  this.drawLine( zAxis, p1 );
-			var p2 = head.slice(0);  p2[1] -= headWidth;  this.drawLine( zAxis, p2 );
-			var p3 = head.slice(0);  p3[0] -= headWidth;  this.drawLine( zAxis, p3 );
-
-			this.moveTo( p0 );
-			this.lineTo( p1 );
-			this.lineTo( p2 );
-			this.lineTo( p3 );
-			this.lineTo( p0 );
-
-			// restore the state
-			this.viewUtils.popViewportObj();
-			this._lineColor = saveColor;
-			this._sourceSpaceElt = saveSource;
-		}
-	},
+            if (len === 1)
+            {
+                // single selection case
+                //console.log( "single selection" );
+
+                elt = eltArray[0];
+
+                this.viewUtils.pushViewportObj( elt );
+
+                // get the element bounds in world space
+                bounds3D = this.viewUtils.getElementViewBounds3D( elt );
+                for (j=0;  j<4;  j++) {
+                    bounds3D[j] = this.viewUtils.localToGlobal( bounds3D[j],  elt );
+                }
+
+                // draw it
+                context.beginPath();
+                //VV
+                context.strokeStyle = "#46a1ff";
+                context.lineWidth = 2.0;
+
+                context.moveTo( bounds3D[3][0] ,  bounds3D[3][1] );
+                for (var v=0;  v<4;  v++) {
+                    context.lineTo( bounds3D[v][0] ,  bounds3D[v][1] );
+                }
+                context.closePath();
+                context.stroke();
+
+                this._selectionCtr = MathUtils.getCenterFromBounds(3, bounds3D);
+//              console.log("selection center, single elt case - ", this._selectionCtr);
+                
+                this.viewUtils.popViewportObj();
+            }
+            else
+            {
+                // get the plane from the first element to compare against the other elements
+                var dot;
+                var flat = true;
+                var plane = this.viewUtils.getUnprojectedElementPlane( eltArray[0] );
+                for (i=1;  i<len;  i++)
+                {
+                    elt = eltArray[i];
+                    var plane2 = this.viewUtils.getUnprojectedElementPlane( elt );
+                    dot = Math.abs( MathUtils.dot3(plane,plane2) );
+                    if (MathUtils.fpCmp(dot, 1) != 0)
+                    {
+                        flat = false;
+                        break;
+                    }
+
+                    // check the offset
+                    var d = plane[3],  d2 = plane2[3];
+                    if (MathUtils.fpCmp(d,d2) != 0)
+                    {
+                        flat = false;
+                        break;
+                    }
+                }
+
+                // if all of the planes are aligned, check if they are aligned with the view direction
+                if (flat)
+                {
+                    var stage = this.application.ninja.currentDocument.model.documentRoot;
+                    var stageMat = this.viewUtils.getMatrixFromElement(stage);
+                    var viewDir = [ stageMat[8], stageMat[9], stageMat[10] ];
+                    viewDir = vecUtils.vecNormalize( 3, viewDir );
+                    dot = Math.abs( MathUtils.dot3(plane,viewDir) );
+                    if (MathUtils.fpCmp(dot, 1) != 0)
+                        flat = false;
+                }
+//              console.log( "drawSelectionBounds, flat: " + flat );
+
+                // if all the elements share the same plane, draw the 2D rectangle
+                if (flat)
+                {
+                    // make a 2D rectangle on the plane
+                    var rect;
+                    for (i=0;  i<len;  i++)
+                    {
+                        elt = eltArray[i];
+
+                        // get the element bounds in 'plane' space
+                        bounds = this.viewUtils.getElementViewBounds3D( elt );
+                        ssMat = this.viewUtils.getLocalToGlobalMatrix( elt );
+                        for (j=0;  j<4;  j++)
+                        {
+                            var localPt = bounds[j];
+                            tmpPt = this.viewUtils.localToGlobal2(localPt, ssMat);
+                            pt = tmpPt;
+
+                            if (!rect)
+                            {
+                                rect = Object.create(Rectangle, {});
+                                rect.setToPoint( pt )
+                            }
+                            else
+                            {
+                                rect.unionPoint( pt );
+                            }
+                        }
+                    }
+
+                    // draw the rectangle
+                    context.beginPath();
+
+                    pt = MathUtils.makeDimension3(rect.getPoint(3));
+
+                    bounds3D = [[0,0], [0,0], [0,0], [0,0]];
+                    this._selectionCtr = pt.slice(0);
+
+                    context.moveTo( pt[0],  pt[1] );
+                    for (i=0;  i<4;  i++)
+                    {
+                        pt = rect.getPoint(i);
+                        context.lineTo( pt[0],  pt[1] );
+                        bounds3D[i] = pt.slice(0);
+                    }
+                    context.closePath();
+                    context.stroke();
+
+                    var dir = vecUtils.vecSubtract(2, bounds3D[1], bounds3D[3]);
+                    var ctr = vecUtils.vecNormalize(2, dir, vecUtils.vecDist(2, bounds3D[1], bounds3D[3])/2);
+
+                    this._selectionCtr[0] += ctr[0] - this.application.ninja.stage.userContentLeft;
+                    this._selectionCtr[1] += ctr[1] - this.application.ninja.stage.userContentTop;
+                }
+                else
+                {
+                    var minPt,  maxPt;
+
+                    // we set the root to "the world".
+                    var saveRoot = this.viewUtils.getRootElement();
+                    this.viewUtils.setRootElement( this.viewUtils.getStageElement() );
+                    ssMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt );
+
+                    for (i=0;  i<len;  i++)
+                    {
+                        elt = eltArray[i];
+                        bounds = this.viewUtils.getElementViewBounds3D( elt );
+                        var eltMat = this.viewUtils.getLocalToGlobalMatrix( elt );
+                        for (j=0;  j<4;  j++)
+                        {
+                            pt = this.viewUtils.localToGlobal2( bounds[j],  eltMat );
+                            var tmpPt = this.viewUtils.localToStageWorld(bounds[j], elt);
+                            tmpPt = this.viewUtils.screenToView( tmpPt[0], tmpPt[1], tmpPt[2] );
+                            if (!minPt)
+                            {
+                                minPt = pt.slice(0);
+                                maxPt = pt.slice(0);
+                            }
+                            else
+                            {
+                                var x = pt[0],  y = pt[1], z = pt[2];
+
+                                if (x < minPt[0])    minPt[0] = x;
+                                if (x > maxPt[0])    maxPt[0] = x;
+
+                                if (y < minPt[1])    minPt[1] = y;
+                                if (y > maxPt[1])    maxPt[1] = y;
+
+                                if (z < minPt[2])    minPt[2] = z;
+                                if (z > maxPt[2])    maxPt[2] = z;
+                            }
+                        }
+                    }
+
+                    // restore the root ID
+                    this.viewUtils.setRootElement (saveRoot );
+
+                    context.beginPath();
+
+                    var x0 = minPt[0],  y0 = minPt[1],  z0 = minPt[2],
+                        x1 = maxPt[0],  y1 = maxPt[1],  z1 = maxPt[2];
+
+                    this._selectionCtr = [x0, y0, z0];
+                    this._selectionCtr[0] += (x1-x0)/2;
+                    this._selectionCtr[1] += (y1-y0)/2;
+                    this._selectionCtr[2] += (z1-z0)/2;
+
+                    // get the 8 corners of the parallelpiped in world space
+                    var wc = new Array();   // wc == world cube
+                    wc.push(  this.viewUtils.localToGlobal2( [x0,y0,z1], ssMat ) );
+                    wc.push(  this.viewUtils.localToGlobal2( [x0,y1,z1], ssMat ) );
+                    wc.push(  this.viewUtils.localToGlobal2( [x1,y1,z1], ssMat ) );
+                    wc.push(  this.viewUtils.localToGlobal2( [x1,y0,z1], ssMat ) );
+                    wc.push(  this.viewUtils.localToGlobal2( [x0,y0,z0], ssMat ) );
+                    wc.push(  this.viewUtils.localToGlobal2( [x0,y1,z0], ssMat ) );
+                    wc.push(  this.viewUtils.localToGlobal2( [x1,y1,z0], ssMat ) );
+                    wc.push(  this.viewUtils.localToGlobal2( [x1,y0,z0], ssMat ) );
+
+                    // determine the signs of the normals of the faces relative to the view direction.
+                    var front   = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[2],wc[1]), vecUtils.vecSubtract(3,wc[0],wc[1]))[2] ),
+                        right   = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[6],wc[2]), vecUtils.vecSubtract(3,wc[3],wc[2]))[2] ),
+                        back    = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[5],wc[6]), vecUtils.vecSubtract(3,wc[7],wc[6]))[2] ),
+                        left    = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[1],wc[5]), vecUtils.vecSubtract(3,wc[4],wc[5]))[2] ),
+                        top     = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[3],wc[0]), vecUtils.vecSubtract(3,wc[4],wc[0]))[2] ),
+                        bottom  = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[5],wc[1]), vecUtils.vecSubtract(3,wc[2],wc[1]))[2] );
+
+                    // draw the side faces
+                    var p;
+
+                    //context.strokeStyle = ((front > 0) || (right > 0)) ? dark : light;  context.beginPath();
+                    if ((front > 0) || (right > 0)) {
+                        context.beginPath();
+                        p = this.viewUtils.localToGlobal2( [x1, y0, z1], ssMat );  context.moveTo( p[0], p[1] );
+                        p = this.viewUtils.localToGlobal2( [x1, y1, z1], ssMat );  context.lineTo( p[0], p[1] );
+                        context.closePath();  context.stroke();
+                    }
+
+                    //context.strokeStyle = ((right > 0) || (back > 0)) ? dark : light;  context.beginPath();
+                    if ((right > 0) || (back > 0)) {
+                        context.beginPath();
+                        p = this.viewUtils.localToGlobal2( [x1, y0, z0], ssMat );  context.moveTo( p[0], p[1] );
+                        p = this.viewUtils.localToGlobal2( [x1, y1, z0], ssMat );  context.lineTo( p[0], p[1] );
+                        context.closePath();  context.stroke();
+                    }
+
+                    //context.strokeStyle = ((back > 0) || (left > 0)) ? dark : light;  context.beginPath();
+                    if ((back > 0) || (left > 0)) {
+                        context.beginPath();
+                        p = this.viewUtils.localToGlobal2( [x0, y0, z0], ssMat );  context.moveTo( p[0], p[1] );
+                        p = this.viewUtils.localToGlobal2( [x0, y1, z0], ssMat );  context.lineTo( p[0], p[1] );
+                        context.closePath();  context.stroke();
+                    }
+
+                    //context.strokeStyle = ((left > 0) || (front > 0)) ? dark : light;  context.beginPath();
+                    if ((left > 0) || (front > 0)) {
+                        context.beginPath();
+                        p = this.viewUtils.localToGlobal2( [x0, y0, z1], ssMat );  context.moveTo( p[0], p[1] );
+                        p = this.viewUtils.localToGlobal2( [x0, y1, z1], ssMat );  context.lineTo( p[0], p[1] );
+