diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index efeeba00..1e918c6e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -31,6 +31,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
31 | } | 31 | } |
32 | } | 32 | } |
33 | }, | 33 | }, |
34 | |||
35 | _isFirstDraw: { | ||
36 | value: true | ||
37 | }, | ||
38 | |||
34 | _isVisible:{ | 39 | _isVisible:{ |
35 | value: true | 40 | value: true |
36 | }, | 41 | }, |
@@ -343,6 +348,42 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
343 | value:null | 348 | value:null |
344 | }, | 349 | }, |
345 | 350 | ||
351 | // Drag and Drop properties | ||
352 | _dragAndDropHelper : { | ||
353 | value: false | ||
354 | }, | ||
355 | _dragAndDropHelperCoords: { | ||
356 | value: false | ||
357 | }, | ||
358 | dragAndDropHelperCoords: { | ||
359 | get: function() { | ||
360 | return this._dragAndDropHelperCoords; | ||
361 | }, | ||
362 | set: function(newVal) { | ||
363 | this._dragAndDropHelperCoords = newVal; | ||
364 | } | ||
365 | }, | ||
366 | _draggingIndex: { | ||
367 | value: false | ||
368 | }, | ||
369 | draggingIndex: { | ||
370 | get: function() { | ||
371 | return this._draggingIndex; | ||
372 | }, | ||
373 | set: function(newVal) { | ||
374 | this._draggingIndex = newVal; | ||
375 | } | ||
376 | }, | ||
377 | _dragAndDropHelperOffset : { | ||
378 | value: false | ||
379 | }, | ||
380 | _appendHelper: { | ||
381 | value: false | ||
382 | }, | ||
383 | _deleteHelper: { | ||
384 | value: false | ||
385 | }, | ||
386 | |||
346 | _trackData:{ | 387 | _trackData:{ |
347 | value: false | 388 | value: false |
348 | }, | 389 | }, |
@@ -419,6 +460,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
419 | this.ninjaStylesContoller = this.application.ninja.stylesController; | 460 | this.ninjaStylesContoller = this.application.ninja.stylesController; |
420 | this.element.addEventListener("click", this, false); | 461 | this.element.addEventListener("click", this, false); |
421 | this.eventManager.addEventListener("tlZoomSlider", this, false); | 462 | this.eventManager.addEventListener("tlZoomSlider", this, false); |
463 | |||
464 | // Drag and Drop event handlers | ||
465 | //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); | ||
466 | this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false); | ||
467 | this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false); | ||
468 | //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); | ||
422 | } | 469 | } |
423 | }, | 470 | }, |
424 | 471 | ||
@@ -431,6 +478,53 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
431 | this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; | 478 | this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; |
432 | } | 479 | } |
433 | } | 480 | } |
481 | |||
482 | |||
483 | |||
484 | |||
485 | |||
486 | |||
487 | |||
488 | |||
489 | // Drag and Drop: | ||
490 | // Do we have a helper to append? | ||
491 | if (this._appendHelper === true) { | ||
492 | this.track_lanes.appendChild(this._dragAndDropHelper); | ||
493 | this._appendHelper = false; | ||
494 | } | ||
495 | // Do we need to move the helper? | ||
496 | if (this._dragAndDropHelperCoords !== false) { | ||
497 | if (this._dragAndDropHelper !== null) { | ||
498 | if (typeof(this._dragAndDropHelper.style) !== "undefined") { | ||
499 | this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords; | ||
500 | } | ||
501 | } | ||
502 | this._dragAndDropHelperCoords = false; | ||
503 | } | ||
504 | // Do we have a helper to delete? | ||
505 | if (this._deleteHelper === true) { | ||
506 | if (this._dragAndDropHelper === null) { | ||
507 | // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. | ||
508 | // Try and recover the helper so we can delete it. | ||
509 | var myHelper = this.element.querySelector(".track-dnd-helper"); | ||
510 | if (myHelper != null) { | ||
511 | this._dragAndDropHelper = myHelper; | ||
512 | } | ||
513 | } | ||
514 | if (this._dragAndDropHelper !== null) { | ||
515 | // We need to delete the helper. Can we delete it from track_lanes? | ||
516 | if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) { | ||
517 | this.track_lanes.removeChild(this._dragAndDropHelper); | ||
518 | this._dragAndDropHelper = null; | ||
519 | this._deleteHelper = false; | ||
520 | } | ||
521 | } | ||
522 | } | ||
523 | |||
524 | |||
525 | |||
526 | |||
527 | |||
434 | 528 | ||
435 | } | 529 | } |
436 | }, | 530 | }, |
@@ -448,6 +542,33 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
448 | } | 542 | } |
449 | } | 543 | } |
450 | } | 544 | } |
545 | |||
546 | |||
547 | if (this._isFirstDraw === true) { | ||
548 | |||
549 | if (this.isMainCollapsed === false) { | ||
550 | this._mainCollapser.myContent.style.height = "auto"; | ||
551 | this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass); | ||
552 | this._mainCollapser.clicker.classList.remove(this._mainCollapser.collapsedClass); | ||
553 | } | ||
554 | if (this.isPositionCollapsed === false) { | ||
555 | this._positionCollapser.myContent.style.height = "auto"; | ||
556 | this._positionCollapser.myContent.classList.remove(this._positionCollapser.collapsedClass); | ||
557 | this._positionCollapser.clicker.classList.remove(this._positionCollapser.collapsedClass); | ||
558 | } | ||
559 | if (this.isTransformCollapsed === false) { | ||
560 | this._transformCollapser.myContent.style.height = "auto"; | ||
561 | this._transformCollapser.myContent.classList.remove(this._transformCollapser.collapsedClass); | ||
562 | this._transformCollapser.clicker.classList.remove(this._transformCollapser.collapsedClass); | ||
563 | } | ||
564 | if (this.isStyleCollapsed === false) { | ||
565 | this._styleCollapser.myContent.style.height = "auto"; | ||
566 | this._styleCollapser.myContent.classList.remove(this._styleCollapser.collapsedClass); | ||
567 | this._styleCollapser.clicker.classList.remove(this._styleCollapser.collapsedClass); | ||
568 | } | ||
569 | this._isFirstDraw = false; | ||
570 | } | ||
571 | |||
451 | } | 572 | } |
452 | }, | 573 | }, |
453 | 574 | ||
@@ -730,6 +851,68 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
730 | return returnVal; | 851 | return returnVal; |
731 | } | 852 | } |
732 | }, | 853 | }, |
854 | |||
855 | // Drag and drop event handlers | ||
856 | handleKeyframeDragstart : { | ||
857 | value: function(event) { | ||
858 | var dragIcon = document.createElement("img"), | ||
859 | minPosition = 0, | ||
860 | maxPosition = 100000000000; | ||
861 | |||
862 | event.dataTransfer.effectAllowed = 'move'; | ||
863 | event.dataTransfer.setData('Text', this.identifier); | ||
864 | dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=" | ||
865 | dragIcon.width = 1; | ||
866 | event.dataTransfer.setDragImage(dragIcon, 0, 0); | ||
867 | |||
868 | // Clone the element we're dragging | ||
869 | this._dragAndDropHelper = event.target.cloneNode(true); | ||
870 | this._dragAndDropHelper.style.opacity = 0.8; | ||
871 | this._dragAndDropHelper.style.position = "absolute"; | ||
872 | this._dragAndDropHelper.style.top = "2px"; | ||
873 | this._dragAndDropHelper.style.left = "0px"; | ||
874 | this._dragAndDropHelper.style.zIndex = 700; | ||
875 | |||
876 | //this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width"); | ||
877 | this._dragAndDropHelper.classList.add("track-dnd-helper"); | ||
878 | |||
879 | if (this.draggingIndex < (this.tweens.length -1)) { | ||
880 | maxPosition = this.tweenRepetition.childComponents[this.draggingIndex+1].keyFramePosition; | ||
881 | } | ||
882 | if (this.draggingIndex > 1) { | ||
883 | minPosition = this.tweenRepetition.childComponents[this.draggingIndex-1].keyFramePosition; | ||
884 | } | ||
885 | this._keyframeMinPosition = minPosition+2; | ||
886 | this._keyframeMaxPosition = maxPosition-9; | ||