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.js85
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js120
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js100
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js594
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js87
6 files changed, 423 insertions, 634 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/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b4833fa2..4dd9e88a 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -1046,28 +1046,25 @@ var Layer = exports.Layer = Montage.create(Component, {
1046 1046
1047 handleLeftChange: { 1047 handleLeftChange: {
1048 value: function(event) { 1048 value: function(event) {
1049 var prevPosition;
1050 if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){
1051 if(!event.wasSetByCode) {
1052 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
1053 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition);
1054 this.savedPosition = null;
1055 }
1056 1049
1050 var prevPosition;
1051 if(!event.wasSetByCode) {
1052 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
1053 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition);
1054 this.savedPosition = null;
1057 } 1055 }
1058 } 1056 }
1059 }, 1057 },
1060 1058
1061 handleTopChange: { 1059 handleTopChange: {
1062 value: function(event) { 1060 value: function(event) {
1063 var prevPosition; 1061 var prevPosition;
1064 if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){
1065 if(!event.wasSetByCode) {
1066 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
1067 1062
1068 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition); 1063 if(!event.wasSetByCode) {
1069 this.savedPosition = null; 1064 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
1070 } 1065
1066 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition);
1067 this.savedPosition = null;
1071 } 1068 }
1072 } 1069 }
1073 }, 1070 },
@@ -1075,13 +1072,12 @@ var Layer = exports.Layer = Montage.create(Component, {
1075 handleWidthChange:{ 1072 handleWidthChange:{
1076 value: function(event) { 1073 value: function(event) {
1077 var prevPosition; 1074 var prevPosition;
1078 if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){
1079 if(!event.wasSetByCode) {
1080 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
1081 1075
1082 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition); 1076 if(!event.wasSetByCode) {
1083 this.savedPosition = null; 1077 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
1084 } 1078
1079 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition);
1080 this.savedPosition = null;
1085 } 1081 }
1086 } 1082 }
1087 }, 1083 },
@@ -1089,13 +1085,12 @@ var Layer = exports.Layer = Montage.create(Component, {
1089 handleHeightChange:{ 1085 handleHeightChange:{
1090 value: function(event) { 1086 value: function(event) {
1091 var p