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 ++++++++---
.../Timeline/TimelinePanel.reel/TimelinePanel.html | 2 +-
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 152 +++++++++++++++++++++
.../TimelinePanel.reel/css/TimelinePanel.css | 3 +
5 files changed, 224 insertions(+), 48 deletions(-)
(limited to 'js')
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 */
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 2e0bf7dd..3833a891 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -162,7 +162,7 @@
-
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index bc474a46..ffcd6686 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -238,6 +238,57 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
timeMarkerHolder:{
value:null
},
+ _dragAndDropHelper : {
+ value: false
+ },
+ _dragAndDropHelperCoords: {
+ value: false
+ },
+ _dragAndDropHelperOffset : {
+ value: false
+ },
+ _dragLayerID : {
+ value: null
+ },
+ dragLayerID : {
+ get: function() {
+ return this._dragLayerID;
+ },
+ set: function(newVal) {
+ if (newVal !== this._dragLayerID) {
+ this._dragLayerID = newVal;
+ }
+ }
+ },
+ _dropLayerID : {
+ value: null
+ },
+ dropLayerID : {
+ get: function() {
+ return this._dropLayerID;
+ },
+ set: function(newVal) {
+ if (newVal !== this._dropLayerID) {
+ this._dropLayerID = newVal;
+
+ // Create a snapshot of arrLayers so we can manipulate it safely
+ var arrLayers = this.arrLayers,
+ dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
+ dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
+ dragLayer = arrLayers[dragLayerIndex];
+
+ arrLayers.splice(dragLayerIndex, 1);
+ arrLayers.splice(dropLayerIndex, 0, dragLayer);
+
+ // Update the repetition!
+ this.arrLayers = arrLayers;
+
+ // Clear for future DnD
+ this._dropLayerID = null;
+ this._dragLayerID = null;
+ }
+ }
+ },
/* === END: Models === */
/* === BEGIN: Draw cycle === */
prepareForDraw:{
@@ -247,6 +298,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false);
this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false);
this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false);
+
+ // Bind drag and drop event handlers
+ this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
+ this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
+ this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
+ this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
}
},
@@ -258,6 +315,25 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
},
+
+ draw: {
+ value: function() {
+
+ // Drag and Drop:
+ // Do we have a helper to append?
+ if (this._appendHelper === true) {
+ this.container_layers.appendChild(this._dragAndDropHelper);
+ this._appendHelper = false;
+ }
+ // Do we need to move the helper?
+ if (this._dragAndDropHelperCoords !== false) {
+ if (this._dragAndDropHelper !== null) {
+ this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
+ }
+ this._dragAndDropHelperCoords = false;
+ }
+ }
+ },
/* === END: Draw cycle === */
/* === BEGIN: Controllers === */
// Create an empty layer template object with minimal defaults and return it for use
@@ -365,6 +441,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.layout_tracks = this.element.querySelector(".layout-tracks");
this.layout_markers = this.element.querySelector(".layout_markers");
this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false);
+ this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false);
this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
@@ -586,6 +663,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
var myIndex = this.getActiveLayerIndex();
this.selectLayer(myIndex, true);
}
+ this._isMousedown = true;
+ }
+ },
+
+ timelineLeftPaneMouseup:{
+ value:function (event) {
+ this._isMousedown = false;
}
},
@@ -891,6 +975,74 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
},
+
+ handleLayerDragStart : {
+ value: function(event) {
+ var dragIcon = document.createElement("img");
+ event.dataTransfer.effectAllowed = 'move';
+ event.dataTransfer.setData('Text', this.identifier);
+ dragIcon.src = "/images/transparent.png";
+ dragIcon.width = 1;
+ event.dataTransfer.setDragImage(dragIcon, 0, 0);
+
+ // Clone the element we're dragging
+ this._dragAndDropHelper = event.target.cloneNode(true);
+ this._dragAndDropHelper.style.opacity = 0.8;
+ this._dragAndDropHelper.style.position = "absolute";
+ this._dragAndDropHelper.style.top = "0px";
+ this._dragAndDropHelper.style.left = "0px";
+ this._dragAndDropHelper.style.zIndex = 700;
+
+ this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
+ this._dragAndDropHelper.classList.add("timeline-dnd-helper");
+
+ // Get the offset
+ var findYOffset = function(obj) {
+ var curleft = curtop = 0;
+ if (obj.offsetParent) {
+ do {
+ curleft += obj.offsetLeft;
+ curtop += obj.offsetTop;
+
+ } while (obj = obj.offsetParent);
+ }
+ return curtop;
+ }
+ this._dragAndDropHelperOffset = findYOffset(this.container_layers);
+ this._appendHelper = true;
+ // this.container_layers.appendChild(this._dragAndDropHelper);
+ }
+ },
+ handleLayerDragover: {
+ value: function(event) {
+ var currPos = 0;
+ currPos = event.y - this._dragAndDropHelperOffset -28;
+ this._dragAndDropHelperCoords = currPos + "px";
+ this.needsDraw = true;
+ }
+ },
+ handleLayerDragEnd : {
+ value: function(event) {
+ // Delete the helper and clean up
+ if (this._dragAndDropHelper !== null) {
+ this.container_layers.removeChild(this._dragAndDropHelper);
+ this._dragAndDropHelper = null;
+ }
+ }
+ },
+ handleLayerDrop : {
+ value: function(event) {
+ event.stopPropagation();
+ event.preventDefault();
+ // Usually drop fires after dragend, but sometimes
+ // dragend doesn't fire. So if we're here in drop
+ // and there's still a helper, we need to manually fire dragend.
+ if (this._dragAndDropHelper !== null) {
+ this.container_layers.removeChild(this._dragAndDropHelper);
+ this._dragAndDropHelper = null;
+ }
+ }
+ },
/* === END: Controllers === */
/* === BEGIN: Logging routines === */
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index 129b9771..b9d45979 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -284,3 +284,6 @@
display: none;
box-shadow: rgb(17, 17, 17) 0px 0px 14px inset;
}
+.timeline-dnd-helper {
+ -webkit-transform: scale(.9, .9);
+}
--
cgit v1.2.3