fixing a scrolling issue when multiple documents are switched

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

4 files changed, 40 insertions, 66 deletions

diff --git a/js/document/document-html.js b/js/document/document-html.js
index 0037c94d..983da966 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -139,7 +139,11 @@ exports.HtmlDocument = Montage.create(Component, {
             //this.gridVerticalSpacing = this.application.ninja.stage.drawUtils.gridVerticalSpacing;
 
             // Serialize the current scroll position
-            // TODO: Implement
+            this.model.scrollLeft = this.application.ninja.stage._scrollLeft;
+            this.model.scrollTop = this.application.ninja.stage._scrollTop;
+            this.model.userContentLeft = this.application.ninja.stage._userContentLeft;
+            this.model.userContentTop = this.application.ninja.stage._userContentTop;
+
 
             // Serialize the selection
             this.model.selection = this.application.ninja.selectedElements.slice(0);
@@ -163,7 +167,10 @@ exports.HtmlDocument = Montage.create(Component, {
             //this.application.ninja.stage.drawUtils.gridVerticalSpacing = this.gridVerticalSpacing;
 
             // Deserialize the current scroll position
-            // TODO: Implement
+            this.application.ninja.stage._scrollLeft = this.model.scrollLeft;
+            this.application.ninja.stage._scrollTop = this.model.scrollTop;
+            this.application.ninja.stage._userContentLeft = this.model.userContentLeft;
+            this.application.ninja.stage._userContentTop = this.model.userContentTop;
 
             this.application.ninja.selectedElements = this.model.selection.slice(0);
 
diff --git a/js/document/models/html.js b/js/document/models/html.js
index 67457863..a97b4b5a 100755
--- a/js/document/models/html.js
+++ b/js/document/models/html.js
@@ -28,6 +28,23 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, {
         value: false
     },
     ////////////////////////////////////////////////////////////////////
+    //
+    scrollLeft: {
+        value: null
+    },
+
+    scrollTop: {
+        value: null
+    },
+
+    userContentLeft: {
+        value: null
+    },
+
+    userContentTop: {
+        value: null
+    },
+    ////////////////////////////////////////////////////////////////////
         //
         baseHref: {
                 value: null
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js
index 20f61be1..75530af3 100755
--- a/js/helper-classes/3D/view-utils.js
+++ b/js/helper-classes/3D/view-utils.js
@@ -1303,15 +1303,6 @@ exports.ViewUtils = Montage.create(Component, {
 //      MISCELLANEOUS
 //      event.layerX/Y:                                 var pt = viewUtils.getMousePoint(event);
 
-    getStageDimension: {
-        value: function()
-        {
-            var width = parseInt(this.application.ninja.stage.documentRoot.elementModel.stageDimension.style.getProperty("width"));
-            var height= parseInt(this.application.ninja.stage.documentRoot.elementModel.stageDimension.style.getProperty("height"));
-            return[width,height];
-        }
-    },
-
     getStage: {
         value: function()
                 {
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 8da89fb9..73d3aaf4 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -108,7 +108,6 @@ exports.Stage = Montage.create(Component, {
     // We will set this to false while moving objects to improve performance
     showSelectionBounds: { value: true },
 
-    _documentRoot:          { value: null },
     _viewport:              { value: null },
     _documentOffsetLeft:    { value: 0 },
     _documentOffsetTop:     { value: 0 },
@@ -121,11 +120,6 @@ exports.Stage = Montage.create(Component, {
     _maxHorizontalScroll:   { value: 0 },
     _maxVerticalScroll:     { value: 0 },
 
-    documentRoot: {
-        get: function () { return this._documentRoot; },
-        set: function(value) { this._documentRoot = value; }
-    },
-
     viewport: {
         get: function () { return this._viewport; },
         set: function(value) { this._viewport = value; }
@@ -195,10 +189,7 @@ exports.Stage = Montage.create(Component, {
         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.application.ninja.currentDocument.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px";
             this.userContentLeft = this._documentOffsetLeft;
             this.updatedStage = true;
         }
@@ -209,10 +200,7 @@ exports.Stage = Montage.create(Component, {
         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.application.ninja.currentDocument.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px";
             this.userContentTop = this._documentOffsetTop;
             this.updatedStage = true;
         }
@@ -287,46 +275,17 @@ exports.Stage = Montage.create(Component, {
             this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ;
             this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;
 
-            this._documentRoot = this.application.ninja.currentDocument.documentRoot;
-
-            // Hardcode this value so that it does not fail for the new stage architecture
-            // TODO: Remove marker for old template: NINJA-STAGE-REWORK
-            if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
-                this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode;
-
-                this.documentOffsetLeft = this._viewport.offsetLeft;
-                this.documentOffsetTop = this._viewport.offsetTop;
-
-                // Center the stage
-                this.centerStage();
-
-                this._scrollLeft = this._iframeContainer.scrollLeft;
-                this._scrollTop = this._iframeContainer.scrollTop;
-                this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
-                this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop;
-
-                this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border"));
-
-                this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
-                this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
-
-                this._iframeContainer.addEventListener("scroll", this, false);
 
-                this.application.ninja.currentDocument.iframe.style.opacity = 1.0;
-            } else {
-                this.userContentBorder = 0;
-
-                this._scrollLeft = 0;
-                this._scrollTop = 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;
-                this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addEventListener("scroll", this, false);
-            }
+            this.userContentBorder = 0;
 
+            this._scrollLeft = 0;
+            this._scrollTop = 0;
+            this._userContentLeft = this._documentOffsetLeft;
+            this._userContentTop = this._documentOffsetTop;
 
+            this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11;
+            this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11;
+            this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addEventListener("scroll", this, false);
 
             // TODO - We will need to modify this once we support switching between multiple documents
             this.application.ninja.toolsData.selectedToolInstance._configure(true);
@@ -526,8 +485,8 @@ exports.Stage = Montage.create(Component, {
                 // 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
                 // on mouse down.
-//                this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11;
-//                this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11;
+//                this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11;
+//                this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11;
             }
 
             // Need to clear the snap cache and set up the drag plane
@@ -566,8 +525,8 @@ exports.Stage = Montage.create(Component, {
     centerStage: {
         value: function() {
             if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
-                this._iframeContainer.scrollLeft = this._documentOffsetLeft - (this._iframeContainer.offsetWidth - this._documentRoot.parentNode.offsetWidth)/2;
-                this._iframeContainer.scrollTop = this._documentOffsetTop - (this._iframeContainer.offsetHeight - this._documentRoot.parentNode.offsetHeight)/2;
+                this._iframeContainer.scrollLeft = this._documentOffsetLeft - (this._iframeContainer.offsetWidth - this.application.ninja.currentDocument.documentRoot.parentNode.offsetWidth)/2;
+                this._iframeContainer.scrollTop = this._documentOffsetTop - (this._iframeContainer.offsetHeight - this.application.ninja.currentDocument.documentRoot.parentNode.offsetHeight)/2;