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