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.js455
1 files changed, 390 insertions, 65 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 87a5e156..fc88b779 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -147,6 +147,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
147 value: null 147 value: null
148 }, 148 },
149 styleTracksRepetition : { 149 styleTracksRepetition : {
150 serializable:true,
150 get: function() { 151 get: function() {
151 return this._styleTracksRepetition; 152 return this._styleTracksRepetition;
152 }, 153 },
@@ -200,17 +201,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
200 this.trackData.arrTransformTracks = newVal; 201 this.trackData.arrTransformTracks = newVal;
201 } 202 }
202 }, 203 },
203 _transformTracksRepetition: {
204 value: null
205 },
206 transformTracksRepetition : {
207 get: function() {
208 return this._transformTracksRepetition;
209 },
210 set: function(newVal) {
211 this._transformTracksRepetition = newVal;
212 }
213 },
214 204
215 _tweens:{ 205 _tweens:{
216 value:[] 206 value:[]
@@ -233,10 +223,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
233 223
234 tweenRepetition:{ 224 tweenRepetition:{
235 get:function () { 225 get:function () {
236 return this._spanRepetition; 226 return this._tweenRepetition;
237 }, 227 },
238 set:function (newVal) { 228 set:function (newVal) {
239 this._spanRepetition = newVal; 229 this._tweenRepetition = newVal;
240 } 230 }
241 }, 231 },
242 232
@@ -341,6 +331,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
341 } 331 }
342 }, 332 },
343 333
334 _ruleList:{
335 value:[]
336 },
337
338 ruleList:{
339 get:function () {
340 return this._ruleList;
341 },
342 set:function (val) {
343 this._ruleList = val;
344 }
345 },
346
347 animationNamesString:{
348 value:""
349 },
350
344 ninjaStylesContoller:{ 351 ninjaStylesContoller:{
345 value:null 352 value:null
346 }, 353 },
@@ -394,6 +401,42 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
394 } 401 }
395 }, 402 },
396 403
404 // Drag and Drop properties
405 _dragAndDropHelper : {
406 value: false
407 },
408 _dragAndDropHelperCoords: {
409 value: false
410 },
411 dragAndDropHelperCoords: {
412 get: function() {
413 return this._dragAndDropHelperCoords;
414 },
415 set: function(newVal) {
416 this._dragAndDropHelperCoords = newVal;
417 }
418 },
419 _draggingIndex: {
420 value: false
421 },
422 draggingIndex: {
423 get: function() {
424 return this._draggingIndex;
425 },
426 set: function(newVal) {
427 this._draggingIndex = newVal;
428 }
429 },
430 _dragAndDropHelperOffset : {
431 value: false
432 },
433 _appendHelper: {
434 value: false
435 },
436 _deleteHelper: {
437 value: false
438 },
439
397 _trackData:{ 440 _trackData:{
398 value: false 441 value: false
399 }, 442 },
@@ -423,7 +466,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
423 this.bypassAnimation = this.trackData.bypassAnimation; 466 this.bypassAnimation = this.trackData.bypassAnimation;
424 this.trackID = this.trackData.layerID; 467 this.trackID = this.trackData.layerID;
425 this.tweens = this.trackData.tweens; 468 this.tweens = this.trackData.tweens;
426 this.animatedElement = this.trackData.animatedElement; // unneeded with one element per layer restriction 469 this.animatedElement = this.trackData.animatedElement;
427 this.arrStyleTracks = this.trackData.arrStyleTracks; 470 this.arrStyleTracks = this.trackData.arrStyleTracks;
428 this.isTrackAnimated = this.trackData.isTrackAnimated; 471 this.isTrackAnimated = this.trackData.isTrackAnimated;
429 this.trackDuration = this.trackData.trackDuration; 472 this.trackDuration = this.trackData.trackDuration;
@@ -435,6 +478,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
435 this.isStyleCollapsed = this.trackData.isStyleCollapsed; 478 this.isStyleCollapsed = this.trackData.isStyleCollapsed;
436 this.trackPosition = this.trackData.trackPosition; 479 this.trackPosition = this.trackData.trackPosition;
437 this.isVisible = this.trackData.isVisible; 480 this.isVisible = this.trackData.isVisible;
481 this.trackEditorProperty = "master";
438 this.needsDraw = true; 482 this.needsDraw = true;
439 } 483 }
440 }, 484 },
@@ -488,6 +532,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
488 this.ninjaStylesContoller = this.application.ninja.stylesController; 532 this.ninjaStylesContoller = this.application.ninja.stylesController;
489 this.element.addEventListener("click", this, false); 533 this.element.addEventListener("click", this, false);
490 this.eventManager.addEventListener("tlZoomSlider", this, false); 534 this.eventManager.addEventListener("tlZoomSlider", this, false);
535
536 // Drag and Drop event handlers
537 //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
538 this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
539 this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
540 //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
491 } 541 }
492 }, 542 },
493 543
@@ -496,11 +546,46 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
496 this.ninjaStylesContoller = this.application.ninja.stylesController; 546 this.ninjaStylesContoller = this.application.ninja.stylesController;
497 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 547 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
498 if (selectedIndex !== false) { 548 if (selectedIndex !== false) {
499 if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]){ 549 if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement){
500 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; 550 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement;
501 } 551 }
502 } 552 }
503 553
554 // Drag and Drop:
555 // Do we have a helper to append?
556 if (this._appendHelper === true) {
557 this.track_lanes.appendChild(this._dragAndDropHelper);
558 this._appendHelper = false;
559 }
560 // Do we need to move the helper?
561 if (this._dragAndDropHelperCoords !== false) {
562 if (this._dragAndDropHelper !== null) {
563 if (typeof(this._dragAndDropHelper.style) !== "undefined") {
564 this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords;
565 }
566 }
567 this._dragAndDropHelperCoords = false;
568 }
569 // Do we have a helper to delete?
570 if (this._deleteHelper === true) {
571 if (this._dragAndDropHelper === null) {
572 // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
573 // Try and recover the helper so we can delete it.
574 var myHelper = this.element.querySelector(".track-dnd-helper");
575 if (myHelper != null) {
576 this._dragAndDropHelper = myHelper;
577 }
578 }
579 if (this._dragAndDropHelper !== null) {
580 // We need to delete the helper. Can we delete it from track_lanes?
581 if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) {
582 this.track_lanes.removeChild(this._dragAndDropHelper);
583 this._dragAndDropHelper = null;
584 this._deleteHelper = false;
585 }
586 }
587 }
588
504 } 589 }
505 }, 590 },
506 591
@@ -512,11 +597,36 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
512 if (selectedIndex !== false) {