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. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 69 +++++++++++++--------- 1 file changed, 42 insertions(+), 27 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') 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/TimelinePanel.reel/TimelinePanel.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') 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/TimelinePanel.reel') 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 +++++++++++++++------ 1 file changed, 91 insertions(+), 37 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') 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; -- 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/TimelinePanel.reel') 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/TimelinePanel.reel/TimelinePanel.html | 15 +++++++++++++-- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 1 - 2 files changed, 13 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') 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; - } } -- 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 ++++++++------------- 2 files changed, 251 insertions(+), 463 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') 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.currentDocument.tlElementHashTable = this.hashElementMapToLayer; - this.application.ninja.currentDocument.hashKey=this.hashKey; + this.application.ninja.currentDocument.hashKey = this.hashKey; } else { // we do have information stored. Use it. this._boolCacheArrays = false; - //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; - } - } - - + 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; @@ -442,17 +414,16 @@ 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; - } } }, - + // Clear the currently-displayed document (and its events) from the timeline. - clearTimelinePanel : { - value: function() { + clearTimelinePanel:{ + value:function () { // Remove events this._bindDocumentEvents(true); - + // Remove every event listener for every selected tween in the timeline this.deselectTweens(); @@ -462,7 +433,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.application.ninja.timeline.playheadmarker.style.left = "0px"; this.application.ninja.timeline.updateTimeText(0.00); this.timebar.style.width = "0px"; - + // Clear variables. this.hashInstance = null; // TODO - remove hash this.hashElementMapToLayer = null; // TODO - remove hash @@ -472,44 +443,44 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.selectedTweens = []; this._captureSelection = false; this._openDoc = false; - this._firstTimeLoaded=true; + this._firstTimeLoaded = true; this.end_hottext.value = 25; this.updateTrackContainerWidth(); this.selectedLayerID = false; - + // Clear the repetitions if (this.arrLayers.length > 0) { - this.arrLayers = []; + this.arrLayers = []; } } }, - 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(); + 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(); // TODO - remove hash this.hashInstance = this.createLayerHashTable(); this.hashElementMapToLayer = this.createElementMapToLayer(); - + // Reinitialize the timeline...but only if there are open documents. - if (this.application.ninja.documentController._documents.length > 0) { - this.enablePanel(true); - this.initTimelineForDocument(); - } else { - this.enablePanel(false); - } + if (this.application.ninja.documentController._documents.length > 0) { + this.enablePanel(true); + this.initTimelineForDocument(); + } else { + this.enablePanel(false); + } } }, updateTrackContainerWidth:{ - value: function(){ + value:function () { this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; this.master_track.style.width = (this.end_hottext.value * 80) + "px"; this.time_markers.style.width = (this.end_hottext.value * 80) + "px"; @@ -528,7 +499,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, startPlayheadTracking:{ - value:function(){ + value:function () { this.time_markers.onmousemove = this.updatePlayhead.bind(this); } }, @@ -551,13 +522,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleSelectionChange:{ - value:function(){ - var key , switchSelectedLayer,layerIndex; + value:function () { + var layerIndex, i = 0, arrLayersLength = this.arrLayers.length; this.deselectTweens(); - - if(this.application.ninja.selectedElements[0]){ - - for (var i = 0; i < this.arrLayers.length; i++) { + if (this.application.ninja.selectedElements[0]) { + for (i = 0; i < arrLayersLength; 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; @@ -565,17 +534,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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; -// } } } }, @@ -617,33 +575,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - handleAddLayerClick:{ - value:function (event) { - this._isLayer = true; - this.needsDraw = true; - this.application.ninja.selectionController.executeSelectElement(); - } - }, - - handleDeleteLayerClick:{ - value:function (event) { - if (this.arrLayers.length === 1) { - // do not delete last layer - return; - } - if (this.layerRepetition.selectedIndexes === null) { - // nothing is selected, do not delete - return; - } - this.removeLayer(); - } - }, - LayerBinding:{ value:function (node) { - var i = 0; + var i = 0; - if(typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined"){ + if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { if (this._firstTimeLoaded) { this._firstTimeLoaded = false; } else { @@ -655,7 +591,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._hashFind = true; } - this.currentLayerNumber = 0; this.createNewLayer(1); this.selectLayer(0); @@ -675,13 +610,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, createNewLayer:{ - value:function(object){ + value:function (object) { var hashVariable = 0; if (object._undoStatus) { if (object._el.parentElementUUID !== this.application.ninja.currentSelectedContainer.uuid) { dLayer = this.hashInstance.getItem(object._el.parentElementUUID); - for(hashVariable=0;dLayer[hashVariable];hashVariable++) { + for (hashVariable = 0; dLayer[hashVariable]; hashVariable++) { if (dLayer[hashVariable]._layerID === object._el._layerID) { dLayer[hashVariable].deleted = false; parentNode = dLayer[hashVariable].parentElement; @@ -692,7 +627,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.LayerBinding(parentNode); } else { dLayer = this.hashInstance.getItem(object._el.parentElementUUID); - for(hashVariable=0;dLayer[hashVariable];hashVariable++) { + for (hashVariable = 0; dLayer[hashVariable]; hashVariable++) { if (dLayer[hashVariable]._layerID === object._el._layerID) { dLayer[hashVariable].deleted = false; @@ -705,54 +640,47 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } else { - var newLayerName = "", - thingToPush = this.createLayerTemplate(), - myIndex = 0, - // unused var? - indexToSelect = 0; - this.currentLayerNumber = this.currentLayerNumber + 1; - newLayerName = "Layer " + this.currentLayerNumber; - thingToPush.layerData.layerName = newLayerName; - thingToPush.layerData.layerID = this.currentLayerNumber; - thingToPush.parentElementUUID = this.hashKey; - thingToPush.parentElement = this.application.ninja.currentSelectedContainer; - thingToPush.layerData.isSelected = true; - thingToPush.layerData._isFirstDraw = true; + var newLayerName = "", + thingToPush = this.createLayerTemplate(), + myIndex = 0; + this.currentLayerNumber = this.currentLayerNumber + 1; + newLayerName = "Layer " + this.currentLayerNumber; + thingToPush.layerData.layerName = newLayerName; + thingToPush.layerData.layerID = this.currentLayerNumber; + thingToPush.parentElementUUID = this.hashKey; + 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; - this.arrLayers[i].layerData._isFirstDraw = false; - } - - if (!!this.layerRepetition.selectedIndexes) { - // There is a selected layer, so we need to splice the new - // layer on top of it. - myIndex = this.layerRepetition.selectedIndexes[0]; - thingToPush.layerData.layerPosition = myIndex; - 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); - // unused var - indexToSelect = this.arrLayers.length -1; - } - - this._LayerUndoObject = thingToPush; - this._LayerUndoIndex = thingToPush.layerData.layerID; - this._LayerUndoStatus = 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 layer on top of it. + myIndex = this.layerRepetition.selectedIndexes[0]; + thingToPush.layerData.layerPosition = myIndex; + thingToPush.layerData.trackPosition = myIndex; + this.arrLayers.splice(myIndex, 0, thingToPush); + this._LayerUndoPosition = myIndex; + + // TODO - remove hash + this.hashInstance.setItem(this.hashKey, thingToPush.layerData, myIndex); + + } else { + thingToPush.layerData.layerPosition = myIndex; + this.arrLayers.splice(myIndex, 0, thingToPush); + this._LayerUndoPosition = myIndex; + + // TODO - remove hash + this.hashInstance.setItem(this.hashKey, thingToPush.layerData, thingToPush.layerData.layerPosition); + } + + this._LayerUndoObject = thingToPush; + this._LayerUndoIndex = thingToPush.layerData.layerID; + this._LayerUndoStatus = true; this.selectLayer(myIndex); } @@ -761,20 +689,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { restoreLayer:{ value:function (ele) { - var hashIndex = 0 ,layerResult; + var hashIndex = 0 ,