diff options
Diffstat (limited to 'js/panels/Timeline/Style.reel')
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 54 |
1 files changed, 37 insertions, 17 deletions
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, { | |||
175 | addedColorChips: | 175 | addedColorChips: |
176 | { value: false }, | 176 | { value: false }, |
177 | 177 | ||
178 | _abcelement: { | ||
179 | writable:true | ||
180 | }, | ||
181 | |||
182 | abcelement: { | ||
183 | enumerable: true, | ||
184 | get: function () { | ||
185 | return this._abcelement; | ||
186 | }, | ||
187 | set: function (value) { | ||
188 | if (value !== this._abcelement) { | ||
189 | this._abcelement = value; | ||
190 | } | ||
191 | console.log(this._abcelement) | ||
192 | } | ||
193 | }, | ||
194 | |||
178 | _fill: { | 195 | _fill: { |
179 | enumerable: false, | 196 | enumerable: false, |
180 | 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] } | 197 | 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, { | |||
333 | this.valueEditorHottext.units = tweenable.units; | 350 | this.valueEditorHottext.units = tweenable.units; |
334 | this.valueEditorHottext.minValue = tweenable.min; | 351 | this.valueEditorHottext.minValue = tweenable.min; |
335 | this.valueEditorHottext.maxValue = tweenable.max; | 352 | this.valueEditorHottext.maxValue = tweenable.max; |
336 | this.valueEditorHottext.identifier="hottext" | 353 | this.valueEditorHottext.identifier="hottext"; |
354 | el = this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement; | ||
355 | this.editorValue = parseFloat(ElementsMediator.getProperty(el, this.editorProperty)); | ||
356 | this.valueEditorHottext.value = this.editorValue | ||
337 | this.valueEditorHottext.addEventListener("change",this,false); | 357 | this.valueEditorHottext.addEventListener("change",this,false); |
338 | this.valueEditorHottext.addEventListener("changing",this,false); | 358 | this.valueEditorHottext.addEventListener("changing",this,false); |
339 | this.valueEditorHottext.needsDraw = true; | 359 | this.valueEditorHottext.needsDraw = true; |
@@ -355,12 +375,14 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
355 | // setup fill color | 375 | // setup fill color |
356 | this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | 376 | this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; |
357 | this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); | 377 | this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); |
378 | this.abcelement = this._fillColorCtrl; | ||
379 | var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,true) | ||
358 | this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); | 380 | this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); |
359 | this.addedColorChips = true; | 381 | this.addedColorChips = true; |
360 | } | 382 | } |
361 | 383 | ||
362 | if (this.addedColorChips) { | 384 | if (this.addedColorChips) { |
363 | this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); | 385 | this._fillColorCtrl.color(currentValue.colorMode, currentValue.color); |
364 | // this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); | 386 | // this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); |
365 | } | 387 | } |
366 | 388 | ||
@@ -629,7 +651,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
629 | { | 651 | { |
630 | "property" : "opacity", | 652 | "property" : "opacity", |
631 | "tweener" : "hottext", | 653 | "tweener" : "hottext", |
632 | "units" : "%", | 654 | "units" : "", |
633 | "min" : 0, | 655 | "min" : 0, |
634 | "max" : 100, | 656 | "max" : 100, |
635 | "default" : 100 | 657 | "default" : 100 |
@@ -688,37 +710,35 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
688 | 710 | ||
689 | handleFillColorChange: { | 711 | handleFillColorChange: { |
690 | value: function (event) { | 712 | value: function (event) { |
713 | var fillColorObject={}; | ||
714 | fillColorObject.color=event._event.color; | ||
715 | fillColorObject.mode=event._event.colorMode; | ||
716 | ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide) | ||
691 | 717 | ||
692 | var fillColorObject={}; | ||
693 | fillColorObject.color=event._event.color; | ||
694 | fillColorObject.mode=event._event.colorMode; | ||
695 | ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide) | ||
696 | } | 718 | } |
697 | }, | 719 | }, |
698 | 720 | ||
699 | handleHottextChange:{ | 721 | handleHottextChange:{ |
700 | value:function(event){ | 722 | value:function(event){ |
701 | 723 | if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ | |
702 | if(this.editorValue===""){ | 724 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "pi"); |
703 | this.editorValue = 0; | ||
704 | } | 725 | } |
705 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline"); | ||
706 | } | 726 | } |
707 | }, | 727 | }, |
708 | 728 | ||
709 | handleHottextChanging:{ | 729 | handleHottextChanging:{ |
710 | value:function(event){ | 730 | value:function(event){ |
711 | 731 | if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ | |
712 | if(this.editorValue===""){ | 732 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Changing", "pi"); |
713 | this.editorValue = 0; | 733 | } |
714 | } | ||
715 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units ] , "Changing", "timeline"); | ||
716 | } | 734 | } |
717 | }, | 735 | }, |
718 | 736 | ||
719 | handleBlur:{ | 737 | handleBlur:{ |
720 | value:function(event){ | 738 | value:function(event){ |
721 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline"); | 739 | if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ |
740 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline"); | ||
741 | } | ||
722 | } | 742 | } |
723 | }, | 743 | }, |
724 | 744 | ||