diff options
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 111 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 99 |
2 files changed, 116 insertions, 94 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 03db7880..4b82814b 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 | }, |
@@ -328,6 +330,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
328 | _scrollTracks: { | 330 | _scrollTracks: { |
329 | value: false | 331 | value: false |
330 | }, | 332 | }, |
333 | |||
334 | // Keyframe drag and drop properties | ||
335 | _draggingTrackId: { | ||
336 | value: false | ||
337 | }, | ||
338 | draggingTrackId: { | ||
339 | get: function() { | ||
340 | return this._draggingTrackId; | ||
341 | }, | ||
342 | set: function(newVal) { | ||
343 | this._draggingTrackId = newVal; | ||
344 | } | ||
345 | }, | ||
346 | |||
347 | |||
331 | useAbsolutePosition:{ | 348 | useAbsolutePosition:{ |
332 | value:true | 349 | value:true |
333 | }, | 350 | }, |
@@ -352,8 +369,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
352 | this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); | 369 | this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); |
353 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); | 370 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); |
354 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); | 371 | 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); | 372 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); |
373 | this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); | ||
374 | this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); | ||
357 | 375 | ||
358 | // Bind the handlers for the config menu | 376 | // Bind the handlers for the config menu |
359 | this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); | 377 | this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); |
@@ -1501,11 +1519,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1501 | this.needsDraw = true; | 1519 | this.needsDraw = true; |
1502 | } | 1520 | } |
1503 | }, | 1521 | }, |
1504 | handleKeyframeDragover: { | ||
1505 | value: function(event) { | ||
1506 | |||
1507 | } | ||
1508 | }, | ||
1509 | handleLayerDragEnd : { | 1522 | handleLayerDragEnd : { |
1510 | value: function(event) { | 1523 | value: function(event) { |
1511 | this._deleteHelper = true; | 1524 | this._deleteHelper = true; |
@@ -1521,6 +1534,92 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1521 | this.needsDraw = true; | 1534 | this.needsDraw = true; |
1522 | } | 1535 | } |
1523 | }, | 1536 | }, |
1537 | |||
1538 | // Keyframe drag-and-drop | ||
1539 | handleKeyframeDragover: { | ||
1540 | value: function(event) { | ||
1541 | event.preventDefault(); | ||
1542 | var currPos = 0; | ||
1543 | /* | ||
1544 | myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop; | ||
1545 | if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) { | ||
1546 | this._scrollTracks = (this.user_layers.scrollTop - 10) | ||
1547 | } | ||
1548 | if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) { | ||
1549 | this._scrollTracks = (this.user_layers.scrollTop - 20) | ||
1550 | } | ||
1551 | if ((myScrollTest > (this.user_layers.clientHeight + 10))) { | ||
1552 | this._scrollTracks = (this.user_layers.scrollTop + 10) | ||
1553 | } | ||
1554 | if ((myScrollTest > (this.user_layers.clientHeight + 20))) { | ||
1555 | this._scrollTracks = (this.user_layers.scrollTop + 20) | ||
1556 | |||
1557 | } | ||
1558 | */ | ||
1559 | //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28; | ||
1560 | currPos = event.x - 277; | ||
1561 | |||
1562 | // too much or too little? | ||
1563 | if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) { | ||
1564 | currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition; | ||
1565 | } | ||
1566 | if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) { | ||
1567 | currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition; | ||
1568 | } | ||
1569 | //debugger; | ||
1570 | this.trackRepetition.childComponents[this.draggingTrackId-1].dragAndDropHelperCoords = currPos + "px"; | ||
1571 | this.trackRepetition.childComponents[this.draggingTrackId-1].needsDraw = true; | ||
1572 | return false; | ||
1573 | } | ||
1574 | }, | ||
1575 | handleKeyframeDrop: { | ||
1576 | value: function(event) { | ||
1577 | event.stopPropagation(); | ||
1578 | //this.element.classList.remove("dragOver"); | ||
1579 | //if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { | ||
1580 | //this.parentComponent.parentComponent.dropLayerID = this.layerID; | ||
1581 | //} | ||
1582 | |||
1583 | /* | ||
1584 | * First, what keyframe is it (get the index); | ||
1585 | * Limit keyframe position to between index-1 and index+1 keyFramePosition | ||
1586 | * On update, be sure to update index+1's information too | ||
1587 | * | ||
1588 | */ | ||
1589 | |||
1590 | var currPos = event.x - 274, | ||
1591 | currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80), | ||
1592 | currentMillisec = 0, | ||
1593 | i = 0, | ||
1594 | tweenIndex = this.trackRepetition.childComponents[this.draggingTrackId-1].draggingIndex; | ||
1595 | |||
1596 | // too much or too little? | ||
1597 | if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) { | ||
1598 | currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition + 3; | ||
1599 | } | ||
1600 | if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) { | ||
1601 | currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition + 3; | ||
1602 | } | ||
1603 | |||
1604 | currentMillisec = currentMillisecPerPixel * currPos; | ||
1605 | |||
1606 | this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanWidth = currPos - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex - 1].tweenData.keyFramePosition; | ||
1607 | this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.keyFramePosition = currPos; | ||
1608 | this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec; | ||
1609 | this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanPosition = currPos - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanWidth; | ||
1610 | this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex].setData(); | ||
1611 | if (tweenIndex < this.trackRepetition.childComponents[this.draggingTrackId-1].tweens.length -1) { | ||
1612 | var spanWidth = this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.keyFramePosition - currPos; | ||
1613 | var spanPosition = currPos; | ||
1614 | this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.spanWidth = spanWidth; | ||
1615 | this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.spanPosition = currPos; | ||
1616 | this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex+1].setData(); | ||
1617 | } | ||
1618 | this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex].selectTween(); | ||
1619 | this.trackRepetition.childComponents[this.draggingTrackId-1].updateKeyframeRule(); | ||
1620 | return false; | ||
1621 | } | ||
1622 | }, | ||
1524 | /* === END: Controllers === */ | 1623 | /* === END: Controllers === */ |
1525 | 1624 | ||
1526 | /* === BEGIN: Logging routines === */ | 1625 | /* === BEGIN: Logging routines === */ |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 836bb60f..76d52036 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -355,6 +355,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
355 | _dragAndDropHelperCoords: { | 355 | _dragAndDropHelperCoords: { |
356 | value: false | 356 | value: false |
357 | }, | 357 | }, |
358 | dragAndDropHelperCoords: { | ||
359 | get: function() { | ||
360 | return this._dragAndDropHelperCoords; | ||
361 | }, | ||
362 | set: function(newVal) { | ||
363 | this._dragAndDropHelperCoords = newVal; | ||
364 | } | ||
365 | }, | ||
358 | _dragAndDropHelperOffset : { | 366 | _dragAndDropHelperOffset : { |
359 | value: false | 367 | value: false |
360 | }, | 368 | }, |
@@ -443,10 +451,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
443 | this.eventManager.addEventListener("tlZoomSlider", this, false); | 451 | this.eventManager.addEventListener("tlZoomSlider", this, false); |
444 | 452 | ||
445 | // Drag and Drop event handlers | 453 | // Drag and Drop event handlers |
446 | this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); | 454 | //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); |
447 | this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false); | 455 | this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false); |
448 | this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false); | 456 | this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false); |
449 | this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); | 457 | //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); |
450 | } | 458 | } |
451 | }, | 459 | }, |
452 | 460 | ||
@@ -881,45 +889,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
881 | this._keyframeMaxPosition = maxPosition-9; | 889 | this._keyframeMaxPosition = maxPosition-9; |
882 | this._appendHelper = true; | 890 | this._appendHelper = true; |