diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 448 |
1 files changed, 385 insertions, 63 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 126e6a61..bd55f2fb 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 | }, |