From 9c8fbdd11fdbe9ae73d57147de84b799c5a87652 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 30 Apr 2012 16:15:47 -0700 Subject: Squashed commit of stage architecture Signed-off-by: Valerio Virgillito --- js/controllers/document-controller.js | 2 + js/controllers/elements/body-controller.js | 11 ++++ js/document/templates/montage-web/default_html.css | 9 +++ js/document/templates/montage-web/index.html | 12 +--- js/stage/layout.js | 2 +- js/stage/stage.reel/stage.js | 73 +++++++++++++--------- js/tools/SelectionTool.js | 6 +- 7 files changed, 71 insertions(+), 44 deletions(-) diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 4be0767a..7795a74d 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -483,6 +483,8 @@ var DocumentController = exports.DocumentController = Montage.create(Component, if(!this.webTemplate) { this._showCurrentDocument(); + } else { + this.application.ninja.stage.stageView.showRulers(); } this.webTemplate = false; diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js index fbbb7c6e..839d0787 100755 --- a/js/controllers/elements/body-controller.js +++ b/js/controllers/elements/body-controller.js @@ -12,6 +12,17 @@ exports.BodyController = Montage.create(ElementController, { // TODO - perspective distance needs to be passed in as "dist" and matrix3d needs to be passed in as "mat" set3DProperties: { value: function(el, props, update3DModel) { + var dist = props["dist"], mat = props["mat"]; + this.application.ninja.stylesController.setElementStyle(el, "-webkit-transform", "perspective(" + dist + ") " + "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")", true); + + el.elementModel.props3D.matrix3d = mat; + el.elementModel.props3D.perspectiveDist = dist; + + this.application.ninja.stage.updatedStage = true; + + if(update3DModel) { + this._update3DProperties(el, mat, dist); + } } }, diff --git a/js/document/templates/montage-web/default_html.css b/js/document/templates/montage-web/default_html.css index 08e39f22..e62a20a9 100755 --- a/js/document/templates/montage-web/default_html.css +++ b/js/document/templates/montage-web/default_html.css @@ -10,6 +10,15 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot -webkit-animation-name: none !important; } +body { + margin: 0; + padding: 0; + + position: absolute; + -webkit-transform-style: preserve-3d; + -webkit-perspective: 1400px; +} + .active-element-outline { outline: #adff2f solid 2px; } diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html index 630794a4..caebc8d0 100755 --- a/js/document/templates/montage-web/index.html +++ b/js/document/templates/montage-web/index.html @@ -29,20 +29,10 @@ } - - - - - + \ No newline at end of file diff --git a/js/stage/layout.js b/js/stage/layout.js index a096848e..0a76dbe5 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -174,7 +174,7 @@ exports.Layout = Montage.create(Component, { var tmpMat = viewUtils.getLocalToGlobalMatrix( item ); var zoomFactor = 1; - if (this.stage._viewport.style && this.stage._viewport.style.zoom) { + if (this.stage._viewport && this.stage._viewport.style && this.stage._viewport.style.zoom) { zoomFactor = Number(this.stage._viewport.style.zoom); } diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 1ea14d64..515165bf 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -231,33 +231,43 @@ exports.Stage = Montage.create(Component, { this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11; this._documentRoot = this.application.ninja.currentDocument.documentRoot; - 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; // 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.userContentBorder = 1; //parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border")); + 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._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder; - this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder; + this._scrollLeft = 0; + this._scrollTop = 0; + this._userContentLeft = 0; + this._userContentTop = 0; + + this.application.ninja.currentDocument._window.addEventListener("scroll", this, false); + } - this.application.ninja.currentDocument.iframe.style.opacity = 1.0; - this._iframeContainer.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); @@ -415,13 +425,10 @@ exports.Stage = Montage.create(Component, { handleSelectionChange: { value: function(event) { // TODO - this is a hack for now because some tools depend on selectionDrawn event for some logic - if(this.drawNow) - { + if(this.drawNow) { this.draw(); this.drawNow = false; - } - else - { + } else { this.needsDraw = true; } } @@ -444,11 +451,20 @@ exports.Stage = Montage.create(Component, { */ handleScroll: { value: function() { - this._scrollLeft = this._iframeContainer.scrollLeft; - this._scrollTop = this._iframeContainer.scrollTop; + // TODO: Remove marker for old template: NINJA-STAGE-REWORK + if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") { + 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; + this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder; + this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder; + } else { + this._scrollLeft = this.application.ninja.currentDocument.documentRoot.scrollLeft; + this._scrollTop = this.application.ninja.currentDocument.documentRoot.scrollTop; + + this.userContentLeft = -this._scrollLeft; + this.userContentTop = -this._scrollTop; + } // Need to clear the snap cache and set up the drag plane //snapManager.setupDragPlaneFromPlane( workingPlane ); @@ -457,7 +473,6 @@ exports.Stage = Montage.create(Component, { this.needsDraw = true; this.layout.draw(); //this._toolsList.action("DrawHandles"); - } }, @@ -687,7 +702,7 @@ exports.Stage = Montage.create(Component, { // } var zoomFactor = 1; - if (this._viewport.style && this._viewport.style.zoom) { + if (this._viewport && this._viewport.style && this._viewport.style.zoom) { zoomFactor = Number(this._viewport.style.zoom); } diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 9c9aee93..f7b583b5 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -753,10 +753,10 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { var zoomFactor = 1; var viewPort = this.application.ninja.stage._viewport; - if (viewPort.style && viewPort.style.zoom) - { + if (viewPort && viewPort.style && viewPort.style.zoom) { zoomFactor = Number(viewPort.style.zoom); } + var tmpMat = viewUtils.getLocalToGlobalMatrix( item ); for (var j=0; j<4; j++) { @@ -865,7 +865,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { var zoomFactor = 1; var viewPort = this.application.ninja.stage._viewport; - if (viewPort.style && viewPort.style.zoom) + if (viewPort && viewPort.style && viewPort.style.zoom) { zoomFactor = Number(viewPort.style.zoom); } -- cgit v1.2.3