From c84c9c97b4aa8f6b6d8e18b628e083c66ae3eb6b Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 8 Feb 2012 21:50:50 -0800 Subject: Display time reading above layers and code clean up Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 4 + .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1269 +++++++++----------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 421 ++++--- 3 files changed, 803 insertions(+), 891 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index b6623dcd..c46ae8c9 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -133,6 +133,10 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px"; this.application.ninja.timeline.selectedKeyframes.push(this); + var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + var currentMillisec = currentMillisecPerPixel * this.timelinePosition; + this.application.ninja.timeline.updateTimeText(currentMillisec); + var currentTop = this.animatedProperties["top"] + "px"; var currentLeft = this.animatedProperties["left"] + "px"; diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index c21fa22b..6f0b0b58 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -4,51 +4,49 @@ var Layer = require("js/panels/Timeline/Layer.reel").Layer; var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; var nj = require("js/lib/NJUtils").NJUtils; -// var Track = require("js/panels/Timeline/Track.reel").Track; - var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { - hasTemplate: { - value: true + hasTemplate:{ + value:true }, - + /* === BEGIN: Models === */ - + // Layer models: arrays for the data and repetition, current layer number, - _arrLayers : { - value: [] + _arrLayers:{ + value:[] }, - arrLayers: { - get: function() { + arrLayers:{ + get:function () { return this._arrLayers; }, - set: function(newVal) { + set:function (newVal) { this._arrLayers = newVal; } }, - - _layerRepetition: { - value: null + + _layerRepetition:{ + value:null }, - layerRepetition: { - get: function() { + layerRepetition:{ + get:function () { return this._layerRepetition; }, - set: function(newVal) { + set:function (newVal) { this._layerRepetition = newVal; } }, - _currentLayerNumber: { - value: 0 - }, + _currentLayerNumber:{ + value:0 + }, currentLayerNumber:{ - get: function() { - return this._currentLayerNumber; + get:function () { + return this._currentLayerNumber; }, - set: function(newVal) { - if (newVal !== this._currentLayerNumber) { - this._currentLayerNumber = newVal; - } + set:function (newVal) { + if (newVal !== this._currentLayerNumber) { + this._currentLayerNumber = newVal; + } } }, @@ -57,29 +55,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, // Track model - _arrTracks: { - serializable: true, - value: [] + _arrTracks:{ + serializable:true, + value:[] }, - arrTracks: { - serializable: true, - get: function() { + arrTracks:{ + serializable:true, + get:function () { return this._arrTracks; }, - set: function(newVal) { + set:function (newVal) { this._arrTracks = newVal; } }, - _trackRepetition: { - serializable: true, - value: null + _trackRepetition:{ + serializable:true, + value:null }, - trackRepetition : { - serializable: true, - get: function() { + trackRepetition:{ + serializable:true, + get:function () { return this._trackRepetition; }, - set: function(newVal) { + set:function (newVal) { this._trackRepetition = newVal; } }, @@ -100,28 +98,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { /* === END: Models === */ - + /* === BEGIN: Draw cycle === */ - prepareForDraw: { - value: function() { + prepareForDraw:{ + value:function () { this.eventManager.addEventListener("deleteLayerClick", this, false); this.eventManager.addEventListener("newLayer", this, false); this.eventManager.addEventListener("deleteLayer", this, false); - this.eventManager.addEventListener( "layerBinding", this, false); + this.eventManager.addEventListener("layerBinding", this, false); this.eventManager.addEventListener("elementAdded", this, false); this.eventManager.addEventListener("elementDeleted", this, false); this.eventManager.addEventListener("deleteSelection", this, false); - this.hashInstance=this.createLayerHashTable(); - this.hashTrackInstance=this.createTrackHashTable(); + this.hashInstance = this.createLayerHashTable(); + this.hashTrackInstance = this.createTrackHashTable(); this.hashLayerNumber = this.createLayerNumberHash(); this.initTimelineView(); } }, - _isLayer: { - value: false + _isLayer:{ + value:false }, _firstTimeLoaded:{ @@ -134,11 +132,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { writable:true }, - willDraw: { - value: function() { + willDraw:{ + value:function () { if (this._isLayer) { this.insertLayer(); - this._isLayer = false;; + this._isLayer = false; } } }, @@ -146,21 +144,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { /* === END: Draw cycle === */ /* === BEGIN: Controllers === */ - - // Initialize the timeline - initTimelineView : { - value:function(){ - - // Get some selectors to make life easier. - this.layout_tracks = this.element.querySelector(".layout-tracks"); - this.layout_markers = this.element.querySelector(".layout_markers"); + + initTimelineView:{ + value:function () { + + // Get some selectors to make life easier. + this.layout_tracks = this.element.querySelector(".layout-tracks"); + this.layout_markers = this.element.querySelector(".layout_markers"); // Add event handlers on the buttons. this.newlayer_button.identifier = "addLayer"; this.newlayer_button.addEventListener("click", this, false); this.deletelayer_button.identifier = "deleteLayer"; this.deletelayer_button.addEventListener("click", this, false); - + // New click listener to handle select/deselect events this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); @@ -173,9 +170,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Default to one layer for new doc // this.newLayer(); - this._hashKey="123"; + this._hashKey = "123"; _firstLayerDraw = false; - NJevent('newLayer',this._hashKey); + NJevent('newLayer', this._hashKey); _firstLayerDraw = true; this.selectLayer(0); @@ -184,12 +181,39 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, updateLayerScroll:{ - value:function(){ + value:function () { this.user_layers.scrollTop = this.layout_tracks.scrollTop; this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; } }, + updateTimeText:{ + value:function (millisec) { + var timeText; + var sec = (Math.floor((millisec / 1000))) % 60; + var min = (Math.floor((millisec / 1000) / 60)) % 60; + var milliSec = String(Math.round(millisec / 10)); + var returnMillisec = milliSec.slice(milliSec.length - 2, milliSec.length); + var returnSec; + var returnMin; + if (sec < 10) { + returnSec = "0" + sec; + } else { + returnSec = sec; + } + if (min < 10) { + returnMin = "0" + min; + } else { + returnMin = min; + } + if (millisec == 0) { + returnMillisec = "00"; + } + timeText = returnMin + ":" + returnSec + ":" + returnMillisec; + this.timetext.innerHTML = timeText; + } + }, + deselectKeyframes:{ value:function () { for (var i = 0; i < this.selectedKeyframes.length; i++) { @@ -201,7 +225,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleAddLayerClick:{ - value:function(event){ + value:function (event) { //event.stopPropagation(); this._isLayer = true; this.needsDraw = true; @@ -209,417 +233,318 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleDeleteLayerClick:{ - value:function(event){ + value:function (event) { //event.stopPropagation(); - this._deleteKeyDown=false; - if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ - this._hashKey="123"; + this._deleteKeyDown = false; + if (this.application.ninja.currentSelectedContainer.id === "UserContent") { + this._hashKey = "123"; } this.removeLayer(); } }, handleLayerBinding:{ - value:function(event){ - var i=0; - this.currentParentNode=this.application.ninja.currentSelectedContainer.parentNode; - - if(this._firstTimeLoaded){ - this._firstTimeLoaded=false; - }else{ - while(this.arrLayers.pop()){ - - } - while(this.arrTracks.pop()){ - } - - if(event.detail.element.id==="UserContent"){ - this._hashKey= "123"; - }else{ - this._hashKey = event.detail.element.uuid; - } - - if(this.returnedObject = this.hashInstance.getItem(this._hashKey)){ - this.returnedTrack = this.hashTrackInstance.getItem(this._hashKey); - this._hashFind = true; - } - this.currentLayerNumber = 0; - NJevent('newLayer',event.detail); - this.selectLayer(0); - - - } - - } - }, - - timelineLeftPaneClick : { - value: function(event) { - // Check ALL THE CLICKS - // Are they in a particular layer? If so, we need to select that layer and - // deselect the others. - var ptrParent = nj.queryParentSelector(event.target, ".container-layer"); - if (ptrParent !== false) { - // Why yes, the click was within a layer. But which one? - var myIndex = this.getActiveLayerIndex(); - this.selectLayer(myIndex); - } - } - }, - - handleNewLayer:{ - value:function(event){ + value:function (event) { + var i = 0; + this.currentParentNode = this.application.ninja.currentSelectedContainer.parentNode; + + if (this._firstTimeLoaded) { + this._firstTimeLoaded = false; + } else { + while (this.arrLayers.pop()) { + + } + while (this.arrTracks.pop()) { + } + + if (event.detail.element.id === "UserContent") { + this._hashKey = "123"; + } else { + this._hashKey = event.detail.element.uuid; + } + + if (this.returnedObject = this.hashInstance.getItem(this._hashKey)) { + this.returnedTrack = this.hashTrackInstance.getItem(this._hashKey); + this._hashFind = true; + } + this.currentLayerNumber = 0; + NJevent('newLayer', event.detail); + this.selectLayer(0); + } + } + }, + + timelineLeftPaneClick:{ + value:function (event) { + // Check ALL THE CLICKS + // Are they in a particular layer? If so, we need to select that layer and + // deselect the others. + var ptrParent = nj.queryParentSelector(event.target, ".container-layer"); + if (ptrParent !== false) { + // Why yes, the click was within a layer. But which one? + var myIndex = this.getActiveLayerIndex(); + this.selectLayer(myIndex); + } + } + }, + + handleNewLayer:{ + value:function (event) { // Add a new layer. It should be added above the currently selected layer, // Or at the end, if no layer is selected. - var hashIndex =0 ,hashVariable=0,layerResult,trackResult,layerObject,trackObject,dLayer,parentNode; + var hashIndex = 0 , hashVariable = 0, layerResult, trackResult, layerObject, trackObject, dLayer, parentNode; - this._arrLayersNonEmpty= true; - if(this._hashFind){ - while(layerResult = this.returnedObject[hashIndex]){ - trackResult=this.returnedTrack[hashIndex]; - if(layerResult.deleted!==true){ + this._arrLayersNonEmpty = true; + if (this._hashFind) { + while (layerResult = this.returnedObject[hashIndex]) { + trackResult = this.returnedTrack[hashIndex]; + if (layerResult.deleted !== true) { this.arrLayers.push(layerResult); this.arrTracks.push(trackResult); } hashIndex++; } - this._hashFind=false; - return; - } - if(event.detail._undoStatus){ - if(this.application.ninja.currentSelectedContainer.id==="UserContent" && event.detail._el.parentElementUUID===123 ){ - dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID); - while(dLayer[hashVariable]){ - if(dLayer[hashVariable]._layerID === event.detail._el._layerID){ - dLayer[hashVariable].deleted=false; - this.arrLayers.splice(event.detail._layerPosition,1,event.detail._el); - this.arrTracks.splice(event.detail._layerPosition,1,event.detail._track); - break; - - } - hashVariable++; - } - - } - - else if(event.detail._el.parentElementUUID!==this.application.ninja.currentSelectedContainer.uuid){ - dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID); - while(dLayer[hashVariable]){ - if(dLayer[hashVariable]._layerID===event.detail._el._layerID){ - dLayer[hashVariable].deleted=false; - parentNode=dLayer[hashVariable].parentElement; - break; - } - hashVariable++; - } - this._setBreadCrumb=true; - NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb}); - }else{ - dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID); - while(dLayer[hashVariable]){ - if(dLayer[hashVariable]._layerID === event.detail._el._layerID){ - dLayer[hashVariable].deleted=false; - this.arrLayers.splice(event.detail._layerPosition,1,event.detail._el); - this.arrTracks.splice(event.detail._layerPosition,1,event.detail._track); - break; - - } - hashVariable++; - } - } - } - - + this._hashFind = false; + return; + } + if (event.detail._undoStatus) { + if (this.application.ninja.currentSelectedContainer.id === "UserContent" && event.detail._el.parentElementUUID === 123) { + dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); + while (dLayer[hashVariable]) { + if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { + dLayer[hashVariable].deleted = false; + this.arrLayers.splice(event.detail._layerPosition, 1, event.detail._el); + this.arrTracks.splice(event.detail._layerPosition, 1, event.detail._track); + break; - else{ - var newLayerName = "", - //thingToPush = Layer.create(), - thingToPush = {}, - // newTrack = TimelineTrack.create(), - newTrack = {}, - myIndex = 0; + } + hashVariable++; + } - // Build the thingToPush object + } - this.currentLayerNumber = this.hashLayerNumber.getItem(this._hashKey); - if(this.currentLayerNumber===undefined){ - this.currentLayerNumber = 0 ; + else if (event.detail._el.parentElementUUID !== this.application.ninja.currentSelectedContainer.uuid) { + dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); + while (dLayer[hashVariable]) { + if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { + dLayer[hashVariable].deleted = false; + parentNode = dLayer[hashVariable].parentElement; + break; } - 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.element=[]; - thingToPush.deleted=false; - thingToPush.isSelected = false; - if(_firstLayerDraw){ - thingToPush.parentElementUUID=this.application.ninja.currentSelectedContainer.uuid; - thingToPush.parentElement=this.application.ninja.currentSelectedContainer; + hashVariable++; + } + this._setBreadCrumb = true; + NJevent('breadCrumbTrail', {"element":parentNode, "setFlag":this._setBreadCrumb}); + } else { + dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); + while (dLayer[hashVariable]) { + if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { + dLayer[hashVariable].deleted = false; + this.arrLayers.splice(event.detail._layerPosition, 1, event.detail._el); + this.arrTracks.splice(event.detail._layerPosition, 1, event.detail._track); + break; + } + hashVariable++; + } + } + } - newTrack.trackID = this.currentLayerNumber; - newTrack.isMainCollapsed = true; - newTrack.isPositionCollapsed = true; - newTrack.isTransformCollapsed = true; - newTrack.isStyleCollapsed = false; - newTrack.tweens = []; + else { + var newLayerName = "", + thingToPush = {}, + newTrack = {}, + myIndex = 0; - if(_firstLayerDraw){ - if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ - this._hashKey="123"; - thingToPush.parentElementUUID = 123; - } - } + 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.element = []; + thingToPush.deleted = false; + thingToPush.isSelected = false; + if (_firstLayerDraw) { + thingToPush.parentElementUUID = this.application.ninja.currentSelectedContainer.uuid; + thingToPush.parentElement = this.application.ninja.currentSelectedContainer; + } - // If a layer is selcted, splice the new layer on top - // Otherwise, just push the new layer in at the bottom. - - if (!!this.layerRepetition.selectedIndexes) { - myIndex = this.layerRepetition.selectedIndexes[0]; - thingToPush.layerPosition=myIndex; - thingToPush.isSelected = true; - newTrack.trackPosition=myIndex; - this.arrLayers.splice(myIndex, 0, thingToPush); - this.arrTracks.splice(myIndex, 0, newTrack); - this._LayerUndoPosition = myIndex; - /* - this.currentLayerSelected= this.arrLayers[myIndex]; - this.currentTrackSelected=this.arrTracks[myIndex]; - var i = 0, - arrLayersLength = this.arrLayers.length; - for (i = 0; i < arrLayersLength; i++) { - if (i === myIndex) { - this.arrLayers[i].isSelected = true; - } else { - this.arrLayers[i].isSelected = false; - } - } - this.layerRepetition.selectedIndexes = [myIndex]; - */ - this.selectLayer(myIndex); - this.hashLayerNumber.setItem(this._hashKey,thingToPush); - this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); - this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); - - } else { - this.arrLayers.splice(0, 0, thingToPush); - this.arrTracks.splice(0, 0, newTrack); - thingToPush.layerPosition=this.arrLayers.length-1; - newTrack.trackPosition=this.arrTracks.length-1; - this._LayerUndoPosition = this.arrLayers.length-1; - this.hashLayerNumber.setItem(this._hashKey,thingToPush); - this.hashInstance.setItem(this._hashKey,thingToPush,thingToPush.layerPosition); - this.hashTrackInstance.setItem(this._hashKey,newTrack,newTrack.trackPosition); - - } - this._LayerUndoObject = thingToPush; - this._LayerUndoIndex = thingToPush.layerID ; - this._LayerUndoStatus = true; - this._TrackUndoObject = newTrack; - } + newTrack.trackID = this.currentLayerNumber; + newTrack.isMainCollapsed = true; + newTrack.isPositionCollapsed = true; + newTrack.isTransformCollapsed = true; + newTrack.isStyleCollapsed = false; + newTrack.tweens = []; + if (_firstLayerDraw) { + if (this.application.ninja.currentSelectedContainer.id === "UserContent") { + this._hashKey = "123"; + thingToPush.parentElementUUID = 123; + } + } + // If a layer is selcted, splice the new layer on top + // Otherwise, just push the new layer in at the bottom. + + if (!!this.layerRepetition.selectedIndexes) { + myIndex = this.layerRepetition.selectedIndexes[0]; + thingToPush.layerPosition = myIndex; + thingToPush.isSelected = true; + newTrack.trackPosition = myIndex; + this.arrLayers.splice(myIndex, 0, thingToPush); + this.arrTracks.splice(myIndex, 0, newTrack); + this._LayerUndoPosition = myIndex; + this.selectLayer(myIndex); + this.hashLayerNumber.setItem(this._hashKey, thingToPush); + this.hashInstance.setItem(this._hashKey, thingToPush, myIndex); + this.hashTrackInstance.setItem(this._hashKey, newTrack, myIndex); + } else { + this.arrLayers.splice(0, 0, thingToPush); + this.arrTracks.splice(0, 0, newTrack); + thingToPush.layerPosition = this.arrLayers.length - 1; + newTrack.trackPosition = this.arrTracks.length - 1; + this._LayerUndoPosition = this.arrLayers.length - 1; + this.hashLayerNumber.setItem(this._hashKey, thingToPush); + this.hashInstance.setItem(this._hashKey, thingToPush, thingToPush.layerPosition); + this.hashTrackInstance.setItem(this._hashKey, newTrack, newTrack.trackPosition); + } + this._LayerUndoObject = thingToPush; + this._LayerUndoIndex = thingToPush.layerID; + this._LayerUndoStatus = true; + this._TrackUndoObject = newTrack; + } } - }, + }, - handleDeleteLayer:{ - value:function(event){ - var dLayer,dTrack,parentNode,hashVariable=0,k=0,index=0,j=0; + handleDeleteLayer:{ + value:function (event) { + var dLayer, dTrack, parentNode, hashVariable = 0, k = 0, index = 0, j = 0; - if (this.arrLayers.length > 0) { - if(this.arrLayers.length===1){ - this._arrLayersNonEmpty=false; - alert("cannot delete further"); - return; - } - if(event.detail._undoStatus){ - if(this.application.ninja.currentSelectedContainer.id==="UserContent" && event.detail._el.parentElementUUID===123 ){ - dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID); - while(dLayer[hashVariable]){ - if(dLayer[hashVariable].deleted===true){ - - }else if(dLayer[hashVariable]._layerID === event.detail._el._layerID){ - while(this.arrLayers.length){ - if(dLayer[hashVariable]._layerID===this.arrLayers[k]._layerID){ - dLayer[hashVariable].deleted=true; - this.arrLayers.splice(k,1); - this.arrTracks.splice(k,1); - break; - } - k++; - } - } - hashVariable++; - } - - }else if(event.detail._el.parentElementUUID!==this.application.ninja.currentSelectedContainer.uuid){ - dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID); - while(dLayer[hashVariable]){ - if(dLayer[hashVariable]._layerID===event.detail._el._layerID){ - dLayer[hashVariable].deleted=true; - parentNode=dLayer[hashVariable].parentElement; + if (this.arrLayers.length > 0) { + if (this.arrLayers.length === 1) { + this._arrLayersNonEmpty = false; + alert("cannot delete further"); + return; + } + if (event.detail._undoStatus) { + if (this.application.ninja.currentSelectedContainer.id === "UserContent" && event.detail._el.parentElementUUID === 123) { + dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); + while (dLayer[hashVariable]) { + if (dLayer[hashVariable].deleted === true) { + + } else if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { + while (this.arrLayers.length) { + if (dLayer[hashVariable]._layerID === this.arrLayers[k]._layerID) { + dLayer[hashVariable].deleted = true; + this.arrLayers.splice(k, 1); + this.arrTracks.splice(k, 1); break; } - hashVariable++; + k++; } - this._setBreadCrumb=true; - NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb}); - } - else{ - dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID); - while(dLayer[hashVariable]){ - if(dLayer[hashVariable].deleted===true){ - - }else if(dLayer[hashVariable]._layerID === event.detail._el._layerID){ - while(this.arrLayers.length){ - if(dLayer[hashVariable]._layerID===this.arrLayers[k]._layerID){ - dLayer[hashVariable].deleted=true; - this.arrLayers.splice(k,1); - this.arrTracks.splice(k,1); - break; - } - k++; - } - } - hashVariable++; } + hashVariable++; } - - + } else if (event.detail._el.parentElementUUID !== this.application.ninja.currentSelectedContainer.uuid) { + dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); + while (dLayer[hashVariable]) { + if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { + dLayer[hashVariable].deleted = true; + parentNode = dLayer[hashVariable].parentElement; + break; + } + hashVariable++; + } + this._setBreadCrumb = true; + NJevent('breadCrumbTrail', {"element":parentNode, "setFlag":this._setBreadCrumb}); } - else{ - if (!!this.layerRepetition.selectedIndexes) { - var myIndex = this.layerRepetition.selectedIndexes[0]; - this._LayerUndoObject=this.arrLayers[myIndex]; - this._TrackUndoObject=this.arrTracks[myIndex]; - - dLayer = this.hashInstance.getItem(this._hashKey); - dTrack = this.hashTrackInstance.getItem(this._hashKey); - dLayer[myIndex].deleted=true; - - this.arrLayers.splice(myIndex, 1); - this.arrTracks.splice(myIndex, 1); - this._LayerUndoIndex = this._LayerUndoObject.layerID; - this._LayerUndoPosition = myIndex; - }else{ - dLayer = this.hashInstance.getItem(this._hashKey); - dTrack = this.hashTrackInstance.getItem(this._hashKey); - dLayer[this.arrLayers.length-1].deleted=true; - this._LayerUndoPosition = this.arrLayers.length-1; - this._LayerUndoObject = this.arrLayers.pop(); - this._LayerUndoIndex = this._LayerUndoObject.layerID; - this._TrackUndoObject = this.arrTracks.pop(); + else { + dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); + while (dLayer[hashVariable]) { + if (dLayer[hashVariable].deleted === true) { + + } else if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { + while (this.arrLayers.length) { + if (dLayer[hashVariable]._layerID === this.arrLayers[k]._layerID) { + dLayer[hashVariable].deleted = true; + this.arrLayers.splice(k, 1); + this.arrTracks.splice(k, 1); + break; + } + k++; + } } - -// else if(this._deleteKeyDown) { -// dLayer = this.hashInstance.getItem(this._hashKey); -// dTrack = this.hashTrackInstance.getItem(this._hashKey); -// -// if(this.deleteElement === this.application.ninja.currentSelectedContainer){ -// while(dLayer[hashVariable]){ -// dLayer[hashVariable].deleted=true; -// hashVariable++; -// } -// -// this.dObject=this.hashInstance.getItem(this.removeLayerFromParentUUid); -// hashVariable=0; -// while(this.dObject[hashVariable]){ -// if(this.application.ninja.currentSelectedContainer===this.dObject[hashVariable].element){ -// this.dObject[hashVariable].deleted=true; -// this._setBreadCrumb=true; -// NJevent('breadCrumbTrail',{"element":this.currentParentNode,"setFlag":this._setBreadCrumb}); -// this._setBreadCrumb=false; -// break; -// } -// hashVariable++; -// } -// this._deleteKeyDown=false; -// } else if(this.deleteElement!== this.application.ninja.currentSelectedContainer){ -// -// while(dLayer[hashVariable]){ -// if(dLayer[hashVariable].deleted===true){ -// -// }else if(dLayer[hashVariable].element.uuid === this.deleteElement.uuid){ -// while(this.arrLayers.length){ -// if(dLayer[hashVariable].layerID===this.arrLayers[k].layerID){ -// dLayer[hashVariable].deleted=true; -// this.arrLayers.splice(k,1); -// this.arrTracks.splice(k,1); -// break; -// } -// k++; -// } -// } -// hashVariable++; -// } -// } -// } -// else{ -// dLayer = this.hashInstance.getItem(this._hashKey); -// dTrack = this.hashTrackInstance.getItem(this._hashKey); -// dLayer[this.arrLayers.length-1].deleted=true; -// this.arrLayers.pop(); -// this.arrTracks.pop(); -// } + hashVariable++; + } } - - } + } + else { + if (!!this.layerRepetition.selectedIndexes) { + var myIndex = this.layerRepetition.selectedIndexes[0]; + this._LayerUndoObject = this.arrLayers[myIndex]; + this._TrackUndoObject = this.arrTracks[myIndex]; + + dLayer = this.hashInstance.getItem(this._hashKey); + dTrack = this.hashTrackInstance.getItem(this._hashKey); + dLayer[myIndex].deleted = true; + + this.arrLayers.splice(myIndex, 1); + this.arrTracks.splice(myIndex, 1); + this._LayerUndoIndex = this._LayerUndoObject.layerID; + this._LayerUndoPosition = myIndex; + } else { + dLayer = this.hashInstance.getItem(this._hashKey); + dTrack = this.hashTrackInstance.getItem(this._hashKey); + dLayer[this.arrLayers.length - 1].deleted = true; + this._LayerUndoPosition = this.arrLayers.length - 1; + this._LayerUndoObject = this.arrLayers.pop(); + this._LayerUndoIndex = this._LayerUndoObject.layerID; + this._TrackUndoObject = this.arrTracks.pop(); + } + } + } } }, - handleElementAdded: { - value: function(event) { - - this.currentLayerSelected.element.push(event.detail) - - + handleElementAdded:{ + value:function (event) { + this.currentLayerSelected.element.push(event.detail); + //console.log(this.currentLayerSelected.layerPosition); + //console.log(this.arrTracks); } }, - - -// handleDeleteSelection:{ -// value:function(event){ -// var length; -// this._deleteKeyDown=true; -// this.deleteElement = event.detail[0]; -// length =this.currentLayerSelected.element.length-1; -// while(length >= 0){ -// if(this.currentLayerSelected.element[length]===this.deleteElement){ -// this.currentLayerSelected.element.splice(length,0); -// } -// } -// -// } -// }, - - handleElementDeleted: { - value: function(event) { + handleElementDeleted:{ + value:function (event) { var length; - this.deleteElement = event.detail; - length =this.currentLayerSelected.element.length-1; - while(length >= 0){ - if(this.currentLayerSelected.element[length]===this.deleteElement){ - this.currentLayerSelected.element.splice(length,1); + this.deleteElement = event.detail; + length = this.currentLayerSelected.element.length - 1; + while (length >= 0) { + if (this.currentLayerSelected.element[length] === this.deleteElement) { + this.currentLayerSelected.element.splice(length, 1); break; } - length--; + length--; } } }, + drawTimeMarkers:{ - value:function(){ + value:function () { var i; var totalMarkers = Math.floor(this.time_markers.offsetWidth / 80); - for(i=0;i