aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorJon Reid2012-06-19 18:04:06 -0700
committerJon Reid2012-06-19 18:04:06 -0700
commit0da75e4de7373ed361b5d76be4ee192453146dde (patch)
treeb1ffd39b63e0934e55c38543830546ae619af3d5 /js/panels
parent53a49f49ce5cd72fbb21e2840bb9622d5952d953 (diff)
downloadninja-0da75e4de7373ed361b5d76be4ee192453146dde.tar.gz
Timeline: Re-enable drag-and-drop of layers, now with bonus DOM
manipulation!
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js115
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).