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 <kruti.shah@motorola.com>
---
 js/panels/Timeline/Layer.reel/Layer.html           |   7 +-
 js/panels/Timeline/Layer.reel/Layer.js             | 127 +++++++++++++++------
 js/panels/Timeline/Style.reel/Style.js             |  54 ++++++---
 .../Timeline/TimelineTrack.reel/TimelineTrack.js   |  19 +--
 4 files changed, 148 insertions(+), 59 deletions(-)

diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 717306a0..fe3f49d2 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -110,7 +110,12 @@
 	            			"boundObject" : {"@": "repetition1"},
 	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener",
 	            			"oneway" : false
-	            		}
+	            		},
+                        "abcelement" : {
+                            "boundObject" : {"@": "repetition1"},
+                            "boundObjectPropertyPath" : "objectAtCurrentIteration.abcelement",
+                            "oneway" : false
+                        }
 	            	}
 	            },
 				"dtext_position_x" : {
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index da9845d6..23ba1ef9 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -543,13 +543,11 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.heightControl.addEventListener("changing",this,false);
             this.heightControl.addEventListener("change",this,false);
 
-//            el=this.layerData.stageElement;
-//            debugger;
-//
-//            this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left"));
-//            this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top"));
-//            this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height"));
-//            this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width"));
+            el=this.layerData.stageElement;
+            this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left"));
+            this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top"));
+            this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height"));
+            this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width"));
         }
     },
 
@@ -656,6 +654,7 @@ var Layer = exports.Layer = Montage.create(Component, {
 			newStyle.editorValue = "";
 			newStyle.ruleTweener = false;
 			newStyle.isSelected = false;
+            newStyle.abcelement = "";
             this.arrLayerStyles.push(newStyle);
 
 			// Set up the event info and dispatch the event
@@ -915,52 +914,107 @@ var Layer = exports.Layer = Montage.create(Component, {
 		}
 	},
 
-    handleLeftChange:{
-        value:function(event){
-            debugger;
-            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "left", [this.dtextPositionX + "px"] , "Change", "timeline");
+    handleLeftChange: {
+        value: function(event) {
+            var prevPosition;
+            if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){
+                if(!event.wasSetByCode) {
+                    if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
+                        this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "pi", prevPosition);
+                        this.savedPosition = null;
+                }
+
+            }
         }
     },
 
-    handleTopChange:{
-        value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "top", [this.dtextPositionY + "px"] , "Change", "timeline");
+    handleTopChange: {
+        value: function(event) {
+            var prevPosition;
+            if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){
+                if(!event.wasSetByCode) {
+                    if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
+
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "pi", prevPosition);
+                    this.savedPosition = null;
+                }
+            }
         }
     },
 
     handleWidthChange:{
-        value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "width", [this.dtextScaleX + "px"] , "Change", "timeline");
+        value: function(event) {
+            var prevPosition;
+            if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){
+                if(!event.wasSetByCode) {
+                    if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
+
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "pi", prevPosition);
+                    this.savedPosition = null;
+                }
+            }
         }
     },
 
     handleHeightChange:{
-        value:function(){
-            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline");
+        value: function(event) {
+            var prevPosition;
+            if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){
+                if(!event.wasSetByCode) {
+                    if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
+
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "pi", prevPosition);
+                    this.savedPosition = null;
+                }
+            }
         }
     },
 
-    handleLeftChanging:{
-        value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "left", [this.dtextPositionX + "px"] , "Changing", "timeline");
+    handleLeftChanging: {
+        value: function(event) {
+            if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){
+                if(!event.wasSetByCode) {
+                    if(!this.savedPosition) this.savedPosition = this.leftPosition;
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "pi");
+                }
+            }
+
         }
     },
 
-    handleTopChanging:{
-        value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "top", [this.dtextPositionY + "px"] , "Changing", "timeline");
+    handleTopChanging: {
+        value: function(event) {
+            if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){
+                if(!event.wasSetByCode) {
+                    if(!this.savedPosition) this.savedPosition = this.topPosition;
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "pi");
+                }
+            }
+
         }
     },
 
     handleWidthChanging:{
-        value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "width", [this.dtextScaleX + "px"] , "Changing", "timeline");
+        value: function(event) {
+            if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){
+                if(!event.wasSetByCode) {
+                    if(!this.savedPosition) this.savedPosition = this.dtextScaleX;
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "pi");
+                }
+            }
+
         }
     },
 
     handleHeightChanging:{
-        value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "height", [this.dtextScaleY + "px"] , "Changing", "timeline");
+        value: function(event) {
+            if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){
+                if(!event.wasSetByCode) {
+                    if(!this.savedPosition) this.savedPosition = this.dtextScaleY;
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "pi");
+                }
+            }
+
         }
     },
 
@@ -970,20 +1024,29 @@ var Layer = exports.Layer = Montage.create(Component, {
             var el =this.layerData.stageElement;
             var length = this.arrLayerStyles.length , i;
 
-            if(event.detail.source && event.detail.source!== "timeline"){
                 this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left"));
                 this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top"));
                 this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height"));
                 this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width"));
 
                 for(i=0; i<length; i++){
-                    if(event.detail.data.prop === this.arrLayerStyles[i].editorProperty){
-                        this.arrLayerStyles[i].editorValue = parseFloat(ElementsMediator.getProperty(el, this.arrLayerStyles[i].editorProperty));
+                    if(event.detail.data.prop === "background-color"){
+                        var currentValue = ElementsMediator.getColor(this.layerData.stageElement,true);
+                        this.arrLayerStyles[0].abcelement.color(currentValue.colorMode, currentValue.color);
                         break;
+                    }else{
+                        this.arrLayerStyles[i].editorValue = parseFloat(ElementsMediator.getProperty(el, this.arrLayerStyles[i].editorProperty))
                     }
                 }
-            }
+        }
+    },
+    handleFillColorChange: {
+        value: function (event) {
+            var fillColorObject={};
 
+            fillColorObject.color=event._event.color;
+            fillColorObject.mode=event._event.colorMode;
+            ElementsMediator.setColor([this.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
         }
     },
 
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");
+            }
         }
     },
 
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 8dc19958..457a85c0 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -431,6 +431,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.isStyleCollapsed = this.trackData.isStyleCollapsed;
             this.trackPosition = this.trackData.trackPosition;
             this.isVisible = this.trackData.isVisible;
+            this.trackEditorProperty = "master";
             this.needsDraw = true;
         }
     },
@@ -901,15 +902,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         value:function(){
             // create track objects for position and transform tracks and push into arrays
 
-            // create 'top' track
-            var newTopTrack = {};
-            newTopTrack.propTrackData = {};
-            newTopTrack.propTrackData.propTweens = [];
-            newTopTrack.propTrackData.styleIndex = 0;
-            newTopTrack.propTrackData.trackType = "position";
-            newTopTrack.propTrackData.trackEditorProperty = "top";
-            this.arrPositionTracks.push(newTopTrack);
-
             // create 'left' track
             var newLeftTrack = {};
             newLeftTrack.propTrackData = {};
@@ -919,6 +911,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             newLeftTrack.propTrackData.trackEditorProperty = "left";
             this.arrPositionTracks.push(newLeftTrack);
 
+             // create 'top' track
+            var newTopTrack = {};
+            newTopTrack.propTrackData = {};
+            newTopTrack.propTrackData.propTweens = [];
+            newTopTrack.propTrackData.styleIndex = 0;
+            newTopTrack.propTrackData.trackType = "position";
+            newTopTrack.propTrackData.trackEditorProperty = "top";
+            this.arrPositionTracks.push(newTopTrack);
+
             // create 'width' track
             var newWidthTrack = {};
             newWidthTrack.propTrackData = {};
-- 
cgit v1.2.3