2 files changed, 153 insertions, 193 deletions

diff --git a/js/stage/layout.js b/js/stage/layout.js
index d133f100..5cc8dbea 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -67,19 +67,11 @@ exports.Layout = Montage.create(Component, {
             return this._currentDocument;
         },
         set : function(value) {
-            if (value === this._currentDocument) {// || value.getProperty("currentView") !== "design") {
-                return;
-            }
-
-            drawUtils._eltArray.length = 0;
-            drawUtils._planesArray.length = 0;
-
-            this._currentDocument = value;
-
-            if(!value) {
-
-            } else if(this._currentDocument.currentView === "design") {
-                this.elementsToDraw = this._currentDocument.model.documentRoot.childNodes;
+            if (value !== this._currentDocument) {
+                this._currentDocument = value;
+                if(this._currentDocument && this._currentDocument.currentView === "design") {
+                    this.elementsToDraw = Array.prototype.slice.call(this._currentDocument.model.documentRoot.childNodes, 0);
+                }
             }
         }
     },
@@ -113,17 +105,6 @@ exports.Layout = Montage.create(Component, {
             this.ctx = this.canvas.getContext("2d");
             this.ctx.lineWidth = this.ctxLineWidth;
             this.ctx.fillStyle = this.drawFillColor;
-
-            this.eventManager.addEventListener("selectionChange", this, false);
-            this.eventManager.addEventListener("elementsRemoved", this, false);
-        }
-    },
-
-    // Redraw stage only once after all deletion is completed
-    handleElementsRemoved: {
-        value: function(event) {
-            this.draw();
-            this.draw3DInfo(false);
         }
     },
 
@@ -131,13 +112,16 @@ exports.Layout = Montage.create(Component, {
         value: function(event) {
             var containerIndex;
 
+            // Clear the elements to draw
+            this.elementsToDraw.length = 0;
+
             if(this.currentDocument === null){
                 return;
             }
 
             if(this.currentDocument.currentView === "design"){
-                // Make an array copy of the line node list which is not an array like object
-                this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true);
+                // Make an array copy of the live node list which is not an array like object
+                this.domTree = this.currentDocument.model.views.design.getLiveNodeList(true);
                 // Index of the current container
                 containerIndex = this.domTree.indexOf(this.currentDocument.model.domContainer);
 
@@ -149,8 +133,6 @@ exports.Layout = Montage.create(Component, {
                     this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0);
                 }
             }
-            // Clear the elements to draw
-            this.elementsToDraw.length = 0;
 
             // Draw the non selected elements
             if(!event.detail.isDocument) {
@@ -161,9 +143,6 @@ exports.Layout = Montage.create(Component, {
                 this.elementsToDraw = Array.prototype.slice.call(this.domTree, 0);
             }
 
-            this.draw(); // Not a reel yet
-            this.draw3DInfo(false);
-
             // Clear the domTree copy
             this.domTree.length = 0;
         }
@@ -171,8 +150,6 @@ exports.Layout = Montage.create(Component, {
 
     draw: {
         value: function() {
-            this.clearCanvas();
-
             // TODO Bind the layoutview mode to the current document
             // var mode  = this.application.ninja.currentDocument.layoutMode;
             if(this.layoutView === "layoutOff") return;
@@ -184,21 +161,6 @@ exports.Layout = Montage.create(Component, {
         }
     },
 
-    draw3DInfo: {
-        value: function(updatePlanes) {
-            if(updatePlanes) {
-                drawUtils.updatePlanes();
-                this.application.ninja.stage.stageDeps.snapManager._isCacheInvalid = true;
-            }
-
-            if(this.stage.appModel.show3dGrid) {
-                this.application.ninja.stage.stageDeps.snapManager.updateWorkingPlaneFromView();
-            }
-            drawUtils.drawWorkingPlane();
-            drawUtils.draw3DCompass();
-        }
-    },
-
     clearCanvas: {
         value: function() {
             this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
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, {