From f97590388467b5a3316f6f155162fc293915fddc Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 23 May 2012 16:09:22 -0700 Subject: Fixed scrolling and centering stage code. Also, moved liveNodeList into the design view and added an option to exclude styles and text nodes when retrieving the live nodes. Signed-off-by: Nivesh Rajbhandari --- js/stage/stage.reel/stage.js | 60 +++++++++++++++++++++----------------------- 1 file changed, 28 insertions(+), 32 deletions(-) (limited to 'js/stage/stage.reel/stage.js') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 69cfa7ba..a3903ac7 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -235,14 +235,6 @@ exports.Stage = Montage.create(Component, { this._context = this._canvas.getContext("2d"); this._drawingContext= this._drawingCanvas.getContext("2d"); - this._scrollLeft = this._iframeContainer.scrollLeft; - this._scrollTop = this._iframeContainer.scrollTop; - this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder; - this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder; - - // TODO: Fix the mouse wheel scroll - // this._canvas.addEventListener("mousewheel", this, false); - // Setup event listeners this._drawingCanvas.addEventListener("mousedown", this, false); this._drawingCanvas.addEventListener("mouseup", this, false); @@ -269,30 +261,38 @@ exports.Stage = Montage.create(Component, { // Event details will contain the active document prior to opening a new one handleOpenDocument: { value: function(evt) { + var designView = this.application.ninja.currentDocument.model.views.design; + this.hideCanvas(false); // Recalculate the canvas sizes because of splitter resizing 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.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); + designView.iframe.contentWindow.addEventListener("scroll", this, false); this.addPropertyChangeListener("appModel.show3dGrid", this, false); + this.stageDeps.handleOpenDocument(); this.layout.handleOpenDocument(); + + if(designView._template) { + var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2); + var initialTop = parseInt((this.canvas.height - designView._template.size.height)/2); + if(initialLeft > this.documentOffsetLeft) { + this.userPaddingLeft = -initialLeft; + } + if(initialTop > this.documentOffsetTop) { + this.userPaddingTop = -initialTop; + } + } + + this.centerStage(); + + // TODO - We will need to modify this once we support switching between multiple documents + this.application.ninja.toolsData.selectedToolInstance._configure(true); } }, @@ -485,10 +485,7 @@ exports.Stage = Montage.create(Component, { // Need to clear the snap cache and set up the drag plane //snapManager.setupDragPlaneFromPlane( workingPlane ); this.stageDeps.snapManager._isCacheInvalid = true; - - this.needsDraw = true; - this.layout.draw(); - //this._toolsList.action("DrawHandles"); + this.updatedStage = true; } }, @@ -517,16 +514,15 @@ 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.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; + var designView = this.application.ninja.currentDocument.model.views.design; + if(designView._template) { + designView.document.body.scrollLeft = this._documentOffsetLeft - parseInt((this.canvas.width - designView._template.size.width)/2); + designView.document.body.scrollTop = this._documentOffsetTop - parseInt((this.canvas.height - designView._template.size.height)/2); } else { - this._scrollLeft = this._userContentLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft = 0; - this._scrollTop = this._userContentTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop = 0; + designView.document.body.scrollLeft = this._documentOffsetLeft; + designView.document.body.scrollTop = this._documentOffsetTop; } + this.handleScroll(); } }, -- cgit v1.2.3 From 5914c5b2209c4b8daac4249bb76cda5c9314c4e6 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 24 May 2012 00:07:23 -0700 Subject: Cleaning up referencing to 'documentRoot' and '_document' Moved to reference new model in DOM architecture rework. This should not affect anything, just moving the references, and also the setting to the render methods in the design view. --- js/stage/stage.reel/stage.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'js/stage/stage.reel/stage.js') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 69cfa7ba..f3c096d8 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -189,7 +189,7 @@ exports.Stage = Montage.create(Component, { set: function(value) { this._userPaddingLeft = value; this._documentOffsetLeft = -value; - this.application.ninja.currentDocument.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; + this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; this.userContentLeft = this._documentOffsetLeft; this.updatedStage = true; } @@ -200,7 +200,7 @@ exports.Stage = Montage.create(Component, { set: function(value) { this._userPaddingTop = value; this._documentOffsetTop = -value; - this.application.ninja.currentDocument.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; + this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; this.userContentTop = this._documentOffsetTop; this.updatedStage = true; } @@ -283,8 +283,8 @@ exports.Stage = Montage.create(Component, { 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._maxHorizontalScroll = this.application.ninja.currentDocument.model.documentRoot.scrollWidth - this._canvas.width - 11; + this._maxVerticalScroll = this.application.ninja.currentDocument.model.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 @@ -478,8 +478,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.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11; - // this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11; + // this._maxHorizontalScroll = this.application.ninja.currentDocument.model.documentRoot.scrollWidth - this._canvas.width - 11; + // this._maxVerticalScroll = this.application.ninja.currentDocument.model.documentRoot.scrollHeight - this._canvas.height - 11; // Need to clear the snap cache and set up the drag plane @@ -517,9 +517,9 @@ 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.application.ninja.currentDocument.documentRoot.parentNode.offsetWidth)/2; - this._iframeContainer.scrollTop = this._documentOffsetTop - (this._iframeContainer.offsetHeight - this.application.ninja.currentDocument.documentRoot.parentNode.offsetHeight)/2; + if(this.application.ninja.currentDocument.model.documentRoot.id === "UserContent") { + this._iframeContainer.scrollLeft = this._documentOffsetLeft - (this._iframeContainer.offsetWidth - this.application.ninja.currentDocument.model.documentRoot.parentNode.offsetWidth)/2; + this._iframeContainer.scrollTop = this._documentOffsetTop - (this._iframeContainer.offsetHeight - this.application.ninja.currentDocument.model.documentRoot.parentNode.offsetHeight)/2; this._scrollLeft = this._iframeContainer.scrollLeft; this._scrollTop = this._iframeContainer.scrollTop; @@ -889,7 +889,7 @@ exports.Stage = Montage.create(Component, { setStageAsViewport: { value: function() { - this.stageDeps.viewUtils.setViewportObj(this.application.ninja.currentDocument.documentRoot); + this.stageDeps.viewUtils.setViewportObj(this.application.ninja.currentDocument.model.documentRoot); } }, @@ -897,7 +897,7 @@ exports.Stage = Montage.create(Component, { value: function(value) { if(!this._firstDraw) { - var userContent = this.application.ninja.currentDocument.documentRoot; + var userContent = this.application.ninja.currentDocument.model.documentRoot; if (userContent) { var w = this._canvas.width, @@ -928,12 +928,12 @@ exports.Stage = Montage.create(Component, { { case "top": plane = [0,1,0,0]; - plane[3] = this.application.ninja.currentDocument.documentRoot.offsetHeight / 2.0; + plane[3] = this.application.ninja.currentDocument.model.documentRoot.offsetHeight / 2.0; break; case "side": plane = [1,0,0,0]; - plane[3] = this.application.ninja.currentDocument.documentRoot.offsetWidth / 2.0; + plane[3] = this.application.ninja.currentDocument.model.documentRoot.offsetWidth / 2.0; break; case "front": @@ -952,7 +952,7 @@ exports.Stage = Montage.create(Component, { setStageView: { value: function(side) { var mat, - currentDoc = this.application.ninja.currentDocument.documentRoot, + currentDoc = this.application.ninja.currentDocument.model.documentRoot, isDrawingGrid = this.application.ninja.appModel.show3dGrid; // Stage 3d Props. currentDoc.elementModel.props3D.ResetTranslationValues(); -- cgit v1.2.3 From 8fdf7567a7967208f554657c6c6d5665ab55e118 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 24 May 2012 06:10:05 -0700 Subject: Update stage to handle switching between documents. Signed-off-by: Nivesh Rajbhandari --- js/stage/stage.reel/stage.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'js/stage/stage.reel/stage.js') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index a3903ac7..ad05f1cc 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -248,6 +248,7 @@ exports.Stage = Montage.create(Component, { this.eventManager.addEventListener( "openDocument", this, false); + this.eventManager.addEventListener( "switchDocument", this, false); this.eventManager.addEventListener( "enableStageMove", this, false); this.eventManager.addEventListener( "disableStageMove", this, false); @@ -260,6 +261,18 @@ exports.Stage = Montage.create(Component, { // Event details will contain the active document prior to opening a new one handleOpenDocument: { + value: function(evt) { + this._initFromDocument(evt); + } + }, + + handleSwitchDocument: { + value: function(evt) { + this._initFromDocument(evt); + } + }, + + _initFromDocument: { value: function(evt) { var designView = this.application.ninja.currentDocument.model.views.design; -- cgit v1.2.3 From 209ec9524a987a8f8bc20c57e2a76ac55be15fd9 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 24 May 2012 11:11:47 -0700 Subject: Fixed selection bug when switching/opening documents. Also, use saved scroll values when switching between documents. Signed-off-by: Nivesh Rajbhandari --- js/stage/stage.reel/stage.js | 40 +++++++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 17 deletions(-) (limited to 'js/stage/stage.reel/stage.js') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index ad05f1cc..6d421e4b 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -117,9 +117,6 @@ exports.Stage = Montage.create(Component, { _userContentTop: { value: 0 }, _userContentBorder: { value: 0 }, - _maxHorizontalScroll: { value: 0 }, - _maxVerticalScroll: { value: 0 }, - viewport: { get: function () { return this._viewport; }, set: function(value) { this._viewport = value; } @@ -262,18 +259,18 @@ exports.Stage = Montage.create(Component, { // Event details will contain the active document prior to opening a new one handleOpenDocument: { value: function(evt) { - this._initFromDocument(evt); + this.initWithDocument(); } }, handleSwitchDocument: { value: function(evt) { - this._initFromDocument(evt); + this.initWithDocument(true); } }, - _initFromDocument: { - value: function(evt) { + initWithDocument: { + value: function(didSwitch) { var designView = this.application.ninja.currentDocument.model.views.design; this.hideCanvas(false); @@ -282,12 +279,22 @@ 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._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11; - this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11; designView.iframe.contentWindow.addEventListener("scroll", this, false); this.addPropertyChangeListener("appModel.show3dGrid", this, false); + this._userPaddingLeft = 0; + this._userPaddingTop = 0; + + this._documentOffsetLeft = 0; + this._documentOffsetTop = 0; + + this._userContentLeft = 0; + this._userContentTop = 0; + + this._scrollLeft = 0; + this._scrollTop = 0; + this.stageDeps.handleOpenDocument(); this.layout.handleOpenDocument(); @@ -302,7 +309,13 @@ exports.Stage = Montage.create(Component, { } } - this.centerStage(); + if(didSwitch) { + this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft = this.application.ninja.currentDocument.model.scrollLeft; + this.application.ninja.currentDocument.model.views.design.document.body.scrollTop = this.application.ninja.currentDocument.model.scrollTop; + this.handleScroll(); + } else { + this.centerStage(); + } // TODO - We will need to modify this once we support switching between multiple documents this.application.ninja.toolsData.selectedToolInstance._configure(true); @@ -488,13 +501,6 @@ exports.Stage = Montage.create(Component, { 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 - // on mouse down. - // 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 //snapManager.setupDragPlaneFromPlane( workingPlane ); this.stageDeps.snapManager._isCacheInvalid = true; -- cgit v1.2.3