aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js449
1 files changed, 386 insertions, 63 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index ff684446..8dc19958 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -31,6 +31,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
31 } 31 }
32 } 32 }
33 }, 33 },
34
35 _isFirstDraw: {
36 value: true
37 },
38
34 _isVisible:{ 39 _isVisible:{
35 value: true 40 value: true
36 }, 41 },
@@ -136,6 +141,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
136 value: null 141 value: null
137 }, 142 },
138 styleTracksRepetition : { 143 styleTracksRepetition : {
144 serializable:true,
139 get: function() { 145 get: function() {
140 return this._styleTracksRepetition; 146 return this._styleTracksRepetition;
141 }, 147 },
@@ -185,17 +191,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
185 this.trackData.arrTransformTracks = newVal; 191 this.trackData.arrTransformTracks = newVal;
186 } 192 }
187 }, 193 },
188 _transformTracksRepetition: {
189 value: null
190 },
191 transformTracksRepetition : {
192 get: function() {
193 return this._transformTracksRepetition;
194 },
195 set: function(newVal) {
196 this._transformTracksRepetition = newVal;
197 }
198 },
199 194
200 _tweens:{ 195 _tweens:{
201 value:[] 196 value:[]
@@ -218,10 +213,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
218 213
219 tweenRepetition:{ 214 tweenRepetition:{
220 get:function () { 215 get:function () {
221 return this._spanRepetition; 216 return this._tweenRepetition;
222 }, 217 },
223 set:function (newVal) { 218 set:function (newVal) {
224 this._spanRepetition = newVal; 219 this._tweenRepetition = newVal;
225 } 220 }
226 }, 221 },
227 222
@@ -326,6 +321,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
326 } 321 }
327 }, 322 },
328 323
324 _ruleList:{
325 value:[]
326 },
327
328 ruleList:{
329 get:function () {
330 return this._ruleList;
331 },
332 set:function (val) {
333 this._ruleList = val;
334 }
335 },
336
337 animationNamesString:{
338 value:""
339 },
340
329 ninjaStylesContoller:{ 341 ninjaStylesContoller:{
330 value:null 342 value:null
331 }, 343 },
@@ -343,6 +355,42 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
343 value:null 355 value:null
344 }, 356 },
345 357
358 // Drag and Drop properties
359 _dragAndDropHelper : {
360 value: false
361 },
362 _dragAndDropHelperCoords: {
363 value: false
364 },
365 dragAndDropHelperCoords: {
366 get: function() {
367 return this._dragAndDropHelperCoords;
368 },
369 set: function(newVal) {
370 this._dragAndDropHelperCoords = newVal;
371 }
372 },
373 _draggingIndex: {
374 value: false
375 },
376 draggingIndex: {
377 get: function() {
378 return this._draggingIndex;
379 },
380 set: function(newVal) {
381 this._draggingIndex = newVal;
382 }
383 },
384 _dragAndDropHelperOffset : {
385 value: false
386 },
387 _appendHelper: {
388 value: false
389 },
390 _deleteHelper: {
391 value: false
392 },
393
346 _trackData:{ 394 _trackData:{
347 value: false 395 value: false
348 }, 396 },
@@ -371,7 +419,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
371 this.bypassAnimation = this.trackData.bypassAnimation; 419 this.bypassAnimation = this.trackData.bypassAnimation;
372 this.trackID = this.trackData.layerID; 420 this.trackID = this.trackData.layerID;
373 this.tweens = this.trackData.tweens; 421 this.tweens = this.trackData.tweens;
374 this.animatedElement = this.trackData.animatedElement; // unneeded with one element per layer restriction 422 this.animatedElement = this.trackData.animatedElement;
375 this.arrStyleTracks = this.trackData.arrStyleTracks; 423 this.arrStyleTracks = this.trackData.arrStyleTracks;
376 this.isTrackAnimated = this.trackData.isTrackAnimated; 424 this.isTrackAnimated = this.trackData.isTrackAnimated;
377 this.trackDuration = this.trackData.trackDuration; 425 this.trackDuration = this.trackData.trackDuration;
@@ -415,6 +463,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
415 this.ninjaStylesContoller = this.application.ninja.stylesController; 463 this.ninjaStylesContoller = this.application.ninja.stylesController;
416 this.element.addEventListener("click", this, false); 464 this.element.addEventListener("click", this, false);
417 this.eventManager.addEventListener("tlZoomSlider", this, false); 465 this.eventManager.addEventListener("tlZoomSlider", this, false);
466
467 // Drag and Drop event handlers
468 //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
469 this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
470 this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
471 //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
418 } 472 }
419 }, 473 },
420 474
@@ -423,11 +477,46 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
423 this.ninjaStylesContoller = this.application.ninja.stylesController; 477 this.ninjaStylesContoller = this.application.ninja.stylesController;
424 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 478 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
425 if (selectedIndex !== false) { 479 if (selectedIndex !== false) {
426 if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]){ 480 if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement){
427 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; 481 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement;
428 } 482 }
429 } 483 }
430 484
485 // Drag and Drop:
486 // Do we have a helper to append?
487 if (this._appendHelper === true) {
488 this.track_lanes.appendChild(this._dragAndDropHelper);
489 this._appendHelper = false;
490 }
491 // Do we need to move the helper?
492 if (this._dragAndDropHelperCoords !== false) {
493 if (this._dragAndDropHelper !== null) {
494 if (typeof(this._dragAndDropHelper.style) !== "undefined") {
495 this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords;
496 }
497 }
498 this._dragAndDropHelperCoords = false;
499 }
500 // Do we have a helper to delete?
501 if (this._deleteHelper === true) {
502 if (this._dragAndDropHelper === null) {
503 // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
504 // Try and recover the helper so we can delete it.
505 var myHelper = this.element.querySelector(".track-dnd-helper");
506 if (myHelper != null) {
507 this._dragAndDropHelper = myHelper;
508 }
509 }
510 if (this._dragAndDropHelper !== null) {
511 // We need to delete the helper. Can we delete it from track_lanes?
512 if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) {
513 this.track_lanes.removeChild(this._dragAndDropHelper);
514 this._dragAndDropHelper = null;
515 this._deleteHelper = false;
516 }
517 }
518 }
519
431 } 520 }
432 },