3 files changed, 206 insertions, 185 deletions

diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index 88830964..871b832d 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -119,19 +119,46 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
 
     initializeFromDocument:{
         value:function(){
-            var documentRootChildren = null, i;
+            var i,
+                documentRootChildren = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true),
+                stage = this.application.ninja.stage,
+                len = documentRootChildren.length;
             //initialize with current document
             this._eltArray = [];
             this._planesArray = [];
-            this.setDrawingSurfaceElement(this.application.ninja.stage.canvas);
-            this.setSourceSpaceElement( this.application.ninja.stage.stageDeps.currentStage );
+            this.setDrawingSurfaceElement(stage.canvas);
+            this.setSourceSpaceElement( this.application.ninja.currentDocument.model.documentRoot);
             this.setWorkingPlane( [0,0,1,0] );
 
             //Loop through all the top-level children of the current document and call drawUtils.addElement on them
-            if(this.application.ninja.currentDocument._liveNodeList.length > 0){
-                documentRootChildren = this.application.ninja.currentDocument._liveNodeList;
-                for(i=0;i<documentRootChildren.length;i++){
-                    this.addElement(documentRootChildren[i]);
+            if(len > 0) {
+                var initL = 0,
+                    initT = 0,
+                    minLeft = 0,
+                    minTop = 0,
+                    docLeft = stage.documentOffsetLeft,
+                    docTop = stage.documentOffsetTop,
+                    l,
+                    t,
+                    plane,
+                    elt;
+                for(i=0; i<len; i++) {
+                    elt = documentRootChildren[i];
+                    plane = this.addElement(elt);
+                    l = plane._rect.m_left - docLeft;
+                    t = plane._rect.m_top - docTop;
+                    if(l < minLeft) {
+                        minLeft = l;
+                    }
+                    if(t < minTop) {
+                        minTop = t;
+                    }
+                }
+                if(minLeft !== initL) {
+                    stage.userPaddingLeft = minLeft;
+                }
+                if(minTop !== initT) {
+                    stage.userPaddingTop = minTop;
                 }
             }
         }
@@ -245,16 +272,45 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
             }
             var els = event.detail.data.els;
             if(els && this._shouldUpdatePlanes(event.detail.data.prop)) {
-                var len = els.length;
+                var len = els.length,
+                    stage = this.application.ninja.stage,
+                    minLeft = stage.userPaddingLeft,
+                    minTop = stage.userPaddingTop,
+                    docLeft = stage.documentOffsetLeft,
+                    docTop = stage.documentOffsetTop,
+                    l,
+                    t,
+                    plane,
+                    changed = false;
                 for(var i=0; i < len; i++) {
-                    if(els[i].elementModel.props3D.elementPlane) {
-                        els[i].elementModel.props3D.elementPlane.init();
+                    plane = els[i].elementModel.props3D.elementPlane;
+                    if(plane) {
+                        plane.init();
+                        l = plane._rect.m_left - docLeft;
+                        t = plane._rect.m_top - docTop;
+                        if(l < minLeft) {
+                            minLeft = l;
+                        }
+                        if(t < minTop) {
+                            minTop = t;
+                        }
                     }
                 }
 
-                this.application.ninja.stage.layout.draw();
-                this.drawWorkingPlane();
-                this.draw3DCompass();
+                if(minLeft !== stage.userPaddingLeft) {
+                    stage.userPaddingLeft = minLeft;
+                    changed = true;
+                }
+                if(minTop !== stage.userPaddingTop) {
+                    stage.userPaddingTop = minTop;
+                    changed = true;
+                }
+
+                if(!changed) {
+                    stage.layout.draw();
+                    this.drawWorkingPlane();
+                    this.draw3DCompass();
+                }
             }
         }
     },
@@ -281,6 +337,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         plane.init();
                         this._planesArray.push( plane );
             elt.elementModel.props3D.elementPlane = plane;
+            return plane;
                 }
         },
 
@@ -584,18 +641,10 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         var ptOnPlane = MathUtils.getPointOnPlane(this._workingPlane);
 
             // define the grid parameters
-            var width,
-                height,
+            var width = this.snapManager.getStageWidth(),
+                height = this.snapManager.getStageHeight(),
                 nLines = 10;
 
-//            if(this.application.ninja.documentController.webTemplate) {
-            if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") {
-                width = this.application.ninja.currentDocument.documentRoot.scrollWidth;
-                height = this.application.ninja.currentDocument.documentRoot.scrollHeight;
-            } else {
-                width = this.snapManager.getStageWidth();
-                height = this.snapManager.getStageHeight();
-            }
                         // get a matrix from working plane space to the world
                         var mat = this.getPlaneToWorldMatrix(zAxis, ptOnPlane);
                         var tMat = Matrix.Translation( [0.5*width, 0.5*height, 0] );
@@ -651,7 +700,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         this._lineColor = saveColor;
                         this._drawingContext.lineWidth = saveLineWidth;
 
-            if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") {
+            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);
@@ -769,7 +818,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         // draw the lines
             var line,
                             nLines = this._gridLineArray.length;
-            if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") {
+            if(this.application.ninja.currentDocument.model.documentRoot.id !== "UserContent") {
                             nLines = this._gridLineArray.length-4;
             }
 
@@ -778,7 +827,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                                 this.drawIntersectedLine(line, this._drawingContext);
                         }
 
-            if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") {
+            if(this.application.ninja.currentDocument.model.documentRoot.id !== "UserContent") {
                 this._lineColor = "red";
                 i = nLines;
                 nLines += 4;
@@ -877,7 +926,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                                 // if all of the planes are aligned, check if they are aligned with the view direction
                                 if (flat)
                                 {
-                                        var stage = this.application.ninja.currentDocument.documentRoot;
+                                        var stage = this.application.ninja.currentDocument.model.documentRoot;
                                         var stageMat = this.viewUtils.getMatrixFromElement(stage);
                                         var viewDir = [ stageMat[8], stageMat[9], stageMat[10] ];
                                         viewDir = vecUtils.vecNormalize( 3, viewDir );
@@ -1167,7 +1216,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                 value: function() {
                         // set the element to be the viewport object - temporarily
                         var tmpCanvas = this.application.ninja.stage.canvas;
-                        var tmpStage = this.application.ninja.currentDocument.documentRoot;
+                        var tmpStage = this.application.ninja.currentDocument.model.documentRoot;
                         this.viewUtils.pushViewportObj( tmpCanvas );
 
                         // save the source space object and set to the target object
@@ -1178,8 +1227,8 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         var saveColor = this._lineColor;
                         var saveLineWidth = this._lineWidth;
 
-                        var origLeft = 50;
-                        var origTop = 50;
+                        var origLeft = 60;
+                        var origTop = this.snapManager.getStageHeight() - 60;
 
                         var mat = this.viewUtils.getMatrixFromElement( this._sourceSpaceElt );
                         var tMat = Matrix.Translation([origLeft,origTop,0]);
@@ -1211,7 +1260,7 @@ var DrawUtils = exports.DrawUtils = Montage.creat