diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
4 files changed, 364 insertions, 147 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index b0d191c2..cabd92c0 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | |||
@@ -11,7 +11,8 @@ | |||
11 | "properties": { | 11 | "properties": { |
12 | "element": {"#": "track"}, | 12 | "element": {"#": "track"}, |
13 | "tweenRepetition" : {"@" : "tweenRepetition"}, | 13 | "tweenRepetition" : {"@" : "tweenRepetition"}, |
14 | "track_lane": {"#": "track_lanes"} | 14 | "styleTracksRepetition" : {"@" : "styleTracksRepetition"}, |
15 | "tween": {"@" : "tween"} | ||
15 | } | 16 | } |
16 | }, | 17 | }, |
17 | 18 | ||
@@ -37,19 +38,24 @@ | |||
37 | "boundObjectPropertyPath" : "objectAtCurrentIteration.spanPosition", | 38 | "boundObjectPropertyPath" : "objectAtCurrentIteration.spanPosition", |
38 | "oneway" : false | 39 | "oneway" : false |
39 | }, | 40 | }, |
40 | "timelineTrack" : { | 41 | "keyFrameMillisec" : { |
41 | "boundObject" : {"@": "tweenRepetition"}, | 42 | "boundObject" : {"@": "tweenRepetition"}, |
42 | "boundObjectPropertyPath" : "objectAtCurrentIteration.timelineTrack", | 43 | "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec", |
43 | "oneway" : false | 44 | "oneway" : false |
44 | }, | 45 | }, |
45 | "keyFrameMillisec" : { | 46 | "tweenID" : { |
46 | "boundObject" : {"@": "tweenRepetition"}, | 47 | "boundObject" : {"@": "tweenRepetition"}, |
47 | "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec", | 48 | "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenID", |
49 | "oneway" : false | ||
50 | }, | ||
51 | "tweenedProperties" : { | ||
52 | "boundObject" : {"@": "tweenRepetition"}, | ||
53 | "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenedProperties", | ||
48 | "oneway" : false | 54 | "oneway" : false |
49 | }, | 55 | }, |
50 | "keyframeID" : { | 56 | "isTweenAnimated" : { |
51 | "boundObject" : {"@": "tweenRepetition"}, | 57 | "boundObject" : {"@": "tweenRepetition"}, |
52 | "boundObjectPropertyPath" : "objectAtCurrentIteration.keyframeID", | 58 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated", |
53 | "oneway" : false | 59 | "oneway" : false |
54 | } | 60 | } |
55 | } | 61 | } |
@@ -69,7 +75,69 @@ | |||
69 | "oneway": false | 75 | "oneway": false |
70 | } | 76 | } |
71 | } | 77 | } |
72 | } | 78 | }, |
79 | |||
80 | "styleTrackRepetition": { | ||
81 | "module": "montage/ui/repetition.reel", | ||
82 | "name": "Repetition", | ||
83 | "properties": { | ||
84 | "element": {"#": "content-styles"}, | ||
85 | "isSelectionEnabled" : false | ||
86 | }, | ||
87 | "bindings": { | ||
88 | "objects": { | ||
89 | "boundObject": {"@": "owner"}, | ||
90 | "boundObjectPropertyPath": "arrStyleTracks", | ||
91 | "oneway": false | ||
92 | } | ||
93 | } | ||
94 | }, | ||
95 | "positionTracksRepetition": { | ||
96 | "module": "montage/ui/repetition.reel", | ||
97 | "name": "Repetition", | ||
98 | "properties": { | ||
99 | "element": {"#": "content-position-tracks"}, | ||
100 | "isSelectionEnabled" : false | ||
101 | }, | ||
102 | "bindings": { | ||
103 | "objects": { | ||
104 | "boundObject": {"@": "owner"}, | ||
105 | "boundObjectPropertyPath": "arrPositionTracks", | ||
106 | "oneway": false | ||
107 | } | ||
108 | } | ||
109 | }, | ||
110 | "positionPropertyTrack" : { | ||
111 | "module" : "js/panels/Timeline/PropertyTrack.reel", | ||
112 | "name" : "PropertyTrack", | ||
113 | "properties" : { | ||
114 | "element":{"#": "position-track-base"} | ||
115 | } | ||
116 | }, | ||
117 | "transformTracksRepetition": { | ||
118 | "module": "montage/ui/repetition.reel", | ||
119 | "name": "Repetition", | ||
120 | "properties": { | ||
121 | "element": {"#": "content-transform-tracks"}, | ||
122 | "isSelectionEnabled" : false | ||
123 | }, | ||
124 | "bindings": { | ||
125 | "objects": { | ||
126 | "boundObject": {"@": "owner"}, | ||
127 | "boundObjectPropertyPath": "arrTransformTracks", | ||
128 | "oneway": false | ||
129 | } | ||
130 | } | ||
131 | }, | ||
132 | "transformPropertyTrack" : { | ||
133 | "module" : "js/panels/Timeline/PropertyTrack.reel", | ||
134 | "name" : "PropertyTrack", | ||
135 | "properties" : { | ||
136 | "element":{"#": "transform-track-base"} | ||
137 | } | ||
138 | } | ||
139 | |||
140 | |||
73 | } | 141 | } |
74 | </script> | 142 | </script> |
75 | </head> | 143 | </head> |
@@ -84,26 +152,20 @@ | |||
84 | <div class="label-position collapsible-label collapsible-collapsed"> | 152 | <div class="label-position collapsible-label collapsible-collapsed"> |
85 | 153 | ||
86 | </div> | 154 | </div> |
87 | <div class="content-position collapsible-content collapsible-collapsed"> | 155 | <div class="content-position collapsible-content collapsible-collapsed" id="content-position-tracks"> |
88 | <div class="timeline-track"></div> | 156 | <div id="position-track-base"></div> |
89 | <div class="timeline-track"></div> | ||
90 | <div class="timeline-track"></div> | ||
91 | </div> | 157 | </div> |
92 | <div class="label-transform collapsible-label collapsible-collapsed"> | 158 | <div class="label-transform collapsible-label collapsible-collapsed"> |
93 | 159 | ||
94 | </div> | 160 | </div> |
95 | <div class="content-transform collapsible-content collapsible-collapsed"> | 161 | <div class="content-transform collapsible-content collapsible-collapsed" id="content-transform-tracks"> |
96 | <div class="timeline-track"></div> | 162 | <div id="transform-track-base"></div> |
97 | <div class="timeline-track"></div> | ||
98 | <div class="timeline-track"></div> | ||
99 | <div class="timeline-track"></div> | ||
100 | <div class="timeline-track"></div> | ||
101 | </div> | 163 | </div> |
102 | <div class="label-styles collapsible-label collapsible-collapsed"> | 164 | <div class="label-styles collapsible-label collapsible-collapsed"> |
103 | 165 | ||
104 | </div> | 166 | </div> |
105 | <div class="content-styles collapsible-content collapsible-collapsed"> | 167 | <div id="content-styles" class="content-styles collapsible-content collapsible-collapsed"> |
106 | 168 | <div class="timeline-track"></div> | |
107 | </div> | 169 | </div> |
108 | </div> | 170 | </div> |
109 | </div> | 171 | </div> |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 62688825..61da9e36 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -10,10 +10,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
10 | }, | 10 | }, |
11 | 11 | ||
12 | _trackID:{ | 12 | _trackID:{ |
13 | value:null, | ||
14 | writable:true, | ||
15 | serializable:true, | 13 | serializable:true, |
16 | enumerable:true | 14 | value:null |
17 | }, | 15 | }, |
18 | 16 | ||
19 | trackID:{ | 17 | trackID:{ |
@@ -85,21 +83,116 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
85 | } | 83 | } |
86 | } | 84 | } |
87 | }, | 85 | }, |
88 | 86 | ||
89 | _tweens:{ | 87 | _arrStyleTracks : { |
88 | serializable:true, | ||
89 | enumerable:true, | ||
90 | value: [] | ||
91 | }, | ||
92 | arrStyleTracks: { | ||
93 | serializable:true, | ||
94 | enumerable:true, | ||
95 | get: function() { | ||
96 | return this._arrStyleTracks; | ||
97 | }, | ||
98 | set: function(newVal) { | ||