/* <copyright>
This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
</copyright> */
var Montage = require("montage/core/core").Montage;
var Component = require("montage/ui/component").Component;
var nj = require("js/lib/NJUtils").NJUtils;
var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
hasTemplate:{
value:true
},
/* === BEGIN: Models === */
_arrLayers:{
value:[]
},
arrLayers:{
serializable:true,
get:function () {
return this._arrLayers;
},
set:function (newVal) {
this._arrLayers = newVal;
this.needsDraw = true;
this.cacheTimeline();
}
},
_temparrLayers:{
value:[]
},
temparrLayers:{
get:function () {
return this._temparrLayers;
},
set:function (newVal) {
this._temparrLayers = newVal;
}
},
_layerRepetition:{
value:null
},
layerRepetition:{
get:function () {
return this._layerRepetition;
},
set:function (newVal) {
this._layerRepetition = newVal;
}
},
// Set to false to skip array caching array sets in current document
_boolCacheArrays:{
value:true
},
_currentLayerNumber:{
value:0
},
currentLayerNumber:{
get:function () {
return this._currentLayerNumber;
},
set:function (newVal) {
if (newVal !== this._currentLayerNumber) {
this._currentLayerNumber = newVal;
this.cacheTimeline();
}
}
},
_currentLayerSelected:{
value: false
},
currentLayerSelected:{
get:function () {
return this._currentLayerSelected;
},
set:function (newVal) {
this._currentLayerSelected = newVal;
this.cacheTimeline();
}
},
_selectedLayerID:{
value:false
},
selectedLayerID:{
get:function () {
return this._selectedLayerID;
},
set:function (newVal) {
if (newVal === false) {
// We are clearing the timeline, so just set the value and return.
this._selectedLayerID = newVal;
return;
}
if (newVal !== this._selectedLayerID) {
var selectIndex = this.getLayerIndexByID(newVal);
this._selectedLayerID = newVal;
this._captureSelection = true;
if (this.currentLayerSelected !== false) {
this.selectLayer(selectIndex, true);
}
if (this.currentLayersSelected !== false) {
this.selectLayers(this.currentLayersSelected);
}
if ((this.currentLayersSelected === false) && (this.currentLayerSelected === false)) {
this.selectLayers([]);
}
}
}
},
_currentLayersSelected:{
value:[]
},
currentLayersSelected:{
get:function () {
return this._currentLayersSelected;
},
set:function (newVal) {
this._currentLayersSelected = newVal;
this.cacheTimeline();
}
},
_currentSelectedContainer: {
value: null
},
currentSelectedContainer: {
get: function() {
return this._currentSelectedContainer;
},
set: function(newVal) {
this._currentSelectedContainer = newVal;
this.handleDocumentChange();
}
},
_millisecondsOffset:{
value:1000
},
millisecondsOffset:{
get:function () {
return this._millisecondsOffset;
},
set:function (newVal) {
if (newVal !== this._millisecondsOffset) {
this._millisecondsOffset= newVal;
this.drawTimeMarkers();
NJevent('tlZoomSlider',this);
}
}
},
_masterDuration:{
value:0
},
masterDuration:{
serializable:true,
get:function () {
return this._masterDuration;
},
set:function (val) {
this._masterDuration = val;
this.timebar.style.width = (this._masterDuration / 12) + "px";
}
},
_trackRepetition:{
value:null
},
trackRepetition:{
get:function () {
return this._trackRepetition;
},
set:function (newVal) {
this._trackRepetition = newVal;
}
},
_selectedKeyframes:{
value:[]
},
selectedKeyframes:{
serializable:true,
get:function () {
return this._selectedKeyframes;
},
set:function (newVal) {
this._selectedKeyframes = newVal;
}
},
_selectedTweens:{
value:[]
},
selectedTweens:{
serializable:true,
get:function () {
return this._selectedTweens;
},
set:function (newVal) {
this._selectedTweens = newVal;
}
},
_breadCrumbContainer:{
value:null
},
breadCrumbContainer:{
get:function () {
return this._breadCrumbContainer;
},
set:function (value) {
if (this._breadCrumbContainer !== value) {
this._breadCrumbContainer = value;
//this.LayerBinding();
}
}
},
_isLayer:{
value:false
},
_firstTimeLoaded:{
value:true
},
_captureSelection:{
value:false
},
_openDoc:{
value:false
},
timeMarkerHolder:{
value:null
},
_dragAndDropHelper : {
value: false
},
_dragAndDropHelperCoords: {
value: false
},
_dragAndDropHelperOffset : {
value: false
},
_dragLayerID : {
value: null
},
layersDragged:{
value:[],
writable:true
},
dragLayerID : {
get: function() {
return this._dragLayerID;
},
set: function(newVal) {
if (newVal !== this._dragLayerID) {
this._dragLayerID = newVal;
}
}
},
_dropLayerID : {
value: null
},
dropLayerID : {
get: function() {
return this._dropLayerID;
},
set: function(newVal) {
if (newVal !== this._dropLayerID) {
this._dropLayerID = newVal;
var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
dragLayer = this.arrLayers[dragLayerIndex];
this.layersDragged.push(dragLayer);
this._layerDroppedInPlace = this.arrLayers[dropLayerIndex];
this.arrLayers.splice(dragLayerIndex, 1);
this.arrLayers.splice(dropLayerIndex, 0, dragLayer);
this.cacheTimeline();
// Clear for future DnD
this._dropLayerID = null;
this._dragLayerID = null;
// Sometimes, just to be fun, the drop and dragend events don't fire.
// So just in case, set the draw routine to delete the helper.
this._deleteHelper = true;
this.needsDraw = true;
}
}
},
_appendHelper: {
value: false
},
_deleteHelper: {
value: false
},
_scrollTracks: {
value: false
},
useAbsolutePosition:{
value:true
},
/* === END: Models === */
/* === BEGIN: Draw cycle === */
prepareForDraw:{
value:function () {
this.initTimeline();
// Bind the event handler for the document change events
//this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false);
this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false);
//this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false);
//this.eventManager.addEventListener("breadCrumbBinding",this,false);
// Bind drag and drop event handlers
this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this)
|