Timeline: Drag and Drop of layers.

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
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 @@
                                                 "transformCollapser" : {"@" : "transformCollapser"},
                                                 "styleCollapser" : {"@" : "styleCollapser"},
                                                 "clickerMain" : {"#" : "clicker-main"},
-                                                "myLabel" : {"#" : "myLabel"}
+                                                "myLabel" : {"#" : "myLabel"},
+                                                "dragDrop" : {"@" : "DragDrop"}
                     }
                 },
                     "dtext1" : {
@@ -315,34 +316,7 @@
                                                         "oneway" : false
                                                 }
                                         }
-                                },
-
-                    "DragDrop": {
-                        "module": "js/panels/Timeline/DragDrop.js",
-                        "name": "DragDropComposer",
-                        "properties": {
-                            "element": {"#": "myLabel"},
-                            "component": {"@": "owner"}
-                        },
-                        "listeners": [
-                            {
-                                "type": "dragStart",
-                                "listener": {"@": "owner"}
-                            },
-                            {
-                                "type": "dropHover",
-                                "listener": {"@": "owner"}
-                            },
-                            {
-                                "type": "dropped",
-                                "listener": {"@": "owner"}
-                            },
-                            {
-                                "type": "dropEnd",
-                                "listener": {"@": "owner"}
-                            }
-                        ]
-                    }
+                                }
                                 
                                 
             }
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, {
         },
         set:function(value){
             this._layerID = value;
+            this.layerData.layerID = value;
         }
     },
     
@@ -119,7 +120,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextPositionX !== value) {
                         this._dtextPositionX = value;
-                        //this.needsDraw = true;
+                        this.layerData.dtextPositionX = value;
                 }
             
         }
@@ -138,7 +139,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextPositionY !== value) {
                         this._dtextPositionY = value;
-                        //this.needsDraw = true;
+                        this.layerData.dtextPositionY = value;
                 }
             
         }
@@ -157,7 +158,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextScaleX !== value) {
                         this._dtextScaleX = value;
-                        //this.needsDraw = true;
+                        this.layerData.dtextScaleX = value;
                 }
             
         }
@@ -176,7 +177,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextScaleY !== value) {
                         this._dtextScaleY = value;
-                        //this.needsDraw = true;
+                        this.layerData.dtextScaleY = value;
                 }
             
         }
@@ -195,7 +196,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextSkewX !== value) {
                         this._dtextSkewX = value;
-                        //this.needsDraw = true;
+                        this.layerData.dtextSkewX = value;
                 }
             
         }
@@ -214,7 +215,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextSkewY !== value) {
                         this._dtextSkewY = value;
-                        //this.needsDraw = true;
+                        this.layerData.dtextSkewY = value;
                 }
             
         }
@@ -233,7 +234,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextRotate !== value) {
                         this._dtextRotate = value;
-                        //this.needsDraw = true;
+                        this.layerData.dtextRotate = value;
                 }
             
         }
@@ -278,6 +279,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._isActive = newVal;
+                this.layerData.isActive = newVal;
         }
     },
     
@@ -294,6 +296,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         set:function(value){
             this._isAnimated = value;
+            this.layerData.isAnimated = newVal;
         }
     },
     _justAdded: {
@@ -384,11 +387,15 @@ var Layer = exports.Layer = Montage.create(Component, {
         set: function(newVal) {
                 if (newVal !== this._bypassAnimation) {
                         this._bypassAnimation = newVal;
-                        this.layerData.bypassAnimation = newVal;
-                        //this.triggerOutgoingBinding();        
+                        this.layerData.bypassAnimation = newVal;        
                 }
         }
     },
+    
+    // Is this the first draw?
+    _isFirstDraw : {
+        value: true
+    },
 
     _layerData:{
         serializable:true,
@@ -459,12 +466,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                 }
         }
     },
-    
-    // Is this the first draw?
-    _isFirstDraw : {
-        value: true
-    },
-
         /* END: Models */
 
         /* Begin: Draw cycle */
@@ -507,7 +508,12 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.element.addEventListener("click", this, false);
             
                         // Drag and drop event hanlders
-                        this.element.addEventListener("dropped", this, false);
+                        this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
+                        this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
+                        this.element.addEventListener("dragover", this.handleDragover.bind(this), false);