aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Collapser.js2
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js47
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js41
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html4
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js275
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html6
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js183
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js14
8 files changed, 517 insertions, 55 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 88314c8b..9c8d4434 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -151,7 +151,6 @@ var Montage = require("montage/core/core").Montage,
151 151
152 // isToggling: Bindable property. Set this (to anything) to trigger a toggle. 152 // isToggling: Bindable property. Set this (to anything) to trigger a toggle.
153 _isToggling: { 153 _isToggling: {
154 serializable: true,
155 value: true 154 value: true
156 }, 155 },
157 isToggling: { 156 isToggling: {
@@ -179,7 +178,6 @@ var Montage = require("montage/core/core").Montage,
179 178
180 prepareForDraw: { 179 prepareForDraw: {
181 value: function() { 180 value: function() {
182
183 // Get the original value of the overflow property: 181 // Get the original value of the overflow property:
184 this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); 182 this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
185 if (this.isCollapsed === false) { 183 if (this.isCollapsed === false) {
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 859cdfb1..5afff6e6 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -31,6 +31,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
31 prepareForDraw:{ 31 prepareForDraw:{
32 value:function(){ 32 value:function(){
33 this.element.addEventListener("click", this, false); 33 this.element.addEventListener("click", this, false);
34
35 // Drag and drop event handlers
36 this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
37 this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
38 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
39 this.element.addEventListener("dragend", this.handleDragend.bind(this), false);
40
41
42
43
44
34 } 45 }
35 }, 46 },
36 47
@@ -57,5 +68,39 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
57 value:function(ev){ 68 value:function(ev){
58 this.selectKeyframe(); 69 this.selectKeyframe();
59 } 70 }
60 } 71 },
72
73 handleMouseover: {
74 value: function(event) {
75 this.element.draggable = true;
76 }
77 },
78 handleMouseout: {
79 value: function(event) {
80 this.element.draggable = false;
81 }
82 },
83 handleDragstart: {
84 value: function(event) {
85 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
86 event.dataTransfer.setData('Text', 'Keyframe');
87
88 // Get my index in my track's tween array
89 var i = 0,
90 tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
91 myIndex = null;
92 for (i = 0; i < tweenRepetitionLength; i++) {
93 if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) {
94 myIndex = i;
95 }
96 }
97 this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
98 }
99 },
100 handleDragend: {
101 value: function(event) {
102 this.parentComponent.isDragging = false;
103 }
104 }
105
61}); 106});
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b23da749..c213cb70 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -471,7 +471,7 @@ var Layer = exports.Layer = Montage.create(Component, {
471 this.dtextScaleX = this.layerData.dtextScaleX; 471 this.dtextScaleX = this.layerData.dtextScaleX;
472 this.dtextScaleY = this.layerData.dtextScaleY; 472 this.dtextScaleY = this.layerData.dtextScaleY;
473 this.dtextRotate = this.layerData.dtextRotate; 473 this.dtextRotate = this.layerData.dtextRotate;
474 this._isFirstDraw = this.layerData._isFirstDraw; 474 //this._isFirstDraw = this.layerData._isFirstDraw;
475 this.layerTag = this.layerData.layerTag; 475 this.layerTag = this.layerData.layerTag;
476 this.isVisible = this.layerData.isVisible; 476 this.isVisible = this.layerData.isVisible;
477 this.isAnimated = this.layerData.isAnimated; 477 this.isAnimated = this.layerData.isAnimated;
@@ -545,6 +545,9 @@ var Layer = exports.Layer = Montage.create(Component, {
545 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); 545 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
546 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); 546 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
547 this.element.addEventListener("drop", this.handleDrop.bind(this), false); 547 this.element.addEventListener("drop", this.handleDrop.bind(this), false);
548
549
550
548 } 551 }
549 }, 552 },
550 draw: { 553 draw: {
@@ -570,7 +573,33 @@ var Layer = exports.Layer = Montage.create(Component, {
570 } 573 }
571 this._isFirstDraw = false; 574 this._isFirstDraw = false;
572 this.layerData._isFirstDraw = false; 575 this.layerData._isFirstDraw = false;
576
577 if (this.isMainCollapsed === false) {
578 this.mainCollapser.myContent.style.height = "auto";
579 this.mainCollapser.myContent.classList.remove(this.mainCollapser.collapsedClass);
580 this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass);
581
582 }
583 if (this.isPositionCollapsed === false) {
584 this.positionCollapser.myContent.style.height = "auto";
585 this.positionCollapser.myContent.classList.remove(this.positionCollapser.collapsedClass);
586 this.positionCollapser.clicker.classList.remove(this.positionCollapser.collapsedClass);
587 }
588 if (this.isTransformCollapsed === false) {
589 this.transformCollapser.myContent.style.height = "auto";
590 this.transformCollapser.myContent.classList.remove(this.transformCollapser.collapsedClass);
591 this.transformCollapser.clicker.classList.remove(this.transformCollapser.collapsedClass);
592 }
593 if (this.isStyleCollapsed === false) {
594 this.styleCollapser.myContent.style.height = "auto";
595 this.styleCollapser.myContent.classList.remove(this.styleCollapser.collapsedClass);
596 this.styleCollapser.clicker.classList.remove(this.styleCollapser.collapsedClass);
597 }
598
573 } 599 }
600
601
602
574 } 603 }
575 }, 604 },
576 /* End: Draw cycle */ 605 /* End: Draw cycle */
@@ -839,6 +868,9 @@ var Layer = exports.Layer = Montage.create(Component, {
839 }, 868 },
840 handleDragleave: { 869 handleDragleave: {
841 value: function(event) { 870 value: function(event) {
871 if (this.parentComponent.parentComponent.draggingType !== "layer") {
872 return;
873 }
842 this.element.classList.remove("dragOver"); 874 this.element.classList.remove("dragOver");
843 } 875 }
844 }, 876 },
@@ -846,10 +878,14 @@ var Layer = exports.Layer = Montage.create(Component, {
846 value: function(event) { 878 value: function(event) {
847 this.parentComponent.parentComponent.dragLayerID = this.layerID; 879 this.parentComponent.parentComponent.dragLayerID = this.layerID;
848 event.dataTransfer.setData('Text', 'Layer'); 880 event.dataTransfer.setData('Text', 'Layer');
881 this.parentComponent.parentComponent.draggingType = "layer";
849 } 882 }
850 }, 883 },
851 handleDragover: { 884 handleDragover: {
852 value: function(event) { 885 value: function(event) {
886 if (this.parentComponent.parentComponent.draggingType !== "layer") {
887 return;
888 }
853 event.preventDefault(); 889 event.preventDefault();
854 this.element.classList.add("dragOver"); 890 this.element.classList.add("dragOver");
855 event.dataTransfer.dropEffect = "move"; 891 event.dataTransfer.dropEffect = "move";
@@ -859,6 +895,9 @@ var Layer = exports.Layer = Montage.create(Component, {
859 895
860 handleDrop : { 896 handleDrop : {
861 value: function(event) { 897 value: function(event) {
898 if (this.parentComponent.parentComponent.draggingType !== "layer") {
899 return;
900 }
862 event.stopPropagation(); 901 event.stopPropagation();
863 this.element.classList.remove("dragOver"); 902 this.element.classList.remove("dragOver");
864 if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { 903 if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) {
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 19709ca7..5c957619 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -20,6 +20,7 @@
20 "track_container": {"#": "right_inside"}, 20 "track_container": {"#": "right_inside"},
21 "timeline_leftpane" : {"#" : "leftpane_inside"}, 21 "timeline_leftpane" : {"#" : "leftpane_inside"},
22 "layer_tracks": {"#": "layer_tracks"}, 22 "layer_tracks": {"#": "layer_tracks"},