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 --- .../CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | 29 +++++-- js/panels/Panel.reel/Panel.js | 24 ++++++ js/panels/PanelContainer.reel/PanelContainer.html | 21 +++++ js/panels/PanelContainer.reel/PanelContainer.js | 29 ++++--- js/panels/Timeline/Layer.reel/Layer.js | 4 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1 - .../Timeline/TimelineTrack.reel/TimelineTrack.js | 4 +- .../style-sheets-view.reel/style-sheets-view.js | 8 +- js/panels/properties.reel/properties.js | 40 ++++++---- .../sections/three-d-view.reel/three-d-view.js | 91 ++++++++++------------ 10 files changed, 159 insertions(+), 92 deletions(-) (limited to 'js/panels') diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js index b4a803b2..b496ce4a 100755 --- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js @@ -57,11 +57,6 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre this.eventManager.addEventListener("selectionChange", this, true); this.eventManager.addEventListener("elementChange", this, true); - this.eventManager.addEventListener("openDocument", this, true); - - if(this.application.ninja.currentDocument) { - this.captureOpenDocument(); - } this.addEventListener('webkitTransitionEnd', this, false); ['sheets', 'styles'].forEach(function(section) { @@ -73,11 +68,29 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre this._setUpToolbars(); } }, - captureOpenDocument : { - value : function(e) { - this.populateStyleSheetList(); + + _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.populateStyleSheetList(); + } } }, + handleWebkitTransitionEnd : { value: function(e) { //console.log('transition end at panel base'); diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index 613bef4b..14b25c36 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -100,6 +100,30 @@ exports.Panel = 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(typeof this.panelContent.content[0].controller._currentDocument !== "undefined") { + this.panelContent.content[0].controller.currentDocument = this._currentDocument; + } + + this.disabled = this._currentDocument.currentView !== "design"; + } + }, + handleBtnCollapseAction: { value: function() { this.collapsed = !this.collapsed; diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html index 1c144bf4..b22b3609 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.html +++ b/js/panels/PanelContainer.reel/PanelContainer.html @@ -17,6 +17,9 @@ "prototype": "js/panels/Panel.reel", "properties": { "element": {"#": "panel_0"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, @@ -24,6 +27,9 @@ "prototype": "js/panels/Panel.reel", "properties": { "element": {"#": "panel_1"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, @@ -31,6 +37,9 @@ "prototype": "js/panels/Panel.reel", "properties": { "element": {"#": "panel_2"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, @@ -38,6 +47,9 @@ "prototype": "js/panels/Panel.reel", "properties": { "element": {"#": "panel_3"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, @@ -45,6 +57,9 @@ "prototype": "js/panels/Panel.reel", "properties": { "element": {"#": "panel_4"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, @@ -52,6 +67,9 @@ "prototype": "js/panels/Panel.reel", "properties": { "element": {"#": "panel_5"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, @@ -60,6 +78,9 @@ "name": "Panel", "properties": { "element": {"#": "panel_6"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index 8d1d6a5e..dc501a99 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -16,7 +16,24 @@ exports.PanelContainer = Montage.create(Component, { value: null }, - // This will hold the current loaded panels. + _currentDocument: { + value : null, + enumerable : false + }, + + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + } + }, + panels: { value: [] }, @@ -65,8 +82,6 @@ exports.PanelContainer = Montage.create(Component, { this.application.localStorage.setItem("panels", this.currentPanelState); - - this.eventManager.addEventListener( "onOpenDocument", this, false); this.eventManager.addEventListener( "closeDocument", this, false); } }, @@ -89,14 +104,6 @@ exports.PanelContainer = Montage.create(Component, { } }, - handleOnOpenDocument: { - value: function(){ - this.panels.forEach(function(obj) { - obj.disabled = false; - }); - } - }, - handleCloseDocument: { value: function(){ if(!this.application.ninja.documentController.activeDocument) { diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index e8619d02..16fb0303 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -717,7 +717,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dynamicLayerName.value = this._layerEditable.value; this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.dynamicLayerName.value; this.needsDraw = true; - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; } }, handleAddStyleClick: { @@ -745,7 +745,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dynamicLayerName.value = newVal; this.layerName = newVal; this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = newVal; - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; this.needsDraw = true; } }, diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index c55e5a24..b1fc97e4 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -335,7 +335,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function () { this.initTimeline(); // Bind the event handler for the document change events - //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false); this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false); //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false); //this.eventManager.addEventListener("breadCrumbBinding",this,false); diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index ff684446..126e6a61 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -564,7 +564,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.nextKeyframe += 1; } - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; } }, @@ -683,7 +683,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { keyframeString += " }"; // set the keyframe string as the new rule this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; } }, diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js index 5081a124..9e3b4a49 100644 --- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js @@ -63,10 +63,10 @@ exports.StyleSheetsView = Montage.create(Component, { if(this.styleSheetList) { sheetComponent = this.styleSheetList.childComponents[this.styleSheets.indexOf(sheet)]; if(sheetComponent) { - sheetComponent.default = true; + sheetComponent['default'] = true; if(this._defaultStyleSheet) { oldDefaultSheet = this.styleSheetList.childComponents[this.styleSheets.indexOf(this._defaultStyleSheet)]; - oldDefaultSheet.default = false; + oldDefaultSheet['default'] = false; } } } @@ -115,12 +115,12 @@ exports.StyleSheetsView = Montage.create(Component, { handleStyleSheetsReady : { value: function(e) { - this.documentName = this.stylesController.activeDocument.name; + this.documentName = this.stylesController.currentDocument.name; this.styleSheets = this.stylesController.userStyleSheets; Object.defineBinding(this, 'activeDocument', { 'boundObject': this.stylesController, - 'boundObjectPropertyPath': 'activeDocument', + 'boundObjectPropertyPath': 'currentDocument', 'oneway': true }); diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 84b0d589..e99f58e9 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -13,6 +13,32 @@ var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; exports.Properties = 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") { + // Save a reference of the pi inside the document view to be able to clear + this._currentDocument.model.views.design.propertiesPanel = this; + + // Display the default document root PI + this.displayElementProperties(this._currentDocument.model.documentRoot); + } + } + }, + elementName: { value: null }, @@ -46,7 +72,7 @@ exports.Properties = Montage.create(Component, { prepareForDraw: { value : function() { - this.eventManager.addEventListener("openDocument", this, false); + this.eventManager.addEventListener("elementChange", this, false); this.eventManager.addEventListener("selectionChange", this, false); this.eventManager.addEventListener("closeDocument", this, false); @@ -65,18 +91,6 @@ exports.Properties = Montage.create(Component, { } }, - handleOpenDocument: { - value: function() { - this.eventManager.addEventListener( "elementChange", this, false); - - // Save a reference of the pi inside the document view to be able to clear - this.application.ninja.currentDocument.model.views.design.propertiesPanel = this; - - // Display the default document root PI - this.displayElementProperties(this.application.ninja.currentDocument.model.documentRoot); - } - }, - handleCloseDocument: { value: function(){ this.clear(); diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js index e16e3509..0320c327 100755 --- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js @@ -26,8 +26,7 @@ exports.ThreeD = Montage.create(Component, { set: function(value) { this._axisMode = value; - if(value === 0) - { + if(value === 0) { this.inGlobalMode = false; this.x3D = 0; this.y3D = 0; @@ -36,13 +35,10 @@ exports.ThreeD = Montage.create(Component, { this.xAngle = 0; this.yAngle = 0; this.zAngle = 0; - } - else - { + } else { this.inGlobalMode = true; var item = this.item; - if(item) - { + if(item) { this.x3D = item.elementModel.props3D.x3D; this.y3D = item.elementModel.props3D.y3D; this.z3D = item.elementModel.props3D.z3D; @@ -114,8 +110,7 @@ exports.ThreeD = Montage.create(Component, { handleAction: { value: function(event) { if(event.currentTarget.identifier === "flatten") { - this.application.ninja.elementMediator.setProperty([this.item], - "-webkit-transform-style", + this.application.ninja.elementMediator.setProperty([this.item], "-webkit-transform-style", event.currentTarget.checked ? ["flat"] : ["preserve-3d"]); } } @@ -127,11 +122,7 @@ exports.ThreeD = Montage.create(Component, { return; } - this.apply3DProperties(event.currentTarget.identifier, - event.currentTarget, - this.item, - this.inGlobalMode, - false); + this.apply3DProperties(event.currentTarget.identifier, event.currentTarget, this.item, this.inGlobalMode, false); this._curMat = null; this._curProp = null; @@ -144,28 +135,24 @@ exports.ThreeD = Montage.create(Component, { return; } - this.apply3DProperties(event.currentTarget.identifier, - event.currentTarget, - this.item, - this.inGlobalMode, - true); + this.apply3DProperties(event.currentTarget.identifier, event.currentTarget, this.item, this.inGlobalMode, true); } }, apply3DProperties : { value : function(prop, value, item, inGlobalMode, isChanging){ - if(!this._curMat) - { + if(!this._curMat) { this._curMat = this.application.ninja.elementMediator.getMatrix(item); } + var curMat = this._curMat; var delta = value.value; - if(inGlobalMode) - { - if(!this._curProp) - { + if(inGlobalMode) { + + if(!this._curProp) { this._curProp = this.application.ninja.elementMediator.get3DProperty(item, prop); } + delta -= this._curProp; } @@ -193,31 +180,47 @@ exports.ThreeD = Montage.create(Component, { } var mat = []; - if(inGlobalMode) - { + if(inGlobalMode) { glmat4.multiply(xFormMat, curMat, mat); - } - else - { + } else { glmat4.multiply(curMat, xFormMat, mat); } - if(isChanging) - { + if(isChanging) { this.application.ninja.elementMediator.setMatrix(item, mat, true); - } - else - { + } else { this.application.ninja.elementMediator.setMatrix(item, mat, false); - if(!inGlobalMode) - { + if(!inGlobalMode) { value.value = 0; } } } }, + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + + if(this._currentDocument.currentView === "design") { + // Save a reference of the pi inside the document view to be able to clear + Object.defineBinding(this, "item", { + boundObject: this, + boundObjectPropertyPath: "application.ninja.selectedElements", + boundValueMutator: this._getSelectedItem, + oneway: true + }); + } + } + }, + templateDidLoad : { value: function() { Object.defineBinding(this, "axisMode", { @@ -225,20 +228,6 @@ exports.ThreeD = Montage.create(Component, { boundObjectPropertyPath: "selectedIndex", oneway: false }); - - this.eventManager.addEventListener("openDocument", this, false); - } - }, - - handleOpenDocument: { - value: function() { - - Object.defineBinding(this, "item", { - boundObject: this, - boundObjectPropertyPath: "application.ninja.selectedElements", - boundValueMutator: this._getSelectedItem, - oneway: true - }); } }, -- cgit v1.2.3