1 files changed, 68 insertions, 34 deletions

diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index 8ddd0d52..87151964 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -630,6 +630,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                 value: function ()
                 {
             this.application.ninja.stage.clearGridCanvas();
+            this.drawStageOutline();
                         if (!this.isDrawingGrid()) return;
 
                         var saveContext = this.getDrawingSurfaceElement();
@@ -701,21 +702,6 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         this._lineColor = saveColor;
                         this._drawingContext.lineWidth = saveLineWidth;
 
-            if(this.application.ninja.currentDocument.model.documentRoot.id !== "UserContent") {
-                // draw an outline around the body
-                var stagePt = MathUtils.getPointOnPlane([0,0,1,0]);
-                var stageMat = this.getPlaneToWorldMatrix([0,0,1], stagePt);
-    //            glmat4.multiply( tMat, stageMat, stageMat);
-                pt0 = [0, 0, 0];
-                pt1 = [0, height, 0];
-                delta = [width, 0, 0];
-                this.drawGridLines(pt0, pt1, delta, stageMat, 2);
-                pt0 = [0, 0, 0];
-                pt1 = [width, 0, 0];
-                delta = [0, height, 0];
-                this.drawGridLines(pt0, pt1, delta, stageMat, 2);
-            }
-
                         // draw the lines
                         this.redrawGridLines();
 
@@ -738,15 +724,11 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                 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 = mat.multiply(p0),
-                                        //      t1 = mat.multiply(p1);
                                         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.localToGlobal(t0, this._sourceSpaceElt);
-//                                              t1 = this.viewUtils.localToGlobal(t1, this._sourceSpaceElt);
                                                 t0 = this.viewUtils.localToGlobal2(t0, sourceSpaceMat);
                                                 t1 = this.viewUtils.localToGlobal2(t1, sourceSpaceMat);
                                         }
@@ -764,9 +746,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                                         line.setVisibility(vis);
 
                                         // increment the points to the next position
-//                                      p0 = p0.add(d); p0[3] = 1.0;
                                         p0 = vecUtils.vecAdd(4, p0, d); p0[3] = 1.0;
-//                                      p1 = p1.add(d); p1[3] = 1.0;
                                         p1 = vecUtils.vecAdd(4, p1, d); p1[3] = 1.0;
                                 }
                         }
@@ -819,25 +799,12 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         // draw the lines
             var line,
                             nLines = this._gridLineArray.length;
-            if(this.application.ninja.currentDocument.model.documentRoot.id !== "UserContent") {
-                            nLines = this._gridLineArray.length-4;
-            }
 
                         for (var i = 0; i < nLines; i++) {
                                 line = this._gridLineArray[i];
                                 this.drawIntersectedLine(line, this._drawingContext);
                         }
 
-            if(this.application.ninja.currentDocument.model.documentRoot.id !== "UserContent") {
-                this._lineColor = "red";
-                i = nLines;
-                nLines += 4;
-                for (; i < nLines; i++) {
-                    line = this._gridLineArray[i];
-                    this.drawIntersectedLine(line, this._drawingContext);
-                }
-            }
-
                         this.popState();
                 }
         },
@@ -1213,6 +1180,73 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                 }
         },
 
+    drawStageOutline : {
+        value: function() {
+            var context = this.application.ninja.stage.gridContext;
+            var stage = this.application.ninja.stage;
+            var stageRoot = this.application.ninja.currentDocument.model.documentRoot;
+
+            // draw an outline around the template body if stage has any transforms
+            if(stage.currentDocument.model.views.design._template && !MathUtils.isIdentityMatrix(this.viewUtils.getMatrixFromElement(stageRoot))) {
+                var saveContext = this.getDrawingSurfaceElement();
+                this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas);
+
+                var stagePt = MathUtils.getPointOnPlane([0,0,1,0]);
+                var stageMat = this.getPlaneToWorldMatrix([0,0,1], stagePt);
+                var width = this.snapManager.getStageWidth(),
+                    height = this.snapManager.getStageHeight(),
+                    pt0 = [0, 0, 0],
+                    pt1 = [0, height, 0],
+                    delta = [width, 0, 0];
+
+                this._gridLineArray.length = 0;
+                this.drawGridLines(pt0, pt1, delta, stageMat, 2);
+
+                pt0 = [0, 0, 0];
+                pt1 = [width, 0, 0];
+                delta = [0, height, 0];
+                this.drawGridLines(pt0, pt1, delta, stageMat, 2);
+
+                this._lineColor = "red";
+                for (var i = 0; i < 4; i++) {
+                    this.drawIntersectedLine(this._gridLineArray[i], this._drawingContext);
+                }
+
+                this.setDrawingSurfaceElement(saveContext);
+            }
+
+            // draw reference lines across origin
+            var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot);
+            var l = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [0, 0, 0], [0, stage.canvas.height, 0], 0.1);
+            if(!l) return;
+            var r = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [stage.canvas.width, 0, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1);
+            if(!r) return;
+
+            var t = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, 0, 0], [stage.canvas.width, 0, 0], 0.1);
+            if(!t) return;
+            var b = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, stage.canvas.height, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1);
+            if(!b) return;
+
+            context.save();
+            context.strokeStyle = "#333";
+            context.lineWidth = 0.5;
+
+            context.beginPath();
+
+            context.moveTo(l[0], l[1]);
+            context.lineTo(r[0], r[1]);
+
+            context.moveTo(t[0], t[1]);
+            context.lineTo(b[0], b[1]);
+
+            context.closePath();
+            context.stroke();
+
+            context.fillText("(0, 0)", bounds3D[0][0] + 4, bounds3D[0][1] - 6);
+            context.restore();
+        }
+    },
+
         draw3DCompass : {
                 value: function() {
                         // set the element to be the viewport object - temporarily