aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js725
1 files changed, 380 insertions, 345 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 087bf3cd..1afb9e5a 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -19,24 +19,43 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
19 19
20 /* === BEGIN: Models === */ 20 /* === BEGIN: Models === */
21 _arrLayers:{ 21 _arrLayers:{
22 serializable: true,
22 value:[] 23 value:[]
23 }, 24 },
24 25
25 arrLayers:{ 26 arrLayers:{
27 serializable: true,
26 get:function () { 28 get:function () {
27 return this._arrLayers; 29 return this._arrLayers;
28 }, 30 },
29 set:function (newVal) { 31 set:function (newVal) {
30 this._arrLayers = newVal; 32 this._arrLayers = newVal;
33 this.needsDraw = true;
31 this._cacheArrays(); 34 this._cacheArrays();
32 } 35 }
33 }, 36 },
34 37
38 _temparrLayers:{
39 value:[]
40 },
41
42 temparrLayers:{
43 get:function () {
44 return this._temparrLayers;
45 },
46 set:function (newVal) {
47 this._temparrLayers = newVal;
48 }
49 },
50
51
35 _layerRepetition:{ 52 _layerRepetition:{
53 serializable: true,
36 value:null 54 value:null
37 }, 55 },
38 56
39 layerRepetition:{ 57 layerRepetition:{
58 serializable: true,
40 get:function () { 59 get:function () {
41 return this._layerRepetition; 60 return this._layerRepetition;
42 }, 61 },
@@ -46,17 +65,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
46 }, 65 },
47 66
48 _cacheArrays : { 67 _cacheArrays : {
49 value: function() { 68 value: function() {
50 if (this._boolCacheArrays) { 69 if (this._boolCacheArrays) {
51 this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; 70 this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
52 71
53 } 72 }
54 } 73 }
55 }, 74 },
56 75
57 // Set to false to skip array caching array sets in current document 76 // Set to false to skip array caching array sets in current document
58 _boolCacheArrays : { 77 _boolCacheArrays : {
59 value: true 78 value: true
60 }, 79 },
61 80
62 _currentLayerNumber:{ 81 _currentLayerNumber:{
@@ -107,9 +126,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
107 } 126 }
108 }, 127 },
109 128
110 currentLayerSelected:{ 129 _currentLayerSelected:{
111 value: null 130 value: null
112 }, 131 },
132 currentLayerSelected : {
133 get: function() {
134 return this._currentLayerSelected;
135 },
136 set: function(newVal) {
137 this._currentLayerSelected = newVal;
138 this.application.ninja.currentDocument.tlCurrentLayerSelected = newVal;
139 }
140 },
113 141
114 millisecondsOffset:{ 142 millisecondsOffset:{
115 value:1000 143 value:1000
@@ -217,9 +245,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
217 prepareForDraw:{ 245 prepareForDraw:{
218 value:function () { 246 value:function () {
219 this.initTimeline(); 247 this.initTimeline();
220 this.eventManager.addEventListener("onOpenDocument", this, false); 248 // Bind the event handler for the document change events
221 this.eventManager.addEventListener("closeDocument", this, false); 249 this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false);
222 this.eventManager.addEventListener("switchDocument", this, false); 250 this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false);
251 this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false);
223 } 252 }
224 }, 253 },
225 254
@@ -233,41 +262,68 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
233 }, 262 },
234 /* === END: Draw cycle === */ 263 /* === END: Draw cycle === */
235 /* === BEGIN: Controllers === */ 264 /* === BEGIN: Controllers === */
236 // Bind all document-specific events (pass in true to unbind) 265 // Create an empty layer template object with minimal defaults and return it for use
237 _bindDocumentEvents : { 266 createLayerTemplate : {
238 value: function(boolUnbind) { 267 value : function() {
239 var arrEvents = ["deleteLayerClick", 268 var returnObj = {};
240 "newLayer", 269 returnObj.layerData = {};
241 "deleteLayer", 270 returnObj.layerData.layerName = null;
242 "elementAdded", 271 returnObj.layerData.layerID = null;
243 "elementDeleted", 272 returnObj.layerData.isMainCollapsed = true;
244 "selectionChange"], 273 returnObj.layerData.isPositionCollapsed = true;
245 i, 274 returnObj.layerData.isTransformCollapsed = true;
246 arrEventsLength = arrEvents.length; 275 returnObj.layerData.isStyleCollapsed = true;
247 276 returnObj.layerData.arrLayerStyles = [];
248 if (boolUnbind) { 277 returnObj.layerData.elementsList = [];
249 for (i = 0; i < arrEventsLength; i++) { 278 returnObj.layerData.deleted = false;
250 this.eventManager.removeEventListener(arrEvents[i], this, false); 279 returnObj.layerData.isSelected = false;
251 } 280 returnObj.layerData.layerPosition = null;
252 } else { 281 returnObj.layerData.created=false;
253 for (i = 0; i < arrEventsLength; i++) { 282 returnObj.layerData.isTrackAnimated = false;
254 this.eventManager.addEventListener(arrEvents[i], this, false); 283 returnObj.layerData.currentKeyframeRule = null;
255 } 284 returnObj.layerData.trackPosition = 0;
285 returnObj.layerData.arrStyleTracks = [];
286 returnObj.layerData.tweens = [];
287 returnObj.parentElementUUID = null;
288 returnObj.parentElement = null;
289 return returnObj;
290 }
291 },
292 // Bind all document-specific events (pass in true to unbind)
293 _bindDocumentEvents : {
294 value: function(boolUnbind) {
295 var arrEvents = ["deleteLayerClick",
296 "newLayer",
297 "deleteLayer",
298 "elementAdded",
299 "elementDeleted",
300 "selectionChange"],
301 i,
302 arrEventsLength = arrEvents.length;
303
304 if (boolUnbind) {
305 for (i = 0; i < arrEventsLength; i++) {
306 this.eventManager.removeEventListener(arrEvents[i], this, false);
307 }
308 } else {
309 for (i = 0; i < arrEventsLength; i++) {
310 this.eventManager.addEventListener(arrEvents[i], this, false);
311 }
256 Object.defineBinding(this, "breadCrumbContainer", { 312 Object.defineBinding(this, "breadCrumbContainer", {
257 boundObject: this.application.ninja, 313 boundObject: this.application.ninja,
258 boundObjectPropertyPath:"currentSelectedContainer", 314 boundObjectPropertyPath:"currentSelectedContainer",
259 oneway: true 315 oneway: true
260 }); 316 });
261 } 317 }
262 } 318 }
263 }, 319 },
264 320
265 initTimeline : { 321 // Initialize the timeline, runs only once when the component is first loaded.
266 value: function() { 322 // Sets up basic event listeners, gets some selectors, etc.
267 // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once. 323 initTimeline : {
268 this.layout_tracks = this.element.querySelector(".layout-tracks"); 324 value: function() {
325 this.layout_tracks = this.element.querySelector(".layout-tracks");
269 this.layout_markers = this.element.querySelector(".layout_markers"); 326 this.layout_markers = this.element.querySelector(".layout_markers");
270