6 files changed, 42 insertions, 16 deletions

diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index 871b832d..75aa308c 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -126,7 +126,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
             //initialize with current document
             this._eltArray = [];
             this._planesArray = [];
-            this.setDrawingSurfaceElement(stage.canvas);
+            this.setDrawingSurfaceElement(stage.gridCanvas);
             this.setSourceSpaceElement( this.application.ninja.currentDocument.model.documentRoot);
             this.setWorkingPlane( [0,0,1,0] );
 
@@ -307,7 +307,6 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                 }
 
                 if(!changed) {
-                    stage.layout.draw();
                     this.drawWorkingPlane();
                     this.draw3DCompass();
                 }
@@ -631,8 +630,8 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         if (!this.isDrawingGrid()) return;
 
                         var saveContext = this.getDrawingSurfaceElement();
-                        //this.setDrawingSurfaceElement(window.stageManager.layoutCanvas);
-                        this.setDrawingSurfaceElement(this.application.ninja.stage.layoutCanvas);
+                        this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas);
+            this.clear();
 
                         // 3 coordinate axes for the plane
                         var zAxis = [this._workingPlane[0], this._workingPlane[1], this._workingPlane[2]];
diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js
index 069c6022..4dcda24a 100755
--- a/js/helper-classes/3D/snap-manager.js
+++ b/js/helper-classes/3D/snap-manager.js
@@ -21,8 +21,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
         ///////////////////////////////////////////////////////////////////////
         // Instance variables
         ///////////////////////////////////////////////////////////////////////
-    drawingCanvas: { value: null, writable: true},
-    
+
         // we keep a stack of working planes to facilitate working on other planes temporarily
         _workingPlaneStack : { value: [], writable: true },
 
@@ -2124,7 +2123,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
                         if (hitRec)
                         {
                                 var saveContext = drawUtils.getDrawingSurfaceElement();
-                                drawUtils.setDrawingSurfaceElement(this.drawingCanvas);
+                                drawUtils.setDrawingSurfaceElement(this.application.ninja.stage.drawingCanvas);
                                 var context = drawUtils.getDrawingContext();
                                 if (context)
                                 {
diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js
index 896d4a5b..2469ba79 100755
--- a/js/stage/stage-deps.js
+++ b/js/stage/stage-deps.js
@@ -37,8 +37,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();
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 30c3d231..a819fc79 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": {"@": "StageDeps1"},
@@ -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 c7afb95c..d8684739 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; } },
 
@@ -207,11 +213,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);
@@ -231,6 +240,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);
@@ -276,8 +286,8 @@ exports.Stage = Montage.create(Component, {
             this.hideCanvas(false);
 
             // 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);
 
@@ -519,11 +529,12 @@ exports.Stage = Montage.create(Component, {
                 this._canvas.style.visibility = "hidden";
                 this._layoutCanvas.style.visibility = "hidden";
                 this._drawingCanvas.style.visibility = "hidden";
+                this._gridCanvas.style.visibility = "hidden";
             } else {
                 this._canvas.style.visibility = "visible";
                 this._layoutCanvas.style.visibility = "visible";
                 this._drawingCanvas.style.visibility = "visible";
-
+                this._gridCanvas.style.visibility = "visible";
             }
         }
     },
@@ -560,10 +571,17 @@ exports.Stage = Montage.create(Component, {
         }
     },
 
+    clearGridCanvas: {
+        value: function() {
+            this._gridContext.clearRect(0, 0, this._gridCanvas.width, this._gridCanvas.height);
+        }
+    },
+
     clearAllCanvas: {
         value: function() {
             this._drawingContext.clearRect(0, 0, this._drawingCanvas.width, this._drawingCanvas.height);
             this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            this._gridContext.clearRect(0, 0, this._gridCanvas.width, this._gridCanvas.height);
             this.layout.clearCanvas();
         }
     },
diff --git a/scss/imports/scss/_Stage.scss b/scss/imports/scss/_Stage.scss
index ed8d0656..39a98d82 100644
--- a/scss/imports/scss/_Stage.scss
+++ b/scss/imports/scss/_Stage.scss
@@ -140,7 +140,7 @@
     padding: 0px;
     top: 0px;
     left: 0px;
-    z-index: 6;
+    z-index: 7;
 }
 
 
@@ -151,7 +151,7 @@
     padding: 0px;
     top: 0px;