From 7e997cac27b4fcb1a30ab53ab5d2114eacfb9222 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Jul 2012 12:14:34 -0700 Subject: Timeline: Code refactor for Style.js --- js/panels/Timeline/Style.reel/Style.js | 195 +++++++++++++++++---------------- 1 file changed, 103 insertions(+), 92 deletions(-) (limited to 'js/panels/Timeline/Style.reel/Style.js') diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index c8d323a9..78bc2db3 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -17,38 +17,80 @@ var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; -var ElementsMediator = require("js/mediators/element-mediator").ElementMediator +var ElementsMediator = require("js/mediators/element-mediator").ElementMediator var LayerStyle = exports.LayerStyle = Montage.create(Component, { - + /* === BEGIN: Models === */ + _parentLayerComponent: { + value: null + }, + + _styleContainer: { + value: null + }, styleContainer: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._styleContainer; + }, + set: function(newVal) { + this._styleContainer = newVal; + } }, + _styleHintable: { + value: null + }, styleHintable: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._styleHintable; + }, + set: function(newVal) { + this._styleHintable = newVal; + } }, + _styleProperty: { + value: null + }, styleProperty: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._styleProperty; + }, + set: function(newVal) { + this._styleProperty = newVal; + } }, + _valueEditorHottext: { + value: null + }, valueEditorHottext: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._valueEditorHottext; + }, + set: function(newVal) { + this._valueEditorHottext = newVal; + } }, + _dtextProperty: { + value: null + }, dtextProperty: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._dtextProperty; + }, + set: function(newVal) { + this._dtextProperty = newVal; + } }, - /* === BEGIN: Models === */ - // isSelected: whether or not the style is selected _isSelected: { value: false }, @@ -66,9 +108,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, - /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with - * parent Layer. - */ _isActive: { value: false }, @@ -139,6 +178,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { }, serializable: true }, + _myHintableValue : { value: null }, @@ -194,13 +234,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, - addedColorChips: - { value: false }, + addedColorChips: { + value: false + }, _colorelement: { writable:true }, - colorelement: { enumerable: true, get: function () { @@ -246,11 +286,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { }, draw: { value: function() { - + // Show the right view if (this._swapViews === true) { - // Show the right thing this._showView(); } + + // Is this style selected? if (this.isSelected) { this.element.classList.add("style-selected"); } else { @@ -260,6 +301,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, + didDraw: { value: function() { if (this._swapViews === true) { @@ -288,6 +330,41 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.whichView = "propval"; } }, + + handleFillColorChange: { + value: function (event) { + if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){ + var fillColorObject={}; + fillColorObject.color=event._event.color; + fillColorObject.mode=event._event.colorMode; + ElementsMediator.setColor([this._parentLayerComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide) + } + } + }, + + handleHottextChange:{ + value:function(event){ + if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ + this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline"); + } + } + }, + + handleHottextChanging:{ + value:function(event){ + if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ + this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Changing", "timeline"); + } + } + }, + + handleBlur:{ + value:function(event){ + if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ + this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline"); + } + } + }, // Init: Initialize the component with some useful selectors and other defaults. init : { @@ -296,6 +373,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { var arrHints = [], i = 0; + this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent; + // Get the array of hints from _myTweenables: for (i = 0; i < this._myTweenables.length; i++) { arrHints.push(this._myTweenables[i].property) @@ -372,7 +451,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.valueEditorHottext.minValue = tweenable.min; this.valueEditorHottext.maxValue = tweenable.max; this.valueEditorHottext.identifier="hottext"; - el = this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement; + el = this._parentLayerComponent.layerData.stageElement; this.editorValue = parseFloat(ElementsMediator.getProperty(el, this.editorProperty)); this.valueEditorHottext.value = this.editorValue this.valueEditorHottext.addEventListener("change",this,false); @@ -397,7 +476,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); this.colorelement = this._fillColorCtrl; - var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide) + var currentValue = ElementsMediator.getColor(this._parentLayerComponent.layerData.stageElement,this._isFill,this._borderSide) this.application.ninja.timeline.selectedStyle = this.editorProperty; this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); if(currentValue){ @@ -725,73 +804,5 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } ] - }, - - handleFillColorChange: { - value: function (event) { - if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){ - var fillColorObject={}; - fillColorObject.color=event._event.color; - fillColorObject.mode=event._event.colorMode; - ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide) - } - } - }, - - handleHottextChange:{ - value:function(event){ - if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline"); - } - } - }, - - handleHottextChanging:{ - value:function(event){ - if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Changing", "timeline"); - } - } - }, - - handleBlur:{ - value:function(event){ - if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline"); - } - } - }, - - - /* Begin: Logging routines */ - _boolDebug: { - enumerable: false, - value: false // set to true to enable debugging to console; false for turning off all debugging. - }, - boolDebug: { - get: function() { - return this._boolDebug; - }, - set: function(boolDebugSwitch) { - this._boolDebug = boolDebugSwitch; - } - }, - log: { - value: function(strMessage) { - if (this.boolDebug) { - console.log(this.getLineNumber() + ": " + strMessage); - } - } - }, - getLineNumber: { - value: function() { - try { - throw new Error('bazinga') - }catch(e){ - return e.stack.split("at")[3].split(":")[2]; - } - } } - /* End: Logging routines */ - }); \ No newline at end of file -- cgit v1.2.3 From 539f430f95812e726ad14012965ece942a010bca Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Jul 2012 14:42:03 -0700 Subject: Timeline: Refactor style and layer to use pointers to parent components. --- js/panels/Timeline/Style.reel/Style.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline/Style.reel/Style.js') diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index 78bc2db3..802c6311 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -284,6 +284,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.init(); } }, + willDraw: { + value: function() { + if (this._parentLayerComponent === null) { + this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent; + } + } + }, draw: { value: function() { // Show the right view @@ -372,9 +379,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { var arrHints = [], i = 0; - - this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent; - + // Get the array of hints from _myTweenables: for (i = 0; i < this._myTweenables.length; i++) { arrHints.push(this._myTweenables[i].property) -- cgit v1.2.3 From 14f30bb927f2cb4a27c81fd6ee4e8d9af46b4404 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 3 Jul 2012 15:10:45 -0700 Subject: Refactor Code + Bug Fix for the Colorchip disappear between breadcrumb navigation Signed-off-by: Kruti Shah --- js/panels/Timeline/Style.reel/Style.js | 7 ------- 1 file changed, 7 deletions(-) (limited to 'js/panels/Timeline/Style.reel/Style.js') diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index c8d323a9..c44a29f6 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -349,12 +349,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { var tweenable = {}, i = 0; - if (this.ruleTweener === true) { - return; - } else { - this.ruleTweener = true; - } - tweenable.tweener = "input"; for (i = 0; i < this._myTweenables.length; i++) { @@ -391,7 +385,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this._borderSide = tweenable.strokePosition } } - if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { // setup fill color this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; -- cgit v1.2.3 From 15edcb5fe22793aab024c1ef7dde109b36977dd8 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 16 Jul 2012 09:20:10 -0700 Subject: Timeline: Disable drag-and-drop on subproperty keyframes. Better error handling. Fix some minor bugs. --- js/panels/Timeline/Style.reel/Style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/Style.reel/Style.js') diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index dc159a01..930e1281 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -232,7 +232,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { set: function(newVal) { if (this._whichView !== newVal) { if ((newVal !== "hintable") && (newVal !== "propval")) { - this.log("Error: Unknown view -"+newVal+"- requested for style.js."); + console.log("Error: Unknown view -"+newVal+"- requested for style.js."); return; } this._whichView = newVal; -- cgit v1.2.3 From a12cabc16273ffe04af4bce1f7438dc9326efa89 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 17 Jul 2012 15:58:41 -0700 Subject: Timeline: Possible fix for new file/new style crash problem. --- js/panels/Timeline/Style.reel/Style.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'js/panels/Timeline/Style.reel/Style.js') diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index 930e1281..1d72199a 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -438,12 +438,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { _showView : { value: function() { if (this.whichView === "hintable") { - this.containerHintable.classList.remove("hidden"); - this.containerPropvals.classList.add("hidden"); + this.containerHintable.classList.remove("hideme"); + this.containerPropvals.classList.add("hideme"); this.myHintable.start(); } else { - this.containerHintable.classList.add("hidden"); - this.containerPropvals.classList.remove("hidden"); + this.containerHintable.classList.add("hideme"); + this.containerPropvals.classList.remove("hideme"); this._showTweener(); } } @@ -466,9 +466,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } if (tweenable.tweener === "hottext" ) { - this.editorInputContainer.classList.add("hidden"); - this.editorColorContainer.classList.add("hidden"); - this.editorHottextContainer.classList.remove("hidden"); + this.editorInputContainer.classList.add("hideme"); + this.editorColorContainer.classList.add("hideme"); + this.editorHottextContainer.classList.remove("hideme"); this.valueEditorHottext.acceptableUnits = [tweenable.units]; this.valueEditorHottext.units = tweenable.units; this.valueEditorHottext.minValue = tweenable.min; @@ -481,9 +481,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.valueEditorHottext.addEventListener("changing",this,false); this.valueEditorHottext.needsDraw = true; } else if (tweenable.tweener === "color" ) { - this.editorInputContainer.classList.add("hidden"); - this.editorColorContainer.classList.remove("hidden"); - this.editorHottextContainer.classList.add("hidden"); + this.editorInputContainer.classList.add("hideme"); + this.editorColorContainer.classList.remove("hideme"); + this.editorHottextContainer.classList.add("hideme"); if(tweenable.colorType === "fill"){ this._isFill = true; @@ -508,9 +508,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } // TODO: set up color chip here. } else if (tweenable.tweener === "input"){ - this.editorInputContainer.classList.remove("hidden"); - this.editorColorContainer.classList.add("hidden"); - this.editorHottextContainer.classList.add("hidden"); + this.editorInputContainer.classList.remove("hideme"); + this.editorColorContainer.classList.add("hideme"); + this.editorHottextContainer.classList.add("hideme"); this.valueEditorInput.value = this.editorValue; this.valueEditorInput.addEventListener("blur",this,false); } else { -- cgit v1.2.3