From 8ef667315ca6a81bb1369943eaf3643ae2db5037 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 26 Mar 2012 17:04:28 -0700 Subject: Timeline: Drag and Drop of layers. --- js/panels/Timeline/Layer.reel/Layer.html | 32 ++---------- js/panels/Timeline/Layer.reel/Layer.js | 83 +++++++++++++++++++++++++------- 2 files changed, 68 insertions(+), 47 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') 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); + this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); + this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); + this.element.addEventListener("drop", this.handleDrop.bind(this), false); } }, @@ -545,6 +551,8 @@ var Layer = exports.Layer = Montage.create(Component, { this.titleSelector = this.label.querySelector(".collapsible-label"); this.buttonAddStyle = this.element.querySelector(".button-add"); this.buttonDeleteStyle = this.element.querySelector(".button-delete"); + + } }, @@ -786,9 +794,48 @@ var Layer = exports.Layer = Montage.create(Component, { this.triggerOutgoingBinding(); } }, - handleDropped : { + handleMouseover: { value: function(event) { - console.log('wheeee! WWEWWEWWWWEEEEEEEEE') + this.element.draggable = true; + } + }, + handleMouseout: { + value: function(event) { + this.element.draggable = false; + } + }, + handleDragenter: { + value: function(event) { + } + }, + handleDragleave: { + value: function(event) { + this.element.classList.remove("dragOver"); + } + }, + handleDragstart: { + value: function(event) { + this.parentComponent.parentComponent.dragLayerID = this.layerID; + event.dataTransfer.setData('Text', 'Layer'); + } + }, + handleDragover: { + value: function(event) { + event.preventDefault(); + this.element.classList.add("dragOver"); + event.dataTransfer.dropEffect = "move"; + return false; + } + }, + + handleDrop : { + value: function(event) { + event.stopPropagation(); + this.element.classList.remove("dragOver"); + if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { + this.parentComponent.parentComponent.dropLayerID = this.layerID; + } + return false; } }, /* End: Event handlers */ -- cgit v1.2.3