From 4c3aac5eabd93052b1554a03d78235215bb49db4 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 29 May 2012 00:34:40 -0700 Subject: document bindings phase 1 - using array controller to bind the current document to all ninja components - removed open document event - removed references to the document controller Signed-off-by: Valerio Virgillito --- js/controllers/styles-controller.js | 93 ++++++++++++++++++++++++------------- 1 file changed, 61 insertions(+), 32 deletions(-) (limited to 'js/controllers/styles-controller.js') diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 534f77c7..217a536d 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -50,10 +50,10 @@ var stylesController = exports.StylesController = Montage.create(Component, { handleAppLoaded : { value: function() { - ///// Bind app's activeDocument property to - ///// styles controller's _activeDocument property + ///// Bind app's currentDocument property to + ///// styles controller's _currentDocument property -// Object.defineBinding(this, "activeDocument", { +// Object.defineBinding(this, "currentDocument", { // boundObject: this.application.ninja, // boundObjectPropertyPath: "currentDocument", // oneway: true @@ -69,20 +69,20 @@ var stylesController = exports.StylesController = Montage.create(Component, { }, ///// Active document gets automatically set when the ///// document controller changes it - _activeDocument : { + _currentDocument : { value : null, enumerable : false }, - activeDocument : { + currentDocument : { get : function() { - return this._activeDocument; + return this._currentDocument; }, set : function(document) { ///// If the document is null set default stylesheets to null if(!document || document.currentView === "code") { - this._activeDocument = null; + this._currentDocument = null; this._stageStylesheet = null; this.defaultStylesheet = null; this.userStyleSheets = []; @@ -91,7 +91,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { } ///// setting document via binding - this._activeDocument = document; + this._currentDocument = document; ///// Stage stylesheet should always be found this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID); @@ -103,6 +103,8 @@ var stylesController = exports.StylesController = Montage.create(Component, { return sheet !== this._stageStylesheet; }, this); + this.initializeRootStyles(); + NJevent('styleSheetsReady', this); }, enumerable : false @@ -129,10 +131,10 @@ var stylesController = exports.StylesController = Montage.create(Component, { return false; } //check that the document has a design view - else if(this._activeDocument.model && this._activeDocument.model.views && this._activeDocument.model.views.design){ + else if(this._currentDocument.model && this._currentDocument.model.views && this._currentDocument.model.views.design){ ///// Use the last stylesheet in the document as the default - var sheets = this._activeDocument.model.views.design.document.styleSheets, + var sheets = this._currentDocument.model.views.design.document.styleSheets, lastIndex = sheets.length-1; ///// If the only sheet is the stage stylesheet, this will be true @@ -148,7 +150,37 @@ var stylesController = exports.StylesController = Montage.create(Component, { } } }, - + + initializeRootStyles: { + value: function() { + var styles = {}, + needsRule = false, + rule; + + if(this.getElementStyle(this.currentDocument.model.documentRoot, "width", false, false) == null) { + styles['width'] = '100%'; + needsRule = true; + } + if(this.getElementStyle(this.currentDocument.model.documentRoot, "height", false, false) == null) { + styles['height'] = '100%'; + needsRule = true; + } + if(this.getElementStyle(this.currentDocument.model.documentRoot, "-webkit-transform", false, false) == null) { + styles['-webkit-transform'] = 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'; + needsRule = true; + } + if(this.getElementStyle(this.currentDocument.model.documentRoot, "-webkit-transform-style", false, false) == null) { + styles['-webkit-transform-style'] = 'preserve-3d'; + needsRule = true; + } + + if(needsRule) { + rule = this.addRule('.ninja-body{}'); + this.setStyles(rule, styles); + this.addClass(this.currentDocument.model.documentRoot, "ninja-body"); + } + } + }, /* ----------------- Rule methods ----------------- */ ///// Add Rule @@ -538,7 +570,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { return true; } - var doc = document || this._activeDocument; + var doc = document || this._currentDocument; ///// TODO: somehow cache the number of elements affected ///// by the rule, because querySelectorAll() is expensive return !!(doc.querySelectorAll(rule.selectorText).length > 1); @@ -887,7 +919,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { getAnimationRuleWithName : { value: function(name, document) { - var doc = document || this._activeDocument.model.views.design.document, + var doc = document || this._currentDocument.model.views.design.document, animRules = this.getDocumentAnimationRules(doc), rule, i; @@ -909,7 +941,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { getDocumentAnimationRules : { value: function(document) { - var sheets = (document) ? document.styleSheets : this._activeDocument.model.views.design.document.styleSheets, + var sheets = (document) ? document.styleSheets : this._currentDocument.model.views.design.document.styleSheets, rules = []; nj.toArray(sheets).forEach(function(sheet) { @@ -1272,7 +1304,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { createStylesheet : { value: function(id, document) { - var doc = document || this._activeDocument.model.views.design.document, + var doc = document || this._currentDocument.model.views.design.document, sheetElement, sheet; sheetElement = nj.make('style', { @@ -1329,15 +1361,12 @@ var stylesController = exports.StylesController = Montage.create(Component, { getSheetFromElement : { value : function(element, context) { - var doc = context || this._activeDocument.model.views.design.document, + var doc = context || this._currentDocument.model.views.design.document, el = (typeof element === 'string') ? nj.$(element, doc) : element; if(el && el.sheet) { return el.sheet; } - - return; - } }, @@ -1363,7 +1392,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { ///// If the sheet doesn't already exist in the list of modified ///// sheets, dispatch dirty event and add the sheet to the list if(sheetSearch.length === 0) { - NJevent('styleSheetDirty', eventData); + this.currentDocument.model.needsSave = true; this.dirtyStyleSheets.push({ document : sheet.ownerNode.ownerDocument, stylesheet : sheet @@ -1572,7 +1601,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { getStyleTest : function() { var properties = ['background-position', 'width', 'height']; - var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); + var el = stylesController.currentDocument.model.views.design.document.getElementById('Div_1'); properties.forEach(function(prop) { console.log('Getting value for "' + prop + '": ' + stylesController.getElementStyle(el, prop, true)); @@ -1591,7 +1620,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { }); }, getMatchingRulesTest : function() { - var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'), + var el = stylesController.currentDocument.model.views.design.document.getElementById('Div_1'), mRules; this.addRulesTest(); @@ -1606,7 +1635,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { ///// apply a new style using setElementStyle, and print out the new ///// value. - var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'), + var el = stylesController.currentDocument.model.views.design.document.getElementById('Div_1'), bg; console.log('----- Set Element Style Test -----'); @@ -1631,14 +1660,14 @@ var stylesController = exports.StylesController = Montage.create(Component, { var rules = ['#UserContent div { background-color: blue }']; rules.forEach(function(rule) { stylesController.addRule(rule); }); - var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); + var el = stylesController.currentDocument.model.views.design.document.getElementById('Div_1'); stylesController.setElementStyle(el, 'color', 'red'); ///// the #Div_1 rule created by tag tool should have the color style }, setElementStyle3Test : function() { ///// First, draw a div onto the stage - var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); + var el = stylesController.currentDocument.model.views.design.document.getElementById('Div_1'); //// now add a multi-target rule overriding the bg color var rules = [ @@ -1655,14 +1684,14 @@ var stylesController = exports.StylesController = Montage.create(Component, { }, setGroupStyleTest : function() { ///// draw 2 divs on stage - var el1 = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); - var el2 = stylesController.activeDocument.model.views.design.document.getElementById('Div_2'); + var el1 = stylesController.currentDocument.model.views.design.document.getElementById('Div_1'); + var el2 = stylesController.currentDocument.model.views.design.document.getElementById('Div_2'); var dominantRule = stylesController.getDominantRuleForGroup([el1, el2], 'color'); }, setElementStylesTest : function() { ///// draw a div on stage - var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); + var el = stylesController.currentDocument.model.views.design.document.getElementById('Div_1'); mRules = stylesController.getMatchingRules(el, true); mRules.forEach(function(rule) { @@ -1681,7 +1710,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { console.log('----- Create Override Rule Test -----'); - var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'), + var el = stylesController.currentDocument.model.views.design.document.getElementById('Div_1'), rule = stylesController.addRule('#UserContent div { background-color: blue }'), override; @@ -1693,7 +1722,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { }, deleteRulesTest : function() { // drag one div on stage - var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); + var el = stylesController.currentDocument.model.views.design.document.getElementById('Div_1'); this.addRulesTest(); mRules = stylesController.getMatchingRules(el, true); @@ -1705,8 +1734,8 @@ var stylesController = exports.StylesController = Montage.create(Component, { matchesElementsExclusivelyTest : function() { /// drag two divs on stage var rule = stylesController.addRule('#Div_1, #Div_3 { color:black; }'); - var el1 = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); - var el2 = stylesController.activeDocument.model.views.design.document.getElementById('Div_2'); + var el1 = stylesController.currentDocument.model.views.design.document.getElementById('Div_1'); + var el2 = stylesController.currentDocument.model.views.design.document.getElementById('Div_2'); console.log('Does rule match elements exclusively? ' + stylesController.matchesElementsExclusively(rule, [el1, el2])); } -- cgit v1.2.3 From 42c2a480a3883389e47d4ec291dfb55d99cf4b7f Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 29 May 2012 10:26:19 -0700 Subject: Cache perspective distance lookup to speed up user interaction. Signed-off-by: Nivesh Rajbhandari --- js/controllers/styles-controller.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js/controllers/styles-controller.js') diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 534f77c7..e76e5a1b 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -1229,9 +1229,10 @@ var stylesController = exports.StylesController = Montage.create(Component, { } } if(isNaN(dist)) { - dist = null; + return "none"; + } else { + return dist; } - return dist; } }, -- cgit v1.2.3 From d1e5450d771b95909641bfe8436ced35fa0156b5 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 31 May 2012 10:50:46 -0700 Subject: Removed temporary hack to support stage styles. Signed-off-by: Nivesh Rajbhandari --- js/controllers/styles-controller.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'js/controllers/styles-controller.js') diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index f35a6757..86df82de 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -1204,7 +1204,6 @@ var stylesController = exports.StylesController = Montage.create(Component, { getMatrixFromElement : { value: function(element, isStage) { - isStage = false; var xformStr = this.getElementStyle(element, "-webkit-transform", true, isStage), mat; @@ -1238,7 +1237,6 @@ var stylesController = exports.StylesController = Montage.create(Component, { getPerspectiveDistFromElement : { value: function(element, isStage) { - isStage = false; var xformStr = this.getElementStyle(element, "-webkit-perspective", false, isStage), dist; -- cgit v1.2.3 From b7f048624c07a1186cca080bf4c9a87af7d53f35 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 1 Jun 2012 06:47:50 -0700 Subject: SnapManager.setupDragPlaneFromPlane must happen after StylesController has finished initializeRootStyles. Signed-off-by: Nivesh Rajbhandari --- js/controllers/styles-controller.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'js/controllers/styles-controller.js') diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 86df82de..14857bf9 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -179,6 +179,10 @@ var stylesController = exports.StylesController = Montage.create(Component, { this.setStyles(rule, styles); this.addClass(this.currentDocument.model.documentRoot, "ninja-body"); } + + //TODO - Temporarily moving this here so we guarantee the StylesController has a chance + // to initialize the stage's styles prior to doing any styles lookup. + this.application.ninja.stage.snapManager.setupDragPlaneFromPlane (workingPlane); } }, /* ----------------- Rule methods ----------------- */ @@ -1204,6 +1208,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { getMatrixFromElement : { value: function(element, isStage) { + isStage = false; var xformStr = this.getElementStyle(element, "-webkit-transform", true, isStage), mat; @@ -1237,6 +1242,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { getPerspectiveDistFromElement : { value: function(element, isStage) { + isStage = false; var xformStr = this.getElementStyle(element, "-webkit-perspective", false, isStage), dist; -- cgit v1.2.3 From 2085c783cf3a75d2b8f0370a6f54f62dd513161c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 1 Jun 2012 11:15:26 -0700 Subject: fixing the document closing when the first document is closed. Signed-off-by: Valerio Virgillito --- js/controllers/styles-controller.js | 19 ------------------- 1 file changed, 19 deletions(-) (limited to 'js/controllers/styles-controller.js') diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 86df82de..8d56370d 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -48,25 +48,6 @@ var stylesController = exports.StylesController = Montage.create(Component, { ///// bind the document to prop w/ setter. The setter calls to find ///// the stage and default css files. - handleAppLoaded : { - value: function() { - ///// Bind app's currentDocument property to - ///// styles controller's _currentDocument property - -// Object.defineBinding(this, "currentDocument", { -// boundObject: this.application.ninja, -// boundObjectPropertyPath: "currentDocument", -// oneway: true -// }); - } - }, - - deserializedFromTemplate : { - value: function() { - this.eventManager.addEventListener( "appLoaded", this, false); - }, - enumerable : false - }, ///// Active document gets automatically set when the ///// document controller changes it _currentDocument : { -- cgit v1.2.3 From fd264c58bfc5f53f57d9ddfd06114124b14bac04 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 1 Jun 2012 14:54:19 -0700 Subject: Moving styles controller higher in ninja's serialization so its bindings will get triggered before stage's bindings. This should fix the stage's styles not getting initialized correctly. Signed-off-by: Nivesh Rajbhandari --- js/controllers/styles-controller.js | 4 ---- 1 file changed, 4 deletions(-) (limited to 'js/controllers/styles-controller.js') diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 14857bf9..f35a6757 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -179,10 +179,6 @@ var stylesController = exports.StylesController = Montage.create(Component, { this.setStyles(rule, styles); this.addClass(this.currentDocument.model.documentRoot, "ninja-body"); } - - //TODO - Temporarily moving this here so we guarantee the StylesController has a chance - // to initialize the stage's styles prior to doing any styles lookup. - this.application.ninja.stage.snapManager.setupDragPlaneFromPlane (workingPlane); } }, /* ----------------- Rule methods ----------------- */ -- cgit v1.2.3