Squashed commit of the following:

commit 0285afe3d4bd458a51f11241f13ea6ffdb0283ed
Merge: 2f9f5e3 16d06ba
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Thu Jul 19 10:54:25 2012 -0700

    Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations

commit 2f9f5e369eb96f6c81b5e4bcbe09b418825e2864
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Wed Jul 18 17:15:19 2012 -0700

    Fixed selection bounds not drawing in nested tags.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit b0a3507f9d27579ad511c69314a09136d7f7c6a0
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Wed Jul 18 11:07:44 2012 -0700

    Layout info needs to redraw if stage is updated.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 63c5e0bf52c33706ba597cb69f7794e287bd0f06
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Jul 17 15:40:54 2012 -0700

    Per feedback from QE, we are still going to draw tool feedback on each mouse move so the selection bounds are not out of sync with the elements.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 0599a742092b985c4002977e501e3b457173f1d9
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Jul 17 15:28:25 2012 -0700

    Fixed grid not drawing correctly when switching documents and when adding/removing elements.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit fd9410606ee6358910d65b2cb5f71812fd44a7c4
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Jul 17 11:36:09 2012 -0700

    Updated drawing feedback to handle matrix 2d values entered via CSS Panel.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 559c16c7ac8c9f40b94a011a6f932d4f97df66a7
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jul 16 17:14:28 2012 -0700

    IKNinja-751 - Selection boundary doesn't follow the transform applied in the CSS Panel.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit e2da5340159db5cd6f75bf6c9b7eb9cbf959e5cd
Merge: 7cc5de3 5146f22
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jul 16 15:36:28 2012 -0700

    Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations

commit 7cc5de39e41b4220f53c91b15b0cf0ed53e0b0f6
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jul 16 14:52:06 2012 -0700

    Check if ownerDocument.defaultValue is null.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 5ae97995a28a4b06fb7f8703eb8090ea16d88acd
Merge: d17974d 0ede302
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jul 16 09:27:22 2012 -0700

    Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations

commit d17974d77273bb635311cb6466f4427cf4d9e5d4
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jul 16 08:45:05 2012 -0700

    Pass in selectedElements array directly to drawUtils when drawing selection bounds instead of creating a duplicate array.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 0b1ea3144cb3e2c1d272f60da32423d0604ace3b
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Fri Jul 13 14:03:40 2012 -0700

    Fixed line tool not drawing the width and height info.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit b9c70e8d9ae324aa21fa5490edc71d8503bcefbc
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Fri Jul 13 12:42:25 2012 -0700

    Used cached offsetWidth and offsetHeight.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 9e17ac7124745ba745014efe149b31dee4fe658f
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Thu Jul 12 16:25:41 2012 -0700

    Converting tabs to spaces … again!

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 351726c951bb73c28f0e15ea1ab32e85cc735688
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Thu Jul 12 16:14:31 2012 -0700

    Tabs should be 4 spaces.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 250c419aa2dbcb10f012817ee7039aca77cb2518
Merge: 3f8d61a 2880e1d
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Thu Jul 12 16:08:31 2012 -0700

    Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations

commit 3f8d61a676da3992947ed9a2ed0e449780fcfbe0
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Thu Jul 12 15:53:44 2012 -0700

    Rotate tool was not working immediately after switching selection and selection bounds were not drawing after resizing canvases.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit e2e1f81e3b6917e1032e1b99b79c266937f3bb25
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Thu Jul 12 12:15:59 2012 -0700

    Single draw cycle for stage updates and tool drawings.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 95a90b4c95ee3163c97bea317144366674e49ade
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jun 18 11:46:38 2012 -0700

    Single draw cycle for the stage and layout.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 21966b1515d80d2161a14e5a19bc66f3f49a92ce
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Fri Jun 15 13:33:14 2012 -0700

    Cache element offsets, including offsetParent.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 80c563c8ba06149691c6c1e754dd9a5e43bc7d4b
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jul 9 17:30:00 2012 -0700

    Open materials editor popup next to PI button.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

1 files changed, 143 insertions, 145 deletions

diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 7c587989..7ac64976 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -29,10 +29,10 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
 
-var Montage =   require("montage/core/core").Montage,
+var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component,
     drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils,
-    vecUtils =  require("js/helper-classes/3D/vec-utils").VecUtils;
+    vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
 
 exports.Stage = Montage.create(Component, {
 
@@ -46,8 +46,20 @@ exports.Stage = Montage.create(Component, {
     drawNow: { value : false },
     switchedFromCodeDoc: { value : false },
 
+    drawLayout: { value : false },
+    updatePlanes: { value : false },
+    draw3DInfo: { value : false },
+
     // TO REVIEW
-    zoomFactor: {value : 1 },
+    zoomFactor: {
+        get: function() {
+            if (this._viewport && this._viewport.style && this._viewport.style.zoom) {
+                return Number(this._viewport.style.zoom);
+            } else {
+                return 1;
+            }
+        }
+    },
 
     _canvasSelectionPrefs:  { value: { "thickness" : 1.0, "color" : "#46a1ff" } },
     _canvasDrawingPrefs:    { value: { "thickness" : 1.0, "color" : "#000" } },
@@ -85,7 +97,21 @@ exports.Stage = Montage.create(Component, {
         set: function(value) {
             this._resizeCanvases = value;
             if(value) {
-                this.needsDraw = true;
+                // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px
+                this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11;
+                this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height =  this.bindingView.height = this.element.offsetHeight - 11;// - 26 - 26;
+
+                if(this.currentDocument) {
+                    if(this.currentDocument.currentView === "design") {
+                        this.drawLayout = true;
+                        this.updatePlanes = true;
+                        this.draw3DInfo = true;
+                        this.needsDrawSelection = true;
+                    }
+                    if(this.currentDocument.model && this.currentDocument.model.documentRoot) {
+                        this.currentDocument.model.documentRoot.elementModel.setProperty("offsetCache", false);
+                    }
+                }
             }
         }
     },
@@ -99,6 +125,44 @@ exports.Stage = Montage.create(Component, {
         set: function(value) {
             this._updatedStage = value;
             if(value) {
+                if(this.currentDocument) {
+                    if(this.currentDocument.currentView === "design") {
+                        this.drawLayout = true;
+                        this.updatePlanes = true;
+                        this.draw3DInfo = true;
+                        this.needsDrawSelection = true;
+                    }
+                    if(this.currentDocument.model && this.currentDocument.model.documentRoot) {
+                        this.currentDocument.model.documentRoot.elementModel.setProperty("offsetCache", false);
+                    }
+                }
+            }
+        }
+    },
+
+    _needsDrawSelection: { value: false },
+
+    needsDrawSelection: {
+        get: function() {
+            return this._needsDrawSelection;
+        },
+        set: function(value) {
+            this._needsDrawSelection = value;
+            if(value) {
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _needsDrawTool: { value: null },
+
+    needsDrawTool: {
+        get: function() {
+            return this._needsDrawTool;
+        },
+        set: function(value) {
+            this._needsDrawTool = value;
+            if(value) {
                 this.needsDraw = true;
             }
         }
@@ -346,20 +410,55 @@ exports.Stage = Montage.create(Component, {
 
     willDraw: {
         value: function() {
-            if(this.resizeCanvases) {
-                // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px
-                this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11;
-                this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height =  this.bindingView.height = this.element.offsetHeight - 11;// - 26 - 26;
-                // Hack for now until a full component
-                this.layout.draw();
-                if(this.currentDocument && (this.currentDocument.currentView === "design")) {
-                    this.layout.draw3DInfo(true);
+            if(this._needsDrawTool) {
+//                console.log("drawTool");
+                this.application.ninja.toolsData.selectedToolInstance.HandleMouseMove(this._needsDrawTool);
+                this.needsDrawTool = null;
+            }
+        }
+    },
+
+    draw: {
+        value: function() {
+            if(!this.currentDocument) return;
+
+            if(this.draw3DInfo) {
+//                console.log("draw3DInfo");
+                if(this.updatePlanes) {
+//                    console.log("updatePlanes");
+                    drawUtils.updatePlanes();
+                    this.stageDeps.snapManager._isCacheInvalid = true;
+                    this.updatePlanes = false;
                 }
-            } else if(this.updatedStage) {
+                if(this.appModel.show3dGrid) {
+//                    console.log("show3dGrid");
+                    this.stageDeps.snapManager.updateWorkingPlaneFromView();
+                }
+//                console.log("drawWorkingPlane");
+                drawUtils.drawWorkingPlane();
+                this.draw3DInfo = false;
+            }
+            if(this.drawLayout) {
+                this.layout.clearCanvas();
+//                console.log("drawLayout");
                 this.layout.draw();
-                this.layout.draw3DInfo(true);
+                this.drawLayout = false;
+            }
+
+            if(this._needsDrawSelection) {
+                this.clearCanvas();
+                if(this.currentDocument.model.domContainer !== this.currentDocument.model.documentRoot) {
+                    this.drawDomContainer(this.currentDocument.model.domContainer);
+                }
+                //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change
+                if(this.application.ninja.selectedElements.length) {
+                    drawUtils.drawSelectionBounds(this.application.ninja.selectedElements, this.showSelectionBounds);
+                }
+                NJevent("selectionDrawn");
+                this.needsDrawSelection = false;
             }
         }
+
     },
 
     didDraw: {
@@ -568,7 +667,7 @@ exports.Stage = Montage.create(Component, {
             this._clickPoint.y = point.y; // event.layerY;
 
             this.enableMouseInOut();
-
+            
             this.application.ninja.toolsData.selectedToolInstance.downPoint.x = point.x;
             this.application.ninja.toolsData.selectedToolInstance.downPoint.y = point.y;
             this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonDown(event);
@@ -630,7 +729,9 @@ exports.Stage = Montage.create(Component, {
 
     handleMousemove: {
         value: function(event) {
-            this.application.ninja.toolsData.selectedToolInstance.HandleMouseMove(event);
+//            this.application.ninja.toolsData.selectedToolInstance.HandleMouseMove(event);
+            // Set a flag here, and tell the tool to handle mouse move in our draw cycle
+            this.needsDrawTool = event;
         }
     },
 
@@ -653,25 +754,34 @@ exports.Stage = Montage.create(Component, {