aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js71
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js3
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js120
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js229
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js594
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js87
6 files changed, 463 insertions, 641 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 9ded9c76..a52150af 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -33,6 +33,7 @@ var Component = require("montage/ui/component").Component;
33 33
34var Keyframe = exports.Keyframe = Montage.create(Component, { 34var Keyframe = exports.Keyframe = Montage.create(Component, {
35 35
36 // ==== Begin models
36 hasTemplate:{ 37 hasTemplate:{
37 value: true 38 value: true
38 }, 39 },
@@ -66,7 +67,9 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
66 this.needsDraw = true; 67 this.needsDraw = true;
67 } 68 }
68 }, 69 },
70 // ==== End Models
69 71
72 // ==== Begin Draw cycle methods
70 prepareForDraw:{ 73 prepareForDraw:{
71 value:function(){ 74 value:function(){
72 this.element.addEventListener("click", this, false); 75 this.element.addEventListener("click", this, false);
@@ -90,57 +93,31 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
90 this.element.style.left = (this.position - 5) + "px"; 93 this.element.style.left = (this.position - 5) + "px";
91 } 94 }
92 }, 95 },
96 // ==== End Draw cycle methods
93 97
94 deselectKeyframe:{ 98 // ==== Begin Event handlers
95 value:function(){
96 this.isSelected=false;
97 this.element.style.left = (this.position - 5) + "px";
98 }
99 },
100
101 selectKeyframe:{
102 value:function(){
103 if(this.isSelected){
104 return;
105 }
106
107 if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){
108 var tweenID = this.parentComponent.tweenID;
109 var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent;
110 mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe();
111 return;
112 }
113
114 this.isSelected=true;
115 this.element.style.left = (this.position - 6) + "px";
116 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
117 this.parentComponent.selectTween();
118 }
119 },
120
121 handleClick:{ 99 handleClick:{
122 value:function(ev){ 100 value:function(ev){
123 this.selectKeyframe(); 101 this.selectKeyframe();
124 ev.stopPropagation(); 102 ev.stopPropagation();
125 } 103 }
126 }, 104 },
127 105
128 handleMouseover: { 106 handleMouseover: {
129 value: function(event) { 107 value: function(event) {
130 this.element.draggable = true; 108 this.element.draggable = true;
131 } 109 }
132 }, 110 },
111
133 handleMouseout: { 112 handleMouseout: {
134 value: function(event) { 113 value: function(event) {
135 this.element.draggable = false; 114 this.element.draggable = false;
136 } 115 }
137 }, 116 },
117
138 handleDragstart: { 118 handleDragstart: {
139 value: function(event) { 119 value: function(event) {
140 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
141 event.dataTransfer.setData('Text', 'Keyframe'); 120 event.dataTransfer.setData('Text', 'Keyframe');
142
143 // Get my index in my track's tween array
144 var i = 0, 121 var i = 0,
145 tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length, 122 tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
146 myIndex = null; 123 myIndex = null;
@@ -153,10 +130,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
153 this.selectKeyframe(); 130 this.selectKeyframe();
154 } 131 }
155 }, 132 },
133
156 handleDragend: { 134 handleDragend: {
157 value: function(event) { 135 value: function(event) {
158 this.parentComponent.isDragging = false; 136 this.parentComponent.isDragging = false;
159 } 137 }
160 } 138 },
161 139 // ==== End Event handlers
140
141 // === Begin Controllers
142 selectKeyframe:{
143 value:function(){
144 if(this.isSelected){
145 return;
146 }
147 if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){
148 var tweenID = this.parentComponent.tweenID;
149 var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent;
150 mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe();
151 return;
152 }
153 this.isSelected=true;
154 this.element.style.left = (this.position - 6) + "px";
155 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
156 this.parentComponent.selectTween();
157 }
158 },
159
160 deselectKeyframe:{
161 value:function () {
162 this.isSelected = false;
163 this.element.style.left = (this.position - 5) + "px";
164 }
165 }
166 // ==== End Controllers
162}); 167});
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 3be766c4..291e3416 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -1404,6 +1404,7 @@ var Layer = exports.Layer = Montage.create(Component, {
1404 } 1404 }
1405 } 1405 }
1406 } 1406 }
1407 /* End: Logging routines */ 1407
1408 /* End: Event handlers */
1408 1409
1409}); 1410});
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 6c68fa63..24fd8392 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -33,33 +33,11 @@ var Component = require("montage/ui/component").Component;
33 33
34var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { 34var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
35 35
36 /* ===- Begin Models ==== */
36 hasTemplate:{ 37 hasTemplate:{
37 value: true 38 value: true
38 }, 39 },
39 40
40 prepareForDraw:{
41 value:function(){
42 this.element.addEventListener("click", this, false);
43 this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID;
44 this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement;
45 this.ninjaStylesContoller = this.application.ninja.stylesController;
46 }
47 },
48
49 draw:{
50 value:function(){
51
52 }
53 },
54
55 didDraw:{
56 value:function () {
57 if(this.currentKeyframeRule){
58 this.retrieveStoredStyleTweens();
59 }
60 }
61 },
62
63 trackEditorProperty:{ 41 trackEditorProperty:{
64 value:"" 42 value:""
65 }, 43 },
@@ -75,7 +53,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
75 _propTweenRepetition:{ 53 _propTweenRepetition:{
76 value:null 54 value:null
77 }, 55 },
78
79 propTweenRepetition:{ 56 propTweenRepetition:{
80 get:function () { 57 get:function () {
81 return this._propTweenRepetition; 58 return this._propTweenRepetition;
@@ -88,7 +65,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
88 _propTweens:{ 65 _propTweens:{
89 value:[] 66 value:[]
90 }, 67 },
91
92 propTweens:{ 68 propTweens:{