From f1387bc995766b8d941f93e605a91c49c8931645 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 22 May 2012 10:28:41 -0700 Subject: Layer Control Signed-off-by: Kruti Shah --- js/panels/Timeline/Style.reel/Style.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 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 c39f3a56..91abaa71 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -221,7 +221,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { value: function(event) { // this should be handled via binding, but somehow is not. Setting manually for now. this.editorProperty = this.myHintable.value; - // Change views. this.whichView = "propval"; } @@ -303,6 +302,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.valueEditorHottext.units = tweenable.units; this.valueEditorHottext.minValue = tweenable.min; this.valueEditorHottext.maxValue = tweenable.max; + this.valueEditorHottext.identifier="hottext" + this.valueEditorHottext.addEventListener("change",this,false); + this.valueEditorHottext.addEventListener("changing",this,false); this.valueEditorHottext.needsDraw = true; } else if (tweenable.tweener === "color" ) { this.editorInputContainer.classList.add("hidden"); @@ -612,6 +614,21 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } ] + }, + + handleHottextChange:{ + value:function(){ + debugger; + this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + "%"] , "Change", "timeline"); + } + }, + + handleHottextChanging:{ + value:function(){ + + debugger; + this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + "%"] , "Changing", "timeline"); + } }, /* Begin: Logging routines */ -- cgit v1.2.3 From fdc4f5c7f81ae3b9adeca2232e60268b4be594a2 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 22 May 2012 15:32:42 -0700 Subject: Style Layer Control Signed-off-by: Kruti Shah --- js/panels/Timeline/Style.reel/Style.js | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 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 91abaa71..532982f7 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -316,6 +316,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.editorColorContainer.classList.add("hidden"); this.editorHottextContainer.classList.add("hidden"); this.valueEditorInput.value = this.editorValue; + this.valueEditorInput.addEventListener("blur",this,false); } else { this.log("Warning: unknown tweenable -"+tweenable.tweener+"- specified in style.js.") } @@ -559,7 +560,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { { "property" : "opacity", "tweener" : "hottext", - "units" : "%", + "units" : "", "min" : 0, "max" : 100, "default" : 100 @@ -617,19 +618,31 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { }, handleHottextChange:{ - value:function(){ - debugger; - this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + "%"] , "Change", "timeline"); + value:function(event){ + + if(this.editorValue===""){ + this.editorValue = 0; + } + this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline"); } }, handleHottextChanging:{ - value:function(){ + value:function(event){ + + if(this.editorValue===""){ + this.editorValue = 0; + } + this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + event.target._units ] , "Changing", "timeline"); + } + }, - debugger; - this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + "%"] , "Changing", "timeline"); + handleBlur:{ + value:function(event){ + this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [event.target.value] , "Change", "timeline"); } }, + /* Begin: Logging routines */ _boolDebug: { -- cgit v1.2.3 From 4a8a293ba3fdf934a431152a9351f45092fb3695 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 25 May 2012 14:01:45 -0700 Subject: Timeline: bug fix: better selection/deselection of styles within layers. --- js/panels/Timeline/Style.reel/Style.js | 5 +++-- 1 file changed, 3 insertions(+), 2 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 c39f3a56..d712f2bd 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -35,6 +35,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { return this._isSelected; }, set: function(newVal) { + console.log("Style["+this.styleID+"].isSelected.set ", newVal) if (newVal !== this._isSelected) { this._isSelected = newVal; this.needsDraw = true; @@ -191,9 +192,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this._showView(); } if (this.isSelected) { - this.element.classList.add("selected"); + this.element.classList.add("style-selected"); } else { - this.element.classList.remove("selected"); + this.element.classList.remove("style-selected"); } } }, -- cgit v1.2.3 From 82b0c1b8ee197e23fbd5184cbb0522ca76e651c8 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Thu, 31 May 2012 14:27:51 -0700 Subject: Color Chip Signed-off-by: Kruti Shah --- js/panels/Timeline/Style.reel/Style.js | 662 ++++++++++++++++++--------------- 1 file changed, 372 insertions(+), 290 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 fa848cc0..102e9f25 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -17,6 +17,8 @@ var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; +var ElementsMediator = require("js/mediators/element-mediator").ElementMediator + var LayerStyle = exports.LayerStyle = Montage.create(Component, { @@ -169,7 +171,27 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.needsDraw = true; } }, - + + addedColorChips: + { value: false }, + + _fill: { + enumerable: false, + value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] } + }, + + fill: { + enumerable: true, + get: function () { + return this._fill; + }, + set: function (value) { + if (value !== this._fill) { + this._fill = value; + } + } + }, + handleMousedown: { value: function(event) { this.isActive = true; @@ -196,6 +218,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } else { this.element.classList.remove("style-selected"); } + + } }, didDraw: { @@ -311,6 +335,38 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.editorInputContainer.classList.add("hidden"); this.editorColorContainer.classList.remove("hidden"); this.editorHottextContainer.classList.add("hidden"); + + if(tweenable.colorType === "fill"){ + this._isFill = true; + }else{ + if(tweenable.colorType === "stroke"){ + this._isFill = false; + 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 }; + this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); + + // setup stroke color + // this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; + // this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl); + + this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); + + this.addedColorChips = true; + } + + if (this.addedColorChips) { + this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); + // this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); + } + + + // TODO: set up color chip here. } else if (tweenable.tweener === "input"){ this.editorInputContainer.classList.remove("hidden"); @@ -327,295 +383,321 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { /* === END: Controllers === */ _myTweenables: { - value: [ - { - "property" : "background-color", - "tweener" : "color", - "units" : "", - "min" : "", - "max" : "", - "default" :"#FFFFFF" - }, - { - "property" : "background-position-x", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "background-position-y", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-color", - "tweener" : "color", - "units" : "", - "min" : "", - "max" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-bottom-color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-bottom-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-left-color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-left-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-top-color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-top-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-right-color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-right-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-radius", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "bottom", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "margin", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "margin-left", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "margin-right", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "margin-top", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "margin-bottom", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding-left", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding-right", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding-top", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding-bottom", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "max-height", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "max-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "min-height", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "min-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "opacity", - "tweener" : "hottext", - "units" : "", - "min" : 0, - "max" : 100, - "default" : 100 - }, - { - "property" : "text-indent", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "top", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "right", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "left", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "height", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - } - ] - + value: [ + { + "property" : "background-color", + "tweener" : "color", + "units" : "", + "min" : "", + "max" : "", + "default" :"#FFFFFF", + "colorType" :"fill" + }, + { + "property" : "background-position-x", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "background-position-y", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "border-color", + "tweener" : "color", + "units" : "", + "min" : "", + "max" : "", + "default" : "#FFFFFF", + "colorType" : "stroke", + "strokePosition" : false + }, + { + "property" : "border-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "border-bottom-color", + "tweener" : "color", + "units" : "", + "default" : "#FFFFFF", + "colorType" : "stroke", + "strokePosition" : "bottom" + + }, + { + "property" : "border-bottom-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "border-left-color", + "tweener" : "color", + "units" : "", + "default" : "#FFFFFF", + "colorType" : "stroke", + "strokePosition" : "left" + + }, + { + "property" : "border-left-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "border-top-color", + "tweener" : "color", + "units" : "", + "default" : "#FFFFFF", + "colorType" : "stroke", + "strokePosition" : "top" + + }, + { + "property" : "border-top-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "border-right-color", + "tweener" : "color", + "units" : "", + "default" : "#FFFFFF", + "colorType" : "stroke", + "strokePosition" : "right" + + }, + { + "property" : "border-right-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "border-radius", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "bottom", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "color", + "tweener" : "color", + "units" : "", + "default" : "#FFFFFF" + }, + { + "property" : "margin", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "margin-left", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "margin-right", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "margin-top", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "margin-bottom", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "padding", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "padding-left", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "padding-right", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "padding-top", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "padding-bottom", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "max-height", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "max-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "min-height", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "min-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "opacity", + "tweener" : "hottext", + "units" : "%", + "min" : 0, + "max" : 100, + "default" : 100 + }, + { + "property" : "text-indent", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "top", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "right", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "left", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "height", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + } + ] + + }, + + handleFillColorChange: { + value: function (event) { +debugger; + + var fillColorObject={}; + fillColorObject.color=event._event.color; + fillColorObject.mode=event._event.colorMode; + ElementsMediator.setColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide) + } }, handleHottextChange:{ -- cgit v1.2.3 From 66007a04da84cae1d81af5340b11706d5f25c89d Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 31 May 2012 17:09:45 -0700 Subject: Timeline: Bug fixes for deleting styles and their associated tracks correctly. --- 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 d712f2bd..185c9bb0 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -35,7 +35,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { return this._isSelected; }, set: function(newVal) { - console.log("Style["+this.styleID+"].isSelected.set ", newVal) + //console.log("Style["+this.styleID+"].isSelected.set ", newVal) if (newVal !== this._isSelected) { this._isSelected = newVal; this.needsDraw = true; -- cgit v1.2.3 From 2390c512a501755d0b0adf429123e0fe7f34bb77 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Fri, 1 Jun 2012 10:58:43 -0700 Subject: Layer Controls Signed-off-by: Kruti Shah --- js/panels/Timeline/Style.reel/Style.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 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 102e9f25..9209e8b9 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -691,12 +691,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { handleFillColorChange: { value: function (event) { -debugger; var fillColorObject={}; fillColorObject.color=event._event.color; fillColorObject.mode=event._event.colorMode; - ElementsMediator.setColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide) + console.log(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement); + ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide) } }, @@ -706,7 +706,7 @@ debugger; if(this.editorValue===""){ this.editorValue = 0; } - this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline"); + this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline"); } }, @@ -716,13 +716,13 @@ debugger; if(this.editorValue===""){ this.editorValue = 0; } - this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + event.target._units ] , "Changing", "timeline"); + 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){ - this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [event.target.value] , "Change", "timeline"); + this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline"); } }, -- cgit v1.2.3 From e4c12f183f001cb9c051131dda7f5bddbe5b1619 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Fri, 1 Jun 2012 11:00:34 -0700 Subject: Clean up Signed-off-by: Kruti Shah --- js/panels/Timeline/Style.reel/Style.js | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 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 9209e8b9..669091af 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -337,26 +337,19 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.editorHottextContainer.classList.add("hidden"); if(tweenable.colorType === "fill"){ - this._isFill = true; - }else{ - if(tweenable.colorType === "stroke"){ - this._isFill = false; - this._borderSide = tweenable.strokePosition - } - - } + this._isFill = true; + }else{ + if(tweenable.colorType === "stroke"){ + this._isFill = false; + 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 }; this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); - - // setup stroke color - // this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; - // this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl); - this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); - this.addedColorChips = true; } @@ -695,7 +688,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { var fillColorObject={}; fillColorObject.color=event._event.color; fillColorObject.mode=event._event.colorMode; - console.log(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement); ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide) } }, -- cgit v1.2.3 From 4338d57eed565f723bfb7cbcefca65836b68953b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 1 Jun 2012 14:26:30 -0700 Subject: Timeline: Better style selection and deselection. Automatic re-selection of previously selected style when parent layer is reselected. --- 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 185c9bb0..5c1c9eeb 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -35,7 +35,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { return this._isSelected; }, set: function(newVal) { - //console.log("Style["+this.styleID+"].isSelected.set ", newVal) + if (newVal !== this._isSelected) { this._isSelected = newVal; this.needsDraw = true; -- cgit v1.2.3 From 10620ff1a9b42528d84f2c6cc4f64a1790a0d8b7 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Mon, 4 Jun 2012 10:13:30 -0700 Subject: LC Signed-off-by: Kruti Shah --- js/panels/Timeline/Style.reel/Style.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 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 669091af..efc004e9 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -310,6 +310,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { // First, get the appropriate editor type from the data structure. var tweenable = {}, i = 0; + + if (this.ruleTweener === true) { + return; + } else { + this.ruleTweener = true; + } tweenable.tweener = "input"; @@ -358,8 +364,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { // this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); } - - // TODO: set up color chip here. } else if (tweenable.tweener === "input"){ this.editorInputContainer.classList.remove("hidden"); -- cgit v1.2.3 From 8986b9f78174b10790ad00e5a28122cb0879e5e3 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Thu, 7 Jun 2012 21:22:41 -0700 Subject: Sub property Signed-off-by: Kruti Shah --- js/panels/Timeline/Style.reel/Style.js | 54 +++++++++++++++++++++++----------- 1 file changed, 37 insertions(+), 17 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 efc004e9..ed7a281a 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -175,6 +175,23 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { addedColorChips: { value: false }, + _abcelement: { + writable:true + }, + + abcelement: { + enumerable: true, + get: function () { + return this._abcelement; + }, + set: function (value) { + if (value !== this._abcelement) { + this._abcelement = value; + } + console.log(this._abcelement) + } + }, + _fill: { enumerable: false, value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] } @@ -333,7 +350,10 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.valueEditorHottext.units = tweenable.units; this.valueEditorHottext.minValue = tweenable.min; this.valueEditorHottext.maxValue = tweenable.max; - this.valueEditorHottext.identifier="hottext" + this.valueEditorHottext.identifier="hottext"; + el = this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement; + this.editorValue = parseFloat(ElementsMediator.getProperty(el, this.editorProperty)); + this.valueEditorHottext.value = this.editorValue this.valueEditorHottext.addEventListener("change",this,false); this.valueEditorHottext.addEventListener("changing",this,false); this.valueEditorHottext.needsDraw = true; @@ -355,12 +375,14 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { // setup fill color 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.abcelement = this._fillColorCtrl; + var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,true) this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); this.addedColorChips = true; } if (this.addedColorChips) { - this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); + this._fillColorCtrl.color(currentValue.colorMode, currentValue.color); // this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); } @@ -629,7 +651,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { { "property" : "opacity", "tweener" : "hottext", - "units" : "%", + "units" : "", "min" : 0, "max" : 100, "default" : 100 @@ -688,37 +710,35 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { handleFillColorChange: { value: function (event) { + 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) - 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.editorValue===""){ - this.editorValue = 0; + 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", "pi"); } - 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.editorValue===""){ - this.editorValue = 0; - } - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units ] , "Changing", "timeline"); + 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", "pi"); + } } }, handleBlur:{ value:function(event){ - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline"); + 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"); + } } }, -- cgit v1.2.3 From c1cd060be878d30fda71140dc850b8d1ac68c6ad Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Fri, 8 Jun 2012 11:27:40 -0700 Subject: Color chip in TP Signed-off-by: Kruti Shah --- js/panels/Timeline/Style.reel/Style.js | 8 ++------ 1 file changed, 2 insertions(+), 6 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 ed7a281a..a0dc7c6b 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -376,14 +376,10 @@ 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.abcelement = this._fillColorCtrl; - var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,true) + var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide) this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); - this.addedColorChips = true; - } - - if (this.addedColorChips) { this._fillColorCtrl.color(currentValue.colorMode, currentValue.color); - // this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); + this.addedColorChips = true; } // TODO: set up color chip here. -- cgit v1.2.3 From bedb38e14887b29eae3cdf1c8d435259c920257c Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 12 Jun 2012 13:05:12 -0700 Subject: Sub Props Signed-off-by: Kruti Shah --- js/panels/Timeline/Style.reel/Style.js | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 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 a0dc7c6b..37f970c0 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -175,20 +175,19 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { addedColorChips: { value: false }, - _abcelement: { + _colorelement: { writable:true }, - abcelement: { + colorelement: { enumerable: true, get: function () { - return this._abcelement; + return this._colorelement; }, set: function (value) { - if (value !== this._abcelement) { - this._abcelement = value; + if (value !== this._colorelement) { + this._colorelement = value; } - console.log(this._abcelement) } }, @@ -375,13 +374,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { // setup fill color 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.abcelement = this._fillColorCtrl; + this.colorelement = this._fillColorCtrl; var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide) + this.application.ninja.timeline.selectedStyle = this.editorProperty; this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); this._fillColorCtrl.color(currentValue.colorMode, currentValue.color); this.addedColorChips = true; } - // TODO: set up color chip here. } else if (tweenable.tweener === "input"){ this.editorInputContainer.classList.remove("hidden"); @@ -706,26 +705,30 @@ 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){ + console.log(this.application.ninja.timeline.selectedStyle) 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", "pi"); + 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){ + console.log(this.application.ninja.timeline.selectedStyle) 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", "pi"); + this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Changing", "timeline"); } } }, -- cgit v1.2.3 From 7887aafbff794e9c5f918c667e73a8386c38cf02 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 12 Jun 2012 13:18:02 -0700 Subject: Clean up Signed-off-by: Kruti Shah --- js/panels/Timeline/Style.reel/Style.js | 7 ++----- 1 file changed, 2 insertions(+), 5 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 bb10f30f..03d674a5 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -705,19 +705,17 @@ 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){ + 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){ - console.log(this.application.ninja.timeline.selectedStyle) 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"); } @@ -726,7 +724,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { handleHottextChanging:{ value:function(event){ - console.log(this.application.ninja.timeline.selectedStyle) 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"); } -- cgit v1.2.3