4 files changed, 50 insertions, 29 deletions

diff --git a/js/stage/layout.js b/js/stage/layout.js
index 284968e4..71296405 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -136,6 +136,10 @@ exports.Layout = Montage.create(Component, {
         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;
+
             var els = this.elementsToDraw.length;
             for(var i = 0, el; i < els; i++){
                 this.drawTagOutline(this.elementsToDraw[i]);
@@ -147,13 +151,13 @@ exports.Layout = Montage.create(Component, {
         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.drawWorkingPlane();
             drawUtils.draw3DCompass();
         }
     },
@@ -169,11 +173,6 @@ exports.Layout = Montage.create(Component, {
 
             if(!item || !this.application.ninja.selectionController.isNodeTraversable(item)) return;
 
-            // TODO Bind the layoutview mode to the current document
-            // var mode  = this.application.ninja.currentDocument.layoutMode;
-
-            if(this.layoutView === "layoutOff") return;
-            
             // Don't draw outlines for shapes.
             // TODO Use the element mediator/controller/model to see if its a shape
             // if (utilsModule.utils.isElementAShape(item)) return;
diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js
index f27254f9..709c0201 100755
--- a/js/stage/stage-deps.js
+++ b/js/stage/stage-deps.js
@@ -25,7 +25,7 @@ exports.StageDeps = Montage.create(Component, {
             return this._currentDocument;
         },
         set : function(value) {
-            if (value === this._currentDocument) {// || value.getProperty("currentView") !== "design") {
+            if (value === this._currentDocument) {
                 return;
             }
 
@@ -68,8 +68,6 @@ exports.StageDeps = Montage.create(Component, {
             window.MathUtils   = MathUtilsClass;
             window.VecUtils   = VecUtils;
 
-            snapManager.drawingCanvas = this.stage.drawingCanvas;
-
             // Setup the listeners for the draw-util and snapmanager when removing elements
             // TODO Revisit when supporting multiple documents
             drawUtils.initialize();
@@ -88,16 +86,6 @@ exports.StageDeps = Montage.create(Component, {
             drawUtils.snapManager = snapManager;
             drawUtils.ElementPlanes = ElementPlanes;
         }
-    },
-
-    handleSwitchDocument: {
-        value: function(){
-            workingPlane = [0,0,1,0];
-
-            snapManager._isCacheInvalid = true;
-            snapManager.setupDragPlaneFromPlane (workingPlane);
-
-            drawUtils.initializeFromDocument();
-        }
     }
+
 });
\ No newline at end of file
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 89b674ab..1b5cec17 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -57,6 +57,7 @@
                     "element":          {"#": "stageAndScenesContainer"},
                     "_iframeContainer":  {"#": "iframeContainer"},
                     "_layoutCanvas":  {"#": "layoutCanvas"},
+                    "_gridCanvas":  {"#": "gridCanvas"},
                     "_canvas":  {"#": "stageCanvas"},
                     "_drawingCanvas":  {"#": "drawingCanvas"},
                     "stageDeps": {"@": "stageDeps"},
@@ -83,6 +84,7 @@
         <section data-montage-id="stageView"></section>
         <section data-montage-id="iframeContainer" id="iframeContainer"></section>
         <section data-montage-id="textToolObject"></section>
+        <canvas data-montage-id="gridCanvas" class="gridCanvas"></canvas>
         <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas>
         <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas>
         <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index da5a4f76..4505ff66 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -97,6 +97,12 @@ exports.Stage = Montage.create(Component, {
     _layoutCanvas: { value: null },
     layoutCanvas: { get: function() { return this._layoutCanvas; } },
 
+    _gridCanvas: { value: null },
+    gridCanvas: { get: function() { return this._gridCanvas; } },
+
+    _gridContext: { value: null },
+    gridContext: { get: function() { return this._gridContext; } },
+
     _drawingCanvas: { value: null },
     drawingCanvas: { get: function() { return this._drawingCanvas; } },
 
@@ -183,7 +189,7 @@ exports.Stage = Montage.create(Component, {
                 this.initWithDocument(false);
             }
         }
-    },
+        },
 
     _userPaddingLeft: { value: 0 },
     _userPaddingTop: { value: 0 },
@@ -194,7 +200,7 @@ exports.Stage = Montage.create(Component, {
             this._userPaddingLeft = value;
             this._documentOffsetLeft = -value;
             this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px";
-            this.userContentLeft = this._documentOffsetLeft;
+            this.userContentLeft = this._documentOffsetLeft - this._scrollLeft;
             this.updatedStage = true;
         }
     },
@@ -205,7 +211,7 @@ exports.Stage = Montage.create(Component, {
             this._userPaddingTop = value;
             this._documentOffsetTop = -value;
             this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px";
-            this.userContentTop = this._documentOffsetTop;
+            this.userContentTop = this._documentOffsetTop - this._scrollTop;
             this.updatedStage = true;
         }
     },
@@ -214,11 +220,14 @@ exports.Stage = Montage.create(Component, {
         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.element.offsetWidth - 11 ;
-                this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;// - 26 - 26;
+                this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ;
+                this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;// - 26 - 26;
 
                 // Hack for now until a full component
                 this.layout.draw();
+                if(this.application.ninja.currentDocument) {
+                    this.layout.draw3DInfo(true);
+                }
             } else if(this.updatedStage) {
                 this.layout.draw();
                 this.layout.draw3DInfo(true);
@@ -238,6 +247,7 @@ exports.Stage = Montage.create(Component, {
 
             this._context = this._canvas.getContext("2d");
             this._drawingContext= this._drawingCanvas.getContext("2d");
+            this._gridContext= this._gridCanvas.getContext("2d");
 
             // Setup event listeners
             this._drawingCanvas.addEventListener("mousedown", this, false);
@@ -281,8 +291,8 @@ exports.Stage = Montage.create(Component, {
             var designView = this.application.ninja.currentDocument.model.views.design;
 
             // Recalculate the canvas sizes because of splitter resizing
-            this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ;
-            this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;
+            this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ;
+            this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;
 
             designView.iframe.contentWindow.addEventListener("scroll", this, false);
 
@@ -300,6 +310,8 @@ exports.Stage = Montage.create(Component, {
             this._scrollLeft = 0;
             this._scrollTop = 0;
 
+            this.initialize3DOnOpenDocument();
+
             if(designView._template) {
                 var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2);
                 var initialTop = parseInt((this.canvas.height - designView._template.size.height)/2);
@@ -521,11 +533,12 @@ exports.Stage = Montage.create(Component, {
                 this._canvas.style.visibility = "hidden";