diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
3 files changed, 543 insertions, 612 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 14c5f1c8..9eb126e0 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -19,11 +19,9 @@ | |||
19 | "element": {"#": "timeline_panel"}, | 19 | "element": {"#": "timeline_panel"}, |
20 | "user_layers": {"#": "user_layers"}, | 20 | "user_layers": {"#": "user_layers"}, |
21 | "track_container": {"#": "right_inside"}, | 21 | "track_container": {"#": "right_inside"}, |
22 | "timeline_leftpane" : {"#" : "timeline_leftpane"}, | 22 | "timeline_leftpane" : {"#" : "leftpane_inside"}, |
23 | "layer_tracks": {"#": "layer_tracks"}, | 23 | "layer_tracks": {"#": "layer_tracks"}, |
24 | "master_track": {"#": "master_track"}, | 24 | "master_track": {"#": "master_track"}, |
25 | "newlayer_button": {"#": "newlayer_button"}, | ||
26 | "deletelayer_button": {"#": "deletelayer_button"}, | ||
27 | "time_markers" : {"#": "timeline_markers"}, | 25 | "time_markers" : {"#": "timeline_markers"}, |
28 | "layerRepetition" : {"@": "repetition1"}, | 26 | "layerRepetition" : {"@": "repetition1"}, |
29 | "trackRepetition" : {"@" : "repetition2"}, | 27 | "trackRepetition" : {"@" : "repetition2"}, |
@@ -77,7 +75,12 @@ | |||
77 | "boundObject" : {"@" : "repetition1"}, | 75 | "boundObject" : {"@" : "repetition1"}, |
78 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", | 76 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", |
79 | "oneway" : false | 77 | "oneway" : false |
80 | } | 78 | }, |
79 | "bindingPoint" : { | ||
80 | "boundObject" : {"@" : "repetition1"}, | ||
81 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding", | ||
82 | "oneway" : false | ||
83 | } | ||
81 | } | 84 | } |
82 | }, | 85 | }, |
83 | 86 | ||
@@ -107,9 +110,33 @@ | |||
107 | "boundObject" : {"@" : "repetition2"}, | 110 | "boundObject" : {"@" : "repetition2"}, |
108 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", | 111 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", |
109 | "oneway" : false | 112 | "oneway" : false |
113 | }, | ||
114 | "bindingPoint" : { | ||
115 | "boundObject" : {"@" : "repetition2"}, | ||
116 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding", | ||
117 | "oneway" : false | ||
110 | } | 118 | } |
119 | |||
111 | } | 120 | } |
112 | }, | 121 | }, |
122 | |||
123 | "timelineZoomSlider":{ | ||
124 | "module":"js/components/slider.reel", | ||
125 | "name":"Slider", | ||
126 | "properties":{ | ||
127 | "element":{"#":"tl_slider"}, | ||
128 | "maxValue" : 10000, | ||
129 | "minValue" : 1000 | ||
130 | }, | ||
131 | "bindings": { | ||
132 | "value": { | ||
133 | "boundObject": {"@": "owner"}, | ||
134 | "boundObjectPropertyPath": "millisecondsOffset", | ||
135 | "oneway": false | ||
136 | } | ||
137 | } | ||
138 | }, | ||
139 | |||
113 | "endHottext" : { | 140 | "endHottext" : { |
114 | "module": "js/components/hottextunit.reel", | 141 | "module": "js/components/hottextunit.reel", |
115 | "name": "HotTextUnit", | 142 | "name": "HotTextUnit", |
@@ -153,14 +180,13 @@ | |||
153 | <div id="master_layer" class="masterlayer"> | 180 | <div id="master_layer" class="masterlayer"> |
154 | <div>Master Layer</div> | 181 | <div>Master Layer</div> |
155 | </div> | 182 | </div> |
156 | <div id="container-layers"> | 183 | <div id="container-layers" style="position: relative;" class="container-layers"> |
157 | <div id="container-layer"></div> | 184 | <div id="container-layer"></div> |
158 | </div> | 185 | </div> |
159 | </div> | 186 | </div> |
160 | 187 | ||
161 | <div id="timeline_gutter" class="timelinegutter"> | 188 | <div id="timeline_gutter" class="timelinegutter"> |
162 | <div id="newlayer_button" class="newlayerbutton"></div> | 189 | <div id="tl_slider" class="tl_slider"></div> |
163 | <div id="deletelayer_button" class="deletelayerbutton"></div> | ||
164 | <input id="end_hottext" class="endhottext"> | 190 | <input id="end_hottext" class="endhottext"> |
165 | </div> | 191 | </div> |
166 | </div> | 192 | </div> |
@@ -197,4 +223,4 @@ | |||
197 | </div> | 223 | </div> |
198 | 224 | ||
199 | </body> | 225 | </body> |
200 | </html> \ No newline at end of file | 226 | </html> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a1e320c4..a82d3373 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -19,12 +19,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
19 | 19 | ||
20 | /* === BEGIN: Models === */ | 20 | /* === BEGIN: Models === */ |
21 | _arrLayers:{ | 21 | _arrLayers:{ |
22 | serializable: true, | 22 | serializable:true, |
23 | value:[] | 23 | value:[] |
24 | }, | 24 | }, |
25 | 25 | ||
26 | arrLayers:{ | 26 | arrLayers:{ |
27 | serializable: true, | 27 | serializable:true, |
28 | get:function () { | 28 | get:function () { |
29 | return this._arrLayers; | 29 | return this._arrLayers; |
30 | }, | 30 | }, |
@@ -50,12 +50,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
50 | 50 | ||
51 | 51 | ||
52 | _layerRepetition:{ | 52 | _layerRepetition:{ |
53 | serializable: true, | 53 | serializable:true, |
54 | value:null | 54 | value:null |
55 | }, | 55 | }, |
56 | 56 | ||
57 | layerRepetition:{ | 57 | layerRepetition:{ |
58 | serializable: true, | 58 | serializable:true, |
59 | get:function () { | 59 | get:function () { |
60 | return this._layerRepetition; | 60 | return this._layerRepetition; |
61 | }, | 61 | }, |
@@ -64,18 +64,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
64 | } | 64 | } |
65 | }, | 65 | }, |
66 | 66 | ||
67 | _cacheArrays : { | 67 | _cacheArrays:{ |
68 | value: function() { | 68 | value:function () { |
69 | if (this._boolCacheArrays) { | 69 | if (this._boolCacheArrays) { |
70 | this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; | 70 | this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; |
71 | 71 | this.application.ninja.currentDocument.tlCurrentSelectedContainer=this.application.ninja.currentSelectedContainer; | |
72 | } | 72 | } |
73 | } | 73 | } |
74 | }, | 74 | }, |
75 | 75 | ||
76 | // Set to false to skip array caching array sets in current document | 76 | // Set to false to skip array caching array sets in current document |
77 | _boolCacheArrays : { | 77 | _boolCacheArrays:{ |
78 | value: true | 78 | value:true |
79 | }, | 79 | }, |
80 | 80 | ||
81 | _currentLayerNumber:{ | 81 | _currentLayerNumber:{ |
@@ -95,87 +95,86 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
95 | }, | 95 | }, |
96 | 96 | ||
97 | _setCurrentLayerNumber:{ | 97 | _setCurrentLayerNumber:{ |
98 | value:function(){ | 98 | value:function () { |
99 | if (this._boolCacheArrays) { | 99 | if (this._boolCacheArrays) { |
100 | this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; | 100 | this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; |
101 | } | 101 | } |
102 | } | 102 | } |
103 | }, | 103 | }, |
104 | 104 | ||
105 | _hashKey:{ | 105 | _currentLayerSelected:{ |
106 | value:0 | 106 | value:null |
107 | }, | ||
108 | currentLayerSelected:{ | ||
109 | get:function () { | ||
110 | return this._currentLayerSelected; | ||
107 | }, | 111 | }, |
112 | set:function (newVal) { | ||
113 | this._currentLayerSelected = newVal; | ||
114 | this.application.ninja.currentDocument.tlCurrentLayerSelected = newVal; | ||
115 | } | ||
116 | }, | ||
108 | 117 | ||
109 | hashKey:{ | 118 | _selectedLayerID:{ |
119 | value:false | ||
120 | }, | ||
121 | selectedLayerID:{ | ||
110 | get:function () { |