From c48eeb01bd726895dc577d8b843b2a75883eee07 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 10 Feb 2012 16:03:52 -0800 Subject: Merge from /joseeight/ninja-internal/tree/FileIO Signed-off-by: Ananya Sen --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1027 ++++++++++++++++---- 1 file changed, 812 insertions(+), 215 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 9bf51e60..44129743 100755 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1,295 +1,892 @@ -/* -This file contains proprietary software owned by Motorola Mobility, Inc.
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
-(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; -var TimelineController = require("js/panels/Timeline/TimelineController").TimelineController; +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 ElementMediator = require("js/mediators/element-mediator").ElementMediator; var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { - tmpImg: { value: null}, + hasTemplate:{ + value:true + }, - templateDidLoad: { - value: function() { - /* - this.tmpImg = document.createElement("img"); - this.tmpImg.width = 1879; - this.tmpImg.height = 440; - this.tmpImg.src = "images/timeline/timeline.png"; - */ + /* === BEGIN: Models === */ + _arrLayers:{ + value:[] + }, + + arrLayers:{ + get:function () { + return this._arrLayers; + }, + set:function (newVal) { + this._arrLayers = newVal; } }, - prepareForDraw: { - value: function() { - this.element.style.background = "url('images/timeline/timeline.png')"; - this.element.style.width = "100%"; - this.element.style.height = "400px"; - this.element.style.backgroundPosition = "-5px -40px"; + _layerRepetition:{ + value:null + }, + + layerRepetition:{ + get:function () { + return this._layerRepetition; + }, + set:function (newVal) { + this._layerRepetition = newVal; } }, - init : { - value : function() - { - this.buildTimelineView(); + _currentLayerNumber:{ + value:0 + }, + currentLayerNumber:{ + get:function () { + return this._currentLayerNumber; + }, + set:function (newVal) { + if (newVal !== this._currentLayerNumber) { + this._currentLayerNumber = newVal; + } } }, - breadCrumbContainer:{ - value:null, - writable:true, - enumerable:true + currentLayerSelected:{ + value: null }, - controlsContainer:{ - value:null, - writable:true, - enumerable:true + currentTrackSelected:{ + value: null }, - timelineGutter:{ - value:null, - writable:true, - enumerable:true + millisecondsOffset:{ + value:1000 }, - userLayerContainer:{ - value:null, - writable:true, - enumerable:true + _arrTracks:{ + serializable:true, + value:[] }, - currentLayerNumber:{ - value:1, - writable:true, - enumerable:true + arrTracks:{ + serializable:true, + get:function () { + return this._arrTracks; + }, + set:function (newVal) { + this._arrTracks = newVal; + } }, - newLayerButton:{ - value:null, - writable:true, - enumerable:true + _trackRepetition:{ + serializable:true, + value:null }, - deleteLayerButton:{ - value:null, - writable:true, - enumerable:true + trackRepetition:{ + serializable:true, + get:function () { + return this._trackRepetition; + }, + set:function (newVal) { + this._trackRepetition = newVal; + } }, - newFolderButton:{ - value:null, - writable:true, - enumerable:true + _selectedKeyframes:{ + value:[] }, - buildTimelineView : { - value:function(){ - var timeline = document.getElementById("timelinePanel"); - - var mainTimelineContainer = document.createElement("div"); - mainTimelineContainer.style.backgroundColor = "#000000"; - mainTimelineContainer.style.width = "100%"; - mainTimelineContainer.style.height = "100%"; - mainTimelineContainer.style.overflow = "visible"; - - timeline.appendChild(mainTimelineContainer); - - this.breadCrumbContainer = document.createElement("div"); - this.breadCrumbContainer.style.width = "100%"; - this.breadCrumbContainer.style.height = "20px"; - this.breadCrumbContainer.style.backgroundColor = "#111111"; - - var timeControllerContainer = document.createElement("div"); - timeControllerContainer.style.width = "auto"; - timeControllerContainer.style.height = "20px"; - timeControllerContainer.style.backgroundColor = "#000000"; - - this.controlsContainer = document.createElement("div"); - this.controlsContainer.style.width = "200px"; - this.controlsContainer.style.height = "20px"; - this.controlsContainer.style.backgroundColor = "#440000"; - this.controlsContainer.style.float = "left"; - this.controlsContainer.innerText = "Timeline Controller"; - - var timeContainer = document.createElement("div"); - timeContainer.style.width = "inherit"; - timeContainer.style.height = "20px"; - timeContainer.style.backgroundColor = "#880000"; - timeContainer.style.float = "left"; - timeContainer.innerText = "Time markers"; - - timeControllerContainer.appendChild(this.controlsContainer); - timeControllerContainer.appendChild(timeContainer); - - var masterLayerContainer = document.createElement("div"); - masterLayerContainer.style.width = "100%"; - masterLayerContainer.style.height = "20px"; - masterLayerContainer.style.backgroundColor = "#111111"; - masterLayerContainer.style.border = "solid"; - masterLayerContainer.style.borderWidth = "thin"; - masterLayerContainer.style.borderColor = "#333333"; - masterLayerContainer.innerText = "MASTER Layer"; - - this.userLayerContainer = document.createElement("div"); - this.userLayerContainer.style.width = "100%"; - this.userLayerContainer.style.height = "33px"; - this.userLayerContainer.style.backgroundColor = "#111111"; - - this.timelineGutter = document.createElement("div"); - this.timelineGutter.style.position = "fixed"; - //this.timelineGutter.style.width = "inherit"; - this.timelineGutter.style.height = "20px"; - //this.timelineGutter.style.bottom = 0; - this.timelineGutter.style.backgroundColor = "#000000"; - this.timelineGutter.style.zIndex = "100"; - - var newLayerButton = document.createElement("button"); - newLayerButton.style.backgroundImage = "url(../MainApp/images/timeline/plus.png)"; - newLayerButton.style.backgroundRepeat = "no-repeat"; - newLayerButton.style.height = "18px"; - newLayerButton.style.width = "18px"; - //newLayerButton.textContent = "New Layer"; - newLayerButton.addEventListener("click", this.newLayerClickHandler.bind(this), false); - - //var newFolderButton = document.createElement("button"); - //newFolderButton.textContent = "New Folder"; - - var newTrashButton = document.createElement("button"); - newTrashButton.style.backgroundImage = "url(../MainApp/images/timeline/trash.png)"; - newTrashButton.style.backgroundRepeat = "no-repeat"; - newTrashButton.style.height = "18px"; - newTrashButton.style.width = "18px"; - newTrashButton.addEventListener("click", this.deleteLayerClickHandler.bind(this), false); - - this.timelineGutter.appendChild(newLayerButton); - //this.timelineGutter.appendChild(newFolderButton); - this.timelineGutter.appendChild(newTrashButton); - - mainTimelineContainer.appendChild(this.breadCrumbContainer); - mainTimelineContainer.appendChild(timeControllerContainer); - mainTimelineContainer.appendChild(masterLayerContainer); - mainTimelineContainer.appendChild(this.userLayerContainer); - mainTimelineContainer.appendChild(this.timelineGutter); - - this.initBreadCrumb(); - - this.layerArray = new Array(); - } - }, - - newLayerClickHandler:{ - value:function(){ - this.newLayer(); + selectedKeyframes:{ + serializable:true, + get:function () { + return this._selectedKeyframes; + }, + set:function (newVal) { + this._selectedKeyframes = newVal; } }, - deleteLayerClickHandler:{ - value:function(){ - this.deleteLayer(); + _isLayer:{ + value:false + }, + + _firstTimeLoaded:{ + value:true, + writable:true + }, + + _arrLayersNonEmpty:{ + value:true, + writable:true + }, + + _captureSelection:{ + value:false, + writable:true + }, + /* === END: Models === */ + + /* === BEGIN: Draw cycle === */ + 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("elementAdded", this, false); + this.eventManager.addEventListener("elementDeleted", this, false); + this.eventManager.addEventListener("deleteSelection", this, false); + this.eventManager.addEventListener("selectionChange", this, true); + this.hashInstance = this.createLayerHashTable(); + this.hashTrackInstance = this.createTrackHashTable(); + this.hashLayerNumber = this.createLayerNumberHash(); + this.hashElementMapToLayer = this.createElementMapToLayer(); + this.initTimelineView(); } }, - layerArray:{ - value:null, - writable:true, - enumerable:true + willDraw:{ + value:function () { + if (this._isLayer) { + this.insertLayer(); + this._isLayer = false; + } + } + }, + /* === END: Draw cycle === */ + + /* === BEGIN: Controllers === */ + initTimelineView:{ + 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); + + this.drawTimeMarkers(); + + this._hashKey = "123"; + _firstLayerDraw = false; + NJevent('newLayer', this._hashKey); + _firstLayerDraw = true; + this.selectLayer(0); + } }, - selectedLayer:{ - value:null, - writable:true, - enumerable:true + updateLayerScroll:{ + value:function () { + this.user_layers.scrollTop = this.layout_tracks.scrollTop; + this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; + } }, - newLayer:{ + captureSelectionChange:{ value:function(){ - var newLayerDiv = document.createElement("div"); - newLayerDiv.style.width = "inherit"; - newLayerDiv.style.height = "20px"; - newLayerDiv.style.backgroundColor = "#222222"; - newLayerDiv.style.border = "solid"; - newLayerDiv.style.borderWidth = "thin"; - newLayerDiv.style.borderColor = "#444444"; + var key , switchSelectedLayer,layerIndex; + if(this.application.ninja.selectedElements[0]){ + 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; - newLayerDiv.innerText = "Layer " + this.currentLayerNumber; - this.currentLayerNumber++; + } + } + } + }, - newLayerDiv.addEventListener("click", this.selectLayer.bind(this), false); + 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; + } + }, - this.userLayerContainer.appendChild(newLayerDiv); + deselectKeyframes:{ + value:function () { + for (var i = 0; i < this.selectedKeyframes.length; i++) { + this.selectedKeyframes[i].deselect(); + } + this.selectedKeyframes = null; + this.selectedKeyframes = new Array(); + } + }, - this.layerArray.push(newLayerDiv); - console.log(this.layerArray); + handleAddLayerClick:{ + value:function (event) { + this._isLayer = true; + this.needsDraw = true; } }, - selectLayer:{ - value:function(ev){ - for(var i in this.layerArray){ - this.layerArray[i].style.backgroundColor = "#222222"; + handleDeleteLayerClick:{ + value:function (event) { + this._deleteKeyDown = false; + if (this.application.ninja.currentSelectedContainer.id === "UserContent") { + this._hashKey = "123"; } - ev.target.style.backgroundColor = "#444444"; - this.selectedLayer = ev.target; + this.removeLayer(); } }, - deleteLayer:{ - value:function(){ - if(this.selectedLayer){ - this.userLayerContainer.removeChild(this.selectedLayer); - } - for(var i in this.layerArray){ - if(this.layerArray[i] == this.selectedLayer){ - this.layerArray.splice(i,1); + 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) { + var ptrParent = nj.queryParentSelector(event.target, ".container-layer"); + if (ptrParent !== false) { + var myIndex = this.getActiveLayerIndex(); + this.selectLayer(myIndex); } } }, - newFolder:{ + handleNewLayer:{ + value:function (event) { + 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.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++; + } + } + } + + + else { + var newLayerName = "", + thingToPush = {}, + newTrack = {}, + myIndex = 0; + + 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; + } + + + 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 (!!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; + if(_firstLayerDraw){ + this.application.ninja.selectionController.executeSelectElement(); + } + + } + } }, - deleteFolder:{ + 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; + ElementMediator.deleteElements(dLayer[myIndex].element); + 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; + ElementMediator.deleteElements(dLayer[myIndex].element); + 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].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; + ElementMediator.deleteElements(dLayer[myIndex].element); + this.arrLayers.splice(k, 1); + this.arrTracks.splice(k, 1); + break; + } + k++; + } + } + 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; + ElementMediator.deleteElements(dLayer[myIndex].element); + + 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; + ElementMediator.deleteElements(dLayer[this.arrLayers.length - 1].element); + this._LayerUndoPosition = this.arrLayers.length - 1; + this._LayerUndoObject = this.arrLayers.pop(); + this._LayerUndoIndex = this._LayerUndoObject.layerID; + this._TrackUndoObject = this.arrTracks.pop(); + } + } + } + } }, - initBreadCrumb : { - value:function(){ - var mainBodyButton = document.createElement("button"); - mainBodyButton.textContent = "Body"; - this.breadCrumbContainer.appendChild(mainBodyButton); + handleElementAdded:{ + value:function (event) { + + this.hashElementMapToLayer.setItem(event.detail.uuid , event.detail,this.currentLayerSelected) + this.currentLayerSelected.element.push(event.detail); + } }, - initControlsContainer:{ - value:function(){ - // create timeline control buttons for play,stop,etc + + 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); + break; + } + length--; + } } }, + drawTimeMarkers:{ - value:function(){ - + value:function () { + var i; + var totalMarkers = Math.floor(this.time_markers.offsetWidth / 80); + for (i = 0; i < totalMarkers; i++) { + var timeMark = document.createElement("div"); + var markValue = this.calculateTimeMarkerValue(i); + timeMark.className = "timemark"; + timeMark.innerHTML = markValue; + this.time_markers.appendChild(timeMark); + } } }, - calculateTimeMarkerSpacing:{ - value:function(){ - + + calculateTimeMarkerValue:{ + value:function (currentMarker) { + var timeToReturn; + var currentMilliseconds = currentMarker * this.millisecondsOffset; + var sec = (Math.floor((currentMilliseconds / 1000))) % 60; + var min = (Math.floor((currentMilliseconds / 1000) / 60)) % 60; + var milliSec = String(Math.round(currentMilliseconds / 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 (currentMarker == 0) { + returnMillisec = "00"; + } + timeToReturn = returnMin + ":" + returnSec + ":" + returnMillisec; + return timeToReturn; + } + }, + + createLayerHashTable:{ + value:function (key, value) { + var hashLayerObject; + + hashLayerObject = Object.create(Object.prototype, { + counter:{ + value:0, + writable:true + }, + + setItem:{ + value:function (key, value, index) { + if (hashLayerObject[key] === undefined) { + hashLayerObject[key] = {}; + } + if (hashLayerObject[key][index] !== undefined) { + + this.counter = index; + while (hashLayerObject[key][this.counter]) { + this.counter++; + } + + while (this.counter !== index) { + hashLayerObject[key][this.counter] = hashLayerObject[key][this.counter - 1]; + this.counter = this.counter - 1; + } + } + hashLayerObject[key][index] = value; + this.counter = 0; + } + }, + + getItem:{ + value:function (key) { + return hashLayerObject[key]; + } + } + }); + return hashLayerObject; + } + }, + + createTrackHashTable:{ + value:function (key, value) { + var hashTrackObject; + hashTrackObject = Object.create(Object.prototype, { + counter:{ + value:0, + writable:true + }, + + setItem:{ + value:function (key, value, index) { + if (hashTrackObject[key] === undefined) { + hashTrackObject[key] = {}; + + } + if (hashTrackObject[key][index] !== undefined) { + this.counter = index; + while (hashTrackObject[key][this.counter]) { + this.counter++; + } + while (this.counter !== index) { + hashTrackObject[key][this.counter] = hashTrackObject[key][this.counter - 1]; + this.counter = this.counter - 1; + } + } + hashTrackObject[key][index] = value; + this.counter = 0; + } + }, + + getItem:{ + value:function (key) { + return hashTrackObject[key]; + } + } + }); + return hashTrackObject; } }, - initMasterLayer:{ - value:function(){ + createLayerNumberHash:{ + value:function (key, value) { + var hashLayerNumberObject; + hashLayerNumberObject = Object.create(Object.prototype, { + setItem:{ + value:function (key, value) { + if (value !== undefined) { + hashLayerNumberObject[key] = value.layerID; + } + } + }, + + getItem:{ + value:function (key) { + if (hashLayerNumberObject[key] === undefined) { + return; + } + return hashLayerNumberObject[key]; + } + } + }); + return hashLayerNumberObject; } }, - initUserLayers:{ + + 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]["element"] = value; + this.mappingArray[key].layerID = layer.layerID; + + } + }, + + getItem: { + value: function(key) { + return this.mappingArray[key]; + } + } + }); + return hashMappingObject; + } + }, + + selectLayer:{ + value:function (layerIndex) { + var i = 0, + arrLayersLength = this.arrLayers.length; + + for (i = 0; i < arrLayersLength; i++) { + if (i === layerIndex) { + this.arrLayers[i].isSelected = true; + } else { + this.arrLayers[i].isSelected = false; + } + } + + if (layerIndex !== false) { + this.layerRepetition.selectedIndexes = [layerIndex]; + this.trackRepetition.selectedIndexes = [layerIndex]; + this.currentLayerSelected = this.arrLayers[layerIndex]; + this.currentTrackSelected = this.arrTracks[layerIndex]; + if(this._captureSelection){ + this.application.ninja.selectionController.selectElements(this.currentLayerSelected.element) + } + this._captureSelection = true; + } else { + this.layerRepetition.selectedIndexes = null; + this.trackRepetition.selectedIndexes = null; + this.currentLayerSelected = null; + this.currentTrackSelected = null; + } + } + }, + + getLayerIndexByID:{ + value:function (layerID) { + var i = 0, + returnVal = false, + arrLayersLength = this.arrLayers.length; + + for (i = 0; i < arrLayersLength; i++) { + if (this.arrLayers[i].layerID === layerID) { + returnVal = i; + } + } + return returnVal; + } + }, + + getLayerIndexByName:{ + value:function (layerName) { + var i = 0, + returnVal = false, + arrLayersLength = this.arrLayers.length; + + for (i = 0; i < arrLayersLength; i++) { + if (this.arrLayers[i].layerName === layerName) { + returnVal = i; + } + } + return returnVal; + } + }, + getActiveLayerIndex:{ + value:function () { + var i = 0, + returnVal = false, + arrLayersLength = this.arrLayers.length; + + for (i = 0; i < arrLayersLength; i++) { + if (this.arrLayers[i].isActive === true) { + returnVal = i; + this.arrLayers[i].isActive = false; + } + } + return returnVal; + } + }, + + insertLayer:{ + value:function () { + var cmd = this.addLayerCommand(); + cmd.execute(); + cmd._el = this._LayerUndoObject; + cmd._layerID = this._LayerUndoIndex; + cmd._layerPosition = this._LayerUndoPosition; + cmd._undoStatus = this._LayerUndoStatus; + cmd._track = this._TrackUndoObject; + NJevent("sendToUndo", cmd); + } + }, + + removeLayer:{ + value:function () { + var cmd = this.deleteLayerCommand(); + cmd.execute(); + cmd._el = this._LayerUndoObject; + cmd._layerID = this._LayerUndoIndex; + cmd._layerPosition = this._LayerUndoPosition; + cmd._undoStatus = this._LayerUndoStatus; + cmd._track = this._TrackUndoObject; + if (this._arrLayersNonEmpty) { + NJevent("sendToUndo", cmd); + } + } + }, + + addLayerCommand:{ + value:function () { + var command; + command = Object.create(Object.prototype, { + _el:{value:null, writable:true}, + _layerID:{value:null, writable:true}, + _layerPosition:{value:null, writable:true}, + _undoStatus:{value:false, writable:true}, + _track:{value:null, writable:true}, + description:{ value:"Add Layer"}, + receiver:{value:TimelinePanel}, + execute:{ + value:function () { + + NJevent('newLayer', this) + + } + }, + unexecute:{ + value:function () { + NJevent('deleteLayer', this) + + } + } + }); + return command; + } + }, + + deleteLayerCommand:{ + value:function () { + var command; + command = Object.create(Object.prototype, { + description:{ value:"Delete Layer"}, + receiver:{value:TimelinePanel}, + execute:{ + value:function () { + NJevent('deleteLayer', this) + } + }, + unexecute:{ + value:function () { + NJevent('newLayer', this) + } + } + }); + return command; } } -}); \ No newline at end of file + /* === END: Controllers === */ +}); -- cgit v1.2.3