diff options
author | Jonathan Duran | 2012-05-11 14:13:07 -0700 |
---|---|---|
committer | Jonathan Duran | 2012-05-11 14:13:07 -0700 |
commit | 1e2138fc7d0007b0ad3cb4807dc1c9101190f2f2 (patch) | |
tree | 2563aa7694c3caaf813ca71ef3250b2a76ee0041 /js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |
parent | 32257ac142f872d3c1f6c07504bae77ae884ed93 (diff) | |
parent | 6fcaa4e923a19672b5860b4c6f67d836680e7e99 (diff) | |
download | ninja-1e2138fc7d0007b0ad3cb4807dc1c9101190f2f2.tar.gz |
Merge branch 'refs/heads/TimelineUber' into TimelineProps
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 232 |
1 files changed, 188 insertions, 44 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 03db7880..8859e115 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -259,6 +259,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
259 | timeMarkerHolder:{ | 259 | timeMarkerHolder:{ |
260 | value:null | 260 | value:null |
261 | }, | 261 | }, |
262 | |||
263 | // Drag and Drop properties | ||
262 | _dragAndDropHelper : { | 264 | _dragAndDropHelper : { |
263 | value: false | 265 | value: false |
264 | }, | 266 | }, |
@@ -271,6 +273,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
271 | _dragLayerID : { | 273 | _dragLayerID : { |
272 | value: null | 274 | value: null |
273 | }, | 275 | }, |
276 | _draggingType: { | ||
277 | value: false | ||
278 | }, | ||
279 | draggingType: { | ||
280 | get: function() { | ||
281 | return this._draggingType; | ||
282 | }, | ||
283 | set: function(newVal) { | ||
284 | this._draggingType = newVal; | ||
285 | } | ||
286 | }, | ||
274 | 287 | ||
275 | layersDragged:{ | 288 | layersDragged:{ |
276 | value:[], | 289 | value:[], |
@@ -328,6 +341,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
328 | _scrollTracks: { | 341 | _scrollTracks: { |
329 | value: false | 342 | value: false |
330 | }, | 343 | }, |
344 | |||
345 | // Keyframe drag and drop properties | ||
346 | _draggingTrackId: { | ||
347 | value: false | ||
348 | }, | ||
349 | draggingTrackId: { | ||
350 | get: function() { | ||
351 | return this._draggingTrackId; | ||
352 | }, | ||
353 | set: function(newVal) { | ||
354 | this._draggingTrackId = newVal; | ||
355 | } | ||
356 | }, | ||
357 | |||
358 | |||
331 | useAbsolutePosition:{ | 359 | useAbsolutePosition:{ |
332 | value:true | 360 | value:true |
333 | }, | 361 | }, |
@@ -352,8 +380,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
352 | this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); | 380 | this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); |
353 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); | 381 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); |
354 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); | 382 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); |
355 | //this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); | ||
356 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); | 383 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); |
384 | this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); | ||
385 | this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); | ||
357 | 386 | ||
358 | // Bind the handlers for the config menu | 387 | // Bind the handlers for the config menu |
359 | this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); | 388 | this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); |
@@ -375,45 +404,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
375 | 404 | ||
376 | draw: { | 405 | draw: { |
377 | value: function() { | 406 | value: function() { |
407 | |||
378 | // Drag and Drop: | 408 | // Drag and Drop: |
379 | // Do we have a helper to append? | 409 | if (this.draggingType === "layer") { |
380 | if (this._appendHelper === true) { | 410 | |
381 | this.container_layers.appendChild(this._dragAndDropHelper); | 411 | // Do we have a helper to append? |
382 | this._appendHelper = false; | 412 | if (this._appendHelper === true) { |
383 | } | 413 | this.container_layers.appendChild(this._dragAndDropHelper); |
384 | // Do we need to move the helper? | 414 | this._appendHelper = false; |
385 | if (this._dragAndDropHelperCoords !== false) { | ||
386 | if (this._dragAndDropHelper !== null) { | ||
387 | this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords; | ||
388 | } | ||
389 | this._dragAndDropHelperCoords = false; | ||
390 | } | ||
391 | // Do we need to scroll the tracks? | ||
392 | if (this._scrollTracks !== false) { | ||
393 | this.layout_tracks.scrollTop = this._scrollTracks; | ||
394 | this._scrollTracks = false; | ||
395 | } | ||
396 | // Do we have a helper to delete? | ||
397 | if (this._deleteHelper === true) { | ||
398 | if (this._dragAndDropHelper === null) { | ||
399 | // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. | ||
400 | // Try and recover the helper so we can delete it. | ||
401 | var myHelper = this.container_layers.querySelector(".timeline-dnd-helper"); | ||
402 | if (myHelper != null) { | ||
403 | this._dragAndDropHelper = myHelper; | ||
404 | } | ||
405 | } | ||
406 | if (this._dragAndDropHelper !== null) { | ||
407 | // We need to delete the helper. Can we delete it from container_layers? | ||
408 | if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) { | ||
409 | this.container_layers.removeChild(this._dragAndDropHelper); | ||
410 | this._dragAndDropHelper = null; | ||
411 | this._deleteHelper = false; | ||
412 | } | ||
413 | } | 415 | } |
414 | this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace); | 416 | // Do we need to move the helper? |
415 | this.layersDragged =[]; | 417 | if (this._dragAndDropHelperCoords !== false) { |
418 | if (this._dragAndDropHelper !== null) { | ||
419 | this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords; | ||
420 | } | ||
421 | this._dragAndDropHelperCoords = false; | ||
422 | } | ||
423 | // Do we need to scroll the tracks? | ||
424 | if (this._scrollTracks !== false) { | ||
425 | this.layout_tracks.scrollTop = this._scrollTracks; | ||
426 | this._scrollTracks = false; | ||
427 | } | ||
428 | // Do we have a helper to delete? | ||
429 | if (this._deleteHelper === true) { | ||
430 | if (this._dragAndDropHelper === null) { | ||
431 | // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. | ||
432 | // Try and recover the helper so we can delete it. | ||
433 | var myHelper = this.container_layers.querySelector(".timeline-dnd-helper"); | ||
434 | if (myHelper != null) { | ||
435 | this._dragAndDropHelper = myHelper; | ||
436 | } | ||
437 | } | ||
438 | if (this._dragAndDropHelper !== null) { | ||
439 | // We need to delete the helper. Can we delete it from container_layers? | ||
440 | if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) { | ||
441 | this.container_layers.removeChild(this._dragAndDropHelper); | ||
442 | this._dragAndDropHelper = null; | ||
443 | this._deleteHelper = false; | ||
444 | } | ||
445 | } | ||
446 | this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace); | ||
447 | this.layersDragged =[]; | ||
448 | } | ||
449 | } else if (this.draggingType === "keyframe") { | ||
450 | // Do we need to scroll the tracks? | ||
451 | if (this._scrollTracks !== false) { | ||
452 | this.layout_tracks.scrollLeft = this._scrollTracks; | ||
453 | this._scrollTracks = false; | ||
454 | } | ||
416 | } | 455 | } |
456 | |||
417 | } | 457 | } |
418 | }, | 458 | }, |
419 | /* === END: Draw cycle === */ | 459 | /* === END: Draw cycle === */ |
@@ -668,7 +708,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
668 | 708 | ||
669 | //debugger; | 709 | //debugger; |
670 | if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") { | 710 | if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") { |
671 | this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; | 711 | // this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; |
672 | } | 712 | } |
673 | 713 | ||
674 | // Are we only showing animated layers? | 714 | // Are we only showing animated layers? |
@@ -1481,6 +1521,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1481 | }, | 1521 | }, |
1482 | handleLayerDragover: { | 1522 | handleLayerDragover: { |
1483 | value: function(event) { | 1523 | value: function(event) { |
1524 | |||
1525 | // If this isn't a layer event we don't do anything. | ||
1526 | if (this.draggingType !== "layer") { | ||
1527 | return; | ||
1528 | } | ||
1484 | var currPos = 0, | 1529 | var currPos = 0, |
1485 | myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop; | 1530 | myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop; |
1486 | if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) { | 1531 | if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) { |
@@ -1501,13 +1546,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1501 | this.needsDraw = true; | 1546 | this.needsDraw = true; |
1502 | } | 1547 | } |
1503 | }, |