3 files changed, 102 insertions, 17 deletions

diff --git a/js/document/document-html.js b/js/document/document-html.js
index 87c776d5..a26b74d5 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -41,7 +41,7 @@ exports.HtmlDocument = Montage.create(Component, {
         ////////////////////////////////////////////////////////////////////
         //
     exclusionList: {
-        value: ["HTML", "BODY"] //TODO: Update to correct list
+        value: ["HTML", "BODY", "NINJA-CONTENT"] //TODO: Update to correct list
     },
     ////////////////////////////////////////////////////////////////////
         //
diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index b53ac4ad..a6d2d899 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -119,19 +119,43 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
 
     initializeFromDocument:{
         value:function(){
-            var documentRootChildren = null, i;
+            var documentRootChildren = null, i, stage = this.application.ninja.stage;
             //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( stage.stageDeps.currentStage );
             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]);
+                var len = documentRootChildren.length,
+                    minLeft = stage.userPaddingLeft,
+                    minTop = stage.userPaddingTop,
+                    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 !== stage.userPaddingLeft) {
+                    stage.userPaddingLeft = minLeft;
+                }
+                if(minTop !== stage.userPaddingTop) {
+                    stage.userPaddingTop = minTop;
                 }
             }
         }
@@ -245,16 +269,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 +334,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         plane.init();
                         this._planesArray.push( plane );
             elt.elementModel.props3D.elementPlane = plane;
+            return plane;
                 }
         },
 
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 93270561..cac99326 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -187,6 +187,37 @@ exports.Stage = Montage.create(Component, {
         enumerable : false
     },
 
+    _userPaddingLeft: { value: 0 },
+    _userPaddingTop: { value: 0 },
+
+    userPaddingLeft: {
+        get: function() { return this._userPaddingLeft; },
+        set: function(value) {
+            this._userPaddingLeft = value;
+            this._documentOffsetLeft = -value;
+            if(!this._documentRoot) {
+                this._documentRoot = this.application.ninja.currentDocument.documentRoot;
+            }
+            this._documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px";
+            this.userContentLeft = this._documentOffsetLeft;
+            this.updatedStage = true;
+        }
+    },
+
+    userPaddingTop: {
+        get: function() { return this._userPaddingTop; },
+        set: function(value) {
+            this._userPaddingTop = value;
+            this._documentOffsetTop = -value;
+            if(!this._documentRoot) {
+                this._documentRoot = this.application.ninja.currentDocument.documentRoot;
+            }
+            this._documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px";
+            this.userContentTop = this._documentOffsetTop;
+            this.updatedStage = true;
+        }
+    },
+
     willDraw: {
         value: function() {
             if(this.resizeCanvases) {
@@ -287,8 +318,8 @@ exports.Stage = Montage.create(Component, {
 
                 this._scrollLeft = 0;
                 this._scrollTop = 0;
-                this._userContentLeft = 0;
-                this._userContentTop = 0;
+                this._userContentLeft =  this._documentOffsetLeft;
+                this._userContentTop =  this._documentOffsetTop;
 
                 this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11;
                 this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11;
@@ -489,8 +520,8 @@ exports.Stage = Montage.create(Component, {
                 this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft;
                 this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop;
 
-                this.userContentLeft = -this._scrollLeft;
-                this.userContentTop = -this._scrollTop;
+                this.userContentLeft = this._documentOffsetLeft - this._scrollLeft;
+                this.userContentTop = this._documentOffsetTop - this._scrollTop;
 
                 // TODO - scroll events are not dependable.  We may need to use a timer to simulate
                 // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values
@@ -581,7 +612,7 @@ exports.Stage = Montage.create(Component, {
             var point, element,
                 docView = this.application.ninja.currentDocument.model.views.design;
 
-            point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX - docView.iframe.contentWindow.pageXOffset, position.pageY - docView.iframe.contentWindow.pageYOffset));
+            point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX - docView.iframe.contentWindow.pageXOffset + this.documentOffsetLeft, position.pageY - docView.iframe.contentWindow.pageYOffset + this.documentOffsetTop));
             element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x - this.userContentLeft,point.y - this.userContentTop);
 
             if(!element) debugger;