diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 115 |
1 files changed, 68 insertions, 47 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 339ca5a4..092176dc 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -459,10 +459,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
459 | this._draggingType = newVal; | 459 | this._draggingType = newVal; |
460 | } | 460 | } |
461 | }, | 461 | }, |
462 | 462 | ||
463 | layersDragged:{ | 463 | _elementsDragged: { |
464 | value:[], | 464 | value: [] |
465 | writable:true | 465 | }, |
466 | elementsDragged: { | ||
467 | get: function() { | ||
468 | return this._elementsDragged; | ||
469 | }, | ||
470 | set: function(newVal) { | ||
471 | this._elementsDragged = newVal; | ||
472 | } | ||
466 | }, | 473 | }, |
467 | 474 | ||
468 | dragLayerID : { | 475 | dragLayerID : { |
@@ -475,9 +482,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
475 | } | 482 | } |
476 | } | 483 | } |
477 | }, | 484 | }, |
478 | _dragLayerIndexes: { | 485 | |
479 | value: [] | ||
480 | }, | ||
481 | _dropLayerID : { | 486 | _dropLayerID : { |
482 | value: null | 487 | value: null |
483 | }, | 488 | }, |
@@ -489,39 +494,59 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
489 | if (newVal !== this._dropLayerID) { | 494 | if (newVal !== this._dropLayerID) { |
490 | this._dropLayerID = newVal; | 495 | this._dropLayerID = newVal; |
491 | 496 | ||
492 | var dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), | 497 | var dropLayerIndex = this.getLayerIndexByID(newVal), |
493 | arrDragLayers = [], | ||
494 | i = 0, | 498 | i = 0, |
495 | dragLayerIndexesLength = this._dragLayerIndexes.length; | 499 | dragLayerIndexesLength = this.currentLayersSelected.length, |
500 | dragAndDropDirection = 0, | ||
501 | targetIndex; | ||
496 | 502 | ||
503 | if (dragLayerIndexesLength === 0) { | ||
504 | // Nothing was dragged, so do nothing. | ||
505 | return; | ||
506 | } | ||
507 | |||
508 | // Is this a move up or down? | ||
509 | if (this.currentLayersSelected[0] > dropLayerIndex) { | ||
510 | dragAndDropDirection = -1; | ||
511 | } | ||
512 | targetIndex = dropLayerIndex + dragAndDropDirection; | ||
513 | |||
497 | // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order? | 514 | // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order? |
498 | 515 | ||
516 | // Get the target DOM element. | ||
517 | if (typeof(this.arrLayers[targetIndex]) !== "undefined") { | ||
518 | this._layerDroppedInPlace = this.arrLayers[targetIndex].layerData.stageElement; | ||
519 | } else { | ||
520 | this._layerDroppedInPlace = null; | ||
521 | } | ||
522 | |||
523 | // Splice | ||
499 | for (i = 0; i < dragLayerIndexesLength; i++) { | 524 | for (i = 0; i < dragLayerIndexesLength; i++) { |
500 | var myDraggingLayer = this.arrLayers[this._dragLayerIndexes[i]]; | 525 | var myDraggingLayer = this.arrLayers[this.currentLayersSelected[i]]; |
501 | arrDragLayers.push(myDraggingLayer); | ||
502 | // Splice arrLayers | 526 | // Splice arrLayers |
503 | this.arrLayers.splice(this._dragLayerIndexes[i], 1); | 527 | this.arrLayers.splice(this.currentLayersSelected[i], 1); |
504 | this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); | 528 | this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); |
505 | } | 529 | } |
506 | this.layersDragged = arrDragLayers; | 530 | this.elementsDragged = this.currentElementsSelected; |
507 | this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; | ||
508 | 531 | ||
509 | // Cache the new info | 532 | // Cache the new info |
510 | this.cacheTimeline(); | 533 | this.cacheTimeline(); |
511 | 534 | ||
512 | // Clear drag and drop variables for future re-use | 535 | // Clear drag and drop variables for future re-use |
513 | this._dropLayerID = null; | 536 | this._dropLayerID = null; |
514 | this.dragLayerIndexes = []; | ||
515 | this._dragLayerIndexes = []; | ||
516 | this.lastLayerClicked = 0; | 537 | this.lastLayerClicked = 0; |
517 | 538 | ||
518 | // Sometimes, just to be fun, the drop and dragend events don't fire. | 539 | // Sometimes, just to be fun, the drop and dragend events don't fire. |
519 | // So just in case, set the draw routine to delete the helper. | 540 | // So just in case, set the draw routine to delete the helper. |
520 | this._deleteHelper = true; | 541 | this._deleteHelper = true; |
542 | this._needsDOMManipulation = true; | ||
521 | this.needsDraw = true; | 543 | this.needsDraw = true; |
522 | } | 544 | } |
523 | } | 545 | } |
524 | }, | 546 | }, |
547 | _needsDOMManipulation: { | ||
548 | value: false | ||
549 | }, | ||
525 | _appendHelper: { | 550 | _appendHelper: { |
526 | value: false | 551 | value: false |
527 | }, | 552 | }, |
@@ -571,30 +596,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
571 | value:function () { | 596 | value:function () { |
572 | this.initTimeline(); | 597 | this.initTimeline(); |
573 | 598 | ||
574 | // Bind drag and drop event handlers | ||
575 | this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); | ||
576 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); | ||
577 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); | ||
578 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); | ||
579 | |||
580 | // Bind the handlers for the config menu | ||
581 | this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); | ||
582 | this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); | ||
583 | document.addEventListener("click", this.handleDocumentClick.bind(this), false); | ||
584 | |||
585 | this.addPropertyChangeListener("currentDocument.model.domContainer", this); | ||
586 | |||
587 | // Bind some bindings | ||
588 | Object.defineBinding(this, "currentSelectedContainer", { | ||
589 | boundObject:this.application.ninja, | ||
590 | boundObjectPropertyPath:"currentSelectedContainer", | ||
591 | oneway:true | ||
592 | }); | ||
593 | |||
594 | // Create the easing menu for future use. | ||
595 | this.easingMenu = EasingMenuPopup; | ||
596 | //this.easingMenu.show(); | ||
597 | |||
598 | } | 599 | } |
599 | }, | 600 | }, |
600 | 601 | ||
@@ -639,8 +640,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
639 | this._deleteHelper = false; | 640 | this._deleteHelper = false; |
640 | } | 641 | } |
641 | } | 642 | } |
642 | this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace); | 643 | |
643 | this.layersDragged =[]; | 644 | |
644 | } | 645 | } |
645 | } else if (this.draggingType === "keyframe") { | 646 | } else if (this.draggingType === "keyframe") { |
646 | // Do we need to scroll the tracks? | 647 | // Do we need to scroll the tracks? |
@@ -657,7 +658,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
657 | this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; | 658 | this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; |
658 | this.playheadmarker.style.top = this.layout_tracks.scrollTop + "px"; | 659 | this.playheadmarker.style.top = this.layout_tracks.scrollTop + "px"; |
659 | } | 660 | } |
660 | 661 | ||
662 | // Do we need to manipulate the DOM? | ||
663 | if (this._needsDOMManipulation === true) { | ||
664 | this.application.ninja.elementMediator.reArrangeDOM(this.elementsDragged , this._layerDroppedInPlace); | ||
665 | this.elementsDragged =[]; | ||
666 | } | ||
667 | } | ||
668 | }, | ||
669 | |||
670 | didDraw: { | ||
671 | value: function() { | ||
672 | if (this._needsDOMManipulation === true) { | ||
673 | this._needsDOMManipulation = false; | ||
674 | // We have shuffled layers, so we need to update this.selectedLayers. | ||
675 | this.selectLayers([]) | ||
676 | } | ||
661 | } | 677 | } |
662 | }, | 678 | }, |
663 | 679 | ||
@@ -855,11 +871,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
855 | boundObjectPropertyPath:"currentSelectedContainer", | 871 | boundObjectPropertyPath:"currentSelectedContainer", |
856 | oneway:true | 872 | oneway:true |
857 | }); | 873 | }); |
874 | this.addPropertyChangeListener("currentDocument.model.domContainer", this); | ||
858 | 875 | ||
859 | // Start the panel out in disabled mode by default | 876 | // Start the panel out in disabled mode by default |
860 | // (Will be switched on later, if appropriate). | 877 | // (Will be switched on later, if appropriate). |
861 | this.enablePanel(false); | 878 | this.enablePanel(false); |
862 | 879 |