From f1387bc995766b8d941f93e605a91c49c8931645 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 22 May 2012 10:28:41 -0700 Subject: Layer Control Signed-off-by: Kruti Shah --- js/document/html-document.js | 1 - js/panels/Timeline/Layer.reel/Layer.html | 23 +++-- js/panels/Timeline/Layer.reel/Layer.js | 142 +++++++++++++++++++++++++++---- js/panels/Timeline/Style.reel/Style.js | 19 ++++- 4 files changed, 157 insertions(+), 28 deletions(-) diff --git a/js/document/html-document.js b/js/document/html-document.js index 9d083dd8..fc803c49 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js @@ -82,7 +82,6 @@ exports.HTMLDocument = Montage.create(TextDocument, { } }, - // GETTERS / SETTERS codeViewDocument:{ 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