From 8f1385d4aa12173fb4d9af695b8e5036f675b621 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 4 May 2012 14:39:33 -0700 Subject: Fixing selection and layout code to exclude SCRIPT and STYLE tags. Signed-off-by: Nivesh Rajbhandari --- js/controllers/selection-controller.js | 11 +++++++++-- js/stage/layout.js | 2 +- js/tools/SelectionTool.js | 5 +++-- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js index 5665b09c..77c065ae 100755 --- a/js/controllers/selection-controller.js +++ b/js/controllers/selection-controller.js @@ -112,12 +112,12 @@ exports.SelectionController = Montage.create(Component, { handleSelectAll: { value: function(event) { - var selected = [], childNodes = []; + var selected = [], childNodes = [], self = this; childNodes = this.application.ninja.currentDocument.documentRoot.childNodes; childNodes = Array.prototype.slice.call(childNodes, 0); childNodes.forEach(function(item) { - if(item.nodeType == 1) { + if(self.isNodeTraversable(item)) { selected.push(item); } }); @@ -281,6 +281,13 @@ exports.SelectionController = Montage.create(Component, { return -1; } + }, + + isNodeTraversable: { + value: function( item ) { + if(item.nodeType !== 1) return false; + return ((item.nodeName !== "STYLE") && (item.nodeName !== "SCRIPT")); + } } }); diff --git a/js/stage/layout.js b/js/stage/layout.js index 0a76dbe5..9c5e2167 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -156,7 +156,7 @@ exports.Layout = Montage.create(Component, { drawTagOutline: { value: function (item) { - if(!item || (item.nodeType !== 1)) return; + if(!item || !this.application.ninja.selectionController.isNodeTraversable(item)) return; // TODO Bind the layoutview mode to the current document // var mode = this.application.ninja.currentDocument.layoutMode; diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 855c7b8c..d3e4ebf9 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -165,10 +165,11 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { box[3] = point.y; //selectionManagerModule.selectionManager.marqueeSelection(box); - var childNodes = this.application.ninja.currentDocument.documentRoot.childNodes; + var childNodes = this.application.ninja.currentDocument.documentRoot.childNodes, + selectionController = this.application.ninja.selectionController; childNodes = Array.prototype.slice.call(childNodes, 0); childNodes.forEach(function(item) { - if(item.nodeType == 1 && SelectionTool._complicatedCollisionDetection(item, box)) { + if(selectionController.isNodeTraversable(item) && SelectionTool._complicatedCollisionDetection(item, box)) { selectedItems.push(item); } }); -- cgit v1.2.3 From 8f8f7f9a36fb9abadea2a9f25aef0084946bebc9 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 4 May 2012 14:42:00 -0700 Subject: Removed special-casing for new template workflow. Instead, we will enforce a width and height on the body in order to do 3d. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/body-controller.js | 28 ++++++++++++++++++++++ js/document/templates/montage-web/default_html.css | 5 +++- js/helper-classes/3D/draw-utils.js | 12 ++-------- js/helper-classes/3D/snap-manager.js | 12 ++-------- js/helper-classes/3D/view-utils.js | 8 ++++--- js/tools/RotateStage3DTool.js | 18 +------------- 6 files changed, 42 insertions(+), 41 deletions(-) diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js index 14aeae24..943594f2 100755 --- a/js/controllers/elements/body-controller.js +++ b/js/controllers/elements/body-controller.js @@ -28,11 +28,39 @@ exports.BodyController = Montage.create(ElementController, { getProperty: { value: function(el, p) { + switch(p) { + case "background" : + return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color", true, true)); + case "border": + return 0; + case "height": + case "width": + case "-webkit-transform-style": + return this.application.ninja.stylesController.getElementStyle(el, p, true, true); + default: + return ElementController.getProperty(el, p, true, true); + //console.log("Undefined Stage property ", p); + } } }, setProperty: { value: function(el, p, value) { + switch(p) { + case "body-background": + case "background": + this.application.ninja.stylesController.setElementStyle(el, "background-color", value, true); + break; + case "overflow": + case "width": + case "height": + case "-webkit-transform-style": + this.application.ninja.stylesController.setElementStyle(el, p, value, true); + this.application.ninja.stage.updatedStage = true; + break; + default: + console.log("Undefined property ", p, "for the Body Controller"); + } } }, diff --git a/js/document/templates/montage-web/default_html.css b/js/document/templates/montage-web/default_html.css index e62a20a9..7979d1e9 100755 --- a/js/document/templates/montage-web/default_html.css +++ b/js/document/templates/montage-web/default_html.css @@ -16,7 +16,10 @@ body { position: absolute; -webkit-transform-style: preserve-3d; - -webkit-perspective: 1400px; + -webkit-transform: perspective(1400) matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); + + width: 1460px; + height: 880px; } .active-element-outline { diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 88830964..f869f65e 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -584,18 +584,10 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { var ptOnPlane = MathUtils.getPointOnPlane(this._workingPlane); // define the grid parameters - var width, - height, + var width = this.snapManager.getStageWidth(), + height = this.snapManager.getStageHeight(), nLines = 10; -// if(this.application.ninja.documentController.webTemplate) { - if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") { - width = this.application.ninja.currentDocument.documentRoot.scrollWidth; - height = this.application.ninja.currentDocument.documentRoot.scrollHeight; - } else { - width = this.snapManager.getStageWidth(); - height = this.snapManager.getStageHeight(); - } // get a matrix from working plane space to the world var mat = this.getPlaneToWorldMatrix(zAxis, ptOnPlane); var tMat = Matrix.Translation( [0.5*width, 0.5*height, 0] ); diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index f4bfc12b..31e3e540 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -1617,11 +1617,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { if (x > y) { if (x > z) { plane[0] = 1; - if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") { - plane[3] = stage.scrollWidth / 2.0; - } else { - plane[3] = this.getStageWidth() / 2.0; - } + plane[3] = this.getStageWidth() / 2.0; if (dir[0] > 0) plane[3] = -plane[3]; change = !drawUtils.drawYZ; drawUtils.drawXY = drawUtils.drawXZ = false; @@ -1639,11 +1635,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { else { if (y > z) { plane[1] = 1; - if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") { - plane[3] = stage.scrollHeight / 2.0; - } else { - plane[3] = this.getStageHeight() / 2.0; - } + plane[3] = this.getStageHeight() / 2.0; if (dir[1] > 0) plane[3] = -plane[3]; change = !drawUtils.drawXZ; drawUtils.drawXY = drawUtils.drawYZ = false; diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index 40a19b90..36d6f8c4 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -309,11 +309,12 @@ exports.ViewUtils = Montage.create(Component, { // transform the bounds up the tree var child = elt; var parent = elt.offsetParent; - while ( parent ) + while ( child ) { pt = this.childToParent( pt, child ); - if (parent === this._rootElement) break; +// if (parent === this._rootElement) break; + if (child === this._stageElement) break; child = parent; parent = parent.offsetParent; @@ -352,7 +353,8 @@ exports.ViewUtils = Montage.create(Component, { // transform the bounds up the tree var parent = child.offsetParent; - if ( parent ) + // TODO - Should have a different way to check for new template mode + if ( parent || ((child === this.application.ninja.currentDocument.documentRoot) && (child.id !== "UserContent")) ) { this.setViewportObj( child ); diff --git a/js/tools/RotateStage3DTool.js b/js/tools/RotateStage3DTool.js index 2a9c63db..90cbe95e 100755 --- a/js/tools/RotateStage3DTool.js +++ b/js/tools/RotateStage3DTool.js @@ -96,12 +96,6 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { viewUtils.pushViewportObj( stage ); var eltCtr = viewUtils.getCenterOfProjection(); viewUtils.popViewportObj(); -// if(this.application.ninja.documentController.webTemplate) - if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") - { - eltCtr[0] = stage.scrollWidth/2; - eltCtr[1] = stage.scrollHeight/2; - } var curMat = viewUtils.getMatrixFromElement(stage); var curMatInv = glmat4.inverse(curMat, []); @@ -118,17 +112,7 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { } this._origin = viewUtils.localToGlobal(eltCtr, stage); - -// if(this.application.ninja.documentController.webTemplate) - if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") - { - this._startOriginArray = []; - this._startOriginArray.push(this._origin.slice()); - } - else - { - this._setTransformOrigin(false); - } + this._setTransformOrigin(false); this.DrawHandles(); } }, -- cgit v1.2.3 From 3ad9024bcfce76e28816daa02bac14fc8985ca62 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 4 May 2012 15:32:25 -0700 Subject: Fixing body's default styles. Signed-off-by: Nivesh Rajbhandari --- js/document/templates/montage-web/index.html | 7 ++++++- js/io/templates/files/html.txt | 4 ++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html index 1c6b6287..47964ae4 100755 --- a/js/document/templates/montage-web/index.html +++ b/js/document/templates/montage-web/index.html @@ -23,8 +23,13 @@ padding: 0; position: absolute; -webkit-transform-style: preserve-3d; - -webkit-perspective: 1400px; + -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } + + html, body { + width: 100%; + height: 100%; + } ninjaloadinghack { display: none; diff --git a/js/io/templates/files/html.txt b/js/io/templates/files/html.txt index 15641348..4e42267e 100755 --- a/js/io/templates/files/html.txt +++ b/js/io/templates/files/html.txt @@ -9,6 +9,10 @@ -- cgit v1.2.3 From efe62dff2ba6894551fb9679d150255bae5af36e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 4 May 2012 16:00:14 -0700 Subject: Draw 3d grid by default since app model is not hooked up yet. Signed-off-by: Nivesh Rajbhandari --- js/document/document-html.js | 10 ++++++++-- js/document/models/html.js | 4 ++++ js/document/views/design.js | 2 +- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/js/document/document-html.js b/js/document/document-html.js index deca9f83..f3c135ed 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -41,7 +41,7 @@ exports.HtmlDocument = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // exclusionList: { - value: [] //TODO: Update to correct list + value: ["HTML", "BODY"] //TODO: Update to correct list }, //////////////////////////////////////////////////////////////////// // @@ -73,7 +73,7 @@ exports.HtmlDocument = Montage.create(Component, { views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic }); //Initiliazing views and hiding - if (this.model.views.design.initiliaze(document.getElementById("iframeContainer"))) { + if (this.model.views.design.initialize(document.getElementById("iframeContainer"))) { //Hiding iFrame, just initiliazing this.model.views.design.hide(); } else { @@ -115,6 +115,12 @@ exports.HtmlDocument = Montage.create(Component, { this.loaded.callback.call(this.loaded.context, this); //Setting opacity to be viewable after load this.model.views.design.iframe.style.opacity = 1; + + + + + + this.application.ninja.appModel.show3dGrid = true; } } //////////////////////////////////////////////////////////////////// diff --git a/js/document/models/html.js b/js/document/models/html.js index f45a0e21..5eedb731 100755 --- a/js/document/models/html.js +++ b/js/document/models/html.js @@ -15,6 +15,10 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, { // hasTemplate: { value: false + }, + + draw3DGrid: { + value: false } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// diff --git a/js/document/views/design.js b/js/document/views/design.js index 4f598305..6cce229c 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -49,7 +49,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { }, //////////////////////////////////////////////////////////////////// // - initiliaze: { + initialize: { value: function (parent) { //Creating iFrame for view this.iframe = document.createElement("iframe"); -- cgit v1.2.3 From 27935436ad8cd0675311667f70b6a285eb126a94 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 4 May 2012 17:10:01 -0700 Subject: Fixing references to iframe's styles in new template. Signed-off-by: Nivesh Rajbhandari --- js/ninja.reel/ninja.js | 2 +- js/tools/RotateStage3DTool.js | 2 +- js/tools/ZoomTool.js | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index cf7c6cf4..edc1efa4 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -300,7 +300,7 @@ exports.Ninja = Montage.create(Component, { // Turn on WebGL animation during preview _toggleWebGlAnimation: { value: function(inLivePreview) { - var glCanvases = this.currentDocument.iframe.contentWindow.document.querySelectorAll('[data-RDGE-id]'), + var glCanvases = this.currentDocument.model.views.design.iframe.contentWindow.document.querySelectorAll('[data-RDGE-id]'), glShapeModel; if(glCanvases) { for(var i = 0, len = glCanvases.length; i= 1) - this.application.ninja.currentDocument.iframe.style.zoom = zoomFactor; + { + this.application.ninja.currentDocument.model.views.design.iframe.style.zoom = zoomFactor; + } this.application.ninja.stage._firstDraw = false; //tmp3 = viewUtils.localToGlobal( localPt, userContent ); // DEBUG - remove this line -- cgit v1.2.3 From 1b2af54128985c1b622e13ea740a8402e57527cc Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 4 May 2012 17:11:02 -0700 Subject: Temporarily skipping activeDocument.currentView check so keyboard shortcuts still work. Signed-off-by: Nivesh Rajbhandari --- js/mediators/keyboard-mediator.js | 31 +++---------------------------- 1 file changed, 3 insertions(+), 28 deletions(-) diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js index f8934669..49960f58 100755 --- a/js/mediators/keyboard-mediator.js +++ b/js/mediators/keyboard-mediator.js @@ -87,7 +87,8 @@ exports.KeyboardMediator = Montage.create(Component, { value: function(evt) { //keyboard controls for html design view - if((!!this.application.ninja.documentController.activeDocument) && (this.application.ninja.documentController.activeDocument.currentView === "design")){ + // TODO - New template mode doesn't set currentView yet. + if((!!this.application.ninja.currentDocument)){// && (this.application.ninja.currentDocument.model.currentView === "design")){ // Don't do anything if an input or other control is focused if(document.activeElement.nodeName !== "BODY") { @@ -256,7 +257,7 @@ exports.KeyboardMediator = Montage.create(Component, { handleKeyup: { value: function(evt) { //keyboard controls for html design view - if((!!this.application.ninja.documentController.activeDocument) && (this.application.ninja.documentController.activeDocument.currentView === "design")){ + if((!!this.application.ninja.currentDocument)){// && (this.application.ninja.currentDocument.model.currentView === "design")){ if(document.activeElement.nodeName !== "BODY") { // Don't do anything if an input or other control is focused return; @@ -265,31 +266,5 @@ exports.KeyboardMediator = Montage.create(Component, { if(this.application.ninja.toolsData) this.application.ninja.toolsData.selectedToolInstance.HandleKeyUp(evt); } } - }, - - _handleKeydown: { - value: function(evt) { - - // Check if cmd-shift-+/ctrl-shift-+ for toggling snapping - if(evt.shiftKey && (evt.ctrlKey || evt.metaKey) && (evt.keyCode === 187)) - { - MainMenuModule.MenuActionManager.toggleSnapping("snap", !DocumentManagerModule.DocumentManager.activeDocument.snapping); - evt.preventDefault(); - return; - } - - if(evt.keyCode === Keyboard.PLUS && (evt.metaKey||evt.ctrlKey)) { - evt.preventDefault(); - this._toolsList.action("zoomIn", evt); - return; - } - - if(evt.keyCode === Keyboard.MINUS && (evt.metaKey || evt.ctrlKey)) { - evt.preventDefault(); - this._toolsList.action("zoomOut", evt); - return; - } - - } } }); -- cgit v1.2.3