3 files changed, 76 insertions, 18 deletions

diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index bd47ffc3..9c4f31b7 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -73,6 +73,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
 
     // Properties that require element planes to be updated
         _updatePlaneProps : {value: ["matrix", "left", "top", "width", "height"], writable: false },
+        _recalculateScrollOffsets : { value: false },
 
         ///////////////////////////////////////////////////////////////////////
         // Property accessors
@@ -117,7 +118,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
         },
 
     initializeFromDocument:{
-        value:function(adjustScrollOffsets){
+        value:function(adjustScrollOffsets, useStageValues){
             var i,
                 documentRootChildren = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true),
                 stage = this.application.ninja.stage,
@@ -141,6 +142,13 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                     t,
                     plane,
                     elt;
+                if(useStageValues) {
+                    initL = stage.userPaddingLeft;
+                    initT = stage.userPaddingTop;
+                    minLeft = stage.templateLeft;
+                    minTop = stage.templateTop;
+                    this._recalculateScrollOffsets = false;
+                }
                 for(i=0; i<len; i++) {
                     elt = documentRootChildren[i];
                     plane = this.addElement(elt);
@@ -149,17 +157,19 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         t = plane._rect.m_top - docTop;
                         if(l < minLeft) {
                             minLeft = l;
+                            stage.minLeftElement = elt;
                         }
                         if(t < minTop) {
                             minTop = t;
+                            stage.minTopElement = elt;
                         }
                     }
                 }
                 if(minLeft !== initL) {
-                    stage.userPaddingLeft = minLeft;
+                    stage.userPaddingLeft = (minLeft < 0) ? minLeft : 0;
                 }
                 if(minTop !== initT) {
-                    stage.userPaddingTop = minTop;
+                    stage.userPaddingTop = (minTop < 0) ? minTop : 0;
                 }
             }
         }
@@ -274,9 +284,11 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                     t,
                     plane,
                     changed = false,
+                    elt,
                     adjustStagePadding = !isChanging || (event.detail.data.prop !== "matrix");
                 for(var i=0; i < len; i++) {
-                    plane = els[i].elementModel.props3D.elementPlane;
+                    elt = els[i];
+                    plane = elt.elementModel.props3D.elementPlane;
                     if(plane) {
                         plane.init();
                         if(adjustStagePadding) {
@@ -284,22 +296,34 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                             t = plane._rect.m_top - docTop;
                             if(l < minLeft) {
                                 minLeft = l;
+                                stage.minLeftElement = elt;
+                            } else if((elt === stage.minLeftElement) && (l > minLeft)) {
+                                this._recalculateScrollOffsets = true;
                             }
+
                             if(t < minTop) {
                                 minTop = t;
+                                stage.minTopElement = elt;
+                            } else if((elt === stage.minTopElement) && (t > minTop)) {
+                                this._recalculateScrollOffsets = true;
                             }
                         }
                     }
                 }
 
                 if(adjustStagePadding) {
-                    if(minLeft !== stage.userPaddingLeft) {
-                        stage.userPaddingLeft = minLeft;
-                        changed = true;
-                    }
-                    if(minTop !== stage.userPaddingTop) {
-                        stage.userPaddingTop = minTop;
+                    if(this._recalculateScrollOffsets && !isChanging) {
+                        this.initializeFromDocument(true, true);
                         changed = true;
+                    } else {
+                        if(minLeft !== stage.userPaddingLeft) {
+                            stage.userPaddingLeft = minLeft;
+                            changed = true;
+                        }
+                        if(minTop !== stage.userPaddingTop) {
+                            stage.userPaddingTop = minTop;
+                            changed = true;
+                        }
                     }
                 }
 
@@ -1185,8 +1209,38 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
             var context = this.application.ninja.stage.gridContext;
             var stage = this.application.ninja.stage;
             var stageRoot = this.application.ninja.currentDocument.model.documentRoot;
-            var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot);
 
+            // 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);
diff --git a/js/helper-classes/RDGE/rdge-compiled.js b/js/helper-classes/RDGE/rdge-compiled.js
index 0bbcb05b..53a99c35 100755
--- a/js/helper-classes/RDGE/rdge-compiled.js
+++ b/js/helper-classes/RDGE/rdge-compiled.js
@@ -248,13 +248,13 @@ RDGE.SceneGraph.prototype.insertAbove=function(a,b){RDGE.verifyTransformNode(a);
 RDGE.SceneGraph.prototype._TraverseDFHelper=function(a,b,c){if("undefined"!=b.children){var d=[];for(d.push({node:b,parent:null});0<d.length;){c=d.pop();b=c.node;c=c.parent;if(void 0!==b.transformNode&&(b=b.transformNode,!1===a.process(b,c)))continue;if(void 0!==b.children)for(c=0;c<b.children.length;++c)d.push({node:b.children[c],parent:b})}}};
 RDGE.SceneGraph.prototype._TraverseDFPostOrderHelper=function(a,b,c){if("undefined"!=b.children){var d=[];d.push({node:b,parent:null});for(b=d.length;0<b;){for(var b=d.length,c=g.children[b-1],c=void 0==c.children?0:c.children.length,f=0;f<c;++f)d.push({node:g.children[f],parent:g});if(!(0<c)){var c=d.pop(),g=c.node,c=c.parent;void 0!==g.transformNode&&(g=g.transformNode,a.process(g,c))}}}};
 RDGE.SceneGraph.prototype.BuildBVHHelper=function(a){if("undefined"!=a.children){a.bbox_world?a.bbox_world.reset():a.bbox_world=new RDGE.box;void 0==a.local&&(a.local=RDGE.mat4.identity());var b=[],c=0;a.id="root";b.push({node:a,xfrm:RDGE.mat4.identity(),parent:null,visited:!1});for(var a=b.length,d=0;0<a;){var a=b.length,d=a-1,f=void 0==b[d].node.transformNode?b[d].node:b[d].node.transformNode,g=b[d].xfrm,h=b[d].parent,d=b[d].visited;void 0==f.id&&(f.id="id"+c);if(!d){if(void 0!==f.local&&(f.bbox_world?
-f.bbox_world.reset():f.bbox_world=new RDGE.box,d=this.GetBBoxForNode(f),f.world=RDGE.mat4.mul(f.local,g),d&&(f.bbox_world=d.transform(f.world)),!d||!d.isValid()))g=new RDGE.box,g.set(0,0),f.bbox_world=g;g=void 0==f.children?0:f.children.length;for(d=0;d<g;++d)b.push({node:f.children[d],xfrm:f.world,parent:f,visited:!1});c++;if(0<g)continue}h&&h.bbox_world&&h.bbox_world.isValid()&&f.bbox_world&&f.bbox_world.isValid()&&h.bbox_world.addBox(f.bbox_world);b.pop();a=b.length;if(0<a&&(void 0==b[a-1].node.transformNode?
+f.bbox_world.reset():f.bbox_world=new RDGE.box,d=this.GetBBoxForNode(f),f.world=RDGE.mat4.mul(f.local,g),d&&(f.bbox_world=d.transform(f.world)),!d||!d.isValid()))g=new RDGE.box,g.set(0,0),f.bbox_world=g;g=void 0==f.children?0:f.children.length;for(d=0;d<g;++d)b.push({node:f.children[d],xfrm:f.world,parent:f,visited:!1});c++;if(0<g)continue}h&&(h.bbox_world&&h.bbox_world.isValid()&&f.bbox_world&&f.bbox_world.isValid())&&h.bbox_world.addBox(f.bbox_world);b.pop();a=b.length;if(0<a&&(void 0==b[a-1].node.transformNode?
 b[a-1].node:b[a-1].node.transformNode).id==h.id)b[a-1].visited=!0}}};RDGE.SceneGraph.prototype._TraverseBFHelper=function(a,b){if("undefined"!=b.children){var c=[];for(c.push({node:b,parent:null});0<c.length;){var d=c.shift(),f=d.node,d=d.parent;void 0!==f.transformNode&&(f=f.transformNode,a.process(f,d));if(void 0!==f.children)for(d=0;d<f.children.length;++d)c.push({node:f.children[d],parent:f})}}};
-RDGE.SceneGraph.prototype.update=function(a){var b=RDGE.globals.engine.getContext().renderer;RDGE.globals.engine.getContext().debug.mat4CallCount=0;for(var c=this.animstack.length-1;0<=c;)this.animstack[c].step(a),--c;this.BuildBVHHelper(this.scene);RDGE.g_particleSystemManager.update(a);a=b.cameraManager().getActiveCamera();void 0!==a&&null!=a&&null!=a.controller&&void 0!==a.controller.world&&a.setWorld(a.controller.world);this.tick++};
+RDGE.SceneGraph.prototype.update=function(a){var b=RDGE.globals.engine.getContext().renderer;RDGE.globals.engine.getContext().debug.mat4CallCount=0;for(var c=this.animstack.length-1;0<=c;)this.animstack[c].step(a),--c;this.BuildBVHHelper(this.scene);RDGE.g_particleSystemManager.update(a);a=b.cameraManager().getActiveCamera();void 0!==a&&(null!=a&&null!=a.controller&&void 0!==a.controller.world)&&a.setWorld(a.controller.world);this.tick++};
 RDGE.SceneGraph.prototype.render=function(a,b){if(0!=this.scene.children.length){var c=RDGE.globals.engine.getContext().renderer;RDGE.rdgeGlobalParameters.u_shadowLightFarZ.set([this.mainLight.zFar()]);this.renderList=this._RenderDFHelper(c,a,this.scene,b);this.shadowsEnabled&&(this.Traverse(this.shadowCuller,!0),this.shadowRenderList=this.shadowCuller.result);this.renderGraph.render(this);RDGE.g_particleSystemManager.render()}};
 RDGE.SceneGraph.prototype.GetBBoxForNode=function(a){var b=null;if(a.materialNode&&a.materialNode.meshNode){var c=null,c=RDGE.globals.meshMan.getModelByName(a.materialNode.meshNode.mesh.name);null!=c&&(b=c.bbox)}return b};
 RDGE.SceneGraph.prototype._RenderDFHelper=function(a,b,c){renderList=[];renderList[this.bckTypes.BACKGROUND]=[];renderList[this.bckTypes.OPAQUE]=[];renderList[this.bckTypes.TRANSPARENT]=[];renderList[this.bckTypes.ADDITIVE]=[];renderList[this.bckTypes.TRANSLUCENT]=[];renderList[this.bckTypes.FOREGROUND]=[];if("undefined"!=c.children){b=[];b.push({node:c,curCtx:RDGE.globals.engine.defaultContext});for(a=a.cameraManager().getActiveCamera();0<b.length;){var d=b.pop(),c=d.node,f=new RDGE.RenderContext;