aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJon Reid2012-03-26 17:04:28 -0700
committerJon Reid2012-03-26 17:04:28 -0700
commit8ef667315ca6a81bb1369943eaf3643ae2db5037 (patch)
tree935717b633e4a1c50ef3c43270ac2b45b1eea83b
parent6902b20474da22029d84d92a5a6bfa129a30d92e (diff)
downloadninja-8ef667315ca6a81bb1369943eaf3643ae2db5037.tar.gz
Timeline: Drag and Drop of layers.
-rw-r--r--images/transparent.pngbin0 -> 158 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html32
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js83
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html2
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js152
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css3
6 files changed, 224 insertions, 48 deletions
diff --git a/images/transparent.png b/images/transparent.png
new file mode 100644
index 00000000..c1411593
--- /dev/null
+++ b/images/transparent.png
Binary files differ
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index ef98bdd5..454c2742 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -23,7 +23,8 @@
23 "transformCollapser" : {"@" : "transformCollapser"}, 23 "transformCollapser" : {"@" : "transformCollapser"},
24 "styleCollapser" : {"@" : "styleCollapser"}, 24 "styleCollapser" : {"@" : "styleCollapser"},
25 "clickerMain" : {"#" : "clicker-main"}, 25 "clickerMain" : {"#" : "clicker-main"},
26 "myLabel" : {"#" : "myLabel"} 26 "myLabel" : {"#" : "myLabel"},
27 "dragDrop" : {"@" : "DragDrop"}
27 } 28 }
28 }, 29 },
29 "dtext1" : { 30 "dtext1" : {
@@ -315,34 +316,7 @@
315 "oneway" : false 316 "oneway" : false
316 } 317 }
317 } 318 }
318 }, 319 }
319
320 "DragDrop": {
321 "module": "js/panels/Timeline/DragDrop.js",
322 "name": "DragDropComposer",
323 "properties": {
324 "element": {"#": "myLabel"},
325 "component": {"@": "owner"}
326 },
327 "listeners": [
328 {
329 "type": "dragStart",
330 "listener": {"@": "owner"}
331 },
332 {
333 "type": "dropHover",
334 "listener": {"@": "owner"}
335 },
336 {
337 "type": "dropped",
338 "listener": {"@": "owner"}
339 },
340 {
341 "type": "dropEnd",
342 "listener": {"@": "owner"}
343 }
344 ]
345 }
346 320
347 321
348 } 322 }
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index bddfcd3e..9cf321b1 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -102,6 +102,7 @@ var Layer = exports.Layer = Montage.create(Component, {
102 }, 102 },
103 set:function(value){ 103 set:function(value){
104 this._layerID = value; 104 this._layerID = value;
105 this.layerData.layerID = value;
105 } 106 }
106 }, 107 },
107 108
@@ -119,7 +120,7 @@ var Layer = exports.Layer = Montage.create(Component, {
119 set:function(value){ 120 set:function(value){
120 if (this._dtextPositionX !== value) { 121 if (this._dtextPositionX !== value) {
121 this._dtextPositionX = value; 122 this._dtextPositionX = value;
122 //this.needsDraw = true; 123 this.layerData.dtextPositionX = value;
123 } 124 }
124 125
125 } 126 }
@@ -138,7 +139,7 @@ var Layer = exports.Layer = Montage.create(Component, {
138 set:function(value){ 139 set:function(value){
139 if (this._dtextPositionY !== value) { 140 if (this._dtextPositionY !== value) {
140 this._dtextPositionY = value; 141 this._dtextPositionY = value;
141 //this.needsDraw = true; 142 this.layerData.dtextPositionY = value;
142 } 143 }
143 144
144 } 145 }
@@ -157,7 +158,7 @@ var Layer = exports.Layer = Montage.create(Component, {
157 set:function(value){ 158 set:function(value){
158 if (this._dtextScaleX !== value) { 159 if (this._dtextScaleX !== value) {
159 this._dtextScaleX = value; 160 this._dtextScaleX = value;
160 //this.needsDraw = true; 161 this.layerData.dtextScaleX = value;
161 } 162 }
162 163
163 } 164 }
@@ -176,7 +177,7 @@ var Layer = exports.Layer = Montage.create(Component, {
176 set:function(value){ 177 set:function(value){
177 if (this._dtextScaleY !== value) { 178 if (this._dtextScaleY !== value) {
178 this._dtextScaleY = value; 179 this._dtextScaleY = value;
179 //this.needsDraw = true; 180 this.layerData.dtextScaleY = value;
180 } 181 }
181 182
182 } 183 }
@@ -195,7 +196,7 @@ var Layer = exports.Layer = Montage.create(Component, {
195 set:function(value){ 196 set:function(value){
196 if (this._dtextSkewX !== value) { 197 if (this._dtextSkewX !== value) {
197 this._dtextSkewX = value; 198 this._dtextSkewX = value;
198 //this.needsDraw = true; 199 this.layerData.dtextSkewX = value;
199 } 200 }
200 201
201 } 202 }
@@ -214,7 +215,7 @@ var Layer = exports.Layer = Montage.create(Component, {
214 set:function(value){ 215 set:function(value){
215 if (this._dtextSkewY !== value) { 216 if (this._dtextSkewY !== value) {
216 this._dtextSkewY = value; 217 this._dtextSkewY = value;
217 //this.needsDraw = true; 218 this.layerData.dtextSkewY = value;
218 } 219 }
219 220
220 } 221 }
@@ -233,7 +234,7 @@ var Layer = exports.Layer = Montage.create(Component, {
233 set:function(value){ 234 set:function(value){
234 if (this._dtextRotate !== value) { 235 if (this._dtextRotate !== value) {
235 this._dtextRotate = value; 236 this._dtextRotate = value;
236 //this.needsDraw = true; 237 this.layerData.dtextRotate = value;
237 } 238 }
238 239
239 } 240 }
@@ -278,6 +279,7 @@ var Layer = exports.Layer = Montage.create(Component, {
278 }, 279 },
279 set: function(newVal) { 280 set: function(newVal) {
280 this._isActive = newVal; 281 this._isActive = newVal;
282 this.layerData.isActive = newVal;
281 } 283 }
282 }, 284 },
283 285
@@ -294,6 +296,7 @@ var Layer = exports.Layer = Montage.create(Component, {
294 }, 296 },
295 set:function(value){ 297 set:function(value){
296 this._isAnimated = value; 298 this._isAnimated = value;
299 this.layerData.isAnimated = newVal;
297 } 300 }
298 }, 301 },
299 _justAdded: { 302 _justAdded: {
@@ -384,11 +387,15 @@ var Layer = exports.Layer = Montage.create(Component, {
384 set: function(newVal) { 387 set: function(newVal) {
385 if (newVal !== this._bypassAnimation) { 388 if (newVal !== this._bypassAnimation) {
386 this._bypassAnimation = newVal; 389 this._bypassAnimation = newVal;
387 this.layerData.bypassAnimation = newVal; 390 this.layerData.bypassAnimation = newVal;
388 //this.triggerOutgoingBinding();
389 } 391 }
390 } 392 }
391 }, 393 },
394
395 // Is this the first draw?
396 _isFirstDraw : {
397 value: true
398 },
392 399
393 _layerData:{ 400 _layerData:{
394 serializable:true, 401 serializable:true,
@@ -459,12 +466,6 @@ var Layer = exports.Layer = Montage.create(Component, {
459 } 466 }
460 } 467 }
461 }, 468 },
462
463 // Is this the first draw?
464 _isFirstDraw : {
465 value: true
466 },
467
468 /* END: Models */ 469 /* END: Models */
469 470
470 /* Begin: Draw cycle */ 471 /* Begin: Draw cycle */
@@ -507,7 +508,12 @@ var Layer = exports.Layer = Montage.create(Component, {
507 this.element.addEventListener("click", this, false); 508 this.element.addEventListener("click", this, false);
508 509
509 // Drag and drop event hanlders 510 // Drag and drop event hanlders
510 this.element.addEventListener("dropped", this, false); 511 this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
512 this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
513 this.element.addEventListener("dragover", this.handleDragover.bind(this), false);