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/document-controller.js | 182 ++++++--------------------- js/controllers/elements/shapes-controller.js | 4 +- js/controllers/selection-controller.js | 61 +++++---- js/controllers/styles-controller.js | 93 +++++++++----- js/controllers/undo-controller.js | 8 -- 5 files changed, 134 insertions(+), 214 deletions(-) (limited to 'js/controllers') diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 2c34eedf..948e4550 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -8,38 +8,18 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot // var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, - Uuid = require("montage/core/uuid").Uuid, HTMLDocument = require("js/document/document-html").HtmlDocument, TextDocument = require("js/document/document-text").TextDocument; //////////////////////////////////////////////////////////////////////// // exports.DocumentController = Montage.create(Component, { // - hasTemplate: {value: false}, - _documents: {value: []}, - //TODO: what is this?!?! - _hackInitialStyles: {value: true}, - _activeDocument: { value: null }, - //TODO: Are any of these needed? - _iframeCounter: { value: 1, enumerable: false }, - _iframeHolder: { value: null, enumerable: false }, - _textHolder: { value: null, enumerable: false }, - _codeMirrorCounter: {value: 1, enumerable: false}, - - activeDocument: { - get: function() { - return this._activeDocument; - }, - set: function(doc) { - //if(!!this._activeDocument){ this._activeDocument.isActive = false;} - - this._activeDocument = doc; - - if(!!this._activeDocument){ - if(this._documents.indexOf(doc) === -1) this._documents.push(doc); - this._activeDocument.isActive = true; - } - } + hasTemplate: { + value: false + }, + + documents: { + value: [] }, deserializedFromTemplate: { @@ -52,8 +32,6 @@ exports.DocumentController = Montage.create(Component, { this.eventManager.addEventListener("executeSaveAll", this, false); this.eventManager.addEventListener("executeFileClose", this, false); this.eventManager.addEventListener("executeFileCloseAll", this, false); - - this.eventManager.addEventListener("styleSheetDirty", this, false); } }, @@ -70,11 +48,11 @@ exports.DocumentController = Montage.create(Component, { if (this.redirectRequests && request.parentFrameId !== -1) { //Checking for proper URL redirect (from different directories) if (request.url.indexOf('js/document/templates/banner') !== -1) { - return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/banner/'))[1]}; + return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/banner/'))[1]}; } else if (request.url.indexOf('js/document/templates/html') !== -1) { - return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/html/'))[1]}; + return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/html/'))[1]}; } else if (request.url.indexOf('js/document/templates/app') !== -1) { - return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/app/'))[1]}; + return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/app/'))[1]}; } else { //Error, not a valid folder } @@ -98,13 +76,7 @@ exports.DocumentController = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// - - - - - - - + handleExecuteFileOpen: { value: function(event) { var pickerSettings = event._event.settings || {}; @@ -325,44 +297,6 @@ exports.DocumentController = Montage.create(Component, { } }, - //todo: remove this funciton as it is not used - textDocumentOpened: { - value: function(doc) { - - - - this.application.ninja.stage.stageView.createTextView(doc); - - /* - DocumentManager._hideCurrentDocument(); - stageManagerModule.stageManager._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe - DocumentManager.activeDocument = doc; - - var type; - - switch(doc.documentType) { - case "css" : - type = "css"; - break; - case "js" : - type = "javascript"; - break; - } - - DocumentManager._codeEditor.editor = CodeMirror.fromTextArea(doc.textArea, { - lineNumbers: true, - mode: type, - onCursorActivity: function() { - DocumentManager._codeEditor.editor.setLineClass(DocumentManager._codeEditor.hline, null); - DocumentManager._codeEditor.hline = DocumentManager._codeEditor.editor.setLineClass(DocumentManager._codeEditor.editor.getCursor().line, "activeline"); - } - }); - DocumentManager._codeEditor.hline = DocumentManager._codeEditor.editor.setLineClass(0, "activeline"); - */ - - } - }, - closeFile: { value: function(document) { document.closeDocument(this, this.onCloseFile); @@ -373,7 +307,8 @@ exports.DocumentController = Montage.create(Component, { value: function(doc) { var previousFocusedDocument; - this._documents.splice(this._documents.indexOf(doc), 1); +// this._documents.splice(this._documents.indexOf(doc), 1); + this.application.ninja.docController.removeObjects(this._documents.indexOf(doc)); if(this._documents.length > 0) { previousFocusedDocument = this._documents[this._documents.length - 1]; @@ -433,48 +368,44 @@ exports.DocumentController = Montage.create(Component, { // Open document callback _onOpenDocument: { value: function(doc){ - var currentDocument; - if(this.activeDocument) { + + + // Bypass all and call main. + // TODO: Call ninja directly once this is all cleaned up. + + this.application.ninja.handleOnOpenDocument(doc); + + +// var currentDocument; +// if(this.activeDocument) { // There is a document currently opened - currentDocument = this.activeDocument; - } else { +// currentDocument = this.activeDocument; +// } else { // There is no document opened - // Show the rulers - // TODO: Move this indo design view - this.application.ninja.stage.showRulers(); - - // Show the canvas - this.application.ninja.stage.hideCanvas(false); - } +// } // Set the active document - this.activeDocument = doc; +// this.activeDocument = doc; + + +// this.switchDocuments(currentDocument, doc, true); - // Initialize the documentRoot styles - this.initializeRootStyles(doc.model.documentRoot); - // Flag to stop stylesheet dirty event - this._hackInitialStyles = false; - this.switchDocuments(currentDocument, doc, true); } }, _onOpenTextDocument: { value: function(doc) { - var currentDocument = null; - if(this.activeDocument) { - // There is a document currently opened - currentDocument = this.activeDocument; - } - this.application.ninja.currentDocument = this.activeDocument = doc; + this.application.ninja.handleOnOpenDocument(doc); - document.getElementById("iframeContainer").style.display = "none"; - this.application.ninja.codeEditorController.applySettings(); + // Main DIFFERENCE -- + // TODO: Implement Code View here + //document.getElementById("iframeContainer").style.display = "none"; + //this.application.ninja.codeEditorController.applySettings(); - this.switchDocuments(currentDocument, doc, true); } }, @@ -512,10 +443,10 @@ exports.DocumentController = Montage.create(Component, { this.application.ninja.stage.hideRulers(); } - this.application.ninja.stage.clearAllCanvas(); +// this.application.ninja.stage.clearAllCanvas(); if(didCreate) { - newDocument.model.currentView.show(); +// newDocument.model.currentView.show(); if(newDocument.currentView === "design") { NJevent("onOpenDocument", newDocument); @@ -566,46 +497,5 @@ exports.DocumentController = Montage.create(Component, { return false; } - }, - - handleStyleSheetDirty:{ - value:function(){ - if(!this._hackInitialStyles) { - this.activeDocument.model.needsSave = true; - } - } - }, - - // TODO: Move this into the design views - initializeRootStyles: { - value: function(documentRoot) { - var sc = this.application.ninja.stylesController, - styles = {}, - needsRule = false, - rule; - - if(sc.getElementStyle(documentRoot, "width", false, false) == null) { - styles['width'] = '100%'; - needsRule = true; - } - if(sc.getElementStyle(documentRoot, "height", false, false) == null) { - styles['height'] = '100%'; - needsRule = true; - } - if(sc.getElementStyle(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(sc.getElementStyle(documentRoot, "-webkit-transform-style", false, false) == null) { - styles['-webkit-transform-style'] = 'preserve-3d'; - needsRule = true; - } - - if(needsRule) { - rule = sc.addRule('.ninja-body{}'); - sc.setStyles(rule, styles); - sc.addClass(documentRoot, "ninja-body"); - } - } } }); diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 38f133b5..626dedb6 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -213,7 +213,7 @@ exports.ShapesController = Montage.create(CanvasController, { default: CanvasController.setProperty(el, p, value); } - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; } }, @@ -559,7 +559,7 @@ exports.ShapesController = Montage.create(CanvasController, { } } el.elementModel.shapeModel.GLWorld.render(); - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; } }, diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js index 75bffc5c..db8bdf51 100755 --- a/js/controllers/selection-controller.js +++ b/js/controllers/selection-controller.js @@ -20,6 +20,41 @@ exports.SelectionController = Montage.create(Component, { } }, + _currentDocument: { + value : null, + enumerable : false + }, + + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + + if(this._currentDocument.currentView === "design") { + + /* + this._isDocument = true; + + if(currentSelectionArray) { + this.application.ninja.selectedElements = currentSelectionArray; + if(currentSelectionArray.length) { + this._isDocument = false; + NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument}); + } + } + + this._selectionContainer = this.application.ninja.currentSelectedContainer; + */ + } + } + }, + /* * Bound property to the ninja currentSelectedContainer */ @@ -52,32 +87,6 @@ exports.SelectionController = Montage.create(Component, { } }, - /** - * Get the current document selection array. If nothing is selected the currentSelectionArray should be null - */ - handleOpenDocument: { - value: function() { - // Handle initializing the selection array here. - this.initWithDocument([]); - } - }, - - initWithDocument: { - value: function(currentSelectionArray) { - this._isDocument = true; - - if(currentSelectionArray) { - this.application.ninja.selectedElements = currentSelectionArray; - if(currentSelectionArray.length) { - this._isDocument = false; - NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument}); - } - } - - this._selectionContainer = this.application.ninja.currentSelectedContainer; - } - }, - handleSwitchDocument: { value: function() { // if(this.application.ninja.documentController.activeDocument.currentView === "design"){ 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])); } diff --git a/js/controllers/undo-controller.js b/js/controllers/undo-controller.js index 19cfb6e6..8514df3d 100755 --- a/js/controllers/undo-controller.js +++ b/js/controllers/undo-controller.js @@ -113,20 +113,12 @@ exports.UndoController = Montage.create( Component, { deserializedFromTemplate: { value: function(){ - this.eventManager.addEventListener( "openDocument", this, false); this.eventManager.addEventListener( "sendToUndo", this, false); this.eventManager.addEventListener( "executeUndo", this, false); this.eventManager.addEventListener( "executeRedo", this, false); } }, - handleOpenDocument: { - value: function(undoQueue, redoQueue) { -// this._undoQueue = undoQueue; -// this._redoQueue = redoQueue; - } - }, - handleSendToUndo: { value: function(event) { this.undoQueue.push(event.detail); -- cgit v1.2.3