diff options
Diffstat (limited to 'js/panels/Timeline/PropertyTrack.reel')
5 files changed, 275 insertions, 4 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..690c912b 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -15,7 +15,231 @@ 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; | ||
18 | 21 | ||
19 | } | 22 | } |
23 | }, | ||
24 | |||
25 | draw:{ | ||
26 | value:function(){ | ||
27 | |||
28 | } | ||
29 | }, | ||
30 | |||
31 | trackEditorProperty:{ | ||
32 | value:"" | ||
33 | }, | ||
34 | |||
35 | _propTweenRepetition:{ | ||
36 | value:null | ||
37 | }, | ||
38 | |||
39 | animatedElement:{ | ||
40 | value:null | ||
41 | }, | ||
42 | |||
43 | isSubproperty:{ | ||
44 | value:true | ||
45 | }, | ||
46 | |||
47 | propTweenRepetition:{ | ||
48 | serializable:true, | ||
49 | get:function () { | ||
50 | return this._propTweenRepetition; | ||
51 | }, | ||
52 | set:function (newVal) { | ||
53 | this._propTweenRepetition = newVal; | ||
54 | } | ||
55 | }, | ||
56 | |||
57 | _propTweens:{ | ||
58 | value:[] | ||
59 | }, | ||
60 | |||
61 | propTweens:{ | ||
62 | serializable:true, | ||
63 | get:function () { | ||
64 | return this._propTweens; | ||
65 | }, | ||
66 | set:function (newVal) { | ||
67 | this._propTweens = newVal; | ||
68 | } | ||
69 | }, | ||
70 | |||
71 | _propTrackData:{ | ||
72 | value:false | ||
73 | }, | ||
74 | |||
75 | propTrackData:{ | ||
76 | serializable:true, | ||
77 | get:function () { | ||
78 | return this._propTrackData; | ||
79 | }, | ||
80 | set:function (val) { | ||
81 | this._propTrackData = val; | ||
82 | if (this._propTrackData) { | ||
83 | this.setData(); | ||
84 | } | ||
85 | } | ||
86 | }, | ||
87 | |||
88 | nextKeyframe:{ | ||
89 | value:1 | ||
90 | }, | ||
91 | |||
92 | _trackID:{ | ||
93 | value:null | ||
94 | }, | ||
95 | |||
96 | trackID:{ | ||
97 | serializable:true, | ||
98 | get:function () { | ||
99 | return this._trackID; | ||
100 | }, | ||
101 | set:function (value) { | ||
102 | if (value !== this._trackID) { | ||
103 | this._trackID = value; | ||
104 | } | ||
105 | } | ||
106 | }, | ||
107 | |||
108 | _trackType:{ | ||
109 | value:null | ||
110 | }, | ||
111 | |||
112 | trackType:{ | ||
113 | serializable:true, | ||
114 | get:function () { | ||
115 | return this._trackType; | ||
116 | }, | ||
117 | set:function (value) { | ||
118 | if (value !== this._trackType) { | ||
119 | this._trackType = value; | ||
120 | } | ||
121 | } | ||
122 | }, | ||
123 | |||
124 | _styleIndex:{ | ||
125 | value:null | ||
126 | }, | ||
127 | |||
128 | styleIndex:{ | ||
129 | serializable:true, | ||
130 | get:function () { | ||
131 | return this._styleIndex; | ||
132 | }, | ||
133 | set:function (value) { | ||
134 | if (value !== this._styleIndex) { | ||
135 | this._styleIndex = value; | ||
136 | } | ||
137 | } | ||
138 | }, | ||
139 | |||
140 | setData:{ | ||
141 | value:function () { | ||
142 | if (typeof(this.propTrackData) === "undefined") { | ||
143 | return; | ||
144 | } | ||
145 | |||
146 | this.styleIndex = this.propTrackData.styleIndex; | ||
147 | this.propTweens = this.propTrackData.propTweens; | ||
148 | this.trackType = this.propTrackData.trackType; | ||
149 | this.trackEditorProperty = this.propTrackData.trackEditorProperty; | ||
150 | this.needsDraw = true; | ||
151 | } | ||
152 | }, | ||
153 | |||
154 | handleClick:{ | ||
155 | value:function(ev){ | ||
156 | if (ev.shiftKey) { | ||
157 | |||
158 | if (this.propTweens.length < 1) { | ||
159 | |||
160 | // check if there is an editor property assigned yet | ||
161 | // get this property track's editor prop name from layer data arrays | ||
162 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | ||