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/document/document-html.js | 2 +- js/document/views/design.js | 42 ++++++++++++++++++++++++-- js/helper-classes/3D/draw-utils.js | 19 +++++++----- js/helper-classes/3D/view-utils.js | 13 ++------- js/stage/layout.js | 11 +++---- js/stage/stage-deps.js | 50 ++++--------------------------- js/stage/stage.reel/stage.js | 60 ++++++++++++++++++-------------------- 7 files changed, 95 insertions(+), 102 deletions(-) diff --git a/js/document/document-html.js b/js/document/document-html.js index f92a425c..2fc32791 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -98,7 +98,7 @@ exports.HtmlDocument = Montage.create(Component, { this.documentRoot = this.model.views.design.document.body; } //TODO: Why is this needed? - this._liveNodeList = this.documentRoot.getElementsByTagName('*'); + this.model.views.design._liveNodeList = this.documentRoot.getElementsByTagName('*'); //Initiliazing document model document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body"); //Adding observer to know when template is ready diff --git a/js/document/views/design.js b/js/document/views/design.js index b3887fdf..427ef706 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -67,7 +67,43 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { propertiesPanel: { value: null }, + //////////////////////////////////////////////////////////////////// + // + _liveNodeList: { + value: null + }, + + getLiveNodeList: { + value: function(useFilter) { + if(useFilter) { + var filteredNodes = [], + childNodes = Array.prototype.slice.call(this._liveNodeList, 0); + + childNodes.forEach(function(item) { + if( (item.nodeType === 1) && (item.nodeName !== "STYLE") && (item.nodeName !== "SCRIPT")) { + filteredNodes.push(item); + } + }); + return filteredNodes; + } else { + return this._liveNodeList; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + + initialPaddingLeft: { + value: 0 + }, + + initialPaddingTop: { + value: 0 + }, + //////////////////////////////////////////////////////////////////// + // + // initialize: { value: function (parent) { @@ -190,8 +226,10 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { //Calling standard method to finish opening document this.bodyContentLoaded(null); //TODO: Move this to be set via the controller - this.application.ninja.stage.documentOffsetLeft = parseInt((this.document.body.scrollWidth - this._template.size.width)/2); - this.application.ninja.stage.documentOffsetTop = parseInt((this.document.body.scrollHeight - this._template.size.height)/2); +// this.application.ninja.stage.documentOffsetLeft = parseInt((this.document.body.scrollWidth - this._template.size.width)/2); +// this.application.ninja.stage.documentOffsetTop = parseInt((this.document.body.scrollHeight - this._template.size.height)/2); +// this.initialPaddingLeft = parseInt((this.document.body.scrollWidth - this._template.size.width)/2); +// this.initialPaddingTop = parseInt((this.document.body.scrollHeight - this._template.size.height)/2); } }, //////////////////////////////////////////////////////////////////// diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index bf48a723..79be5c14 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -119,7 +119,10 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { initializeFromDocument:{ value:function(){ - var documentRootChildren = null, i, stage = this.application.ninja.stage; + 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 = []; @@ -128,11 +131,11 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { 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; - var len = documentRootChildren.length, - minLeft = stage.userPaddingLeft, - minTop = stage.userPaddingTop, + if(len > 0) { + var initL = 0, + initT = 0, + minLeft = 0, + minTop = 0, docLeft = stage.documentOffsetLeft, docTop = stage.documentOffsetTop, l, @@ -151,10 +154,10 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { minTop = t; } } - if(minLeft !== stage.userPaddingLeft) { + if(minLeft !== initL) { stage.userPaddingLeft = minLeft; } - if(minTop !== stage.userPaddingTop) { + if(minTop !== initT) { stage.userPaddingTop = minTop; } } diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index 0080bf90..24b30298 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -24,9 +24,6 @@ exports.ViewUtils = Montage.create(Component, { // keep a stack of viewport objects _viewportObjStack: { value: []}, - _userContentLeft: { value: null}, - _userContentTop: { value: null}, - /////////////////////////////////////////////////////////////////////// // Property accessors /////////////////////////////////////////////////////////////////////// @@ -39,9 +36,6 @@ exports.ViewUtils = Montage.create(Component, { }, getViewportObj: { value: function() { return this.m_viewportObj; } }, - setUserContentLeft: { value: function(value) { this._userContentLeft = value; }}, - setUserContentTop: { value: function(value) { this._userContentTop = value; }}, - getPerspectiveDistance: { value: function () { return this._perspectiveDist; } }, /////////////////////////////////////////////////////////////////////// @@ -385,7 +379,7 @@ exports.ViewUtils = Montage.create(Component, { // transform the bounds up the tree var parent = child.offsetParent; // TODO - Should have a different way to check for new template mode - if ( parent || ((child === this.application.ninja.currentDocument.documentRoot) && (child.id !== "UserContent")) ) + if ( parent || (child === this.application.ninja.currentDocument.documentRoot) ) { this.setViewportObj( child ); @@ -703,8 +697,8 @@ exports.ViewUtils = Montage.create(Component, { { // TODO - Call a routine from the user document controller to get the offsets/margins // Once we expose the document controller to ViewUtils - offset[0] += this._userContentLeft; - offset[1] += this._userContentTop; + offset[0] += this.application.ninja.stage._userContentLeft; + offset[1] += this.application.ninja.stage._userContentTop; } return offset; @@ -1282,7 +1276,6 @@ exports.ViewUtils = Montage.create(Component, { // stageManager._canvas: this.application.ninja.stage.canvas // stageManager.layoutCanvas: this.application.ninja.stage.layoutCanvas // stageManager.drawingCanvas: this.application.ninja.stage.drawingCanvas -// stageManager.userContentLeft this.application.ninja.stage.userContentLeft // viewUtils: stage.viewUtils; // snapManager stage.snapManager; // diff --git a/js/stage/layout.js b/js/stage/layout.js index 9c5e2167..107e8abf 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -64,10 +64,10 @@ exports.Layout = Montage.create(Component, { if(this.application.ninja.documentController.activeDocument.currentView === "design") { this.elementsToDraw = this.application.ninja.documentController.activeDocument.documentRoot.childNodes; } - - // Draw the elements and the 3d info - this.draw(); - this.draw3DInfo(false); +// +// // Draw the elements and the 3d info +// this.draw(); +// this.draw3DInfo(false); } }, @@ -89,7 +89,8 @@ exports.Layout = Montage.create(Component, { if(this.application.ninja.documentController.activeDocument.currentView === "design"){ // Make an array copy of the line node list which is not an array like object - this.domTree = Array.prototype.slice.call(this.application.ninja.documentController.activeDocument._liveNodeList, 0); +// this.domTree = Array.prototype.slice.call(this.application.ninja.documentController.activeDocument._liveNodeList, 0); + this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true); // Index of the current container containerIndex = this.domTree.indexOf(this.application.ninja.currentSelectedContainer); diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js index 0d53696b..d018b03b 100755 --- a/js/stage/stage-deps.js +++ b/js/stage/stage-deps.js @@ -26,38 +26,12 @@ exports.StageDeps = Montage.create(Component, { value: drawUtils }, - _userContentLeft: { - value: null - }, - - userContentLeft: { - get: function() { return this._userContentLeft; }, - set: function(value) { - if(value != null) { - viewUtils.setUserContentLeft(value); - } - } - }, - - _userContentTop: { - value: null - }, - - userContentTop: { - get: function() { return this._userContentTop; }, - set: function(value) { - if(value != null) { - viewUtils.setUserContentTop(value); - } - } - }, - deserializedFromTemplate: { value: function() { this.eventManager.addEventListener("appLoaded", this, false); - this.eventManager.addEventListener("openDocument", this, false); - this.eventManager.addEventListener("switchDocument", this, false); +// this.eventManager.addEventListener("openDocument", this, false); +// this.eventManager.addEventListener("switchDocument", this, false); // Initialize Deps // HACK @@ -76,19 +50,6 @@ exports.StageDeps = Montage.create(Component, { handleAppLoaded: { value: function() { - - Object.defineBinding(this, "userContentLeft", { - boundObject: this.stage, - boundObjectPropertyPath: "_userContentLeft", - oneway: true - }); - - Object.defineBinding(this, "userContentTop", { - boundObject: this.stage, - boundObjectPropertyPath: "_userContentTop", - oneway: true - }); - // Setup the snap manager pointer to the app model snapManager.appModel = this.application.ninja.appModel; // bind the snap properties to the snap manager @@ -105,7 +66,8 @@ exports.StageDeps = Montage.create(Component, { workingPlane = [0,0,1,0]; - snapManager.reload2DCache(); +// snapManager.reload2DCache(); + snapManager._isCacheInvalid = true; snapManager.setupDragPlaneFromPlane (workingPlane); drawUtils.initializeFromDocument(); @@ -116,9 +78,9 @@ exports.StageDeps = Montage.create(Component, { value: function(){ workingPlane = [0,0,1,0]; + snapManager._isCacheInvalid = true; snapManager.setupDragPlaneFromPlane (workingPlane); - snapManager.reload2DCache(); - +// snapManager.reload2DCache(); drawUtils.initializeFromDocument(); } 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