From 8c1fda5e59b9d88b69e0b4a2bd57590ef451643c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 1 May 2012 15:28:05 -0700 Subject: Timeline: Expand/collapse state of layers now mantained across document switching. --- js/panels/Timeline/Layer.reel/Layer.js | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index b23da749..34c300df 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -471,7 +471,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dtextScaleX = this.layerData.dtextScaleX; this.dtextScaleY = this.layerData.dtextScaleY; this.dtextRotate = this.layerData.dtextRotate; - this._isFirstDraw = this.layerData._isFirstDraw; + //this._isFirstDraw = this.layerData._isFirstDraw; this.layerTag = this.layerData.layerTag; this.isVisible = this.layerData.isVisible; this.isAnimated = this.layerData.isAnimated; @@ -545,6 +545,9 @@ 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); + + + } }, draw: { @@ -570,7 +573,33 @@ var Layer = exports.Layer = Montage.create(Component, { } this._isFirstDraw = false; this.layerData._isFirstDraw = false; + + if (this.isMainCollapsed === false) { + this.mainCollapser.myContent.style.height = "auto"; + this.mainCollapser.myContent.classList.remove(this.mainCollapser.collapsedClass); + this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass); + + } + if (this.isPositionCollapsed === false) { + this.positionCollapser.myContent.style.height = "auto"; + this.positionCollapser.myContent.classList.remove(this.positionCollapser.collapsedClass); + this.positionCollapser.clicker.classList.remove(this.positionCollapser.collapsedClass); + } + if (this.isTransformCollapsed === false) { + this.transformCollapser.myContent.style.height = "auto"; + this.transformCollapser.myContent.classList.remove(this.transformCollapser.collapsedClass); + this.transformCollapser.clicker.classList.remove(this.transformCollapser.collapsedClass); + } + if (this.isStyleCollapsed === false) { + this.styleCollapser.myContent.style.height = "auto"; + this.styleCollapser.myContent.classList.remove(this.styleCollapser.collapsedClass); + this.styleCollapser.clicker.classList.remove(this.styleCollapser.collapsedClass); + } + } + + + } }, /* End: Draw cycle */ -- cgit v1.2.3 From eaef072648eb539e648aabf7bc1aea8d02c21085 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 4 May 2012 21:46:29 -0700 Subject: property track additions to serialization data object Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index b23da749..ef51886e 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -606,6 +606,7 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent.layerEventLocale = "styles"; newEvent.layerEventType = "newStyle"; newEvent.layerID = this.layerID; + newEvent.styleIndex = this._styleCounter; newEvent.styleID = this.layerID + "@" + this._styleCounter; newStyle.styleID = newEvent.styleID; @@ -629,7 +630,7 @@ var Layer = exports.Layer = Montage.create(Component, { } // Set up the event info and dispatch the event - + this._styleCounter += 1; newEvent.styleSelection = mySelection; defaultEventManager.dispatchEvent(newEvent); -- cgit v1.2.3 From a831e11ef6ae97bbd90c896b5cb6f4306e9001dd Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 4 May 2012 23:30:49 -0700 Subject: more sub prop additions Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 34 +++++++++++++++------------------- 1 file changed, 15 insertions(+), 19 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 9edd2b35..233e811f 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -51,6 +51,7 @@ var Layer = exports.Layer = Montage.create(Component, { value: false }, styleRepetition : { + serializable: true, get: function() { return this._styleRepetition; }, @@ -61,8 +62,17 @@ var Layer = exports.Layer = Montage.create(Component, { _styleCounter : { value: 0 }, + styleCounter:{ + serializable:true, + get:function () { + return this._styleCounter; + }, + set:function (newVal) { + this._styleCounter = newVal; + } + }, - /* Layer models: the name, ID, and selected and animation booleans for the layer */ + /* Layer models: the name, ID, and selected and animation booleans for the layer */ _layerName:{ value: "Default Layer Name" }, @@ -635,8 +645,8 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent.layerEventLocale = "styles"; newEvent.layerEventType = "newStyle"; newEvent.layerID = this.layerID; - newEvent.styleIndex = this._styleCounter; - newEvent.styleID = this.layerID + "@" + this._styleCounter; + newEvent.styleIndex = this.styleCounter; + newEvent.styleID = this.layerID + "@" + this.styleCounter; newStyle.styleID = newEvent.styleID; newStyle.whichView = "hintable"; @@ -644,26 +654,12 @@ var Layer = exports.Layer = Montage.create(Component, { newStyle.editorValue = ""; newStyle.ruleTweener = false; newStyle.isSelected = false; + this.arrLayerStyles.push(newStyle); - if (!!this.styleRepetition.selectedIndexes) { - mySelection = this.styleRepetition.selectedIndexes[0]; - this.arrLayerStyles.splice(mySelection, 0, newStyle); - //this.styleRepetition.selectedIndexes = [mySelection]; - this.selectStyle(mySelection); - } else { - newLength = this.arrLayerStyles.length; - this.arrLayerStyles.push(newStyle); - mySelection = this.arrLayerStyles.length; - // this.styleRepetition.selectedIndexes = [mySelection-1]; - this.selectStyle(mySelection-1); - } - // Set up the event info and dispatch the event - this._styleCounter += 1; + this.styleCounter += 1; newEvent.styleSelection = mySelection; defaultEventManager.dispatchEvent(newEvent); - - } }, deleteStyle : { -- cgit v1.2.3 From 307d339e45b209dab80ff88196a9f85f8d58f425 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 8 May 2012 11:48:29 -0700 Subject: Timeline: Update drag and drop handlers to be unique for drag and drop type. --- js/panels/Timeline/Layer.reel/Layer.js | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 34c300df..c213cb70 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -868,6 +868,9 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleDragleave: { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "layer") { + return; + } this.element.classList.remove("dragOver"); } }, @@ -875,10 +878,14 @@ var Layer = exports.Layer = Montage.create(Component, { value: function(event) { this.parentComponent.parentComponent.dragLayerID = this.layerID; event.dataTransfer.setData('Text', 'Layer'); + this.parentComponent.parentComponent.draggingType = "layer"; } }, handleDragover: { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "layer") { + return; + } event.preventDefault(); this.element.classList.add("dragOver"); event.dataTransfer.dropEffect = "move"; @@ -888,6 +895,9 @@ var Layer = exports.Layer = Montage.create(Component, { handleDrop : { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "layer") { + return; + } event.stopPropagation(); this.element.classList.remove("dragOver"); if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { -- cgit v1.2.3 From 4f1693b953befabf4495df668f542c7f52270864 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 8 May 2012 13:42:04 -0700 Subject: Change sub property track arrays Remove transform section and move width and height into Position section. rename position section Position and Size. additional support for generic prop tweens Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 90 +--------------------------------- 1 file changed, 1 insertion(+), 89 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 233e811f..c9dd5328 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -147,7 +147,7 @@ var Layer = exports.Layer = Montage.create(Component, { } }, - /* Position and Transform hottext values */ + /* Position and Size hottext values */ _dtextPositionX : { value:null }, @@ -220,60 +220,6 @@ var Layer = exports.Layer = Montage.create(Component, { } }, - _dtextSkewX : { - value:null - }, - - dtextSkewX:{ - serializable: true, - get:function(){ - return this._dtextSkewX; - }, - set:function(value){ - if (this._dtextSkewX !== value) { - this._dtextSkewX = value; - this.layerData.dtextSkewX = value; - } - - } - }, - - _dtextSkewY : { - value:null - }, - - dtextSkewY:{ - serializable: true, - get:function(){ - return this._dtextSkewY; - }, - set:function(value){ - if (this._dtextSkewY !== value) { - this._dtextSkewY = value; - this.layerData.dtextSkewY = value; - } - - } - }, - - _dtextRotate : { - value:null - }, - - dtextRotate:{ - serializable: true, - get:function(){ - return this._dtextRotate; - }, - set:function(value){ - if (this._dtextRotate !== value) { - this._dtextRotate = value; - this.layerData.dtextRotate = value; - } - - } - }, - /* isSelected: whether or not the layer is currently selected. */ _isSelected:{ value: false @@ -372,20 +318,6 @@ var Layer = exports.Layer = Montage.create(Component, { } }, - _isTransformCollapsed : { - value: true - }, - isTransformCollapsed : { - serializable: true, - get: function() { - return this._isTransformCollapsed; - }, - set: function(newVal) { - this._isTransformCollapsed = newVal; - this.layerData.isTransformCollapsed = newVal; - } - }, - _isPositionCollapsed : { value: true }, @@ -469,7 +401,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.arrLayerStyles = this.layerData.arrLayerStyles; this.isMainCollapsed = this.layerData.isMainCollapsed; this.isPositionCollapsed = this.layerData.isPositionCollapsed; - this.isTransformCollapsed = this.layerData.isTransformCollapsed; this.isSelected = this.layerData.isSelected; this.isActive = this.layerData.isActive; this.isStyleCollapsed = this.layerData.isStyleCollapsed; @@ -537,7 +468,6 @@ var Layer = exports.Layer = Montage.create(Component, { // Collapser event handlers. this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); - this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); // Add event listeners to add and delete style buttons @@ -595,11 +525,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.positionCollapser.myContent.classList.remove(this.positionCollapser.collapsedClass); this.positionCollapser.clicker.classList.remove(this.positionCollapser.collapsedClass); } - if (this.isTransformCollapsed === false) { - this.transformCollapser.myContent.style.height = "auto"; - this.transformCollapser.myContent.classList.remove(this.transformCollapser.collapsedClass); - this.transformCollapser.clicker.classList.remove(this.transformCollapser.collapsedClass); - } if (this.isStyleCollapsed === false) { this.styleCollapser.myContent.style.height = "auto"; this.styleCollapser.myContent.classList.remove(this.styleCollapser.collapsedClass); @@ -823,19 +748,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.triggerOutgoingBinding(); } }, - handleTransformCollapserClick : { - value: function(event) { - this.transformCollapser.bypassAnimation = false; - this.bypassAnimation = false; - this.layerData.bypassAnimation = false; - if (this.isTransformCollapsed) { - this.isTransformCollapsed = false; - } else { - this.isTransformCollapsed = true; - } - this.triggerOutgoingBinding(); - } - }, handleStyleCollapserClick : { value: function(event) { this.styleCollapser.bypassAnimation = false; -- cgit v1.2.3 From 40670fd9a723fe6f95fe6c1ceefa0d2435b83aa4 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 9 May 2012 09:47:31 -0700 Subject: sub property additions Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index c9dd5328..9fb33956 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -60,7 +60,7 @@ var Layer = exports.Layer = Montage.create(Component, { } }, _styleCounter : { - value: 0 + value: 4 }, styleCounter:{ serializable:true, @@ -557,7 +557,7 @@ var Layer = exports.Layer = Montage.create(Component, { // Or at the end, if no rule is selected. var newLength = 0, - mySelection = 0, + // mySelection = 0, // newStyle = LayerStyle.create(), newStyle = {}, newEvent = document.createEvent("CustomEvent"); @@ -571,7 +571,7 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent.layerEventType = "newStyle"; newEvent.layerID = this.layerID; newEvent.styleIndex = this.styleCounter; - newEvent.styleID = this.layerID + "@" + this.styleCounter; + newEvent.styleID = this.layerID + "@" + this.styleCounter; // is this property needed? newStyle.styleID = newEvent.styleID; newStyle.whichView = "hintable"; @@ -583,7 +583,7 @@ var Layer = exports.Layer = Montage.create(Component, { // Set up the event info and dispatch the event this.styleCounter += 1; - newEvent.styleSelection = mySelection; + // newEvent.styleSelection = mySelection; defaultEventManager.dispatchEvent(newEvent); } }, -- cgit v1.2.3 From b42e5dc5922fb427b9edc7af60e9fa4a5dfcbe0e Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 10 May 2012 10:43:49 -0700 Subject: Some sub prop updates Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 9fb33956..245aabd4 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -60,7 +60,7 @@ var Layer = exports.Layer = Montage.create(Component, { } }, _styleCounter : { - value: 4 + value: 0 }, styleCounter:{ serializable:true, -- cgit v1.2.3 From 8c464561e0c55dc5bf67e1e815678e0d07dc4727 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 10:53:20 -0700 Subject: Squashed commit of the following: commit b23502b8ed6856981d09577d4cf24283e5db8afa Author: Kruti Shah Date: Mon May 14 10:48:16 2012 -0700 Removed Debugger Signed-off-by: Kruti Shah commit c0b531a074e9cf9a964da0cda496bba8d7453ec1 Author: Kruti Shah Date: Fri May 11 13:55:18 2012 -0700 Changing Doc Layer Name Signed-off-by: Kruti Shah Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 130dd044..b0f6d220 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -83,13 +83,13 @@ var Layer = exports.Layer = Montage.create(Component, { return this._layerName; }, set:function(newVal){ - this._layerEditable.value = newVal; this._layerName = newVal; this.layerData.layerName = newVal; if (typeof(this.dynamicLayerName) !== "undefined") { this.dynamicLayerName.value = newVal; } + } }, _layerID:{ @@ -485,6 +485,8 @@ 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("updatedID", this, false); @@ -668,11 +670,11 @@ var Layer = exports.Layer = Montage.create(Component, { /* Begin: Event handlers */ handleLayerNameChange: { - value: function(event) { + value: function(event) { this.dynamicLayerName.value = this._layerEditable.value; - this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.dynamicLayerName.value; this.needsDraw = true; this.application.ninja.documentController.activeDocument.needsSave = true; + this.layerData.elementsList[0].setAttribute("id",this.dynamicLayerName.value); } }, handleAddStyleClick: { @@ -699,7 +701,6 @@ var Layer = exports.Layer = Montage.create(Component, { } this.dynamicLayerName.value = newVal; this.layerName = newVal; - this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = newVal; this.application.ninja.documentController.activeDocument.needsSave = true; this.needsDraw = true; } @@ -845,7 +846,24 @@ 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 --- js/panels/Timeline/Layer.reel/Layer.js | 142 +++++++++++++++++++++++++++++---- 1 file changed, 125 insertions(+), 17 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') 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 --- js/panels/Timeline/Layer.reel/Layer.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 4fb3e43c..8df0e9ae 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -556,7 +556,7 @@ var Layer = exports.Layer = Montage.create(Component, { } }, addStyle : { - value: function() { + value: function(styleProperty) { // Add a new style rule. It should be added above the currently selected rule, // Or at the end, if no rule is selected. @@ -579,7 +579,12 @@ var Layer = exports.Layer = Montage.create(Component, { newStyle.styleID = newEvent.styleID; newStyle.whichView = "hintable"; - newStyle.editorProperty = ""; + newStyle.editorProperty = ""; + if(styleProperty){ + newStyle.editorProperty = styleProperty; + newEvent.layerEventType = "restoreStyle"; + newEvent.trackEditorProperty = styleProperty; + } newStyle.editorValue = ""; newStyle.ruleTweener = false; newStyle.isSelected = false; -- cgit v1.2.3 From 811ce7a7cdec18f304c6660a70012960e61d967a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 24 May 2012 17:46:47 -0700 Subject: Timeline: bug fix "Layer name gets doubled" (Spreadsheet) --- js/panels/Timeline/Layer.reel/Layer.js | 44 ++++++++++++++++++++++++---------- 1 file changed, 31 insertions(+), 13 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 8df0e9ae..db99e869 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -74,7 +74,7 @@ var Layer = exports.Layer = Montage.create(Component, { /* Layer models: the name, ID, and selected and animation booleans for the layer */ _layerName:{ - value: "Default Layer Name" + value: "" }, layerName:{ @@ -83,13 +83,22 @@ var Layer = exports.Layer = Montage.create(Component, { return this._layerName; }, set:function(newVal){ - this._layerEditable.value = newVal; - this._layerName = newVal; - this.layerData.layerName = newVal; + if (this._layerEditable.value !== newVal) { + this._layerEditable.value = newVal; + } + if (this._layerName !== newVal) { + this._layerName = newVal; + } + if (this.layerData.layerName !== newVal) { + this.layerData.layerName = newVal; + } + if (typeof(this.dynamicLayerName) !== "undefined") { - this.dynamicLayerName.value = newVal; + if (this.dynamicLayerName.value !== newVal) { + this.dynamicLayerName.value = newVal; + } } - + this.needsDraw = true; } }, _layerID:{ @@ -513,6 +522,11 @@ var Layer = exports.Layer = Montage.create(Component, { //console.log('Layer.draw, removing selection for layer ', this.layerName) this.element.classList.remove("layerSelected"); } + + // Update layer name? + if (this.layerName !== this.layer_label_text.innerText) { + this.layer_label_text.innerText = this.layerName; + } } }, didDraw: { @@ -678,10 +692,12 @@ var Layer = exports.Layer = Montage.create(Component, { /* Begin: Event handlers */ handleLayerNameChange: { value: function(event) { - this.dynamicLayerName.value = this._layerEditable.value; - this.needsDraw = true; - this.application.ninja.documentController.activeDocument.needsSave = true; - this.layerData.stageElement.setAttribute("id",this.dynamicLayerName.value); + + if (this._layerEditable.value !== this.layerName) { + this.layerName = this._layerEditable.value; + this.application.ninja.documentController.activeDocument.needsSave = true; + this.layerData.stageElement.setAttribute("id",this._layerEditable.value); + } } }, handleAddStyleClick: { @@ -706,10 +722,12 @@ var Layer = exports.Layer = Montage.create(Component, { if (this._layerEditable.enteredValue.length === 0) { newVal = this._layerEditable._preEditValue; } - this.dynamicLayerName.value = newVal; this.layerName = newVal; - this.application.ninja.documentController.activeDocument.needsSave = true; - this.needsDraw = true; + if (newVal !== this.layerName) { + this.layerName = newVal; + this.application.ninja.documentController.activeDocument.needsSave = true; + this.layerData.stageElement.setAttribute("id", newVal); + } } }, handleMousedown: { -- cgit v1.2.3 From b0a736deb4f3bb515e0ca4009fe4f98e22cec2c0 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 25 May 2012 10:15:48 -0700 Subject: Timeline: Better fix for keeping styles/tracks in synch when adding styles on document open. --- js/panels/Timeline/Layer.reel/Layer.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index db99e869..45d6f0a3 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -579,10 +579,11 @@ var Layer = exports.Layer = Montage.create(Component, { // newStyle = LayerStyle.create(), newStyle = {}, newEvent = document.createEvent("CustomEvent"); - + /* this.isStyleCollapsed = false; this.layerData.isStyleCollapsed = false; this.triggerOutgoingBinding(); + */ newEvent.initCustomEvent("layerEvent", false, true); newEvent.layerEventLocale = "styles"; @@ -702,6 +703,11 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleAddStyleClick: { value: function(event) { + + this.isStyleCollapsed = false; + this.layerData.isStyleCollapsed = false; + this.triggerOutgoingBinding(); + this.addStyle(); } }, -- cgit v1.2.3 From 4a8a293ba3fdf934a431152a9351f45092fb3695 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 25 May 2012 14:01:45 -0700 Subject: Timeline: bug fix: better selection/deselection of styles within layers. --- js/panels/Timeline/Layer.reel/Layer.js | 51 ++++++++++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 45d6f0a3..f571c1d4 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -71,6 +71,24 @@ var Layer = exports.Layer = Montage.create(Component, { this._styleCounter = newVal; } }, + _selectedStyleIndex: { + value: false + }, + selectedStyleIndex: { + get: function() { + return this._selectedStyleIndex; + }, + set: function(newVal) { + if (typeof(newVal) === "undefined") { + return; + } + if (newVal !== this._selectedStyleIndex) { + this._selectedStyleIndex = newVal; + this.layerData.selectedStyleIndex = newVal; + this.needsDraw = true; + } + } + }, /* Layer models: the name, ID, and selected and animation booleans for the layer */ _layerName:{ @@ -441,6 +459,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.isVisible = this.layerData.isVisible; this.isAnimated = this.layerData.isAnimated; this.docUUID = this.layerData.docUUID; + this.selectedStyleIndex = this.layerData.selectedStyleIndex; this.needsDraw = boolNeedsDraw; } }, @@ -517,11 +536,21 @@ var Layer = exports.Layer = Montage.create(Component, { if (this.isSelected && !boolHasClass) { //console.log('Layer.draw, adding selection for layer ', this.layerName) this.element.classList.add("layerSelected"); + } if (!this.isSelected && boolHasClass) { //console.log('Layer.draw, removing selection for layer ', this.layerName) this.element.classList.remove("layerSelected"); } + // Enable or disable the delete style button as appropriate + if (this.isSelected) { + if (this.selectedStyleIndex !== "false") { + this.selectStyle(this.selectedStyleIndex); + this.buttonDeleteStyle.classList.remove("disabled"); + } + } else { + this.buttonDeleteStyle.classList.add("disabled"); + } // Update layer name? if (this.layerName !== this.layer_label_text.innerText) { @@ -643,31 +672,38 @@ var Layer = exports.Layer = Montage.create(Component, { }, selectStyle : { value: function(styleIndex) { + //console.log("Layer.selectStyle ", styleIndex); // Select a style based on its index. // use layerIndex = false to deselect all styles. var i = 0, arrLayerStylesLength = this.arrLayerStyles.length; + // First, update this.arrStyles[].isSelected for (i = 0; i < arrLayerStylesLength; i++) { if (i === styleIndex) { this.arrLayerStyles[i].isSelected = true; } else { - this.arrLayerStyles[i].isSelected = false; + if (this.arrLayerStyles[i].isSelected === true) { + this.arrLayerStyles[i].isSelected = false; + } } } + + /* // Next, update this.styleRepetition.selectedIndexes. if (styleIndex !== false) { - this.styleRepetition.selectedIndexes = [styleIndex]; + //this.styleRepetition.selectedIndexes = [styleIndex]; this.buttonDeleteStyle.classList.remove("disabled"); } else { - this.styleRepetition.selectedIndexes = null; + //this.styleRepetition.selectedIndexes = null; if (typeof(this.buttonDeleteStyle) !== "undefined") { this.buttonDeleteStyle.classList.add("disabled"); } } + */ } }, @@ -685,6 +721,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.arrLayerStyles[i].isActive = false; } } + //console.log("Layer.getActiveStyleIndex, returnVal ", returnVal) return returnVal; } }, @@ -738,15 +775,19 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleMousedown: { value: function(event) { + //console.log("Layer.handleMousedown") this.layerData.isActive = true; - var ptrParent = nj.queryParentSelector(event.target, ".content-style"); + var ptrParent = nj.queryParentSelector(event.target, ".content-style"), + activeStyleIndex = this.getActiveStyleIndex(); + this.selectedStyleIndex = activeStyleIndex; if (ptrParent !== false) { - this.selectStyle(this.getActiveStyleIndex()); + this.selectStyle(this.selectedStyleIndex); } } }, handleLayerClick : { value: function(event) { + //console.log("Layer.handleLayerClick") var ptrParent = nj.queryParentSelector(event.target, ".content-style"); if (ptrParent !== false) { var myIndex = this.getActiveStyleIndex(); -- 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 --- js/panels/Timeline/Layer.reel/Layer.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') 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: { -- cgit v1.2.3 From 66007a04da84cae1d81af5340b11706d5f25c89d Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 31 May 2012 17:09:45 -0700 Subject: Timeline: Bug fixes for deleting styles and their associated tracks correctly. --- js/panels/Timeline/Layer.reel/Layer.js | 55 +++++++++++++++++----------------- 1 file changed, 27 insertions(+), 28 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index db4ad712..9576d66f 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -83,6 +83,7 @@ var Layer = exports.Layer = Montage.create(Component, { return; } if (newVal !== this._selectedStyleIndex) { + console.log("Layer.selectedStyleIndex.set ", newVal); this._selectedStyleIndex = newVal; this.layerData.selectedStyleIndex = newVal; this.needsDraw = true; @@ -638,37 +639,34 @@ var Layer = exports.Layer = Montage.create(Component, { }, deleteStyle : { value: function() { - var newEvent = document.createEvent("CustomEvent"), - selectedIndex = 0; - if (this.arrLayerStyles.length > 0) { - if (!!this.styleRepetition.selectedIndexes) { - - selectedIndex = this.styleRepetition.selectedIndexes[0]; + + // Only delete a style if we have one or more styles, and one of them is selected + if ((this.arrLayerStyles.length > 0) && (this.selectedStyleIndex !== false)) { + var newEvent = document.createEvent("CustomEvent"); - // Set up the event info and dispatch the event - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "styles"; - newEvent.layerEventType = "deleteStyle"; - newEvent.layerID = this.layerID; - newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID; - newEvent.styleSelection = selectedIndex; - defaultEventManager.dispatchEvent(newEvent); - - // Delete the style from the view - this.arrLayerStyles.splice(selectedIndex, 1); - - // Was that the last style? - if (this.arrLayerStyles.length === 0) { - this.buttonDeleteStyle.classList.add("disabled"); - } - - } - } + // Set up the event info and dispatch the event + newEvent.initCustomEvent("layerEvent", false, true); + newEvent.layerEventLocale = "styles"; + newEvent.layerEventType = "deleteStyle"; + newEvent.layerID = this.layerID; + newEvent.styleID = this.selectedStyleIndex; + newEvent.selectedStyleIndex = this.selectedStyleIndex; + defaultEventManager.dispatchEvent(newEvent); + + // Delete the style from the view + this.arrLayerStyles.splice(this.selectedStyleIndex, 1); + + // Set selection to none + this.selectedStyleIndex = false; + + // Disable the delete style button, because now nothing is selected + this.buttonDeleteStyle.classList.add("disabled"); + } } }, selectStyle : { value: function(styleIndex) { - //console.log("Layer.selectStyle ", styleIndex); + console.log("Layer.selectStyle ", styleIndex); // Select a style based on its index. // use layerIndex = false to deselect all styles. @@ -771,7 +769,9 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleMousedown: { value: function(event) { - //console.log("Layer.handleMousedown") + if (event.target.classList.contains("button-delete")) { + return; + } this.layerData.isActive = true; var ptrParent = nj.queryParentSelector(event.target, ".content-style"), activeStyleIndex = this.getActiveStyleIndex(); @@ -783,7 +783,6 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleLayerClick : { value: function(event) { - //console.log("Layer.handleLayerClick") var ptrParent = nj.queryParentSelector(event.target, ".content-style"); if (ptrParent !== false) { var myIndex = this.getActiveStyleIndex(); -- 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 --- js/panels/Timeline/Layer.reel/Layer.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') 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"){ -- 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 --- js/panels/Timeline/Layer.reel/Layer.js | 43 +++++++++++++++++++++++++++------- 1 file changed, 35 insertions(+), 8 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') 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 4338d57eed565f723bfb7cbcefca65836b68953b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 1 Jun 2012 14:26:30 -0700 Subject: Timeline: Better style selection and deselection. Automatic re-selection of previously selected style when parent layer is reselected. --- js/panels/Timeline/Layer.reel/Layer.js | 56 +++++++++++++++++++++++----------- 1 file changed, 38 insertions(+), 18 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 9576d66f..4da1bfba 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -83,13 +83,14 @@ var Layer = exports.Layer = Montage.create(Component, { return; } if (newVal !== this._selectedStyleIndex) { - console.log("Layer.selectedStyleIndex.set ", newVal); this._selectedStyleIndex = newVal; this.layerData.selectedStyleIndex = newVal; - this.needsDraw = true; } } }, + _storedStyleIndex : { + value: false + }, /* Layer models: the name, ID, and selected and animation booleans for the layer */ _layerName:{ @@ -277,6 +278,10 @@ var Layer = exports.Layer = Montage.create(Component, { if (value === false) { // If changing from true to false, we need to deselect any associated styles this.selectStyle(false); + } else { + if (this._storedStyleIndex !== false) { + this.selectStyle(this._storedStyleIndex); + } } this._isSelected = value; this.layerData.isSelected = value; @@ -541,7 +546,7 @@ var Layer = exports.Layer = Montage.create(Component, { } // Enable or disable the delete style button as appropriate if (this.isSelected) { - if (this.selectedStyleIndex !== "false") { + if (this.selectedStyleIndex !== false) { this.selectStyle(this.selectedStyleIndex); this.buttonDeleteStyle.classList.remove("disabled"); } @@ -630,6 +635,7 @@ var Layer = exports.Layer = Montage.create(Component, { newStyle.ruleTweener =