3 files changed, 102 insertions, 36 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
diff --git a/js/helper-classes/3D/math-utils.js b/js/helper-classes/3D/math-utils.js
index 35ee8112..44e2499d 100755
--- a/js/helper-classes/3D/math-utils.js
+++ b/js/helper-classes/3D/math-utils.js
@@ -333,7 +333,7 @@ var MathUtilsClass = exports.MathUtilsClass = Object.create(Object.prototype, {
 
     //returns the intersection point between the two segments (null if no intersection)
     segSegIntersection2D: {
-        value: function (seg0Start, seg0End, seg1Start, seg1End, epsilon) {
+        value: function (seg0Start, seg0End, seg1Start, seg1End, epsilon, mustLieInSegements) {
             //check for parallel segments
             var denom = (seg1End[1] - seg1Start[1]) * (seg0End[0] - seg0Start[0]) - (seg1End[0] - seg1Start[0]) * (seg0End[1] - seg0Start[1]);
             if (Math.abs(denom) <= epsilon) {
@@ -349,7 +349,7 @@ var MathUtilsClass = exports.MathUtilsClass = Object.create(Object.prototype, {
             paramSeg1 /= denom;
 
             //check whether the parameters are both between 0 and 1
-            if (Math.abs(paramSeg0) > 1.0 || Math.abs(paramSeg1) > 1.0) {
+            if (mustLieInSegements && (Math.abs(paramSeg0) > 1.0 || Math.abs(paramSeg1) > 1.0)) {
                 return null; //no intersection unless the the intersection point lies on both segments
             }
 
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js
index 5a128408..d7f29caa 100755
--- a/js/helper-classes/3D/view-utils.js
+++ b/js/helper-classes/3D/view-utils.js
@@ -244,6 +244,38 @@ exports.ViewUtils = Montage.create(Component, {
         }
     },
 
+    getElementBoundsInGlobal: {
+        value: function (elt) {
+            this.pushViewportObj(elt);
+            var bounds3D = this.getElementViewBounds3D(elt);
+            var tmpMat = this.getLocalToGlobalMatrix(elt);