1 files changed, 262 insertions, 2 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index f81d8b09..4773489c 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, {
 
@@ -205,7 +206,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this._dtextPositionX = value;
                         this.layerData.dtextPositionX = value;
                 }
-            
         }
     },
     
@@ -543,8 +543,33 @@ 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;
+            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"));
         }
     },
+
     draw: {
         value: function() {
                 var boolHasClass = this.element.classList.contains("layerSelected");
@@ -650,6 +675,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         newStyle.editorValue = "";
                         newStyle.ruleTweener = false;
                         newStyle.isSelected = false;
+            newStyle.colorelement = "";
             this.arrLayerStyles.push(newStyle);
             this.selectStyle(this.arrLayerStyles.length -1);
 
@@ -659,6 +685,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         defaultEventManager.dispatchEvent(newEvent);
                 }
         },
+
         deleteStyle : {
                 value: function() {
                 
@@ -773,6 +800,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.triggerOutgoingBinding();
 
                         this.addStyle();
+
                 }
         },
         handleDeleteStyleClick: {
@@ -919,6 +947,238 @@ var Layer = exports.Layer = Montage.create(Component, {
                         return false;
                 }
         },
+
+    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", "timeline", prevPosition);
+                        this.savedPosition = null;
+                }
+
+            }
+        }
+    },
+
+    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", "timeline", prevPosition);
+                    this.savedPosition = null;
+                }
+            }
+        }
+    },
+
+    handleWidthChange:{
+        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", "timeline", prevPosition);
+                    this.savedPosition = null;
+                }
+            }
+        }
+    },
+
+    handleHeightChange:{
+        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", "timeline", prevPosition);
+                    this.savedPosition = null;
+                }
+            }
+        }
+    },
+
+    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", "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", "timeline");
+                }
+            }
+
+        }
+    },
+
+    handleWidthChanging:{
+        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", "timeline");
+                }
+            }
+
+        }
+    },
+
+    handleHeightChanging:{
+        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", "timeline");
+                }
+            }
+
+        }
+    },
+
+
+    handleElementChange:{
+        value:function(event){
+            var el =this.layerData.stageElement;
+            var length = this.arrLayerStyles.length , i , k=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"));
+
+
+                for(i=0; i<length; i++){
+                    if (event.detail.data.prop === "color"){
+                        var currentValue1 = ElementsMediator.getColor(this.layerData.stageElement,event.detail.data.isFill,event.detail.data.borderSide);
+                        if(event.detail.data.isFill){
+                            while(k <length){