diff options
author | hwc487 | 2012-02-23 15:21:56 -0800 |
---|---|---|
committer | hwc487 | 2012-02-23 15:21:56 -0800 |
commit | 26bb2894c29d4608e843de01829d352dd3d00823 (patch) | |
tree | c5a9d10976304fe5b3dec59f40977d8c72df57de /js/panels/Timeline/Tween.reel/Tween.js | |
parent | 64280907f31e6f6e5659acb0893df3e0da5bb044 (diff) | |
parent | 81ce79819ba574b03b46e91e9a153dab82b550cd (diff) | |
download | ninja-26bb2894c29d4608e843de01829d352dd3d00823.tar.gz |
Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal into integration
Conflicts:
js/helper-classes/RDGE/GLWorld.js
js/helper-classes/RDGE/Materials/PulseMaterial.js
js/helper-classes/RDGE/Materials/RadialBlurMaterial.js
js/helper-classes/RDGE/src/tools/rdge-compiled.js
js/preloader/Preloader.js
Diffstat (limited to 'js/panels/Timeline/Tween.reel/Tween.js')
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 114 |
1 files changed, 99 insertions, 15 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index eddf1b17..af01deb2 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js | |||
@@ -1,5 +1,6 @@ | |||
1 | var Montage = require("montage/core/core").Montage; | 1 | var Montage = require("montage/core/core").Montage; |
2 | var Component = require("montage/ui/component").Component; | 2 | var Component = require("montage/ui/component").Component; |
3 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | ||
3 | 4 | ||
4 | var Tween = exports.Tween = Montage.create(Component, { | 5 | var Tween = exports.Tween = Montage.create(Component, { |
5 | 6 | ||
@@ -8,6 +9,7 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
8 | }, | 9 | }, |
9 | 10 | ||
10 | _spanWidth: { | 11 | _spanWidth: { |
12 | serializable: true, | ||
11 | value: 0 | 13 | value: 0 |
12 | }, | 14 | }, |
13 | 15 | ||
@@ -18,6 +20,7 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
18 | }, | 20 | }, |
19 | set: function(value){ | 21 | set: function(value){ |
20 | this._spanWidth = value; | 22 | this._spanWidth = value; |
23 | this.needsDraw = true; | ||
21 | } | 24 | } |
22 | }, | 25 | }, |
23 | 26 | ||
@@ -32,6 +35,7 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
32 | }, | 35 | }, |
33 | set:function (value) { | 36 | set:function (value) { |
34 | this._spanPosition = value; | 37 | this._spanPosition = value; |
38 | this.needsDraw = true; | ||
35 | } | 39 | } |
36 | }, | 40 | }, |
37 | 41 | ||
@@ -46,6 +50,7 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
46 | }, | 50 | }, |
47 | set:function (value) { | 51 | set:function (value) { |
48 | this._keyFramePosition = value; | 52 | this._keyFramePosition = value; |
53 | this.needsDraw = true; | ||
49 | } | 54 | } |
50 | }, | 55 | }, |
51 | 56 | ||
@@ -63,47 +68,126 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
63 | } | 68 | } |
64 | }, | 69 | }, |
65 | 70 | ||
66 | _keyframeID:{ | 71 | _tweenID:{ |
67 | value:0 | 72 | value:0 |
68 | }, | 73 | }, |
69 | 74 | ||
70 | keyframeID:{ | 75 | tweenID:{ |
71 | serializable:true, | 76 | serializable:true, |
72 | get:function () { | 77 | get:function () { |
73 | return this._keyframeID; | 78 | return this._tweenID; |
74 | }, | 79 | }, |
75 | set:function (value) { | 80 | set:function (value) { |
76 | this._keyframeID = value; | 81 | this._tweenID = value; |
77 | } | 82 | } |
78 | }, | 83 | }, |
79 | 84 | ||
80 | _timelineTrack:{ | 85 | _tweenedProperties:{ |
81 | value:0 | 86 | serializable: true, |
87 | value:[] | ||
88 | }, | ||
89 | |||
90 | tweenedProperties:{ | ||
91 | serializable:true, | ||
92 | get:function(){ | ||
93 | return this._tweenedProperties; | ||
94 | }, | ||
95 | set:function(val){ | ||
96 | this._tweenedProperties = val; | ||
97 | } | ||
98 | }, | ||
99 | |||
100 | _isTweenAnimated:{ | ||
101 | serializable:true, | ||
102 | value:false | ||
82 | }, | 103 | }, |
83 | 104 | ||
84 | timelineTrack:{ | 105 | isTweenAnimated:{ |
85 | serializable:true, | 106 | serializable:true, |
86 | get:function () { | 107 | get:function () { |
87 | return this._timelineTrack; | 108 | return this._isTweenAnimated; |
88 | }, | 109 | }, |
89 | set:function (value) { | 110 | set:function (value) { |
90 | this._timelineTrack = value; | 111 | this._isTweenAnimated = value; |
112 | this.needsDraw = true; | ||
91 | } | 113 | } |
92 | }, | 114 | }, |
93 | 115 | ||
94 | prepareForDraw:{ | 116 | prepareForDraw:{ |
95 | value:function () { | 117 | value:function () { |
96 | this.keyframe.containingTrack = this.timelineTrack; | 118 | |
97 | this.keyframe.position = this.spanWidth; | ||
98 | this.keyframe.timelinePosition = this.keyFramePosition; | ||
99 | this.keyframe.id = this.keyframeID; | ||
100 | } | 119 | } |
101 | }, | 120 | }, |
102 | 121 | ||
103 | draw:{ | 122 | draw:{ |
104 | value:function () { | 123 | value:function () { |
105 | this.span.spanWidth = this.spanWidth; | 124 | this.element.style.left = this.spanPosition + "px"; |
106 | this.tweencontainer.style.left = this.spanPosition + "px"; | 125 | this.keyframe.position = this.spanWidth; |
126 | this.tweenspan.spanWidth = this.spanWidth; | ||
127 | if(this.isTweenAnimated){ | ||
128 | this.tweenspan.highlightSpan(); | ||
129 | } | ||
130 | } | ||
131 | }, | ||
132 | |||
133 | handleElementChange:{ | ||
134 | value:function (event) { | ||
135 | if (event.detail.source && event.detail.source !== "tween") { | ||
136 | // check for correct element selection | ||
137 | if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) { | ||
138 | alert("Wrong element selected for this keyframe track"); | ||
139 | } else { | ||
140 | // update tweenedProperties and tell containing track to update CSS rule | ||
141 | // temp read only top and left. need to change to loop over event details for prop changes generically | ||
142 | if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) { | ||
143 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; | ||
144 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; | ||
145 | this.parentComponent.parentComponent.updateKeyframeRule(); | ||
146 | } | ||
147 | // highlight the tween's span | ||
148 | this.tweenspan.highlightSpan(); | ||
149 | this.isTweenAnimated = true; | ||
150 | } | ||
151 | } | ||
152 | } | ||
153 | }, | ||
154 | |||
155 | selectTween:{ | ||
156 | value: function(){ | ||
157 | // turn on event listener for element change | ||
158 | this.eventManager.addEventListener("elementChange", this, false); | ||
159 | |||
160 | // select the containing layer | ||
161 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); | ||
162 | this.application.ninja.timeline.selectLayer(selectIndex); | ||
163 | |||
164 | // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline | ||
165 | this.application.ninja.timeline.deselectTweens(); | ||
166 | this.application.ninja.timeline.selectedTweens.push(this); | ||
167 | |||
168 | // update playhead position and time text | ||
169 | this.application.ninja.timeline.playhead.style.left = (this.keyFramePosition - 2) + "px"; | ||
170 | this.application.ninja.timeline.playheadmarker.style.left = this.keyFramePosition + "px"; | ||
171 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | ||
172 | var currentMillisec = currentMillisecPerPixel * this.keyFramePosition; | ||
173 | this.application.ninja.timeline.updateTimeText(currentMillisec); | ||
174 | |||
175 | // move animated element to correct position on stage | ||
176 | var currentTop = this.tweenedProperties["top"] + "px"; | ||
177 | var currentLeft = this.tweenedProperties["left"] + "px"; | ||
178 | ElementsMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); | ||
179 | ElementsMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); | ||
180 | |||
181 | } | ||
182 | }, | ||
183 | |||
184 | deselectTween:{ | ||
185 | value:function(){ | ||
186 | // turn off event listener for element change | ||
187 | this.eventManager.removeEventListener("elementChange", this, false); | ||
188 | |||
189 | // deselect the keyframe for this tween | ||
190 | this.keyframe.deselectKeyframe(); | ||
107 | } | 191 | } |
108 | } | 192 | } |
109 | }); | 193 | }); |