diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
4 files changed, 420 insertions, 130 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 5c5a8b76..0d7f517f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | |||
@@ -15,10 +15,10 @@ | |||
15 | "properties": { | 15 | "properties": { |
16 | "element": {"#": "track"}, | 16 | "element": {"#": "track"}, |
17 | "tweenRepetition" : {"@" : "tweenRepetition"}, | 17 | "tweenRepetition" : {"@" : "tweenRepetition"}, |
18 | "track_lanes" : {"#" : "track_lanes"}, | ||
18 | "tween": {"@" : "tween"}, | 19 | "tween": {"@" : "tween"}, |
19 | "_mainCollapser" : {"@" : "mainCollapser"}, | 20 | "_mainCollapser" : {"@" : "mainCollapser"}, |
20 | "_positionCollapser" : {"@" : "positionCollapser"}, | 21 | "_positionCollapser" : {"@" : "positionCollapser"}, |
21 | "_transformCollapser" : {"@" : "transformCollapser"}, | ||
22 | "_styleCollapser" : {"@" : "styleCollapser"} | 22 | "_styleCollapser" : {"@" : "styleCollapser"} |
23 | } | 23 | } |
24 | }, | 24 | }, |
@@ -51,7 +51,6 @@ | |||
51 | } | 51 | } |
52 | } | 52 | } |
53 | }, | 53 | }, |
54 | |||
55 | "styleTrackRepetition": { | 54 | "styleTrackRepetition": { |
56 | "prototype": "montage/ui/repetition.reel", | 55 | "prototype": "montage/ui/repetition.reel", |
57 | "properties": { | 56 | "properties": { |
@@ -66,6 +65,19 @@ | |||
66 | } | 65 | } |
67 | } | 66 | } |
68 | }, | 67 | }, |
68 | "stylePropertyTrack" : { | ||
69 | "prototype" : "js/panels/Timeline/PropertyTrack.reel", | ||
70 | "properties" : { | ||
71 | "element":{"#": "style-track-base"} | ||
72 | }, | ||
73 | "bindings" : { | ||
74 | "propTrackData" : { | ||
75 | "boundObject" : {"@" : "styleTrackRepetition"}, | ||
76 | "boundObjectPropertyPath" : "objectAtCurrentIteration.propTrackData", | ||
77 | "oneway" : false | ||
78 | } | ||
79 | } | ||
80 | }, | ||
69 | "positionTracksRepetition": { | 81 | "positionTracksRepetition": { |
70 | "prototype": "montage/ui/repetition.reel", | 82 | "prototype": "montage/ui/repetition.reel", |
71 | "properties": { | 83 | "properties": { |
@@ -84,27 +96,14 @@ | |||
84 | "prototype" : "js/panels/Timeline/PropertyTrack.reel", | 96 | "prototype" : "js/panels/Timeline/PropertyTrack.reel", |
85 | "properties" : { | 97 | "properties" : { |
86 | "element":{"#": "position-track-base"} | 98 | "element":{"#": "position-track-base"} |
87 | } | 99 | }, |
88 | }, | 100 | "bindings" : { |
89 | "transformTracksRepetition": { | 101 | "propTrackData" : { |
90 | "prototype": "montage/ui/repetition.reel", | 102 | "boundObject" : {"@" : "positionTracksRepetition"}, |
91 | "properties": { | 103 | "boundObjectPropertyPath" : "objectAtCurrentIteration.propTrackData", |
92 | "element": {"#": "content-transform-tracks"}, | 104 | "oneway" : false |
93 | "isSelectionEnabled" : false | 105 | } |
94 | }, | 106 | } |
95 | "bindings": { | ||
96 | "objects": { | ||
97 | "boundObject": {"@": "owner"}, | ||
98 | "boundObjectPropertyPath": "arrTransformTracks", | ||
99 | "oneway": false | ||
100 | } | ||
101 | } | ||
102 | }, | ||
103 | "transformPropertyTrack" : { | ||
104 | "prototype" : "js/panels/Timeline/PropertyTrack.reel", | ||
105 | "properties" : { | ||
106 | "element":{"#": "transform-track-base"} | ||
107 | } | ||
108 | }, | 107 | }, |
109 | 108 | ||
110 | "mainCollapser" : { | 109 | "mainCollapser" : { |
@@ -157,31 +156,6 @@ | |||
157 | } | 156 | } |
158 | }, | 157 | }, |
159 | 158 | ||
160 | "transformCollapser" : { | ||
161 | "prototype" : "js/panels/timeline/Collapser", | ||
162 | "properties" : { | ||
163 | "element" : {"#" : "content-transform-tracks"}, | ||
164 | "myContent" : {"#":"content-transform-tracks"}, | ||
165 | "contentHeight" : 40, | ||
166 | "isLabelClickable" : false, | ||
167 | "clicker" : {"#" : "label-transform"}, | ||
168 | "isCollapsed" : true, | ||
169 | "isAnimated" : true | ||
170 | }, | ||
171 | "bindings" : { | ||
172 | "isToggling" : { | ||
173 | "boundObject" : {"@" : "owner" }, | ||
174 | "boundObjectPropertyPath" : "isTransformCollapsed", | ||
175 | "oneway" : false | ||
176 | }, | ||
177 | "bypassAnimation" : { | ||
178 | "boundObject" : {"@": "owner"}, | ||
179 | "boundObjectPropertyPath" : "bypassAnimation", | ||
180 | "oneway" : false | ||
181 | } | ||
182 | } | ||
183 | }, | ||
184 | |||
185 | "styleCollapser" : { | 159 | "styleCollapser" : { |
186 | "prototype" : "js/panels/timeline/Collapser", | 160 | "prototype" : "js/panels/timeline/Collapser", |
187 | "properties" : { | 161 | "properties" : { |
@@ -214,7 +188,7 @@ | |||
214 | <body> | 188 | <body> |
215 | 189 | ||
216 | <div data-montage-id="track" class="timeline-track"> | 190 | <div data-montage-id="track" class="timeline-track"> |
217 | <div data-montage-id="track_lanes" class="tracklane"> | 191 | <div data-montage-id="track_lanes" class="tracklane" style="position: relative;"> |
218 | <div data-montage-id="track_lane"></div> | 192 | <div data-montage-id="track_lane"></div> |
219 | </div> | 193 | </div> |
220 | <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div> | 194 | <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div> |
@@ -225,17 +199,12 @@ | |||
225 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position-tracks"> | 199 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position-tracks"> |
226 | <div data-montage-id="position-track-base"></div> | 200 | <div data-montage-id="position-track-base"></div> |
227 | </div> | 201 | </div> |
228 | <div class="label-transform collapsible-label collapsible-collapsed" data-montage-id="label-transform"> | 202 | |
229 | |||
230 | </div> | ||
231 | <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform-tracks"> | ||
232 | <div data-montage-id="transform-track-base"></div> | ||
233 | </div> | ||
234 | <div class="label-styles collapsible-label collapsible-collapsed" data-montage-id="label-styles"> | 203 | <div class="label-styles collapsible-label collapsible-collapsed" data-montage-id="label-styles"> |
235 | 204 | ||
236 | </div> | 205 | </div> |
237 | <div data-montage-id="content-styles" class="content-styles collapsible-content collapsible-collapsed"> | 206 | <div data-montage-id="content-styles" class="content-styles collapsible-content collapsible-collapsed"> |
238 | <div class="timeline-track"></div> | 207 | <div data-montage-id="style-track-base"></div> |
239 | </div> | 208 | </div> |
240 | </div> | 209 | </div> |
241 | </div> | 210 | </div> |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 126e6a61..ae6ff114 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -31,6 +31,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
31 | } | 31 | } |
32 | } | 32 | } |
33 | }, | 33 | }, |
34 | |||
35 | _isFirstDraw: { | ||
36 | value: true | ||
37 | }, | ||
38 | |||
34 | _isVisible:{ | 39 | _isVisible:{ |
35 | value: true | 40 | value: true |
36 | }, | 41 | }, |
@@ -136,6 +141,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
136 | value: null | 141 | value: null |
137 | }, | 142 | }, |
138 | styleTracksRepetition : { | 143 | styleTracksRepetition : { |
144 | serializable:true, | ||
139 | get: function() { | 145 | get: function() { |
140 | return this._styleTracksRepetition; | 146 | return this._styleTracksRepetition; |
141 | }, | 147 | }, |
@@ -185,17 +191,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
185 | this.trackData.arrTransformTracks = newVal; | 191 | this.trackData.arrTransformTracks = newVal; |
186 | } | 192 | } |
187 | }, | 193 | }, |
188 | _transformTracksRepetition: { | ||
189 | value: null | ||
190 | }, | ||