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 <kruti.shah@motorola.com>
---
 js/panels/Timeline/Layer.reel/Layer.html |  23 +++--
 js/panels/Timeline/Layer.reel/Layer.js   | 142 +++++++++++++++++++++++++++----
 js/panels/Timeline/Style.reel/Style.js   |  19 ++++-
 3 files changed, 157 insertions(+), 27 deletions(-)

(limited to 'js/panels/Timeline')

diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index c7e7b575..c4aa6e29 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -21,7 +21,12 @@
 						"positionCollapser" : {"@" : "positionCollapser"},
 						"styleCollapser" : {"@" : "styleCollapser"},
 						"clickerMain" : {"#" : "clicker-main"},
-						"myLabel" : {"#" : "myLabel"}
+						"myLabel" : {"#" : "myLabel"},
+                        "leftControl": {"@" : "dtext_position_x"},
+                        "topControl": {"@" : "dtext_position_y"},
+                        "widthControl": {"@" : "dtext_scale_x"},
+                        "heightControl": {"@" : "dtext_scale_y"},
+                        "styleType":{"@" : "style"}
                     }
                 },
 	            "dtext1" : {
@@ -147,10 +152,10 @@
                     "prototype": "js/components/hottextunit.reel[HotTextUnit]",
             	    "properties": {
             	        "element": {"#": "scale-x"},
-            	        "maxValue" : 100,
-                        "minValue" : 0,
-                        "acceptableUnits" : "%",
-                        "units" : "%",
+            	        "maxValue" : 100000,
+                        "minValue" : -100000,
+                        "acceptableUnits" : "px",
+                        "units" : "px",
                         "value" : 0
             	    },
 	                "bindings": {
@@ -165,10 +170,10 @@
                     "prototype": "js/components/hottextunit.reel[HotTextUnit]",
             	    "properties": {
             	        "element": {"#": "scale-y"},
-            	        "maxValue" : 100,
-                        "minValue" : 0,
-                        "acceptableUnits" : "%",
-                        "units" : "%",
+            	        "maxValue" : 100000,
+                        "minValue" : -100000,
+                        "acceptableUnits" : "px",
+                        "units" : "px",
                         "value" : 0
             	    },
 	                "bindings": {
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b0f6d220..2df11f18 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -12,6 +12,7 @@ var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle;
 var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText;
 var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
 var nj = require("js/lib/NJUtils").NJUtils;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
 
 var Layer = exports.Layer = Montage.create(Component, {
 
@@ -162,7 +163,6 @@ var Layer = exports.Layer = Montage.create(Component, {
         		this._dtextPositionX = value;
         		this.layerData.dtextPositionX = value;
         	}
-            
         }
     },
     
@@ -487,11 +487,36 @@ var Layer = exports.Layer = Montage.create(Component, {
 			this.element.addEventListener("drop", this.handleDrop.bind(this), false);
 
             this.eventManager.addEventListener("updatedID", this, false);
-			
+            this.eventManager.addEventListener("elementChange",this,false);
+
+            this.leftControl.identifier = "left";
+            this.leftControl.addEventListener("changing",this,false);
+            this.leftControl.addEventListener("change",this,false);
+
+            this.topControl.identifier = "top";
+            this.topControl.addEventListener("changing",this,false);
+            this.topControl.addEventListener("change",this,false);
+
+            this.widthControl.identifier = "width";
+            this.widthControl.addEventListener("changing",this,false);
+            this.widthControl.addEventListener("change",this,false);
 
+            this.heightControl.identifier = "height";
+            this.heightControl.addEventListener("changing",this,false);
+            this.heightControl.addEventListener("change",this,false);
+
+            el=this.layerData.elementsList[0];
+
+            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"));
+
+//            this.eventManager.addEventListener("changing",this,false);
 
         }
     },
+
     draw: {
     	value: function() {
             if (this.isSelected) {
@@ -582,6 +607,7 @@ var Layer = exports.Layer = Montage.create(Component, {
 			newStyle.ruleTweener = false;
 			newStyle.isSelected = false;
             this.arrLayerStyles.push(newStyle);
+            console.log(newStyle.editorValue)
 
 			// Set up the event info and dispatch the event
             this.styleCounter += 1;
@@ -589,6 +615,7 @@ var Layer = exports.Layer = Montage.create(Component, {
 			defaultEventManager.dispatchEvent(newEvent);
 		}
 	},
+
 	deleteStyle : {
 		value: function() {
 			var newEvent = document.createEvent("CustomEvent"),
@@ -816,6 +843,100 @@ var Layer = exports.Layer = Montage.create(Component, {
 			return false;
 		}
 	},
+
+    handleLeftChange:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "left", [this.dtextPositionX + "px"] , "Change", "timeline");
+        }
+    },
+
+    handleTopChange:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "top", [this.dtextPositionY + "px"] , "Change", "timeline");
+        }
+    },
+
+    handleWidthChange:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "width", [this.dtextScaleX + "px"] , "Change", "timeline");
+        }
+    },
+
+    handleHeightChange:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "height", [this.dtextScaleY + "px"] , "Change", "timeline");
+        }
+    },
+
+    handleLeftChanging:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "left", [this.dtextPositionX + "px"] , "Changing", "timeline");
+        }
+    },
+
+    handleTopChanging:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "top", [this.dtextPositionY + "px"] , "Changing", "timeline");
+        }
+    },
+
+    handleWidthChanging:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "width", [this.dtextScaleX + "px"] , "Changing", "timeline");
+        }
+    },
+
+    handleHeightChanging:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "height", [this.dtextScaleY + "px"] , "Changing", "timeline");
+        }
+    },
+
+
+    handleElementChange:{
+        value:function(event){
+            var el = this.layerData.elementsList[0];
+            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));
+                        break;
+                    }
+                }
+            }
+
+        }
+    },
+
+    handleUpdatedID:{
+        value:function(event){
+            var i= this.application.ninja.timeline.arrLayers.length;
+            if(event.detail.id){
+                for(var k=0;k<i;k++){
+                    if(this.application.ninja.timeline.arrLayers[k].layerData.layerID=== this.application.ninja.timeline.currentLayerSelected.layerData.layerID){
+                        this.application.ninja.timeline.currentLayerSelected.layerData.layerName = event.detail.id;
+                        this.application.ninja.timeline.triggerLayerBinding(k);
+                        this.needsDraw=true;
+                    }
+                }
+
+            }
+        }
+    },
+
+    handleChanging:{
+        value:function(){
+            console.log("in layer.js")
+        }
+    },
+
 	/* End: Event handlers */
 	
 	/* Begin: Logging routines */
@@ -846,23 +967,10 @@ var Layer = exports.Layer = Montage.create(Component, {
 				return e.stack.split("at")[3].split(":")[2];
 			}
     	}
-    },
+    }
+
 
-    handleUpdatedID:{
-        value:function(event){
-            var i= this.application.ninja.timeline.arrLayers.length;
-            if(event.detail.id){
-                for(var k=0;k<i;k++){
-                    if(this.application.ninja.timeline.arrLayers[k].layerData.layerID=== this.application.ninja.timeline.currentLayerSelected.layerData.layerID){
-                        this.application.ninja.timeline.currentLayerSelected.layerData.layerName = event.detail.id;
-                        this.application.ninja.timeline.triggerLayerBinding(k);
-                        this.needsDraw=true;
-                    }
-                }
 
-            }
-        }
-    }
 
 	/* End: Logging routines */
 
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 <kruti.shah@motorola.com>
---
 js/panels/Timeline/Style.reel/Style.js | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

(limited to 'js/panels/Timeline')

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 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 <kruti.shah@motorola.com>
---
 js/panels/Timeline/Layer.reel/Layer.js   |   2 +
 js/panels/Timeline/Style.reel/Style.html |   7 +-
 js/panels/Timeline/Style.reel/Style.js   | 662 +++++++++++++++++--------------
 3 files changed, 379 insertions(+), 292 deletions(-)

(limited to 'js/panels/Timeline')

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 77db9b64..a96b206f 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -625,6 +625,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                 newStyle.editorProperty = styleProperty;
                 newEvent.layerEventType = "restoreStyle";
                 newEvent.trackEditorProperty = styleProperty;
+                newEvent.trackEditorProperty = styleProperty;
             }
 			newStyle.editorValue = "";
 			newStyle.ruleTweener = false;
@@ -744,6 +745,7 @@ var Layer = exports.Layer = Montage.create(Component, {
 			this.triggerOutgoingBinding();
 
 			this.addStyle();
+
 		}
 	},
 	handleDeleteStyleClick: {
diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html
index 5be159c3..cdc355e7 100644
--- a/js/panels/Timeline/Style.reel/Style.html
+++ b/js/panels/Timeline/Style.reel/Style.html
@@ -19,7 +19,8 @@
                         "styleProperty" : {"#": "container-property"},
                         "valueEditorHottext" : {"@":"hottextunit"},
                         "dtextProperty" : {"@":"dtext1"},
-                        "myHintable" : {"@" :"hintable"}
+                        "myHintable" : {"@" :"hintable"},
+                        "_fillColorCtrl": {"#": "fillColorCtrl"}
                     }
                 },
 	            "dtext1" : {
@@ -78,7 +79,9 @@
 						<div data-montage-id="value-editor-hottext"></div>
 					</div>
 					<div class="cell-value value-editor editor-color hidden">
-						<div data-montage-id="value-editor-color">[&nbsp;]</div>
+						<div data-montage-id="value-editor-color">
+                            <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
+						</div>
 					</div>
 					<div class="cell-value value-editor editor-input hidden">
 						<!-- <div data-montage-id="value-editor-input"></div> -->
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 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 <kruti.shah@motorola.com>
---
 js/panels/Timeline/Layer.reel/Layer.js | 18 +++++++++---------
 js/panels/Timeline/Style.reel/Style.js | 10 +++++-----
 2 files changed, 14 insertions(+), 14 deletions(-)

(limited to 'js/panels/Timeline')

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index a96b206f..cbc001be 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -891,56 +891,56 @@ var Layer = exports.Layer = Montage.create(Component, {
 
     handleLeftChange:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "left", [this.dtextPositionX + "px"] , "Change", "timeline");
+            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.dtextPositionX + "px"] , "Change", "timeline");
         }
     },
 
     handleTopChange:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "top", [this.dtextPositionY + "px"] , "Change", "timeline");
+            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.dtextPositionY + "px"] , "Change", "timeline");
         }
     },
 
     handleWidthChange:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "width", [this.dtextScaleX + "px"] , "Change", "timeline");
+            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline");
         }
     },
 
     handleHeightChange:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "height", [this.dtextScaleY + "px"] , "Change", "timeline");
+            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline");
         }
     },
 
     handleLeftChanging:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "left", [this.dtextPositionX + "px"] , "Changing", "timeline");
+            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.dtextPositionX + "px"] , "Changing", "timeline");
         }
     },
 
     handleTopChanging:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "top", [this.dtextPositionY + "px"] , "Changing", "timeline");
+            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.dtextPositionY + "px"] , "Changing", "timeline");
         }
     },
 
     handleWidthChanging:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "width", [this.dtextScaleX + "px"] , "Changing", "timeline");
+            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "timeline");
         }
     },
 
     handleHeightChanging:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "height", [this.dtextScaleY + "px"] , "Changing", "timeline");
+            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "timeline");
         }
     },
 
 
     handleElementChange:{
         value:function(event){
-            var el = this.layerData.elementsList[0];
+            var el =this.layerData.stageElement;
             var length = this.arrLayerStyles.length , i;
 
             if(event.detail.source && event.detail.source!== "timeline"){
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 <kruti.shah@motorola.com>
---
 js/panels/Timeline/Style.reel/Style.js | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

(limited to 'js/panels/Timeline')

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 07701de29866c6d792257d1e3c39cd1592ee97db Mon Sep 17 00:00:00 2001
From: Kruti Shah
Date: Fri, 1 Jun 2012 14:09:56 -0700
Subject: LayerControl

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
---
 js/panels/Timeline/Layer.reel/Layer.js | 43 +++++++++++++++++++++++++++-------
 1 file changed, 35 insertions(+), 8 deletions(-)

(limited to 'js/panels/Timeline')

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index cbc001be..e01e5b75 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -524,6 +524,32 @@ var Layer = exports.Layer = Montage.create(Component, {
 			this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
 			this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
 			this.element.addEventListener("drop", this.handleDrop.bind(this), false);
+
+            this.eventManager.addEventListener("elementChange",this,false);
+
+            this.leftControl.identifier = "left";
+            this.leftControl.addEventListener("changing",this,false);
+            this.leftControl.addEventListener("change",this,false);
+
+            this.topControl.identifier = "top";
+            this.topControl.addEventListener("changing",this,false);
+            this.topControl.addEventListener("change",this,false);
+
+            this.widthControl.identifier = "width";
+            this.widthControl.addEventListener("changing",this,false);
+            this.widthControl.addEventListener("change",this,false);
+
+            this.heightControl.identifier = "height";
+            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"));
         }
     },
 
@@ -891,19 +917,20 @@ var Layer = exports.Layer = Montage.create(Component, {
 
     handleLeftChange:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.dtextPositionX + "px"] , "Change", "timeline");
+            debugger;
+            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "left", [this.dtextPositionX + "px"] , "Change", "timeline");
         }
     },
 
     handleTopChange:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.dtextPositionY + "px"] , "Change", "timeline");
+            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "top", [this.dtextPositionY + "px"] , "Change", "timeline");
         }
     },
 
     handleWidthChange:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline");
+            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "width", [this.dtextScaleX + "px"] , "Change", "timeline");
         }
     },
 
@@ -915,25 +942,25 @@ var Layer = exports.Layer = Montage.create(Component, {
 
     handleLeftChanging:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.dtextPositionX + "px"] , "Changing", "timeline");
+            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "left", [this.dtextPositionX + "px"] , "Changing", "timeline");
         }
     },
 
     handleTopChanging:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.dtextPositionY + "px"] , "Changing", "timeline");
+            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "top", [this.dtextPositionY + "px"] , "Changing", "timeline");
         }
     },
 
     handleWidthChanging:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "timeline");
+            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "width", [this.dtextScaleX + "px"] , "Changing", "timeline");
         }
     },
 
     handleHeightChanging:{
         value:function(){
-            this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "timeline");
+            this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "height", [this.dtextScaleY + "px"] , "Changing", "timeline");
         }
     },
 
@@ -1012,7 +1039,7 @@ var Layer = exports.Layer = Montage.create(Component, {
 				return e.stack.split("at")[3].split(":")[2];
 			}
     	}
-    },
+    }
 	/* End: Logging routines */
 
 });
-- 
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 <kruti.shah@motorola.com>
---
 js/panels/Timeline/Layer.reel/Layer.js | 21 ++++++++-------------
 js/panels/Timeline/Style.reel/Style.js |  8 ++++++--
 2 files changed, 14 insertions(+), 15 deletions(-)

(limited to 'js/panels/Timeline')

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index e01e5b75..da9845d6 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -543,13 +543,13 @@ 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;
+//            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"));
         }
     },
 
@@ -916,7 +916,7 @@ var Layer = exports.Layer = Montage.create(Component, {
 	},
 
     handleLeftChange:{
-        value:function(){
+        value:function(event){
             debugger;
             this.application.ninja.elementMediator.setProperty(this.layerData.stageElement, "left", [this.dtextPositionX + "px"] , "Change", "timeline");
         }
@@ -1003,11 +1003,6 @@ var Layer = exports.Layer = Montage.create(Component, {
         }
     },
 
-    handleChanging:{
-        value:function(){
-            console.log("in layer.js")
-        }
-    },
 
 	/* End: Event handlers */
 	
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 <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(-)

(limited to 'js/panels/Timeline')

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(!eve