From 21c941bd1fe55e511a72bfa5dc3019748158bd4a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 15 Mar 2012 15:00:45 -0700 Subject: Timeline: Fix for layer selection problems on file open and switch. --- js/panels/Timeline/Layer.reel/Layer.js | 19 ++++-- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 69 +++++++++++++--------- 2 files changed, 57 insertions(+), 31 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 b41680be..069d3c4b 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -255,12 +255,11 @@ var Layer = exports.Layer = Montage.create(Component, { if (value !== this._isSelected) { // Only concerned about different values if (value === false) { - // If changing from false to true, we need to deselect any associated styles + // If changing from true to false, we need to deselect any associated styles this.selectStyle(false); } this._isSelected = value; this.layerData.isSelected = value; - //this.needsDraw = true; } } @@ -381,7 +380,6 @@ var Layer = exports.Layer = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - //console.log("layer.js _bypassAnimation setter " + newVal) this._bypassAnimation = newVal; } }, @@ -406,7 +404,6 @@ var Layer = exports.Layer = Montage.create(Component, { setData:{ value:function(){ - this.log('layer: setData called') this.layerName = this.layerData.layerName; this.layerID = this.layerData.layerID; this.arrLayerStyles = this.layerData.arrLayerStyles; @@ -424,9 +421,13 @@ 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.needsDraw = true; } }, + _isFirstDraw : { + value: true + }, /* END: Models */ @@ -482,6 +483,16 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.classList.remove("selected"); } } + }, + didDraw: { + value: function() { + if ((this.isSelected === true) && (this._isFirstDraw === true)) { + // Once we're done drawing the first time we need to tell the TimelinePanel if + // this layer is supposed to be selected. + this.parentComponent.parentComponent.selectedLayerID = this.layerID; + this._isFirstDraw = false; + } + } }, /* End: Draw cycle */ diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 1afb9e5a..212b933e 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -139,6 +139,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + _selectedLayerID:{ + value: false + }, + selectedLayerID : { + get: function() { + return this._selectedLayerID; + }, + set: function(newVal) { + if (newVal === false) { + // We are clearing the timeline, so just set the value and return. + this._selectedLayerID = newVal; + return; + } + if (newVal !== this._selectedLayerID) { + var selectIndex = this.getLayerIndexByID(newVal); + this._selectedLayerID = newVal; + this._captureSelection = true; + this.selectLayer(selectIndex, true); + } + } + }, + millisecondsOffset:{ value:1000 }, @@ -374,14 +396,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Feed the new array of objects into the repetitions // and select the first layer. + this.temparrLayers[0].layerData.isSelected = true; + this.temparrLayers[0].layerData._isFirstDraw = true; + this.arrLayers=this.temparrLayers; - - // TODO: We need a better solution to this race condition than a timeout. - this._captureSelection = true; - var that = this; - setTimeout(function() { - that.selectLayer(0, true); - }, 1000) + } else { // New document. Create default layer. this.createNewLayer(1); @@ -397,6 +416,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } else { // we do have information stored. Use it. this._boolCacheArrays = false; + this._captureSelection = true; + //var myIndex = 0; + for (var i = 0; i < this.application.ninja.currentDocument.tlArrLayers.length; i++) { + if ( this.application.ninja.currentDocument.tlArrLayers[i].layerData.isSelected === true ) { + this.application.ninja.currentDocument.tlArrLayers[i].layerData._isFirstDraw = true; + } + } + + this.arrLayers = this.application.ninja.currentDocument.tlArrLayers; this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected; @@ -404,24 +432,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.hashElementMapToLayer = this.application.ninja.currentDocument.tlElementHashTable; this.hashKey = this.application.ninja.currentDocument.hashKey; this._boolCacheArrays = true; - - // Search through the arrLayers and select the layer that's already selected - var i = 0, - selectMe = 0, - arrLayersLength = this.arrLayers.length; - for (i = 0; i < arrLayersLength; i++) { - if (this.arrLayers[i].isSelected === true) { - selectMe = i; - } - } - - - this._captureSelection = true; - // TODO: Better solution than a timer. - var that = this; - setTimeout(function() { - that.selectLayer(selectMe, true); - }, 300) } } }, @@ -454,6 +464,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._firstTimeLoaded=true; this.end_hottext.value = 25; this.updateTrackContainerWidth(); + this.selectedLayerID = false; // Clear the repetitions if (this.arrLayers.length > 0) { @@ -464,9 +475,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleDocumentChange:{ value:function(event){ + // Clear the timeline but not the cache this._boolCacheArrays = false; this.clearTimelinePanel(); this._boolCacheArrays = true; + + // Rebind the document events for the new document context this._bindDocumentEvents(); this.hashInstance = this.createLayerHashTable(); @@ -1008,11 +1022,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if(this.selectedKeyframes){ this.deselectTweens(); } + for (i = 0; i < arrLayersLength; i++) { if (i === layerIndex) { - this.arrLayers[i].isSelected = true; + this.arrLayers[i].layerData.isSelected = true; } else { - this.arrLayers[i].isSelected = false; + this.arrLayers[i].layerData.isSelected = false; } } -- cgit v1.2.3 From 134abd9a23c3ef3ef687051b5da7b94339ae8cad Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 15 Mar 2012 15:59:01 -0700 Subject: Timeline: Remove selection timer on add new layer method. --- js/panels/Timeline/Layer.reel/Layer.js | 1 + js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 15 ++++++++++----- 2 files changed, 11 insertions(+), 5 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 069d3c4b..5206ae16 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -260,6 +260,7 @@ var Layer = exports.Layer = Montage.create(Component, { } this._isSelected = value; this.layerData.isSelected = value; + this.needsDraw = true; } } diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 45a90355..57288395 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -416,7 +416,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } else { // we do have information stored. Use it. this._boolCacheArrays = false; - this._captureSelection = true; //var myIndex = 0; for (var i = 0; i < this.application.ninja.currentDocument.tlArrLayers.length; i++) { if ( this.application.ninja.currentDocument.tlArrLayers[i].layerData.isSelected === true ) { @@ -431,7 +430,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.hashInstance = this.application.ninja.currentDocument.tlLayerHashTable; this.hashElementMapToLayer = this.application.ninja.currentDocument.tlElementHashTable; this.hashKey = this.application.ninja.currentDocument.hashKey; - this._boolCacheArrays = true; + } } }, @@ -687,6 +686,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.layerID = this.currentLayerNumber; thingToPush.parentElementUUID = this.hashKey; thingToPush.parentElement = this.application.ninja.currentSelectedContainer; + thingToPush.layerData.isSelected = true; + thingToPush.layerData._isFirstDraw = true; + + for (var i = 0; i < this.arrLayers.length; i++) { + this.arrLayers[i].layerData.isSelected = false; + this.arrLayers[i].layerData._isFirstDraw = false; + } if (!!this.layerRepetition.selectedIndexes) { // There is a selected layer, so we need to splice the new @@ -712,7 +718,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._LayerUndoObject = thingToPush; this._LayerUndoIndex = thingToPush.layerData.layerID; this._LayerUndoStatus = true; - +/* this._captureSelection = true; // TODO: Find a better solution than a timout here. @@ -720,7 +726,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { setTimeout(function() { that.selectLayer(indexToSelect, true); }, 500); - +*/ } } @@ -1031,7 +1037,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } - this.layerRepetition.selectedIndexes = [layerIndex]; this.currentLayerSelected = this.arrLayers[layerIndex]; if(userSelection){ -- cgit v1.2.3 From d27d40ea28d41af1d64e75d74f5adb3126be0f53 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 15 Mar 2012 16:00:40 -0700 Subject: Timeline: remove comment. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 57288395..a1e320c4 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -718,15 +718,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._LayerUndoObject = thingToPush; this._LayerUndoIndex = thingToPush.layerData.layerID; this._LayerUndoStatus = true; -/* - this._captureSelection = true; - - // TODO: Find a better solution than a timout here. - var that = this; - setTimeout(function() { - that.selectLayer(indexToSelect, true); - }, 500); -*/ + } } -- cgit v1.2.3 From 27b3209543a1884e562436b1a9aa842bea1cbc9c Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 16 Mar 2012 12:21:32 -0700 Subject: Start enforcing one element per layer Signed-off-by: Jonathan Duran --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 128 +++++++++++++++------ .../Timeline/TimelineTrack.reel/TimelineTrack.js | 7 +- 2 files changed, 96 insertions(+), 39 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a1e320c4..528d1fbf 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -68,7 +68,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value: function() { if (this._boolCacheArrays) { this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; - } } }, @@ -102,6 +101,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + // TODO - Remove hash tables _hashKey:{ value:0 }, @@ -126,6 +126,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + _currentLayerSelected:{ value: null }, @@ -156,7 +157,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { var selectIndex = this.getLayerIndexByID(newVal); this._selectedLayerID = newVal; this._captureSelection = true; - this.selectLayer(selectIndex, true); + this.selectLayer(selectIndex); } } }, @@ -226,17 +227,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _breadCrumbContainer:{ value:null - }, + }, breadCrumbContainer: { + get: function() { + return this._breadCrumbContainer; + }, set: function(value) { if(this._breadCrumbContainer !== value) { this._breadCrumbContainer = value; this.LayerBinding(this.application.ninja.currentSelectedContainer); } - }, - get: function() { - return this._breadCrumbContainer; } }, @@ -346,10 +347,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value: function() { this.layout_tracks = this.element.querySelector(".layout-tracks"); this.layout_markers = this.element.querySelector(".layout_markers"); - this.newlayer_button.identifier = "addLayer"; - this.newlayer_button.addEventListener("click", this, false); - this.deletelayer_button.identifier = "deleteLayer"; - this.deletelayer_button.addEventListener("click", this, false); + + //this.newlayer_button.identifier = "addLayer"; + //this.newlayer_button.addEventListener("click", this, false); + //this.deletelayer_button.identifier = "deleteLayer"; + //this.deletelayer_button.addEventListener("click", this, false); + this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); @@ -374,8 +377,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.application.ninja.currentDocument.isTimelineInitialized = true; this.application.ninja.currentDocument.tlArrLayers = []; this.application.ninja.currentDocument.tllayerNumber = 0; + + // TODO - Remove hash this.application.ninja.currentDocument.tlLayerHashTable=[]; + this.temparrLayers = []; + + // TODO - Remove hash this.hashKey = this.application.ninja.currentSelectedContainer.uuid; // Are we creating a new doc, or opening an existing one? @@ -391,24 +399,26 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } else { // No, it has no DOM elements. Build an empty layer object. - this.restoreLayer(1); + //this.restoreLayer(1); } // Feed the new array of objects into the repetitions // and select the first layer. - this.temparrLayers[0].layerData.isSelected = true; - this.temparrLayers[0].layerData._isFirstDraw = true; + //this.temparrLayers[0].layerData.isSelected = true; + //this.temparrLayers[0].layerData._isFirstDraw = true; this.arrLayers=this.temparrLayers; } else { // New document. Create default layer. - this.createNewLayer(1); + //this.createNewLayer(1); } // After recreating the tracks and layers, store the result in the currentDocument. this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; + + // TODO - Remove both hashes? this.application.ninja.currentDocument.tlLayerHashTable = this.hashInstance; this.application.ninja.currentDocument.tlElementHashTable = this.hashElementMapToLayer; this.application.ninja.currentDocument.hashKey=this.hashKey; @@ -427,6 +437,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.arrLayers = this.application.ninja.currentDocument.tlArrLayers; this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected; + + // TODO - remove hash this.hashInstance = this.application.ninja.currentDocument.tlLayerHashTable; this.hashElementMapToLayer = this.application.ninja.currentDocument.tlElementHashTable; this.hashKey = this.application.ninja.currentDocument.hashKey; @@ -452,8 +464,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.timebar.style.width = "0px"; // Clear variables. - this.hashInstance = null; - this.hashElementMapToLayer = null; + this.hashInstance = null; // TODO - remove hash + this.hashElementMapToLayer = null; // TODO - remove hash this.currentLayerNumber = 0; this.currentLayerSelected = false; this.selectedKeyframes = []; @@ -481,7 +493,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Rebind the document events for the new document context this._bindDocumentEvents(); - + + // TODO - remove hash this.hashInstance = this.createLayerHashTable(); this.hashElementMapToLayer = this.createElementMapToLayer(); @@ -541,8 +554,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function(){ var key , switchSelectedLayer,layerIndex; this.deselectTweens(); + if(this.application.ninja.selectedElements[0]){ + + // TODO - element uuid should be stored directly in layer array (possibly as the layerID) key = this.application.ninja.selectedElements[0].uuid; + switchSelectedLayer = this.hashElementMapToLayer.getItem(key); if(switchSelectedLayer!==undefined){ layerIndex = this.getLayerIndexByID(switchSelectedLayer.layerID); @@ -622,11 +639,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._firstTimeLoaded = false; } else { this.arrLayers.length = 0; - this.hashKey = node.uuid; + // TODO - remove hash + this.hashKey = node.uuid; if (this.returnedObject = this.hashInstance.getItem(this.hashKey)) { this._hashFind = true; } + + this.currentLayerNumber = 0; this.createNewLayer(1); this.selectLayer(0); @@ -679,6 +699,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { var newLayerName = "", thingToPush = this.createLayerTemplate(), myIndex = 0, + // unused var? indexToSelect = 0; this.currentLayerNumber = this.currentLayerNumber + 1; newLayerName = "Layer " + this.currentLayerNumber; @@ -688,6 +709,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.parentElement = this.application.ninja.currentSelectedContainer; thingToPush.layerData.isSelected = true; thingToPush.layerData._isFirstDraw = true; + thingToPush.layerData.created = true; for (var i = 0; i < this.arrLayers.length; i++) { this.arrLayers[i].layerData.isSelected = false; @@ -702,25 +724,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.trackPosition = myIndex; this.arrLayers.splice(myIndex, 0, thingToPush); this._LayerUndoPosition = myIndex; + //this.hashLayerNumber.setItem(this.hashKey, thingToPush.layerData); this.hashInstance.setItem(this.hashKey, thingToPush.layerData, myIndex); + // unused var indexToSelect = myIndex; } else { thingToPush.layerData.layerPosition = this.arrLayers.length - 1; this.arrLayers.push(thingToPush); this._LayerUndoPosition = this.arrLayers.length - 1; + //this.hashLayerNumber.setItem(this.hashKey, thingToPush.layerData); this.hashInstance.setItem(this.hashKey, thingToPush.layerData, thingToPush.layerData.layerPosition); - indexToSelect = this.arrLayers.length -1; + // unused var + indexToSelect = this.arrLayers.length -1; } this._LayerUndoObject = thingToPush; this._LayerUndoIndex = thingToPush.layerData.layerID; this._LayerUndoStatus = true; + this.selectLayer(myIndex); } - } }, @@ -756,6 +782,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.temparrLayers.push(thingToPush); thingToPush.layerData.trackPosition = this.temparrLayers.length - 1; thingToPush.layerData.layerPosition = this.temparrLayers.length - 1; + this.hashInstance.setItem(this.hashKey, thingToPush.layerData, thingToPush.layerData.layerPosition); if(this._openDoc) { @@ -763,18 +790,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.hashElementMapToLayer.setItem(ele.uuid,ele,this.temparrLayers[selectedIndex]); this._openDoc=false; } - /* - this._LayerUndoObject = thingToPush; - this._LayerUndoIndex = thingToPush.layerData.layerID; - this._LayerUndoStatus = true; - */ } } }, deleteLayer:{ value:function (object) { + // unusused variables and duplicate declaration of var index var dLayer,parentNode, hashVariable = 0, k = 0, index = 0, j = 0,a=0; + + // should now be able to delete the last layer if (this.arrLayers.length > 0) { if (object._undoStatus) { if (object._el.parentElementUUID !== this.application.ninja.currentSelectedContainer.uuid) { @@ -844,25 +869,50 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleElementAdded:{ value:function (event) { - event.detail.uuid=nj.generateRandom(); - if(this.currentLayerSelected.layerData.elementsList[0]!==undefined){ - if(this.currentLayerSelected.layerData.isTrackAnimated){ + this.insertLayer(); + console.log("inserting layer"); + + this.addElementToLayer(this.application.ninja.selectedElements[0]); + } + }, + + addElementToLayer:{ + value:function (element) { + + + console.log("setting element to layer"); + console.log(element); + console.log(this.currentLayerSelected.layerData); + + //element.uuid = nj.generateRandom(); + + // this should be unneeded with one element per layer restriction + if (this.currentLayerSelected.layerData.elementsList[0] !== undefined) { + + if (this.currentLayerSelected.layerData.isTrackAnimated) { // need to prevent element adding to dom, not just clear the drawing canvas - //this.application.ninja.stage.clearDrawingCanvas(); + // this should be unneeded with one element per layer restriction console.log("cannot add elements to a layer with animated element"); - }else{ - this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected); - this.currentLayerSelected.layerData.elementsList.push(event.detail); + } else { + //this.hashElementMapToLayer.setItem(element.uuid, element, this.currentLayerSelected); + + // should be simple assignment to var instead of array + this.currentLayerSelected.layerData.elementsList.push(element._element); + //this.currentLayerSelected.layerData.layerElement = event.detail; } - }else{ - this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected); - this.currentLayerSelected.layerData.elementsList.push(event.detail); + } else { + //this.hashElementMapToLayer.setItem(element.uuid, element, this.currentLayerSelected); + this.currentLayerSelected.layerData.elementsList.push(element._element); } } }, handleElementDeleted:{ value:function (event) { + + // With one element per layer restriction + // Deleting an element on stage should simply delete it's associated layer + var length,lengthVal; this.deleteElement = event.detail; lengthVal = this.currentLayerSelected.layerData.elementsList.length - 1; @@ -1014,6 +1064,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { selectLayer:{ value:function (layerIndex, userSelection) { + var i = 0; var arrLayersLength = this.arrLayers.length; @@ -1031,13 +1082,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.layerRepetition.selectedIndexes = [layerIndex]; this.currentLayerSelected = this.arrLayers[layerIndex]; + if(userSelection){ if(this._captureSelection){ + if(this.currentLayerSelected.layerData.elementsList.length >= 1) { this.application.ninja.selectionController.selectElements(this.currentLayerSelected.layerData.elementsList); } else { this.application.ninja.selectionController.executeSelectElement(); } + } this._captureSelection = true; } @@ -1101,8 +1155,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, insertLayer:{ - value:function () { - var cmd = this.addLayerCommand(); + value:function (element) { + var cmd = this.addLayerCommand(element); cmd.execute(); cmd._el = this._LayerUndoObject; cmd._layerID = this._LayerUndoIndex; diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index c6b67c9c..90d135af 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -299,11 +299,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + // should be unneeded with one element per layer restriction _animatedElement:{ serializable:true, value:null }, - animatedElement:{ serializable:true, get:function () { @@ -367,7 +367,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function(){ this.trackID = this.trackData.layerID; this.tweens = this.trackData.tweens; - this.animatedElement = this.trackData.animatedElement; + this.animatedElement = this.trackData.animatedElement; // unneeded with one element per layer restriction this.arrStyleTracks = this.trackData.arrStyleTracks; this.isTrackAnimated = this.trackData.isTrackAnimated; this.trackDuration = this.trackData.trackDuration; @@ -394,6 +394,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { draw:{ value:function () { this.ninjaStylesContoller = this.application.ninja.stylesController; + + // animatedElement going away - unneeded below var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]){ this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; @@ -406,6 +408,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if(!this.application.ninja.documentController.creatingNewFile){ if(this.application.ninja.currentDocument.documentRoot.children[0]){ var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + console.log(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created); if(!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created){ this.retrieveStoredTweens(); } -- cgit v1.2.3 From f9891da6d6c6940f218cdc6d1e71e1c027852f48 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 16 Mar 2012 12:54:16 -0700 Subject: Fix layer select on selection change Signed-off-by: Jonathan Duran --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 35 ++++++++++++++-------- 1 file changed, 22 insertions(+), 13 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 528d1fbf..3e82a760 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -557,16 +557,25 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if(this.application.ninja.selectedElements[0]){ - // TODO - element uuid should be stored directly in layer array (possibly as the layerID) - key = this.application.ninja.selectedElements[0].uuid; - - switchSelectedLayer = this.hashElementMapToLayer.getItem(key); - if(switchSelectedLayer!==undefined){ - layerIndex = this.getLayerIndexByID(switchSelectedLayer.layerID); - this._captureSelection=false; - this.selectLayer(layerIndex); - this._captureSelection=true; + for (var i = 0; i < this.arrLayers.length; i++) { + if (this.application.ninja.selectedElements[0].uuid === this.arrLayers[i].layerData.elementsList[0].uuid) { + layerIndex = this.getLayerIndexByID(this.arrLayers[i].layerData.layerID); + this._captureSelection = false; + this.selectLayer(layerIndex); + this._captureSelection = true; + } } + +// // TODO - element uuid should be stored directly in layer array (possibly as the layerID) +// key = this.application.ninja.selectedElements[0].uuid; +// +// switchSelectedLayer = this.hashElementMapToLayer.getItem(key); +// if(switchSelectedLayer!==undefined){ +// layerIndex = this.getLayerIndexByID(switchSelectedLayer.layerID); +// this._captureSelection=false; +// this.selectLayer(layerIndex); +// this._captureSelection=true; +// } } } }, @@ -870,7 +879,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleElementAdded:{ value:function (event) { this.insertLayer(); - console.log("inserting layer"); + //console.log("inserting layer"); this.addElementToLayer(this.application.ninja.selectedElements[0]); } @@ -880,9 +889,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function (element) { - console.log("setting element to layer"); - console.log(element); - console.log(this.currentLayerSelected.layerData); + //console.log("setting element to layer"); + //console.log(element); + //console.log(this.currentLayerSelected.layerData); //element.uuid = nj.generateRandom(); -- cgit v1.2.3 From 3bebf2b279d8f4da0439a4e3de1254c4292d0cac Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 16 Mar 2012 13:39:11 -0700 Subject: Timeline: Hook up data binding for changes on subproperties. --- js/panels/Timeline/Layer.reel/Layer.js | 54 +++++++++++++- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 15 +++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1 - .../Timeline/TimelineTrack.reel/TimelineTrack.js | 85 ++++++++++++++++------ 4 files changed, 127 insertions(+), 28 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 5206ae16..b54d6ce0 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -314,9 +314,11 @@ var Layer = exports.Layer = Montage.create(Component, { return this._isMainCollapsed; }, set: function(newVal) { - this.log('layer.js: isMainCollapsed: ' + newVal); if (newVal !== this._isMainCollapsed) { + this.log('layer.js: isMainCollapsed: ' + newVal); this._isMainCollapsed = newVal; + this.layerData.isMainCollapsed = newVal; + // this.triggerOutgoingBinding(); } } }, @@ -333,6 +335,8 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (newVal !== this._isTransformCollapsed) { this._isTransformCollapsed = newVal; + this.layerData.isTransformCollapsed = newVal; + this.triggerOutgoingBinding(); //this.needsDraw = true; } } @@ -350,6 +354,8 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (newVal !== this._isPositionCollapsed) { this._isPositionCollapsed = newVal; + this.layerData.isPositionCollapsed = newVal; + this.triggerOutgoingBinding(); //this.needsDraw = true; } } @@ -367,6 +373,8 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (newVal !== this._isStyleCollapsed) { this._isStyleCollapsed = newVal; + this.layerData.isStyleCollapsed = newVal; + this.triggerOutgoingBinding(); //this.needsDraw = true; } } @@ -381,7 +389,11 @@ var Layer = exports.Layer = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - this._bypassAnimation = newVal; + if (newVal !== this._bypassAnimation) { + this._bypassAnimation = newVal; + this.layerData.bypassAnimation = newVal; + //this.triggerOutgoingBinding(); + } } }, @@ -426,6 +438,36 @@ var Layer = exports.Layer = Montage.create(Component, { this.needsDraw = true; } }, + + /* Data binding point and outgoing binding trigger method */ + _bindingPoint : { + serializable: true, + value : {} + }, + bindingPoint: { + serializable: true, + get: function() { + return this._bindingPoint; + }, + set: function(newVal) { + if (newVal !== this._bindingPoint) { + this._bindingPoint = newVal; + this.setData(); + } + } + }, + + triggerOutgoingBinding : { + value: function() { + if (this.layerData.triggerBinding === true) { + this.layerData.triggerBinding = false; + } else { + this.layerData.triggerBinding = true; + } + } + }, + + // Is this the first draw? _isFirstDraw : { value: true }, @@ -700,44 +742,52 @@ var Layer = exports.Layer = Montage.create(Component, { value: function(event) { this.mainCollapser.bypassAnimation = false; this.bypassAnimation = false; + this.layerData.bypassAnimation = false; if (this.isMainCollapsed) { this.isMainCollapsed = false; } else { this.isMainCollapsed = true; } + this.triggerOutgoingBinding(); } }, handlePositionCollapserClick : { value: function(event) { this.positionCollapser.bypassAnimation = false; this.bypassAnimation = false; + this.layerData.bypassAnimation = false; if (this.isPositionCollapsed) { this.isPositionCollapsed = false; } else { this.isPositionCollapsed = true; } + 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; this.bypassAnimation = false; + this.layerData.bypassAnimation = false; if (this.isStyleCollapsed) { this.isStyleCollapsed = false; } else { this.isStyleCollapsed = true; } + this.triggerOutgoingBinding(); } }, /* End: Event handlers */ diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 14c5f1c8..34860ae7 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -77,7 +77,12 @@ "boundObject" : {"@" : "repetition1"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", "oneway" : false - } + }, + "bindingPoint" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding", + "oneway" : false + } } }, @@ -107,7 +112,13 @@ "boundObject" : {"@" : "repetition2"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", "oneway" : false + }, + "bindingPoint" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding", + "oneway" : false } + } }, "endHottext" : { @@ -197,4 +208,4 @@ - \ No newline at end of file + diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a1e320c4..be5aace4 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -718,7 +718,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._LayerUndoObject = thingToPush; this._LayerUndoIndex = thingToPush.layerData.layerID; this._LayerUndoStatus = true; - } } diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index c6b67c9c..b9a4574c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -26,8 +26,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._trackID; }, set:function (value) { - this._trackID = value; - //this.needsDraw = true; + if (value !== this._trackID) { + this._trackID = value; + } } }, @@ -40,11 +41,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._isMainCollapsed; }, set:function (newVal) { - this.log('TimelineTrack.js: isMainCollapsed: ', newVal); if (newVal !== this._isMainCollapsed) { this._isMainCollapsed = newVal; } - } }, _isTransformCollapsed:{ @@ -96,8 +95,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - //console.log("timelinetrack bypassAnimation setter " + newVal) - this._bypassAnimation = newVal; + if (newVal !== this._bypassAnimation) { + this._bypassAnimation = newVal; + } + if (this.trackData.bypassAnimation !== newVal) { + this.trackData.bypassAnimation = newVal; + } } }, @@ -347,7 +350,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _trackData:{ - + serializable: true, + value: false }, trackData:{ @@ -358,30 +362,65 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function(val){ this._trackData = val; if(this._trackData){ - this.setData(); + this.setData(); } } }, + + _setDataTimestamp : { + value: false + }, setData:{ value:function(){ - this.trackID = this.trackData.layerID; - this.tweens = this.trackData.tweens; - this.animatedElement = this.trackData.animatedElement; - this.arrStyleTracks = this.trackData.arrStyleTracks; - this.isTrackAnimated = this.trackData.isTrackAnimated; - this.trackDuration = this.trackData.trackDuration; - this.animationName = this.trackData.animationName; - this.currentKeyframeRule = this.trackData.currentKeyframeRule; - this.isMainCollapsed = this.trackData.isMainCollapsed; - this.isPositionCollapsed = this.trackData.isPositionCollapsed; - this.isTransformCollapsed = this.trackData.isTransformCollapsed; - this.bypassAnimation = this.trackData.bypassAnimation; - this.isStyleCollapsed = this.trackData.isStyleCollapsed; - this.trackPosition = this.trackData.trackPosition; - this.needsDraw = true; + if (this.trackData) { + this.bypassAnimation = this.trackData.bypassAnimation; + this.trackID = this.trackData.layerID; + this.tweens = this.trackData.tweens; + this.animatedElement = this.trackData.animatedElement; + this.arrStyleTracks = this.trackData.arrStyleTracks; + this.isTrackAnimated = this.trackData.isTrackAnimated; + this.trackDuration = this.trackData.trackDuration; + this.animationName = this.trackData.animationName; + this.currentKeyframeRule = this.trackData.currentKeyframeRule; + this.isMainCollapsed = this.trackData.isMainCollapsed; + this.isPositionCollapsed = this.trackData.isPositionCollapsed; + this.isTransformCollapsed = this.trackData.isTransformCollapsed; + this.isStyleCollapsed = this.trackData.isStyleCollapsed; + this.trackPosition = this.trackData.trackPosition; + this.needsDraw = true; + } + } }, + + // Data binding observation point and trigger method + _bindingPoint : { + serializable: true, + value : {} + }, + bindingPoint: { + serializable: true, + get: function() { + return this._bindingPoint; + }, + set: function(newVal) { + if (newVal !== this._bindingPoint) { + this._bindingPoint = newVal; + this.setData(); + } + } + }, + + triggerOutgoingBinding : { + value: function() { + if (this.trackData.triggerBinding === true) { + this.trackData.triggerBinding = false; + } else { + this.trackData.triggerBinding = true; + } + } + }, prepareForDraw:{ value:function () { -- cgit v1.2.3 From 6b5cdc7f3b59a70b506b4ac5c8a4d105c90c713c Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 16 Mar 2012 15:04:13 -0700 Subject: Bug fix and cleanup Cleaning up unneeded code for one element per layer support and fixing some bugs with selection and layer sync. Signed-off-by: Jonathan Duran --- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 4 - .../Timeline/TimelinePanel.reel/TimelinePanel.js | 710 ++++++++------------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 1 - 3 files changed, 251 insertions(+), 464 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 14c5f1c8..9d7a1d44 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -22,8 +22,6 @@ "timeline_leftpane" : {"#" : "timeline_leftpane"}, "layer_tracks": {"#": "layer_tracks"}, "master_track": {"#": "master_track"}, - "newlayer_button": {"#": "newlayer_button"}, - "deletelayer_button": {"#": "deletelayer_button"}, "time_markers" : {"#": "timeline_markers"}, "layerRepetition" : {"@": "repetition1"}, "trackRepetition" : {"@" : "repetition2"}, @@ -159,8 +157,6 @@
-
-
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 3e82a760..191228af 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -19,12 +19,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { /* === BEGIN: Models === */ _arrLayers:{ - serializable: true, + serializable:true, value:[] }, arrLayers:{ - serializable: true, + serializable:true, get:function () { return this._arrLayers; }, @@ -50,12 +50,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _layerRepetition:{ - serializable: true, + serializable:true, value:null }, layerRepetition:{ - serializable: true, + serializable:true, get:function () { return this._layerRepetition; }, @@ -64,17 +64,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - _cacheArrays : { - value: function() { + _cacheArrays:{ + value:function () { if (this._boolCacheArrays) { this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; } } }, - + // Set to false to skip array caching array sets in current document - _boolCacheArrays : { - value: true + _boolCacheArrays:{ + value:true }, _currentLayerNumber:{ @@ -94,7 +94,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, _setCurrentLayerNumber:{ - value:function(){ + value:function () { if (this._boolCacheArrays) { this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; } @@ -103,8 +103,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // TODO - Remove hash tables _hashKey:{ - value:0 - }, + value:0 + }, hashKey:{ get:function () { @@ -119,7 +119,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, _setHashKey:{ - value:function(){ + value:function () { if (this._boolCacheArrays) { this.application.ninja.currentDocument.hashKey = this.hashKey; } @@ -128,38 +128,38 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _currentLayerSelected:{ - value: null + value:null }, - currentLayerSelected : { - get: function() { - return this._currentLayerSelected; - }, - set: function(newVal) { - this._currentLayerSelected = newVal; - this.application.ninja.currentDocument.tlCurrentLayerSelected = newVal; - } + currentLayerSelected:{ + get:function () { + return this._currentLayerSelected; + }, + set:function (newVal) { + this._currentLayerSelected = newVal; + this.application.ninja.currentDocument.tlCurrentLayerSelected = newVal; + } }, _selectedLayerID:{ - value: false - }, - selectedLayerID : { - get: function() { - return this._selectedLayerID; - }, - set: function(newVal) { - if (newVal === false) { - // We are clearing the timeline, so just set the value and return. - this._selectedLayerID = newVal; - return; - } - if (newVal !== this._selectedLayerID) { - var selectIndex = this.getLayerIndexByID(newVal); - this._selectedLayerID = newVal; - this._captureSelection = true; - this.selectLayer(selectIndex); - } - } + value:false + }, + selectedLayerID:{ + get:function () { + return this._selectedLayerID; + }, + set:function (newVal) { + if (newVal === false) { + // We are clearing the timeline, so just set the value and return. + this._selectedLayerID = newVal; + return; + } + if (newVal !== this._selectedLayerID) { + var selectIndex = this.getLayerIndexByID(newVal); + this._selectedLayerID = newVal; + this._captureSelection = true; + this.selectLayer(selectIndex); + } + } }, millisecondsOffset:{ @@ -167,16 +167,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, _masterDuration:{ - serializable: true, + serializable:true, value:0 }, masterDuration:{ serializable:true, - get:function(){ + get:function () { return this._masterDuration; }, - set:function(val){ + set:function (val) { this._masterDuration = val; this.timebar.style.width = (this._masterDuration / 12) + "px"; } @@ -226,15 +226,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, _breadCrumbContainer:{ - value:null + value:null }, - breadCrumbContainer: { - get: function() { + breadCrumbContainer:{ + get:function () { return this._breadCrumbContainer; }, - set: function(value) { - if(this._breadCrumbContainer !== value) { + set:function (value) { + if (this._breadCrumbContainer !== value) { this._breadCrumbContainer = value; this.LayerBinding(this.application.ninja.currentSelectedContainer); } @@ -261,7 +261,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, timeMarkerHolder:{ - value: null + value:null }, /* === END: Models === */ /* === BEGIN: Draw cycle === */ @@ -269,7 +269,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function () { this.initTimeline(); // Bind the event handler for the document change events - this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false); + this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false); this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false); this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false); } @@ -285,12 +285,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, /* === END: Draw cycle === */ /* === BEGIN: Controllers === */ - // Create an empty layer template object with minimal defaults and return it for use - createLayerTemplate : { - value : function() { - var returnObj = {}; - returnObj.layerData = {}; - returnObj.layerData.layerName = null; + // Create an empty layer template object with minimal defaults and return it for use + createLayerTemplate:{ + value:function () { + var returnObj = {}; + returnObj.layerData = {}; + returnObj.layerData.layerName = null; returnObj.layerData.layerID = null; returnObj.layerData.isMainCollapsed = true; returnObj.layerData.isPositionCollapsed = true; @@ -301,7 +301,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { returnObj.layerData.deleted = false; returnObj.layerData.isSelected = false; returnObj.layerData.layerPosition = null; - returnObj.layerData.created=false; + returnObj.layerData.created = false; returnObj.layerData.isTrackAnimated = false; returnObj.layerData.currentKeyframeRule = null; returnObj.layerData.trackPosition = 0; @@ -309,21 +309,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { returnObj.layerData.tweens = []; returnObj.parentElementUUID = null; returnObj.parentElement = null; - return returnObj; - } - }, + return returnObj; + } + }, + // Bind all document-specific events (pass in true to unbind) - _bindDocumentEvents : { - value: function(boolUnbind) { - var arrEvents = ["deleteLayerClick", - "newLayer", - "deleteLayer", - "elementAdded", - "elementDeleted", - "selectionChange"], + _bindDocumentEvents:{ + value:function (boolUnbind) { + var arrEvents = ["elementAdded", "elementDeleted", "selectionChange"], i, arrEventsLength = arrEvents.length; - + if (boolUnbind) { for (i = 0; i < arrEventsLength; i++) { this.eventManager.removeEventListener(arrEvents[i], this, false); @@ -333,26 +329,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.eventManager.addEventListener(arrEvents[i], this, false); } Object.defineBinding(this, "breadCrumbContainer", { - boundObject: this.application.ninja, + boundObject:this.application.ninja, boundObjectPropertyPath:"currentSelectedContainer", - oneway: true + oneway:true }); } } }, - - // Initialize the timeline, runs only once when the component is first loaded. - // Sets up basic event listeners, gets some selectors, etc. - initTimeline : { - value: function() { + + // Initialize the timeline, runs only once when the timeline component is first loaded + initTimeline:{ + value:function () { this.layout_tracks = this.element.querySelector(".layout-tracks"); this.layout_markers = this.element.querySelector(".layout_markers"); - - //this.newlayer_button.identifier = "addLayer"; - //this.newlayer_button.addEventListener("click", this, false); - //this.deletelayer_button.identifier = "deleteLayer"; - //this.deletelayer_button.addEventListener("click", this, false); - this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); @@ -363,9 +352,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.enablePanel(false); } }, - - // Initialize the timeline for a document. Called when a document is opened (new or existing), or - // when documents are switched. + + // Initialize the timeline for a document. + // Called when a document is opened (new or existing), or when documents are switched. initTimelineForDocument:{ value:function () { var myIndex; @@ -377,43 +366,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.application.ninja.currentDocument.isTimelineInitialized = true; this.application.ninja.currentDocument.tlArrLayers = []; this.application.ninja.currentDocument.tllayerNumber = 0; - - // TODO - Remove hash - this.application.ninja.currentDocument.tlLayerHashTable=[]; - this.temparrLayers = []; // TODO - Remove hash + this.application.ninja.currentDocument.tlLayerHashTable = []; this.hashKey = this.application.ninja.currentSelectedContainer.uuid; - // Are we creating a new doc, or opening an existing one? - if(!this.application.ninja.documentController.creatingNewFile) { - // Opening an existing document. - // Does it have any DOM elements? - if(this.application.ninja.currentDocument.documentRoot.children[0]) { - // Yes, it has DOM elements. Loop through them and create a new - // object for each. - for(myIndex=0;this.application.ninja.currentDocument.documentRoot.children[myIndex];myIndex++) { - this._openDoc=true; + // Are we opening an existing doc? + if (!this.application.ninja.documentController.creatingNewFile) { + // Opening an existing document. Does it have any DOM elements? + if (this.application.ninja.currentDocument.documentRoot.children[0]) { + // Yes, it has DOM elements. Loop through them and create a new object for each. + for (myIndex = 0; this.application.ninja.currentDocument.documentRoot.children[myIndex]; myIndex++) { + this._openDoc = true; this.restoreLayer(this.application.ninja.currentDocument.documentRoot.children[myIndex]); } - } else { - // No, it has no DOM elements. Build an empty layer object. - //this.restoreLayer(1); + // select the first layer + this.temparrLayers[0].layerData.isSelected = true; + this.temparrLayers[0].layerData._isFirstDraw = true; } - - // Feed the new array of objects into the repetitions - // and select the first layer. - //this.temparrLayers[0].layerData.isSelected = true; - //this.temparrLayers[0].layerData._isFirstDraw = true; - - this.arrLayers=this.temparrLayers; - - } else { - // New document. Create default layer. - //this.createNewLayer(1); + // Feed the new array of objects into the repetitions. + this.arrLayers = this.temparrLayers; } - + // After recreating the tracks and layers, store the result in the currentDocument. this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; @@ -421,19 +396,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // TODO - Remove both hashes? this.application.ninja.currentDocument.tlLayerHashTable = this.hashInstance; this.application.ninja.cu