aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJon Reid2012-05-07 17:17:17 -0700
committerJon Reid2012-05-07 17:17:17 -0700
commit4ef8ec674695fb60c9ef6668206243471a0fe347 (patch)
tree808fc5a157cb9514c6fdf3aff235f9ba02a0a132
parent2ea8a62835f4c20efff2623306e7205e6f5bf0ba (diff)
downloadninja-4ef8ec674695fb60c9ef6668206243471a0fe347.tar.gz
Timeline: Move keyframe dragover and drop listeners to TimelinePanel for
interaction improvements.
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js111
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js99
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, {