diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 464 |
1 files changed, 398 insertions, 66 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 87a5e156..3db57a3a 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -41,6 +41,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
41 | this._tween = newVal; | 41 | this._tween = newVal; |
42 | } | 42 | } |
43 | }, | 43 | }, |
44 | |||
45 | _isFirstDraw: { | ||
46 | value: true | ||
47 | }, | ||
44 | 48 | ||
45 | _isVisible:{ | 49 | _isVisible:{ |
46 | value: true | 50 | value: true |
@@ -147,6 +151,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
147 | value: null | 151 | value: null |
148 | }, | 152 | }, |
149 | styleTracksRepetition : { | 153 | styleTracksRepetition : { |
154 | serializable:true, | ||
150 | get: function() { | 155 | get: function() { |
151 | return this._styleTracksRepetition; | 156 | return this._styleTracksRepetition; |
152 | }, | 157 | }, |
@@ -200,17 +205,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
200 | this.trackData.arrTransformTracks = newVal; | 205 | this.trackData.arrTransformTracks = newVal; |
201 | } | 206 | } |
202 | }, | 207 | }, |
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 | 208 | ||
215 | _tweens:{ | 209 | _tweens:{ |
216 | value:[] | 210 | value:[] |
@@ -233,10 +227,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
233 | 227 | ||
234 | tweenRepetition:{ | 228 | tweenRepetition:{ |
235 | get:function () { | 229 | get:function () { |
236 | return this._spanRepetition; | 230 | return this._tweenRepetition; |
237 | }, | 231 | }, |
238 | set:function (newVal) { | 232 | set:function (newVal) { |
239 | this._spanRepetition = newVal; | 233 | this._tweenRepetition = newVal; |
240 | } | 234 | } |
241 | }, | 235 | }, |
242 | 236 | ||
@@ -341,6 +335,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
341 | } | 335 | } |
342 | }, | 336 | }, |
343 | 337 | ||
338 | _ruleList:{ | ||
339 | value:[] | ||
340 | }, | ||
341 | |||
342 | ruleList:{ | ||
343 | get:function () { | ||
344 | return this._ruleList; | ||
345 | }, | ||
346 | set:function (val) { | ||
347 | this._ruleList = val; | ||
348 | } | ||
349 | }, | ||
350 | |||
351 | animationNamesString:{ | ||
352 | value:"" | ||
353 | }, | ||
354 | |||
344 | ninjaStylesContoller:{ | 355 | ninjaStylesContoller:{ |
345 | value:null | 356 | value:null |
346 | }, | 357 | }, |
@@ -394,6 +405,42 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
394 | } | 405 | } |
395 | }, | 406 | }, |
396 | 407 | ||
408 | // Drag and Drop properties | ||
409 | _dragAndDropHelper : { | ||
410 | value: false | ||
411 | }, | ||
412 | _dragAndDropHelperCoords: { | ||
413 | value: false | ||
414 | }, | ||
415 | dragAndDropHelperCoords: { | ||
416 | get: function() { | ||
417 | return this._dragAndDropHelperCoords; | ||
418 | }, | ||
419 | set: function(newVal) { | ||
420 | this._dragAndDropHelperCoords = newVal; | ||
421 | } | ||
422 | }, | ||
423 | _draggingIndex: { | ||
424 | value: false | ||
425 | }, | ||
426 | draggingIndex: { | ||
427 | get: function() { | ||
428 | return this._draggingIndex; | ||
429 | }, | ||
430 | set: function(newVal) { | ||
431 | this._draggingIndex = newVal; | ||
432 | } | ||
433 | }, | ||
434 | _dragAndDropHelperOffset : { | ||
435 | value: false | ||
436 | }, | ||
437 | _appendHelper: { | ||
438 | value: false | ||
439 | }, | ||
440 | _deleteHelper: { | ||
441 | value: false | ||
442 | }, | ||
443 | |||
397 | _trackData:{ | 444 | _trackData:{ |
398 | value: false | 445 | value: false |
399 | }, | 446 | }, |
@@ -423,7 +470,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
423 | this.bypassAnimation = this.trackData.bypassAnimation; | 470 | this.bypassAnimation = this.trackData.bypassAnimation; |
424 | this.trackID = this.trackData.layerID; | 471 | this.trackID = this.trackData.layerID; |
425 | this.tweens = this.trackData.tweens; | 472 | this.tweens = this.trackData.tweens; |
426 | this.animatedElement = this.trackData.animatedElement; // unneeded with one element per layer restriction | 473 | this.animatedElement = this.trackData.animatedElement; |
427 | this.arrStyleTracks = this.trackData.arrStyleTracks; | 474 | this.arrStyleTracks = this.trackData.arrStyleTracks; |
428 | this.isTrackAnimated = this.trackData.isTrackAnimated; | 475 | this.isTrackAnimated = this.trackData.isTrackAnimated; |
429 | this.trackDuration = this.trackData.trackDuration; | 476 | this.trackDuration = this.trackData.trackDuration; |
@@ -435,6 +482,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
435 | this.isStyleCollapsed = this.trackData.isStyleCollapsed; | 482 | this.isStyleCollapsed = this.trackData.isStyleCollapsed; |
436 | this.trackPosition = this.trackData.trackPosition; | 483 | this.trackPosition = this.trackData.trackPosition; |
437 | this.isVisible = this.trackData.isVisible; | 484 | this.isVisible = this.trackData.isVisible; |
485 | this.trackEditorProperty = "master"; | ||
438 | this.needsDraw = true; | 486 | this.needsDraw = true; |
439 | } | 487 | } |
440 | }, | 488 | }, |
@@ -488,6 +536,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
488 | this.ninjaStylesContoller = this.application.ninja.stylesController; | 536 | this.ninjaStylesContoller = this.application.ninja.stylesController; |
489 | this.element.addEventListener("click", this, false); | 537 | this.element.addEventListener("click", this, false); |
490 | this.eventManager.addEventListener("tlZoomSlider", this, false); | 538 | this.eventManager.addEventListener("tlZoomSlider", this, false); |
539 | |||
540 | // Drag and Drop event handlers | ||
541 | //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); | ||
542 | this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false); | ||
543 | this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false); | ||
544 | //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); | ||
491 | } | 545 | } |
492 | }, | 546 | }, |
493 | 547 | ||
@@ -496,11 +550,46 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
496 | this.ninjaStylesContoller = this.application.ninja.stylesController; | 550 | this.ninjaStylesContoller = this.application.ninja.stylesController; |
497 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 551 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
498 | if (selectedIndex !== false) { | 552 | if (selectedIndex !== false) { |
499 | if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]){ | 553 | if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement){ |
500 | this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; | 554 | this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement; |
501 | } | 555 | } |
502 | } | 556 | } |
503 | 557 | ||
558 | // Drag and Drop: | ||
559 | // Do we have a helper to append? | ||
560 | if (this._appendHelper === true) { | ||
561 | this.track_lanes.appendChild(this._dragAndDropHelper); | ||
562 | this._appendHelper = false; | ||
563 | } | ||
564 | // Do we need to move the helper? | ||
565 | if (this._dragAndDropHelperCoords !== false) { | ||
566 | if (this._dragAndDropHelper !== null) { | ||
567 | if (typeof(this._dragAndDropHelper.style) !== "undefined") { | ||
568 | this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords; | ||
569 | } | ||
570 | } | ||
571 | this._dragAndDropHelperCoords = false; | ||
572 | } | ||
573 | // Do we have a helper to delete? | ||
574 | if (this._deleteHelper === true) { | ||
575 | if (this._dragAndDropHelper === null) { | ||
576 | // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. | ||
577 | // Try and recover the helper so we can delete it. | ||
578 | var myHelper = this.element.querySelector(".track-dnd-helper"); | ||
579 | if (myHelper != null) { | ||
580 | this._dragAndDropHelper = myHelper; | ||
581 | } | ||
582 | } | ||
583 | if (this._dragAndDropHelper !== null) { | ||
584 | // We need to delete the helper. Can we delete it from track_lanes? | ||