aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Layer.reel/Layer.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Layer.reel/Layer.js')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js626
1 files changed, 626 insertions, 0 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
new file mode 100644
index 00000000..71a1f01f
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -0,0 +1,626 @@
1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component;
3var Collapser = require("js/panels/Timeline/Collapser").Collapser;
4var Hintable = require("js/components/hintable.reel").Hintable;
5var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle;
6var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText;
7var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
8var nj = require("js/lib/NJUtils").NJUtils;
9
10var Layer = exports.Layer = Montage.create(Component, {
11
12 hasTemplate:{
13 value: true
14 },
15
16 /* Begin: Models */
17
18 /* Main collapser model: the main collapser for the layer */
19 _mainCollapser : {
20 value: false
21 },
22 mainCollapser: {
23 get: function() {
24 return this._mainCollapser;
25 },
26 set: function(newVal) {
27 this._mainCollapser = newVal;
28 }
29 },
30
31 /* Style models: the array of styles, and the repetition that uses them */
32 _arrLayerStyles : {
33 serializable: true,
34 enumerable: true,
35 serializable: true,
36 value: []
37 },
38 arrLayerStyles : {
39 serializable: true,
40 enumerable: true,
41 serializable: true,
42 get: function() {
43 return this._arrLayerStyles;
44 },
45 set: function(newVal) {
46 this._arrLayerStyles = newVal;
47 }
48 },
49 _styleRepetition : {
50 value: false
51 },
52 styleRepetition : {
53 get: function() {
54 return this._styleRepetition;
55 },
56 set: function(newVal) {
57 this._styleRepetition = newVal;
58 }
59 },
60 _styleCounter : {
61 value: 0
62 },
63
64 /* Layer models: the name, ID, and selected and animation booleans for the layer */
65 _layerName:{
66 serializable: true,
67 value:null,
68 writable:true,
69 enumerable:true
70 },
71
72 layerName:{
73 serializable: true,
74 get:function(){
75 return this._layerName;
76 },
77 set:function(newVal){
78 if (newVal !== this._layerName) {
79 this._layerEditable.value = newVal;
80 this._layerName = newVal;
81 this._layerEditable.needsDraw = true;
82 this.needsDraw = true;
83
84 }
85
86 }
87 },
88 _layerID:{
89 value:null,
90 writable:true,
91 serializable: true,
92 enumerable:true
93 },
94
95 layerID:{
96 serializable: true,
97 get:function(){
98 return this._layerID;
99 },
100 set:function(value){
101 this._layerID = value;
102 }
103 },
104
105 /* isSelected: whether or not the layer is currently selected. */
106 _isSelected:{
107 value: false,
108 writable: true,
109 serializable: true,
110 enumerable: false
111 },
112
113 isSelected:{
114 get:function(){
115 return this._isSelected;
116 },
117 set:function(value){
118 if (value !== this._isSelected) {
119 // Only concerned about different values
120 if (value === false) {
121 // If changing from false to true, we need to deselect any associated styles
122 this.selectStyle(false);
123 }
124 this._isSelected = value;
125 this.needsDraw = true;
126 }
127
128 }
129 },
130
131 /* isActive: Whether or not the user is actively clicking within the layer; used to communicate state with
132 * TimelinePanel.
133 */
134 _isActive: {
135 value: false
136 },
137 isActive: {
138 get: function() {
139 return this._isActive;
140 },
141 set: function(newVal) {
142 this._isActive = newVal;
143 }
144 },
145
146
147 _isAnimated:{
148 value: false,
149 writable: true,
150 enumerable: false
151 },
152
153 isAnimated:{
154 get:function(){
155 return this._isAnimated;
156 },
157 set:function(value){
158 this._isAnimated = value;
159 }
160 },
161 _justAdded: {
162 value: false
163 },
164 _layerEditable : {
165 value: false
166 },
167
168 // Are the various collapsers collapsed or not
169 _isMainCollapsed : {
170 value: ""
171 },
172 isMainCollapsed : {
173 get: function() {
174 return this._isMainCollapsed;
175 },
176 set: function(newVal) {
177 if (newVal !== this._isMainCollapsed) {
178 this._isMainCollapsed = newVal;
179 this.needsDraw = true;
180 }
181 }
182 },
183
184 _isTransformCollapsed : {
185 value: true
186 },
187 isTransformCollapsed : {
188 get: function() {
189 return this._isTransformCollapsed;
190 },
191 set: function(newVal) {
192 if (newVal !== this._isTransformCollapsed) {
193 this._isTransformCollapsed = newVal;
194 this.needsDraw = true;
195 }
196 }
197 },
198
199 _isPositionCollapsed : {
200 value: true
201 },
202 isPositionCollapsed : {
203 get: function() {
204 return this._isPositionCollapsed;
205 },
206 set: function(newVal) {
207 if (newVal !== this._isPositionCollapsed) {
208 this._isPositionCollapsed = newVal;
209 this.needsDraw = true;
210 }
211 }
212 },
213
214 _isStyleCollapsed : {
215 value: true
216 },
217 isStyleCollapsed : {
218 get: function() {
219 return this._isStyleCollapsed;
220 },
221 set: function(newVal) {
222 if (newVal !== this._isStyleCollapsed) {
223 this._isStyleCollapsed = newVal;
224 this.needsDraw = true;
225 }
226 }
227 },
228
229
230 /* END: Models */
231
232 /* Begin: Draw cycle */
233 prepareForDraw: {
234 value: function() {
235
236 // Initialize myself
237 this.init();
238
239 var that = this;
240