aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js71
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js120
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js69
3 files changed, 105 insertions, 155 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index f7c936f7..45a2afd3 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -9,6 +9,7 @@ var Component = require("montage/ui/component").Component;
9 9
10var Keyframe = exports.Keyframe = Montage.create(Component, { 10var Keyframe = exports.Keyframe = Montage.create(Component, {
11 11
12 // ==== Begin models
12 hasTemplate:{ 13 hasTemplate:{
13 value: true 14 value: true
14 }, 15 },
@@ -42,7 +43,9 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
42 this.needsDraw = true; 43 this.needsDraw = true;
43 } 44 }
44 }, 45 },
46 // ==== End Models
45 47
48 // ==== Begin Draw cycle methods
46 prepareForDraw:{ 49 prepareForDraw:{
47 value:function(){ 50 value:function(){
48 this.element.addEventListener("click", this, false); 51 this.element.addEventListener("click", this, false);
@@ -66,57 +69,31 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
66 this.element.style.left = (this.position - 5) + "px"; 69 this.element.style.left = (this.position - 5) + "px";
67 } 70 }
68 }, 71 },
72 // ==== End Draw cycle methods
69 73
70 deselectKeyframe:{ 74 // ==== Begin Event handlers
71 value:function(){
72 this.isSelected=false;
73 this.element.style.left = (this.position - 5) + "px";
74 }
75 },
76
77 selectKeyframe:{
78 value:function(){
79 if(this.isSelected){
80 return;
81 }
82
83 if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){
84 var tweenID = this.parentComponent.tweenID;
85 var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent;
86 mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe();
87 return;
88 }
89
90 this.isSelected=true;
91 this.element.style.left = (this.position - 6) + "px";
92 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
93 this.parentComponent.selectTween();
94 }
95 },
96
97 handleClick:{ 75 handleClick:{
98 value:function(ev){ 76 value:function(ev){
99 this.selectKeyframe(); 77 this.selectKeyframe();
100 ev.stopPropagation(); 78 ev.stopPropagation();
101 } 79 }
102 }, 80 },
103 81
104 handleMouseover: { 82 handleMouseover: {
105 value: function(event) { 83 value: function(event) {
106 this.element.draggable = true; 84 this.element.draggable = true;
107 } 85 }
108 }, 86 },
87
109 handleMouseout: { 88 handleMouseout: {
110 value: function(event) { 89 value: function(event) {
111 this.element.draggable = false; 90 this.element.draggable = false;
112 } 91 }
113 }, 92 },
93
114 handleDragstart: { 94 handleDragstart: {
115 value: function(event) { 95 value: function(event) {
116 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
117 event.dataTransfer.setData('Text', 'Keyframe'); 96 event.dataTransfer.setData('Text', 'Keyframe');
118
119 // Get my index in my track's tween array
120 var i = 0, 97 var i = 0,
121 tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length, 98 tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
122 myIndex = null; 99 myIndex = null;
@@ -129,10 +106,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
129 this.selectKeyframe(); 106 this.selectKeyframe();
130 } 107 }
131 }, 108 },
109
132 handleDragend: { 110 handleDragend: {
133 value: function(event) { 111 value: function(event) {
134 this.parentComponent.isDragging = false; 112 this.parentComponent.isDragging = false;
135 } 113 }
136 } 114 },
137 115 // ==== End Event handlers
116
117 // === Begin Controllers
118 selectKeyframe:{
119 value:function(){
120 if(this.isSelected){
121 return;
122 }
123 if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){
124 var tweenID = this.parentComponent.tweenID;
125 var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent;
126 mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe();
127 return;
128 }
129 this.isSelected=true;
130 this.element.style.left = (this.position - 6) + "px";
131 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
132 this.parentComponent.selectTween();
133 }
134 },
135
136 deselectKeyframe:{
137 value:function () {
138 this.isSelected = false;
139 this.element.style.left = (this.position - 5) + "px";
140 }
141 }
142 // ==== End Controllers
138}); 143});
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 72d26e78..c4571e9d 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -9,33 +9,11 @@ var Component = require("montage/ui/component").Component;
9 9
10var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { 10var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
11 11
12 /* ===- Begin Models ==== */
12 hasTemplate:{ 13 hasTemplate:{
13 value: true 14 value: true
14 }, 15 },
15 16
16 prepareForDraw:{
17 value:function(){
18 this.element.addEventListener("click", this, false);
19 this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID;
20 this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement;
21 this.ninjaStylesContoller = this.application.ninja.stylesController;
22 }
23 },
24
25 draw:{
26 value:function(){
27
28 }
29 },
30
31 didDraw:{
32 value:function () {
33 if(this.currentKeyframeRule){
34 this.retrieveStoredStyleTweens();
35 }
36 }
37 },
38
39 trackEditorProperty:{ 17 trackEditorProperty:{
40 value:"" 18 value:""
41 }, 19 },
@@ -51,7 +29,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
51 _propTweenRepetition:{ 29 _propTweenRepetition:{
52 value:null 30 value:null
53 }, 31 },
54
55 propTweenRepetition:{ 32 propTweenRepetition:{
56 get:function () { 33 get:function () {
57 return this._propTweenRepetition; 34 return this._propTweenRepetition;
@@ -64,7 +41,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
64 _propTweens:{ 41 _propTweens:{
65 value:[] 42 value:[]
66 }, 43 },
67
68 propTweens:{ 44 propTweens:{
69 serializable:true, 45 serializable:true,
70 get:function () { 46 get:function () {
@@ -78,7 +54,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
78 _propTrackData:{ 54 _propTrackData:{
79 value:false 55 value:false
80 }, 56 },
81
82 propTrackData:{ 57 propTrackData:{
83 serializable:true, 58 serializable:true,
84 get:function () { 59 get:function () {
@@ -115,7 +90,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
115 _trackID:{ 90 _trackID:{
116 value:null 91