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') 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 , layerResult; if (this._hashFind) { - for (layerResult = this.returnedObject[hashIndex];layerResult;hashIndex++) { + for (layerResult = this.returnedObject[hashIndex]; layerResult; hashIndex++) { if (layerResult.layerData.deleted !== true) { this.arrLayers.push(layerResult); } } this._hashFind = false; - }else { - var newLayerName = "", - thingToPush = this.createLayerTemplate(), - newTrack = {}, - myIndex = 0; + } else { + var newLayerName, thingToPush = this.createLayerTemplate(); this.currentLayerNumber = this.currentLayerNumber + 1; newLayerName = "Layer " + this.currentLayerNumber; @@ -783,21 +708,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.parentElementUUID = this.hashKey; thingToPush.parentElement = this.application.ninja.currentSelectedContainer; - if(this._openDoc){ - ele.uuid =nj.generateRandom(); + if (this._openDoc) { + ele.uuid = nj.generateRandom(); thingToPush.layerData.elementsList.push(ele); } - this.temparrLayers.push(thingToPush); - thingToPush.layerData.trackPosition = this.temparrLayers.length - 1; - thingToPush.layerData.layerPosition = this.temparrLayers.length - 1; + 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); + this.hashInstance.setItem(this.hashKey, thingToPush.layerData, thingToPush.layerData.layerPosition); - if(this._openDoc) { - var selectedIndex = this.getLayerIndexByID(thingToPush.layerData.layerID,this.temparrLayers); - this.hashElementMapToLayer.setItem(ele.uuid,ele,this.temparrLayers[selectedIndex]); - this._openDoc=false; + if (this._openDoc) { + var selectedIndex = this.getLayerIndexByID(thingToPush.layerData.layerID, this.temparrLayers); + this.hashElementMapToLayer.setItem(ele.uuid, ele, this.temparrLayers[selectedIndex]); + this._openDoc = false; } } } @@ -805,133 +730,26 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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) { - dLayer = this.hashInstance.getItem(object._el.parentElementUUID); - for(hashVariable=0;dLayer[hashVariable];hashVariable++) { - if (dLayer[hashVariable]._layerID === object._el._layerID) { - dLayer[hashVariable].deleted = true; - parentNode = dLayer[hashVariable].parentElement; - break; - } - } - this.application.ninja.currentSelectedContainer = parentNode; - this.LayerBinding(parentNode); - } - else { - dLayer = this.hashInstance.getItem(object._el.parentElementUUID); - for(hashVariable=0;dLayer[hashVariable];hashVariable++) { - if (dLayer[hashVariable].deleted === true) { - - } else if (dLayer[hashVariable]._layerID === object._el._layerID) { - while (this.arrLayers.length) { - if (dLayer[hashVariable]._layerID === this.arrLayers[k].layerData._layerID) { - dLayer[hashVariable].deleted = true; - this.arrLayers.splice(k, 1); - if(k>0){ - this.selectLayer(k-1); - }else{ - this.selectLayer(k); - } - break; - } - k++; - } - } - } - } - } else { - // Only delete a selected layer. If no layer is selected, do nothing. - if (this.layerRepetition.selectedIndexes.length > 0) { - // Delete the selected item. - var myIndex = this.layerRepetition.selectedIndexes[0]; - this._LayerUndoObject = this.arrLayers[myIndex]; - - dLayer = this.hashInstance.getItem(this.hashKey); - - for(hashVariable=0;dLayer[hashVariable];hashVariable++){ - if(this.currentLayerSelected.layerData.layerID===dLayer[hashVariable].layerID){ - var arrLayerLength=this.arrLayers.length; - for(var index=0;index 0) { + // Delete the selected layer. + var myIndex = this.layerRepetition.selectedIndexes[0]; + this._LayerUndoObject = this.arrLayers[myIndex]; + this.arrLayers.splice(myIndex, 1); } } }, handleElementAdded:{ - value:function (event) { + value:function() { 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 should be unneeded with one element per layer restriction - console.log("cannot add elements to a layer with animated element"); - } 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(element.uuid, element, this.currentLayerSelected); - this.currentLayerSelected.layerData.elementsList.push(element._element); - } + this.currentLayerSelected.layerData.elementsList.push(this.application.ninja.selectedElements[0]._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; - for (length = lengthVal ;length >= 0 ;length--) { - if (this.currentLayerSelected.layerData.elementsList[length] === this.deleteElement) { - this.currentLayerSelected.layerData.elementsList.splice(length, 1); - break; - } - //length--; - } + value:function () { + this.removeLayer(); } }, @@ -996,10 +814,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (hashLayerObject[key][index] !== undefined) { - for(this.counter = index ;hashLayerObject[key][this.counter];this.counter++) { + for (this.counter = index; hashLayerObject[key][this.counter]; this.counter++) { } - for(;this.counter !== index;this.counter--) { + for (; this.counter !== index; this.counter--) { hashLayerObject[key][this.counter] = hashLayerObject[key][this.counter - 1]; } } @@ -1018,55 +836,30 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - createLayerNumberHash:{ - value:function (key, value) { - var hashLayerNumberObject; - hashLayerNumberObject = Object.create(Object.prototype, { + createElementMapToLayer:{ + value:function () { + var hashMappingObject; + hashMappingObject = Object.create(Object.prototype, { + mappingArray:{ + value:{}, + writable:true + }, setItem:{ - value:function (key, value) { - if (value !== undefined) { - hashLayerNumberObject[key] = value.layerData.layerID; + value:function (key, value, layer) { + if (this.mappingArray[key] === undefined) { + this.mappingArray[key] = {}; } + this.mappingArray[key]["ele"] = value; + this.mappingArray[key].layerID = layer.layerData.layerID; } }, getItem:{ value:function (key) { - if (hashLayerNumberObject[key] === undefined) { - return; - } - return hashLayerNumberObject[key]; + return this.mappingArray[key]; } } }); - return hashLayerNumberObject; - } - }, - - createElementMapToLayer:{ - value:function(){ - var hashMappingObject; - hashMappingObject = Object.create(Object.prototype, { - mappingArray:{ - value:{}, - writable:true - }, - setItem: { - value: function(key,value,layer) { - if(this.mappingArray[key]===undefined){ - this.mappingArray[key]={}; - } - this.mappingArray[key]["ele"] = value; - this.mappingArray[key].layerID = layer.layerData.layerID; - } - }, - - getItem: { - value: function(key) { - return this.mappingArray[key]; - } - } - }); return hashMappingObject; } }, @@ -1076,11 +869,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { var i = 0; var arrLayersLength = this.arrLayers.length; - - if(this.selectedKeyframes){ + + if (this.selectedKeyframes) { this.deselectTweens(); } - + for (i = 0; i < arrLayersLength; i++) { if (i === layerIndex) { this.arrLayers[i].layerData.isSelected = true; @@ -1088,14 +881,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.arrLayers[i].layerData.isSelected = false; } } - + this.layerRepetition.selectedIndexes = [layerIndex]; this.currentLayerSelected = this.arrLayers[layerIndex]; - if(userSelection){ - if(this._captureSelection){ + if (userSelection) { + if (this._captureSelection) { - if(this.currentLayerSelected.layerData.elementsList.length >= 1) { + if (this.currentLayerSelected.layerData.elementsList.length >= 1) { this.application.ninja.selectionController.selectElements(this.currentLayerSelected.layerData.elementsList); } else { this.application.ninja.selectionController.executeSelectElement(); @@ -1108,21 +901,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, getLayerIndexByID:{ - value:function (layerID,tempArr) { + value:function (layerID, tempArr) { var i = 0, returnVal = false, arrLayersLength = this.arrLayers.length; - if(tempArr){ - var tempArrLength=this.temparrLayers.length; + if (tempArr) { + var tempArrLength = this.temparrLayers.length; for (i = 0; i < tempArrLength; i++) { - if (this.temparrLayers[i].layerData.layerID === layerID) { - returnVal = i; - } - } + if (this.temparrLayers[i].layerData.layerID === layerID) { + returnVal = i; + } + } - }else{ + } else { for (i = 0; i < arrLayersLength; i++) { if (this.arrLayers[i].layerData.layerID === layerID) { returnVal = i; @@ -1191,7 +984,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { addLayerCommand:{ value:function () { var command; - var that=this; + var that = this; command = Object.create(Object.prototype, { _el:{value:null, writable:true}, _layerID:{value:null, writable:true}, @@ -1217,7 +1010,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { deleteLayerCommand:{ value:function () { var command; - var that=this; + var that = this; command = Object.create(Object.prototype, { description:{ value:"Delete Layer"}, receiver:{value:TimelinePanel}, @@ -1235,46 +1028,45 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return command; } }, - enablePanel : { - value: function(boolEnable) { - if (boolEnable) { - this.timeline_disabler.style.display = "none"; - } else { - this.timeline_disabler.style.display = "block"; - } - } + enablePanel:{ + value:function (boolEnable) { + if (boolEnable) { + this.timeline_disabler.style.display = "none"; + } else { + this.timeline_disabler.style.display = "block"; + } + } }, /* === END: Controllers === */ - - /* === BEGIN: Logging routines === */ - _boolDebug: { - enumerable: false, - value: false // set to true to enable debugging to console; false for turning off all debugging. - }, - boolDebug: { - get: function() { + + /* === BEGIN: Logging routines === */ + _boolDebug:{ + enumerable:false, + value:false // set to true to enable debugging to console; false for turning off all debugging. + }, + boolDebug:{ + get:function () { return this._boolDebug; }, - set: function(boolDebugSwitch) { + set:function (boolDebugSwitch) { this._boolDebug = boolDebugSwitch; } }, - log: { - value: function(strMessage) { + log:{ + value:function (strMessage) { if (this.boolDebug) { console.log(this.getLineNumber() + ": " + strMessage); } } }, - getLineNumber: { - value: function() { + getLineNumber:{ + value:function () { try { - throw new Error('bazinga') - }catch(e){ + throw new Error('bazinga') + } catch (e) { return e.stack.split("at")[3].split(":")[2]; } } } /* === END: Logging routines === */ -}); - +}); \ No newline at end of file diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 90d135af..827e16c6 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -408,7 +408,6 @@ 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