aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJon Reid2012-05-08 13:59:17 -0700
committerJon Reid2012-05-08 13:59:17 -0700
commit88c7e0abba3349531450efbcecfa1b71fbf5134a (patch)
tree61f2cc0f9757e081f662aa742d49e2058fce3567 /js
parentbafa105c753a139847ef5e0bc8070ce0e8d16f77 (diff)
downloadninja-88c7e0abba3349531450efbcecfa1b71fbf5134a.tar.gz
Timeline: Automatic scrolling during dragging of keyframes.
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js184
1 files changed, 98 insertions, 86 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 933ed9cc..80525056 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -404,45 +404,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
404 404
405 draw: { 405 draw: {
406 value: function() { 406 value: function() {
407
407 // Drag and Drop: 408 // Drag and Drop:
408 // Do we have a helper to append? 409 if (this.draggingType === "layer") {
409 if (this._appendHelper === true) { 410
410 this.container_layers.appendChild(this._dragAndDropHelper); 411 // Do we have a helper to append?
411 this._appendHelper = false; 412 if (this._appendHelper === true) {
412 } 413 this.container_layers.appendChild(this._dragAndDropHelper);
413 // Do we need to move the helper? 414 this._appendHelper = false;
414 if (this._dragAndDropHelperCoords !== false) {
415 if (this._dragAndDropHelper !== null) {
416 this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
417 }
418 this._dragAndDropHelperCoords = false;
419 }
420 // Do we need to scroll the tracks?
421 if (this._scrollTracks !== false) {
422 this.layout_tracks.scrollTop = this._scrollTracks;
423 this._scrollTracks = false;
424 }
425 // Do we have a helper to delete?
426 if (this._deleteHelper === true) {
427 if (this._dragAndDropHelper === null) {
428 // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
429 // Try and recover the helper so we can delete it.
430 var myHelper = this.container_layers.querySelector(".timeline-dnd-helper");
431 if (myHelper != null) {
432 this._dragAndDropHelper = myHelper;
433 }
434 }
435 if (this._dragAndDropHelper !== null) {
436 // We need to delete the helper. Can we delete it from container_layers?
437 if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) {
438 this.container_layers.removeChild(this._dragAndDropHelper);
439 this._dragAndDropHelper = null;
440 this._deleteHelper = false;
441 }
442 } 415 }
443 this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace); 416 // Do we need to move the helper?
444 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 }
445 } 455 }
456
446 } 457 }
447 }, 458 },
448 /* === END: Draw cycle === */ 459 /* === END: Draw cycle === */
@@ -1510,6 +1521,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1510 }, 1521 },
1511 handleLayerDragover: { 1522 handleLayerDragover: {
1512 value: function(event) { 1523 value: function(event) {
1524
1525 // If this isn't a layer event we don't do anything.
1513 if (this.draggingType !== "layer") { 1526 if (this.draggingType !== "layer") {
1514 return; 1527 return;
1515 } 1528 }
@@ -1535,6 +1548,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1535 }, 1548 },
1536 handleLayerDragEnd : { 1549 handleLayerDragEnd : {
1537 value: function(event) { 1550 value: function(event) {
1551
1552 // If this isn't a layer event we don't do anything.
1538 if (this.draggingType !== "layer") { 1553 if (this.draggingType !== "layer") {
1539 return; 1554 return;
1540 } 1555 }
@@ -1545,6 +1560,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1545 }, 1560 },
1546 handleLayerDrop : { 1561 handleLayerDrop : {
1547 value: function(event) { 1562 value: function(event) {
1563
1564 // If this isn't a layer event we don't do anything.
1548 if (this.draggingType !== "layer") { 1565 if (this.draggingType !== "layer") {
1549 return; 1566 return;
1550 } 1567 }
@@ -1558,39 +1575,35 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1558 // Keyframe drag-and-drop 1575 // Keyframe drag-and-drop
1559 handleKeyframeDragover: { 1576 handleKeyframeDragover: {
1560 value: function(event) { 1577 value: function(event) {
1578
1579 // If this isn't a keyframe drag and drop event, we don't want to do anything.
1561 if (this.draggingType !== "keyframe") { 1580 if (this.draggingType !== "keyframe") {
1562 return; 1581 return;
1563 } 1582 }
1564 event.preventDefault(); 1583 event.preventDefault();
1565 var currPos = 0; 1584 var currPos = 0;
1566 /*
1567 myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop;
1568 if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) {
1569 this._scrollTracks = (this.user_layers.scrollTop - 10)
1570 }
1571 if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) {
1572 this._scrollTracks = (this.user_layers.scrollTop - 20)
1573 }
1574 if ((myScrollTest > (this.user_layers.clientHeight + 10))) {
1575 this._scrollTracks = (this.user_layers.scrollTop + 10)
1576 }
1577 if ((myScrollTest > (this.user_layers.clientHeight + 20))) {
1578 this._scrollTracks = (this.user_layers.scrollTop + 20)
1579
1580 }
1581 */
1582 //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28;
1583 1585
1584 currPos = (event.x + this.layout_tracks.scrollLeft) - 277; 1586 currPos = (event.x + this.layout_tracks.scrollLeft) - 277;
1585 1587
1586 // too much or too little? 1588 // Prevent dragging beyond previous or next keyframe, if any
1587 if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) { 1589 if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) {
1588 currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition; 1590 currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition;
1589 } 1591 }
1590 if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) { 1592 if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) {
1591 currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition; 1593 currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition;
1592 } 1594 }
1593 //debugger; 1595
1596 // Automatic scrolling when dragged to edge of window
1597 if (currPos < (this.layout_tracks.scrollLeft + 10)) {
1598 this._scrollTracks = (this.layout_tracks.scrollLeft -10);
1599 this.needsDraw = true;
1600 }
1601 if (currPos > (this.layout_tracks.offsetWidth + this.layout_tracks.scrollLeft - 20)) {
1602 this._scrollTracks = (this.layout_tracks.scrollLeft +10);
1603 this.needsDraw = true;
1604 }
1605
1606 // Set up values in appropriate track and set that track to draw.
1594 this.trackRepetition.childComponents[this.draggingTrackId-1].dragAndDropHelperCoords = currPos + "px"; 1607 this.trackRepetition.childComponents[this.draggingTrackId-1].dragAndDropHelperCoords = currPos + "px";
1595 this.trackRepetition.childComponents[this.draggingTrackId-1].needsDraw = true; 1608 this.trackRepetition.childComponents[this.draggingTrackId-1].needsDraw = true;
1596 return false; 1609 return false;
@@ -1598,52 +1611,51 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {