From f6835e48d3597ecb8cf1da8bcc91b58a8227d389 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 7 Mar 2012 11:12:57 -0800 Subject: Optimize Timeline serialization Change all serialized properties into one big object to reduce bindings Signed-off-by: Jonathan Duran --- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 163 +--------------- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 210 +++++++++------------ 2 files changed, 103 insertions(+), 270 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 ae1bcddf..0886bd6c 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -71,91 +71,11 @@ "element": {"#": "container-layer"} }, "bindings" : { - "layerName" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.layerName", - "oneway" : false - }, - "layerID" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.layerID", - "oneway" : false - }, - "arrLayerStyles" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.arrLayerStyles", - "oneway" : false - }, - "isMainCollapsed" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed", - "oneway" : false - }, - "isPositionCollapsed" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isPositionCollapsed", - "oneway" : false - }, - "isTransformCollapsed" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed", - "oneway" : false - }, - "isSelected" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected", - "oneway" : false - }, - "isActive" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isActive", - "oneway" : false - }, - "isStyleCollapsed" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", - "oneway" : false - }, - "bypassAnimation" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.bypassAnimation", - "oneway" : false - }, - "dtextPositionX" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextPositionX", - "oneway" : false - }, - "dtextPositionY" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextPositionY", - "oneway" : false - }, - "dtextSkewX" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextSkewX", - "oneway" : false - }, - "dtextSkewY" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextSkewY", - "oneway" : false - }, - "dtextScaleX" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextScaleX", - "oneway" : false - }, - "dtextScaleY" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextScaleY", - "oneway" : false - }, - "dtextRotate" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextRotate", - "oneway" : false - } + "layerData" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", + "oneway" : false + } } }, @@ -181,76 +101,11 @@ "element": {"#": "container-track"} }, "bindings" : { - "trackID" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.layerID", - "oneway" : false - }, - "tweens" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.tweens", - "oneway" : false - }, - "animatedElement" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.animatedElement", + "trackData" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", "oneway" : false - }, - "arrStyleTracks" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.arrStyleTracks", - "oneway" : false - }, - "isTrackAnimated" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isTrackAnimated", - "oneway" : false - }, - "trackDuration" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.trackDuration", - "oneway" : false - }, - "animationName" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.animationName", - "oneway" : false - }, - "currentKeyframeRule" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.currentKeyframeRule", - "oneway" : false - }, - "isMainCollapsed" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed", - "oneway" : false - }, - "isPositionCollapsed" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isPositionCollapsed", - "oneway" : false - }, - "isTransformCollapsed" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed", - "oneway" : false - }, - "bypassAnimation" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.bypassAnimation", - "oneway" : false - }, - "isStyleCollapsed" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", - "oneway" : false - }, - "trackPosition" : { - "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.trackPosition", - "oneway" : false - } + } } }, "endHottext" : { diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 9c782787..54c40676 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -284,12 +284,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function () { var myIndex; this.drawTimeMarkers(); - // Document switching // Check to see if we have saved timeline information in the currentDocument. if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { // No, we have no information stored. Create it. - this.log('newfile ' + this.application.ninja.currentDocument.name) this.application.ninja.currentDocument.isTimelineInitialized = true; this.application.ninja.currentDocument.tlArrLayers = []; this.application.ninja.currentDocument.tlArrTracks = []; @@ -324,29 +322,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.application.ninja.currentDocument.tlLayerHashTable = this.hashInstance; this.application.ninja.currentDocument.tlElementHashTable = this.hashElementMapToLayer; this.application.ninja.currentDocument.hashKey=this.hashKey; - - - } else { // we do have information stored. Use it. this._boolCacheArrays = false; - //this.arrLayers = []; this.arrLayers = this.application.ninja.currentDocument.tlArrLayers; - this.arrTracks = this.application.ninja.currentDocument.tlArrTracks; this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; this.hashInstance = this.application.ninja.currentDocument.tlLayerHashTable; this.hashElementMapToLayer = this.application.ninja.currentDocument.tlElementHashTable; this.hashKey = this.application.ninja.currentDocument.hashKey; this.selectLayer(0); this._boolCacheArrays = true; - - } - - // Redraw all the things - //this.layerRepetition.needsDraw = true; - //this.trackRepetition.needsDraw = true; - //this.needsDraw = true; } }, @@ -390,7 +376,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._bindDocumentEvents(); this.hashInstance = this.createLayerHashTable(); - this.hashLayerNumber = this.createLayerNumberHash(); + //this.hashLayerNumber = this.createLayerNumberHash(); this.hashElementMapToLayer = this.createElementMapToLayer(); this.initTimelineForDocument(); } @@ -545,8 +531,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (object._el.parentElementUUID !== this.application.ninja.currentSelectedContainer.uuid) { dLayer = this.hashInstance.getItem(object._el.parentElementUUID); while (dLayer[hashVariable]) { - if (dLayer[hashVariable]._layerID === object._el._layerID) { - dLayer[hashVariable].deleted = false; + if (dLayer[hashVariable].layerData._layerID === object._el._layerID) { + dLayer[hashVariable].layerData.deleted = false; parentNode = dLayer[hashVariable].parentElement; break; } @@ -556,9 +542,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.LayerBinding(parentNode); } else { dLayer = this.hashInstance.getItem(object._el.parentElementUUID); - while (dLayer[hashVariable]) { - if (dLayer[hashVariable]._layerID === object._el._layerID) { - dLayer[hashVariable].deleted = false; + while (dLayer[hashVariable].layerData) { + if (dLayer[hashVariable].layerData._layerID === object._el._layerID) { + dLayer[hashVariable].layerData.deleted = false; this.arrLayers.splice(object._layerPosition, 0, object._el); this.selectLayer(object._layerPosition); @@ -573,58 +559,55 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { var newLayerName = "", thingToPush = {}, myIndex = 0; + thingToPush.layerData = {}; -// this.currentLayerNumber = this.hashLayerNumber.getItem(this._hashKey); -// if (this.currentLayerNumber === undefined) { -// this.currentLayerNumber = 0; -// } this.currentLayerNumber = this.currentLayerNumber + 1; newLayerName = "Layer " + this.currentLayerNumber; - thingToPush.layerName = newLayerName; - thingToPush.layerID = this.currentLayerNumber; - thingToPush.isMainCollapsed = true; - thingToPush.isPositionCollapsed = true; - thingToPush.isTransformCollapsed = true; - thingToPush.isStyleCollapsed = true; - thingToPush.arrLayerStyles = []; - thingToPush.elementsList = []; - thingToPush.deleted = false; - thingToPush.isSelected = false; - thingToPush.created=false; - thingToPush.isTrackAnimated = false; - thingToPush.currentKeyframeRule = null; - thingToPush.trackPosition = 0; - thingToPush.arrStyleTracks = []; - thingToPush.tweens = []; + thingToPush.layerData.layerName = newLayerName; + thingToPush.layerData.layerID = this.currentLayerNumber; + thingToPush.layerData.isMainCollapsed = true; + thingToPush.layerData.isPositionCollapsed = true; + thingToPush.layerData.isTransformCollapsed = true; + thingToPush.layerData.isStyleCollapsed = true; + thingToPush.layerData.arrLayerStyles = []; + thingToPush.layerData.elementsList = []; + thingToPush.layerData.deleted = false; + thingToPush.layerData.isSelected = false; + thingToPush.layerData.created=false; + thingToPush.layerData.isTrackAnimated = false; + thingToPush.layerData.currentKeyframeRule = null; + thingToPush.layerData.trackPosition = 0; + thingToPush.layerData.arrStyleTracks = []; + thingToPush.layerData.tweens = []; thingToPush.parentElementUUID = this.hashKey; thingToPush.parentElement = this.application.ninja.currentSelectedContainer; if (!!this.layerRepetition.selectedIndexes) { myIndex = this.layerRepetition.selectedIndexes[0]; - thingToPush.layerPosition = myIndex; - thingToPush.isSelected = true; - thingToPush.trackPosition = myIndex; + thingToPush.layerData.layerPosition = myIndex; + thingToPush.layerData.isSelected = true; + thingToPush.layerData.trackPosition = myIndex; this.arrLayers.splice(myIndex, 0, thingToPush); this._LayerUndoPosition = myIndex; this.selectLayer(myIndex); - this.hashLayerNumber.setItem(this.hashKey, thingToPush); - this.hashInstance.setItem(this.hashKey, thingToPush, myIndex); + //this.hashLayerNumber.setItem(this.hashKey, thingToPush.layerData); + this.hashInstance.setItem(this.hashKey, thingToPush.layerData, myIndex); } else { this.arrLayers.splice(0, 0, thingToPush); - thingToPush.layerPosition = this.arrLayers.length - 1; + thingToPush.layerData.layerPosition = this.arrLayers.length - 1; this._LayerUndoPosition = this.arrLayers.length - 1; - this.hashLayerNumber.setItem(this.hashKey, thingToPush); - this.hashInstance.setItem(this.hashKey, thingToPush, thingToPush.layerPosition); + //this.hashLayerNumber.setItem(this.hashKey, thingToPush.layerData); + this.hashInstance.setItem(this.hashKey, thingToPush.layerData, thingToPush.layerData.layerPosition); this.selectLayer(0); } this._LayerUndoObject = thingToPush; - this._LayerUndoIndex = thingToPush.layerID; + this._LayerUndoIndex = thingToPush.layerData.layerID; this._LayerUndoStatus = true; } @@ -633,84 +616,79 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { restoreLayer:{ value:function (ele) { - var hashIndex = 0 ,layerResult + var hashIndex = 0 ,layerResult; if (this._hashFind) { while (layerResult = this.returnedObject[hashIndex]) { - if (layerResult.deleted !== true) { + if (layerResult.layerData.deleted !== true) { this.arrLayers.push(layerResult); } hashIndex++; } this._hashFind = false; - return; }else { var newLayerName = "", thingToPush = {}, newTrack = {}, myIndex = 0; - -// this.currentLayerNumber = this.hashLayerNumber.getItem(this._hashKey); -// if (this.currentLayerNumber === undefined) { -// this.currentLayerNumber = 0; -// } + thingToPush.layerData = {}; this.currentLayerNumber = this.currentLayerNumber + 1; newLayerName = "Layer " + this.currentLayerNumber; - thingToPush.layerName = newLayerName; - thingToPush.layerID = this.currentLayerNumber; - thingToPush.bypassAnimation = false; - thingToPush.isMainCollapsed = true; - thingToPush.isPositionCollapsed = true; - thingToPush.isTransformCollapsed = true; - thingToPush.isStyleCollapsed = true; - thingToPush.arrLayerStyles = []; - thingToPush.elementsList = []; - thingToPush.deleted = false; - thingToPush.isSelected = false; - thingToPush.created=false; - thingToPush.isTrackAnimated = false; - thingToPush.currentKeyframeRule = null; - thingToPush.trackPosition = 0; - thingToPush.arrStyleTracks = []; - thingToPush.tweens = []; + thingToPush.layerData.layerName = newLayerName; + thingToPush.layerData.layerID = this.currentLayerNumber; + thingToPush.layerData.bypassAnimation = false; + thingToPush.layerData.isMainCollapsed = true; + thingToPush.layerData.isPositionCollapsed = true; + thingToPush.layerData.isTransformCollapsed = true; + thingToPush.layerData.isStyleCollapsed = true; + thingToPush.layerData.arrLayerStyles = []; + thingToPush.layerData.elementsList = []; + thingToPush.layerData.deleted = false; + thingToPush.layerData.isSelected = false; + thingToPush.layerData.created=false; + thingToPush.layerData.isTrackAnimated = false; + thingToPush.layerData.currentKeyframeRule = null; + thingToPush.layerData.trackPosition = 0; + thingToPush.layerData.arrStyleTracks = []; + thingToPush.layerData.tweens = []; thingToPush.parentElementUUID = this.hashKey; thingToPush.parentElement = this.application.ninja.currentSelectedContainer; if(this._openDoc){ ele.uuid =nj.generateRandom(); - thingToPush.elementsList.push(ele); + thingToPush.layerData.elementsList.push(ele); } if (!!this.layerRepetition.selectedIndexes) { myIndex = this.layerRepetition.selectedIndexes[0]; - thingToPush.layerPosition = myIndex; - thingToPush.isSelected = true; - thingToPush.trackPosition = myIndex; + thingToPush.layerData.layerPosition = myIndex; + thingToPush.layerData.isSelected = true; + thingToPush.layerData.trackPosition = myIndex; this.arrLayers.splice(myIndex, 0, thingToPush); this._LayerUndoPosition = myIndex; this.selectLayer(myIndex); - this.hashLayerNumber.setItem(this.hashKey, thingToPush); - this.hashInstance.setItem(this.hashKey, thingToPush, myIndex); + //this.hashLayerNumber.setItem(this.hashKey, thingToPush.layerData); + this.hashInstance.setItem(this.hashKey, thingToPush.layerData, myIndex); } else { this.arrLayers.splice(0, 0, thingToPush); - thingToPush.layerPosition = this.arrLayers.length - 1; + thingToPush.layerData.layerPosition = this.arrLayers.length - 1; this._LayerUndoPosition = this.arrLayers.length - 1; - this.hashLayerNumber.setItem(this.hashKey, thingToPush); - this.hashInstance.setItem(this.hashKey, thingToPush, thingToPush.layerPosition); + //this.hashLayerNumber.setItem(this.hashKey, thingToPush.layerData); + this.hashInstance.setItem(this.hashKey, thingToPush.layerData, thingToPush.layerData.layerPosition); this.selectLayer(0); } if(this._openDoc){ - var selectedIndex = this.getLayerIndexByID(thingToPush.layerID) + var selectedIndex = this.getLayerIndexByID(thingToPush.layerData.layerID); this.hashElementMapToLayer.setItem(ele.uuid,ele,this.arrLayers[selectedIndex]); this._openDoc=false; } this._LayerUndoObject = thingToPush; - this._LayerUndoIndex = thingToPush.layerID; + this._LayerUndoIndex = thingToPush.layerData.layerID; this._LayerUndoStatus = true; } @@ -724,9 +702,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (object._undoStatus) { if (object._el.parentElementUUID !== this.application.ninja.currentSelectedContainer.uuid) { dLayer = this.hashInstance.getItem(object._el.parentElementUUID); - while (dLayer[hashVariable]) { - if (dLayer[hashVariable]._layerID === object._el._layerID) { - dLayer[hashVariable].deleted = true; + while (dLayer[hashVariable].layerData) { + if (dLayer[hashVariable].layerData._layerID === object._el._layerID) { + dLayer[hashVariable].layerData.deleted = true; parentNode = dLayer[hashVariable].parentElement; break; } @@ -737,13 +715,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } else { dLayer = this.hashInstance.getItem(object._el.parentElementUUID); - while (dLayer[hashVariable]) { - if (dLayer[hashVariable].deleted === true) { + while (dLayer[hashVariable].layerData) { + if (dLayer[hashVariable].layerData.deleted === true) { - } else if (dLayer[hashVariable]._layerID === object._el._layerID) { + } else if (dLayer[hashVariable].layerData._layerID === object._el._layerID) { while (this.arrLayers.length) { - if (dLayer[hashVariable]._layerID === this.arrLayers[k]._layerID) { - dLayer[hashVariable].deleted = true; + if (dLayer[hashVariable].layerData._layerID === this.arrLayers[k].layerData._layerID) { + dLayer[hashVariable].layerData.deleted = true; this.arrLayers.splice(k, 1); if(k>0){ this.selectLayer(k-1); @@ -766,10 +744,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._LayerUndoObject = this.arrLayers[myIndex]; dLayer = this.hashInstance.getItem(this.hashKey); - dLayer[myIndex].deleted = true; + dLayer[myIndex].layerData.deleted = true; this.arrLayers.splice(myIndex, 1); - this._LayerUndoIndex = this._LayerUndoObject.layerID; + this._LayerUndoIndex = this._LayerUndoObject.layerData.layerID; this._LayerUndoPosition = myIndex; if(myIndex===0){ @@ -778,15 +756,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { else{ this.selectLayer(myIndex-1); } - ElementMediator.deleteElements(dLayer[myIndex].elementsList); + ElementMediator.deleteElements(dLayer[myIndex].layerData.elementsList); } else { dLayer = this.hashInstance.getItem(this.hashKey); - dLayer[this.arrLayers.length - 1].deleted = true; - ElementMediator.deleteElements(dLayer[this.arrLayers.length - 1].elementsList); + dLayer[this.arrLayers.length - 1].layerData.deleted = true; + ElementMediator.deleteElements(dLayer[this.arrLayers.length - 1].layerData.elementsList); this._LayerUndoPosition = this.arrLayers.length - 1; this._LayerUndoObject = this.arrLayers.pop(); - this._LayerUndoIndex = this._LayerUndoObject.layerID; + this._LayerUndoIndex = this._LayerUndoObject.layerData.layerID; } } @@ -797,18 +775,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleElementAdded:{ value:function (event) { event.detail.uuid=nj.generateRandom(); - if(this.currentLayerSelected.elementsList[0]!==undefined){ - if(this.currentLayerSelected.isTrackAnimated){ + 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(); console.log("cannot add elements to a layer with animated element"); }else{ this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected); - this.currentLayerSelected.elementsList.push(event.detail); + this.currentLayerSelected.layerData.elementsList.push(event.detail); } }else{ this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected); - this.currentLayerSelected.elementsList.push(event.detail); + this.currentLayerSelected.layerData.elementsList.push(event.detail); } } }, @@ -817,10 +795,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function (event) { var length; this.deleteElement = event.detail; - length = this.currentLayerSelected.elementsList.length - 1; + length = this.currentLayerSelected.layerData.elementsList.length - 1; while (length >= 0) { - if (this.currentLayerSelected.elementsList[length] === this.deleteElement) { - this.currentLayerSelected.elementsList.splice(length, 1); + if (this.currentLayerSelected.layerData.elementsList[length] === this.deleteElement) { + this.currentLayerSelected.layerData.elementsList.splice(length, 1); break; } length--; @@ -920,7 +898,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { setItem:{ value:function (key, value) { if (value !== undefined) { - hashLayerNumberObject[key] = value.layerID; + hashLayerNumberObject[key] = value.layerData.layerID; } } }, @@ -952,7 +930,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.mappingArray[key]={}; } this.mappingArray[key]["ele"] = value; - this.mappingArray[key].layerID = layer.layerID; + this.mappingArray[key].layerID = layer.layerData.layerID; } }, @@ -977,9 +955,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } 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; } } if (layerIndex !== false) { @@ -988,8 +966,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerSelected = this.arrLayers[layerIndex]; if(userSelection){ if(this._captureSelection){ - if(this.currentLayerSelected.elementsList.length >= 1){ - this.application.ninja.selectionController.selectElements(this.currentLayerSelected.elementsList); + if(this.currentLayerSelected.layerData.elementsList.length >= 1){ + this.application.ninja.selectionController.selectElements(this.currentLayerSelected.layerData.elementsList); }else{ this.application.ninja.selectionController.executeSelectElement(); } @@ -1011,7 +989,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { arrLayersLength = this.arrLayers.length; for (i = 0; i < arrLayersLength; i++) { - if (this.arrLayers[i].layerID === layerID) { + if (this.arrLayers[i].layerData.layerID === layerID) { returnVal = i; } } @@ -1026,7 +1004,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { arrLayersLength = this.arrLayers.length; for (i = 0; i < arrLayersLength; i++) { - if (this.arrLayers[i].layerName === layerName) { + if (this.arrLayers[i].layerData.layerName === layerName) { returnVal = i; } } @@ -1040,9 +1018,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { arrLayersLength = this.arrLayers.length; for (i = 0; i < arrLayersLength; i++) { - if (this.arrLayers[i].isActive === true) { + if (this.arrLayers[i].layerData.isActive === true) { returnVal = i; - this.arrLayers[i].isActive = false; + this.arrLayers[i].layerData.isActive = false; } } return returnVal; -- cgit v1.2.3 From a1fd19bff814afa2f4a0299f860055b1e338cf3d Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 7 Mar 2012 11:32:37 -0800 Subject: Bugfixes from optimization Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 1 - 1 file changed, 1 deletion(-) (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 54c40676..94d9daec 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -499,7 +499,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._firstTimeLoaded = false; } else { this.arrLayers.length = 0; - this.arrTracks.length = 0; this.hashKey = node.uuid; if (this.returnedObject = this.hashInstance.getItem(this.hashKey)) { -- cgit v1.2.3 From 0856e0900d51e99d81800c7ee0e086f0235bc499 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 7 Mar 2012 11:36:32 -0800 Subject: Bigfixes and cleanup from optimization Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 3 --- 1 file changed, 3 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 94d9daec..42f68268 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -276,7 +276,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); - } }, @@ -352,7 +351,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Clear variables--including repetitions. this.hashInstance = null; - this.hashLayerNumber = null; this.hashElementMapToLayer = null; this.arrLayers = []; @@ -376,7 +374,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._bindDocumentEvents(); this.hashInstance = this.createLayerHashTable(); - //this.hashLayerNumber = this.createLayerNumberHash(); this.hashElementMapToLayer = this.createElementMapToLayer(); this.initTimelineForDocument(); } -- cgit v1.2.3 From abdd0542bce89b6b22f0684d00b9cf24e5d0a5e6 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 7 Mar 2012 13:43:41 -0800 Subject: cleanup Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 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 42f68268..b12183f2 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -289,7 +289,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // No, we have no information stored. Create it. this.application.ninja.currentDocument.isTimelineInitialized = true; this.application.ninja.currentDocument.tlArrLayers = []; - this.application.ninja.currentDocument.tlArrTracks = []; this.application.ninja.currentDocument.tllayerNumber = 0; this.application.ninja.currentDocument.tlLayerHashTable=[]; this.hashKey = this.application.ninja.currentSelectedContainer.uuid; @@ -570,6 +569,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.elementsList = []; thingToPush.layerData.deleted = false; thingToPush.layerData.isSelected = false; + + thingToPush.layerData.isActive = false; + thingToPush.layerData.created=false; thingToPush.layerData.isTrackAnimated = false; thingToPush.layerData.currentKeyframeRule = null; @@ -642,6 +644,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.elementsList = []; thingToPush.layerData.deleted = false; thingToPush.layerData.isSelected = false; + + thingToPush.layerData.isActive = false; + thingToPush.layerData.created=false; thingToPush.layerData.isTrackAnimated = false; thingToPush.layerData.currentKeyframeRule = null; @@ -1007,12 +1012,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return returnVal; } }, + getActiveLayerIndex:{ value:function () { var i = 0, returnVal = false, arrLayersLength = this.arrLayers.length; - for (i = 0; i < arrLayersLength; i++) { if (this.arrLayers[i].layerData.isActive === true) { returnVal = i; -- cgit v1.2.3 From 18be6028647017d053424cdd160ef7afc9351fd2 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 7 Mar 2012 14:27:08 -0800 Subject: Timeline: Bug fix: IKNINJA-1283 When a second document is open and closed, the first document gets wiped out and Timeline is no longer functional. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 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 9c782787..190f818c 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -217,9 +217,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { prepareForDraw:{ value:function () { this.initTimeline(); - this.eventManager.addEventListener("onOpenDocument", this, false); - this.eventManager.addEventListener("closeDocument", this, false); - this.eventManager.addEventListener("switchDocument", this, false); + // Bind the event handler for the document change events + 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); } }, @@ -382,7 +383,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - handleOnOpenDocument:{ + handleDocumentChange:{ value:function(){ this._boolCacheArrays = false; this.clearTimelinePanel(); @@ -395,19 +396,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.initTimelineForDocument(); } }, - - handleCloseDocument: { - value: function(event) { - this.clearTimelinePanel(); - } - }, - - handleSwitchDocument : { - value: function(event) { - // Handle document change. - this.handleOnOpenDocument(); - } - }, updateTrackContainerWidth:{ value: function(){ -- cgit v1.2.3 From b4aa9a46bdf6ed748cbb3fc2a2a4fc226e0e7fd7 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 8 Mar 2012 11:04:59 -0800 Subject: Remove unnecessary needsDraw calls Signed-off-by: Jonathan Duran --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 26 ++++++++++++++++++++++ 1 file changed, 26 insertions(+) (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 b12183f2..0185d448 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -276,6 +276,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); + this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false); + this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false); + this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); } }, @@ -410,6 +413,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + startPlayheadTracking:{ + value:function(){ + this.time_markers.onmousemove = this.updatePlayhead.bind(this); + } + }, + + stopPlayheadTracking:{ + value:function () { + this.time_markers.onmousemove = null; + } + }, + + updatePlayhead:{ + value:function (event) { + var clickedPosition = event.target.offsetLeft + event.offsetX; + this.playhead.style.left = (clickedPosition - 2) + "px"; + this.playheadmarker.style.left = clickedPosition + "px"; + var currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80); + var currentMillisec = currentMillisecPerPixel * clickedPosition; + this.updateTimeText(currentMillisec); + } + }, + handleSelectionChange:{ value:function(){ var key , switchSelectedLayer,layerIndex; -- cgit v1.2.3 From b113b764d1522cf18d823c22ee7bd0bfc25ca875 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Thu, 8 Mar 2012 14:26:37 -0800 Subject: Timeline : Changing the order of the arrLayers being built Signed-off-by: Kruti Shah --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 292 +++++++++++---------- 1 file changed, 159 insertions(+), 133 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 0185d448..ce52d1f3 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -32,6 +32,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + _temparrLayers:{ + value:[] + }, + + temparrLayers:{ + get:function () { + return this._temparrLayers; + }, + set:function (newVal) { + this._temparrLayers = newVal; + } + }, + + _layerRepetition:{ value:null }, @@ -46,17 +60,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, _cacheArrays : { - value: function() { - if (this._boolCacheArrays) { - this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; + 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 + value: true }, _currentLayerNumber:{ @@ -233,39 +247,39 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, /* === END: Draw cycle === */ /* === BEGIN: Controllers === */ - // Bind all document-specific events (pass in true to unbind) - _bindDocumentEvents : { - value: function(boolUnbind) { - var arrEvents = ["deleteLayerClick", - "newLayer", - "deleteLayer", - "elementAdded", - "elementDeleted", - "selectionChange"], - i, - arrEventsLength = arrEvents.length; - - if (boolUnbind) { - for (i = 0; i < arrEventsLength; i++) { - this.eventManager.removeEventListener(arrEvents[i], this, false); - } - } else { - for (i = 0; i < arrEventsLength; i++) { - this.eventManager.addEventListener(arrEvents[i], this, false); - } + // Bind all document-specific events (pass in true to unbind) + _bindDocumentEvents : { + value: function(boolUnbind) { + var arrEvents = ["deleteLayerClick", + "newLayer", + "deleteLayer", + "elementAdded", + "elementDeleted", + "selectionChange"], + i, + arrEventsLength = arrEvents.length; + + if (boolUnbind) { + for (i = 0; i < arrEventsLength; i++) { + this.eventManager.removeEventListener(arrEvents[i], this, false); + } + } else { + for (i = 0; i < arrEventsLength; i++) { + this.eventManager.addEventListener(arrEvents[i], this, false); + } Object.defineBinding(this, "breadCrumbContainer", { boundObject: this.application.ninja, boundObjectPropertyPath:"currentSelectedContainer", oneway: true }); - } - } - }, - - initTimeline : { - value: function() { - // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once. - this.layout_tracks = this.element.querySelector(".layout-tracks"); + } + } + }, + + initTimeline : { + value: function() { + // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once. + this.layout_tracks = this.element.querySelector(".layout-tracks"); this.layout_markers = this.element.querySelector(".layout_markers"); this.newlayer_button.identifier = "addLayer"; @@ -279,73 +293,74 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false); this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false); this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); - } - }, - + } + }, + initTimelineForDocument:{ value:function () { var myIndex; - this.drawTimeMarkers(); + this.drawTimeMarkers(); // Document switching - // Check to see if we have saved timeline information in the currentDocument. - if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { - // No, we have no information stored. Create it. - this.application.ninja.currentDocument.isTimelineInitialized = true; - this.application.ninja.currentDocument.tlArrLayers = []; + // Check to see if we have saved timeline information in the currentDocument. + if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { + // No, we have no information stored. Create it. + this.application.ninja.currentDocument.isTimelineInitialized = true; + this.application.ninja.currentDocument.tlArrLayers = []; this.application.ninja.currentDocument.tllayerNumber = 0; this.application.ninja.currentDocument.tlLayerHashTable=[]; this.hashKey = this.application.ninja.currentSelectedContainer.uuid; - // Loop through the DOM of the document to find layers and animations. - // Fire off events as they are found. - if(!this.application.ninja.documentController.creatingNewFile){ - if(this.application.ninja.currentDocument.documentRoot.children[0]){ - myIndex=0; - while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) - { - this._openDoc=true; + // Loop through the DOM of the document to find layers and animations. + // Fire off events as they are found. + if(!this.application.ninja.documentController.creatingNewFile){ + if(this.application.ninja.currentDocument.documentRoot.children[0]){ + myIndex=0; + while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) + { + this._openDoc=true; this.restoreLayer(this.application.ninja.currentDocument.documentRoot.children[myIndex]); - myIndex++; - } - } - else{ + myIndex++; + } + } + else{ this.restoreLayer(1); - this.selectLayer(0); - } - }else{ + this.selectLayer(0); + } + }else{ this.createNewLayer(1); - this.selectLayer(0); - - } - // After recreating the tracks and layers, store the result in the currentDocument. - this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; + this.selectLayer(0); + + } + // After recreating the tracks and layers, store the result in the currentDocument. + this.arrLayers=this.temparrLayers; + this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; this.application.ninja.currentDocument.tlLayerHashTable = this.hashInstance; this.application.ninja.currentDocument.tlElementHashTable = this.hashElementMapToLayer; this.application.ninja.currentDocument.hashKey=this.hashKey; - } else { - // we do have information stored. Use it. - this._boolCacheArrays = false; - this.arrLayers = this.application.ninja.currentDocument.tlArrLayers; + } else { + // we do have information stored. Use it. + this._boolCacheArrays = false; + this.arrLayers = this.application.ninja.currentDocument.tlArrLayers; this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; this.hashInstance = this.application.ninja.currentDocument.tlLayerHashTable; this.hashElementMapToLayer = this.application.ninja.currentDocument.tlElementHashTable; this.hashKey = this.application.ninja.currentDocument.hashKey; this.selectLayer(0); - this._boolCacheArrays = true; - } + this._boolCacheArrays = true; + } } }, clearTimelinePanel : { - value: function() { - // Remove events - this._bindDocumentEvents(true); + value: function() { + // Remove events + this._bindDocumentEvents(true); // Remove every event listener for every selected tween in the timeline this.deselectTweens(); - // Reset visual appearance + // Reset visual appearance this.application.ninja.timeline.playhead.style.left = "-2px"; this.application.ninja.timeline.playheadmarker.style.left = "0px"; this.application.ninja.timeline.updateTimeText(0.00); @@ -354,27 +369,27 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Clear variables--including repetitions. this.hashInstance = null; this.hashElementMapToLayer = null; - this.arrLayers = []; - - this.currentLayerNumber = 0; - this.currentLayerSelected = false; - this.selectedKeyframes = []; - this.selectedTweens = []; - this._captureSelection = false; - this._openDoc = false; + this.arrLayers = []; + + this.currentLayerNumber = 0; + this.currentLayerSelected = false; + this.selectedKeyframes = []; + this.selectedTweens = []; + this._captureSelection = false; + this._openDoc = false; this._firstTimeLoaded=true; - this.end_hottext.value = 25; - this.updateTrackContainerWidth(); - } - }, - - handleOnOpenDocument:{ - value:function(){ - this._boolCacheArrays = false; - this.clearTimelinePanel(); - this._boolCacheArrays = true; - this._bindDocumentEvents(); - + this.end_hottext.value = 25; + this.updateTrackContainerWidth(); + } + }, + + handleOnOpenDocument:{ + value:function(){ + this._boolCacheArrays = false; + this.clearTimelinePanel(); + this._boolCacheArrays = true; + this._bindDocumentEvents(); + this.hashInstance = this.createLayerHashTable(); this.hashElementMapToLayer = this.createElementMapToLayer(); this.initTimelineForDocument(); @@ -382,16 +397,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleCloseDocument: { - value: function(event) { - this.clearTimelinePanel(); - } + value: function(event) { + this.clearTimelinePanel(); + } }, handleSwitchDocument : { - value: function(event) { - // Handle document change. - this.handleOnOpenDocument(); - } + value: function(event) { + // Handle document change. + this.handleOnOpenDocument(); + } }, updateTrackContainerWidth:{ @@ -400,7 +415,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.master_track.style.width = (this.end_hottext.value * 80) + "px"; this.time_markers.style.width = (this.end_hottext.value * 80) + "px"; if (this.timeMarkerHolder) { - this.time_markers.removeChild(this.timeMarkerHolder); + this.time_markers.removeChild(this.timeMarkerHolder); } this.drawTimeMarkers(); } @@ -693,16 +708,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.layerPosition = myIndex; thingToPush.layerData.isSelected = true; thingToPush.layerData.trackPosition = myIndex; - this.arrLayers.splice(myIndex, 0, thingToPush); + this.temparrLayers.splice(myIndex, 0, thingToPush); this._LayerUndoPosition = myIndex; this.selectLayer(myIndex); //this.hashLayerNumber.setItem(this.hashKey, thingToPush.layerData); this.hashInstance.setItem(this.hashKey, thingToPush.layerData, myIndex); } else { - this.arrLayers.splice(0, 0, thingToPush); - thingToPush.layerData.layerPosition = this.arrLayers.length - 1; - this._LayerUndoPosition = this.arrLayers.length - 1; + this.temparrLayers.splice(0, 0, thingToPush); + thingToPush.layerData.layerPosition = this.temparrLayers.length - 1; + this._LayerUndoPosition = this.temparrLayers.length - 1; //this.hashLayerNumber.setItem(this.hashKey, thingToPush.layerData); this.hashInstance.setItem(this.hashKey, thingToPush.layerData, thingToPush.layerData.layerPosition); this.selectLayer(0); @@ -710,8 +725,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } if(this._openDoc){ - var selectedIndex = this.getLayerIndexByID(thingToPush.layerData.layerID); - this.hashElementMapToLayer.setItem(ele.uuid,ele,this.arrLayers[selectedIndex]); + var selectedIndex = this.getLayerIndexByID(thingToPush.layerData.layerID,this.temparrLayers); + this.hashElementMapToLayer.setItem(ele.uuid,ele,this.temparrLayers[selectedIndex]); this._openDoc=false; } this._LayerUndoObject = thingToPush; @@ -1010,14 +1025,25 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, getLayerIndexByID:{ - value:function (layerID) { + value:function (layerID,tempArr) { var i = 0, returnVal = false, arrLayersLength = this.arrLayers.length; - for (i = 0; i < arrLayersLength; i++) { - if (this.arrLayers[i].layerData.layerID === layerID) { - returnVal = i; + if(tempArr){ + var tempArrLength=this.temparrLayers.length; + + for (i = 0; i < tempArrLength; i++) { + if (this.temparrLayers[i].layerData.layerID === layerID) { + returnVal = i; + } + } + + }else{ + for (i = 0; i < arrLayersLength; i++) { + if (this.arrLayers[i].layerData.layerID === layerID) { + returnVal = i; + } } } return returnVal; @@ -1128,35 +1154,35 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, /* === END: Controllers === */ - /* === BEGIN: Logging routines === */ + /* === BEGIN: Logging routines === */ _boolDebug: { - enumerable: false, - value: false // set to true to enable debugging to console; false for turning off all debugging. + 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) { - this._boolDebug = boolDebugSwitch; - } + get: function() { + return this._boolDebug; + }, + set: function(boolDebugSwitch) { + this._boolDebug = boolDebugSwitch; + } }, log: { - value: function(strMessage) { - if (this.boolDebug) { - console.log(this.getLineNumber() + ": " + strMessage); - } - } + value: function(strMessage) { + if (this.boolDebug) { + console.log(this.getLineNumber() + ": " + strMessage); + } + } }, getLineNumber: { - value: function() { - try { - throw new Error('bazinga') - }catch(e){ - return e.stack.split("at")[3].split(":")[2]; - } - } + value: function() { + try { + throw new Error('bazinga') + }catch(e){ + return e.stack.split("at")[3].split(":")[2]; + } + } } - /* === END: Logging routines === */ + /* === END: Logging routines === */ }); -- cgit v1.2.3 From 59d3aac11d2ba19f2541ef60064d01a2fd4fb75c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 8 Mar 2012 18:32:25 -0800 Subject: Timeline: Fixes for layer numbering problem, document switching events. --- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 5 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 171 +++++++++++---------- 2 files changed, 90 insertions(+), 86 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 0886bd6c..cf9bace6 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -32,7 +32,8 @@ "timetext" : {"#": "time_text"}, "timebar" : {"#": "time_bar"}, "container_tracks" : {"#" : "container-tracks"}, - "end_hottext" : {"@" : "endHottext"} + "end_hottext" : {"@" : "endHottext"}, + "container_layers" : {"#" : "container-layers"} } }, @@ -72,7 +73,7 @@ }, "bindings" : { "layerData" : { - "boundObject" : {"@" : "repetition2"}, + "boundObject" : {"@" : "repetition1"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", "oneway" : false } diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 350c7311..0490aa49 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -19,15 +19,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { /* === BEGIN: Models === */ _arrLayers:{ + serializable: true, value:[] }, arrLayers:{ + serializable: true, get:function () { return this._arrLayers; }, set:function (newVal) { this._arrLayers = newVal; + this.needsDraw = true; this._cacheArrays(); } }, @@ -47,10 +50,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _layerRepetition:{ + serializable: true, value:null }, layerRepetition:{ + serializable: true, get:function () { return this._layerRepetition; }, @@ -248,6 +253,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Comp