diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 184 |
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, { | |||
1598 | }, | 1611 | }, |
1599 | handleKeyframeDrop: { | 1612 | handleKeyframeDrop: { |
1600 | value: function(event) { | 1613 |