diff options
Diffstat (limited to 'js/panels/Timeline/Layer.reel/Layer.js')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 167 |
1 files changed, 151 insertions, 16 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 71a1f01f..e75b4d0f 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -1,3 +1,9 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
1 | var Montage = require("montage/core/core").Montage; | 7 | var Montage = require("montage/core/core").Montage; |
2 | var Component = require("montage/ui/component").Component; | 8 | var Component = require("montage/ui/component").Component; |
3 | var Collapser = require("js/panels/Timeline/Collapser").Collapser; | 9 | var Collapser = require("js/panels/Timeline/Collapser").Collapser; |
@@ -80,7 +86,6 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
80 | this._layerName = newVal; | 86 | this._layerName = newVal; |
81 | this._layerEditable.needsDraw = true; | 87 | this._layerEditable.needsDraw = true; |
82 | this.needsDraw = true; | 88 | this.needsDraw = true; |
83 | |||
84 | } | 89 | } |
85 | 90 | ||
86 | } | 91 | } |
@@ -102,6 +107,140 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
102 | } | 107 | } |
103 | }, | 108 | }, |
104 | 109 | ||
110 | /* Position and Transform hottext values */ | ||
111 | _dtextPositionX : { | ||
112 | value:null, | ||
113 | serializable: true, | ||
114 | }, | ||
115 | |||
116 | dtextPositionX:{ | ||
117 | serializable: true, | ||
118 | get:function(){ | ||
119 | return this._dtextPositionX; | ||
120 | }, | ||
121 | set:function(value){ | ||
122 | if (this._dtextPositionX !== value) { | ||
123 | this._dtextPositionX = value; | ||
124 | this.needsDraw = true; | ||
125 | } | ||
126 | |||
127 | } | ||
128 | }, | ||
129 | |||
130 | _dtextPositionY : { | ||
131 | value:null, | ||
132 | serializable: true, | ||
133 | }, | ||
134 | |||
135 | dtextPositionY:{ | ||
136 | serializable: true, | ||
137 | get:function(){ | ||
138 | return this._dtextPositionY; | ||
139 | }, | ||
140 | set:function(value){ | ||
141 | if (this._dtextPositionY !== value) { | ||
142 | this._dtextPositionY = value; | ||
143 | this.needsDraw = true; | ||
144 | } | ||
145 | |||
146 | } | ||
147 | }, | ||
148 | |||
149 | _dtextScaleX : { | ||
150 | value:null, | ||
151 | serializable: true, | ||
152 | }, | ||
153 | |||
154 | dtextScaleX:{ | ||
155 | serializable: true, | ||
156 | get:function(){ | ||
157 | return this._dtextScaleX; | ||
158 | }, | ||
159 | set:function(value){ | ||
160 | if (this._dtextScaleX !== value) { | ||
161 | this._dtextScaleX = value; | ||
162 | this.needsDraw = true; | ||
163 | } | ||
164 | |||
165 | } | ||
166 | }, | ||
167 | |||
168 | _dtextScaleY : { | ||
169 | value:null, | ||
170 | serializable: true, | ||
171 | }, | ||
172 | |||
173 | dtextScaleY:{ | ||
174 | serializable: true, | ||
175 | get:function(){ | ||
176 | return this._dtextScaleY; | ||
177 | }, | ||
178 | set:function(value){ | ||
179 | if (this._dtextScaleY !== value) { | ||
180 | this._dtextScaleY = value; | ||
181 | this.needsDraw = true; | ||
182 | } | ||
183 | |||
184 | } | ||
185 | }, | ||
186 | |||
187 | _dtextSkewX : { | ||
188 | value:null, | ||
189 | serializable: true, | ||
190 | }, | ||
191 | |||
192 | dtextSkewX:{ | ||
193 | serializable: true, | ||
194 | get:function(){ | ||
195 | return this._dtextSkewX; | ||
196 | }, | ||
197 | set:function(value){ | ||
198 | if (this._dtextSkewX !== value) { | ||
199 | this._dtextSkewX = value; | ||
200 | this.needsDraw = true; | ||
201 | } | ||
202 | |||
203 | } | ||
204 | }, | ||
205 | |||
206 | _dtextSkewY : { | ||
207 | value:null, | ||
208 | serializable: true, | ||
209 | }, | ||
210 | |||
211 | dtextSkewY:{ | ||
212 | serializable: true, | ||
213 | get:function(){ | ||
214 | return this._dtextSkewY; | ||
215 | }, | ||
216 | set:function(value){ | ||
217 | if (this._dtextSkewY !== value) { | ||
218 | this._dtextSkewY = value; | ||
219 | this.needsDraw = true; | ||
220 | } | ||
221 | |||
222 | } | ||
223 | }, | ||
224 | |||
225 | _dtextRotate : { | ||
226 | value:null, | ||
227 | serializable: true, | ||
228 | }, | ||
229 | |||
230 | dtextRotate:{ | ||
231 | serializable: true, | ||
232 | get:function(){ | ||
233 | return this._dtextRotate; | ||
234 | }, | ||
235 | set:function(value){ | ||
236 | if (this._dtextRotate !== value) { | ||
237 | this._dtextRotate = value; | ||
238 | this.needsDraw = true; | ||
239 | } | ||
240 | |||
241 | } | ||
242 | }, | ||
243 | |||
105 | /* isSelected: whether or not the layer is currently selected. */ | 244 | /* isSelected: whether or not the layer is currently selected. */ |
106 | _isSelected:{ | 245 | _isSelected:{ |
107 | value: false, | 246 | value: false, |
@@ -323,6 +462,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
323 | this.styleCollapser.myContent = this.contentStyle; | 462 | this.styleCollapser.myContent = this.contentStyle; |
324 | this.styleCollapser.element = this.element; | 463 | this.styleCollapser.element = this.element; |
325 | this.styleCollapser.isCollapsed = this.isStyleCollapsed; | 464 | this.styleCollapser.isCollapsed = this.isStyleCollapsed; |
465 | this.styleCollapser.contentHeight = 20; | ||
326 | this.styleCollapser.isAnimated = true; | 466 | this.styleCollapser.isAnimated = true; |
327 | this.styleCollapser.labelClickEvent = function(boolBypass) { | 467 | this.styleCollapser.labelClickEvent = function(boolBypass) { |
328 | var newEvent = document.createEvent("CustomEvent"); | 468 | var newEvent = document.createEvent("CustomEvent"); |
@@ -483,8 +623,11 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
483 | // Delete the style from the view | 623 | // Delete the style from the view |
484 | this.arrLayerStyles.splice(selectedIndex, 1); | 624 | this.arrLayerStyles.splice(selectedIndex, 1); |
485 | 625 | ||
486 | } else { | 626 | // Was that the last style? |
487 | alert('TODO: what should happen when no rule is selected and the user clicks the delete button?') | 627 | if (this.arrLayerStyles.length === 0) { |
628 | this.buttonDeleteStyle.classList.add("disabled"); | ||
629 | } | ||
630 | |||
488 | } | 631 | } |
489 | } | 632 | } |
490 | } | 633 | } |
@@ -509,8 +652,12 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
509 | // Next, update this.styleRepetition.selectedIndexes. | 652 | // Next, update this.styleRepetition.selectedIndexes. |
510 | if (styleIndex !== false) { | 653 | if (styleIndex !== false) { |
511 | this.styleRepetition.selectedIndexes = [styleIndex]; | 654 | this.styleRepetition.selectedIndexes = [styleIndex]; |
655 | this.buttonDeleteStyle.classList.remove("disabled"); | ||
512 | } else { | 656 | } else { |
513 | this.styleRepetition.selectedIndexes = null; | 657 | this.styleRepetition.selectedIndexes = null; |
658 | if (typeof(this.buttonDeleteStyle) !== "undefined") { | ||
659 | this.buttonDeleteStyle.classList.add("disabled"); | ||
660 | } | ||
514 | } | 661 | } |
515 | 662 | ||
516 | } | 663 | } |
@@ -537,14 +684,11 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
537 | /* Begin: Event handlers */ | 684 | /* Begin: Event handlers */ |
538 | handleAddStyleClick: { | 685 | handleAddStyleClick: { |
539 | value: function(event) { | 686 | value: function(event) { |
540 | // Stop the event propagation | ||
541 | //event.stopPropagation(); | ||
542 | this.addStyle(); | 687 | this.addStyle(); |
543 | } | 688 | } |
544 | }, | 689 | }, |
545 | handleDeleteStyleClick: { | 690 | handleDeleteStyleClick: { |
546 | value: function(event) { | 691 | value: function(event) { |
547 | //event.stopPropagation(); | ||
548 | this.deleteStyle(); | 692 | this.deleteStyle(); |
549 | } | 693 | } |
550 | }, | 694 | }, |
@@ -566,25 +710,16 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
566 | handleMousedown: { | 710 | handleMousedown: { |
567 | value: function(event) { | 711 | value: function(event) { |
568 |