From 66edf78c7e5df11218ef733686965beab05c7c7d Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 18 May 2012 14:01:00 -0700 Subject: fixing a scrolling issue when multiple documents are switched Signed-off-by: Valerio Virgillito --- js/document/document-html.js | 11 ++++-- js/document/models/html.js | 17 ++++++++++ js/helper-classes/3D/view-utils.js | 9 ----- js/stage/stage.reel/stage.js | 69 ++++++++------------------------------ 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 @@ -27,6 +27,23 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, { draw3DGrid: { value: false }, + //////////////////////////////////////////////////////////////////// + // + scrollLeft: { + value: null + }, + + scrollTop: { + value: null + }, + + userContentLeft: { + value: null + }, + + userContentTop: { + value: null + }, //////////////////////////////////////////////////////////////////// // baseHref: { 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; this._scrollLeft = this._iframeContainer.scrollLeft; this._scrollTop = this._iframeContainer.scrollTop; -- cgit v1.2.3