diff options
Diffstat (limited to 'js/panels/Timeline/PropertyTrack.reel')
5 files changed, 485 insertions, 6 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html index a4b598c5..9c4160c8 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html | |||
@@ -13,16 +13,50 @@ | |||
13 | "owner": { | 13 | "owner": { |
14 | "prototype": "js/panels/Timeline/PropertyTrack.reel", | 14 | "prototype": "js/panels/Timeline/PropertyTrack.reel", |
15 | "properties": { | 15 | "properties": { |
16 | "element": {"#": "property-track"} | 16 | "element": {"#": "property-track"}, |
17 | "propTweenRepetition" : {"@" : "propTweenRepetition"}, | ||
18 | "propTween": {"@" : "propTween"} | ||
17 | } | 19 | } |
18 | } | 20 | }, |
21 | |||
22 | "propTween" : { | ||
23 | "prototype" : "js/panels/timeline/Tween.reel", | ||
24 | "properties" : { | ||
25 | "element":{"#": "prop_track_lane"} | ||
26 | }, | ||
27 | "bindings" : { | ||
28 | "tweenData" : { | ||
29 | "boundObject" : {"@": "propTweenRepetition"}, | ||
30 | "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenData", | ||
31 | "oneway" : false | ||
32 | } | ||
33 | } | ||
34 | }, | ||
19 | 35 | ||
36 | "propTweenRepetition": { | ||
37 | "prototype": "montage/ui/repetition.reel", | ||
38 | "properties": { | ||
39 | "element": {"#": "prop_track_lanes"}, | ||
40 | "isSelectionEnabled" : false | ||
41 | }, | ||
42 | "bindings": { | ||
43 | "objects": { | ||
44 | "boundObject": {"@": "owner"}, | ||
45 | "boundObjectPropertyPath": "propTweens", | ||
46 | "oneway": false | ||
47 | } | ||
48 | } | ||
49 | } | ||
20 | } | 50 | } |
21 | </script> | 51 | </script> |
22 | </head> | 52 | </head> |
23 | <body> | 53 | <body> |
24 | 54 | ||
25 | <div data-montage-id="property-track" class="timeline-track"></div> | 55 | <div data-montage-id="property-track" class="timeline-track"> |
56 | <div data-montage-id="prop_track_lanes" class="prop-track"> | ||
57 | <div data-montage-id="prop_track_lane"></div> | ||
58 | </div> | ||
59 | </div> | ||
26 | 60 | ||
27 | </body> | 61 | </body> |
28 | </html> \ No newline at end of file | 62 | </html> \ No newline at end of file |
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 175b77f9..d602641e 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -15,7 +15,439 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
15 | 15 | ||
16 | prepareForDraw:{ | 16 | prepareForDraw:{ |
17 | value:function(){ | 17 | value:function(){ |
18 | this.element.addEventListener("click", this, false); | ||
19 | this.trackID = this.parentComponent.parentComponent.parentComponent.trackID; | ||
20 | this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; | ||
21 | this.ninjaStylesContoller = this.application.ninja.stylesController; | ||
22 | } | ||
23 | }, | ||
24 | |||
25 | draw:{ | ||
26 | value:function(){ | ||
27 | console.log(this.currentKeyframeRule); | ||
28 | } | ||
29 | }, | ||
30 | |||
31 | didDraw:{ | ||
32 | value:function () { | ||
33 | if ((!this.application.ninja.documentController.creatingNewFile) || (!this.application.ninja.currentDocument.setLevel)) { | ||
34 | if (this.application.ninja.currentDocument.model.documentRoot.children[0]) { | ||
35 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | ||
36 | if (selectedIndex !== false) { | ||
37 | if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { | ||
38 | this.retrieveStoredStyleTweens(); | ||
39 | } | ||
40 | } | ||
41 | } | ||
42 | } | ||
43 | } | ||
44 | }, | ||
45 | |||
46 | trackEditorProperty:{ | ||
47 | value:"" | ||
48 | }, | ||
49 | |||
50 | _propTweenRepetition:{ | ||
51 | value:null | ||
52 | }, | ||
53 | |||
54 | animatedElement:{ | ||
55 | value:null | ||
56 | }, | ||
57 | |||
58 | isSubproperty:{ | ||
59 | value:true | ||
60 | }, | ||
61 | |||
62 | propTweenRepetition:{ | ||
63 | serializable:true, | ||
64 | get:function () { | ||
65 | return this._propTweenRepetition; | ||
66 | }, | ||
67 | set:function (newVal) { | ||
68 | this._propTweenRepetition = newVal; | ||
69 | } | ||
70 | }, | ||
71 | |||
72 | _propTweens:{ | ||
73 | value:[] | ||
74 | }, | ||
75 | |||
76 | propTweens:{ | ||
77 | serializable:true, | ||
78 | get:function () { | ||
79 | return this._propTweens; | ||
80 | }, | ||
81 | set:function (newVal) { | ||
82 | this._propTweens = newVal; | ||
83 | } | ||
84 | }, | ||
85 | |||
86 | _propTrackData:{ | ||
87 | value:false | ||
88 | }, | ||
89 | |||
90 | propTrackData:{ | ||
91 | serializable:true, | ||
92 | get:function () { | ||
93 | return this._propTrackData; | ||
94 | }, | ||
95 | set:function (val) { | ||
96 | this._propTrackData = val; | ||
97 | if (this._propTrackData) { | ||
98 | this.setData(); | ||
99 | } | ||
100 | } | ||
101 | }, | ||
102 | |||
103 | nextKeyframe:{ | ||
104 | value:1 | ||
105 | }, | ||
106 | |||
107 | ninjaStylesContoller:{ | ||
108 | value:null | ||
109 | }, | ||
110 | |||
111 | animationName:{ | ||
112 | value:null | ||
113 | }, | ||
114 | |||
115 | currentKeyframeRule:{ | ||
116 | value:null | ||
117 | }, | ||
118 | |||
119 | trackDuration:{ | ||
120 | value:0 | ||
121 | }, | ||
122 | |||
123 | _trackID:{ | ||
124 | value:null | ||
125 | }, | ||
126 | |||
127 | trackID:{ | ||
128 | serializable:true, | ||
129 | get:function () { | ||
130 | return this._trackID; | ||
131 | }, | ||
132 | set:function (value) { | ||
133 | if (value !== this._trackID) { | ||
134 | this._trackID = value; | ||
135 | } | ||
136 | } | ||
137 | }, | ||
138 | |||
139 | _trackType:{ | ||
140 | value:null | ||
141 | }, | ||
142 | |||
143 | trackType:{ | ||
144 | serializable:true, | ||
145 | get:function () { | ||
146 | return this._trackType; | ||
147 | }, | ||
148 | set:function (value) { | ||
149 | if (value !== this._trackType) { | ||
150 | this._trackType = value; | ||
151 | } | ||
152 | } | ||
153 | }, | ||
154 | |||
155 | _styleIndex:{ | ||
156 | value:null | ||
157 | }, | ||
158 | |||
159 | styleIndex:{ | ||
160 | serializable:true, | ||
161 | get:function () { | ||
162 | return this._styleIndex; | ||
163 | }, | ||