aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorJon Reid2012-03-30 16:41:43 -0700
committerJon Reid2012-03-30 16:41:43 -0700
commit57f26309f7474c2b07eb9c42e0984f5b6b81cc7c (patch)
tree9a696c2f95b4a7a8f74eb88d3708340e12995574 /js/panels/Timeline
parentc6ef285c06905c28fe8915f9c4f916e74f6c8287 (diff)
downloadninja-57f26309f7474c2b07eb9c42e0984f5b6b81cc7c.tar.gz
Timeline: Move drag-and-drop helper deletion to draw routine. Bug fix:
better handling of drag-and-drop finish events and cleanup of helper.
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js50
1 files changed, 37 insertions, 13 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 3eaf3dec..7ed33fda 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -305,9 +305,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
305 // Clear for future DnD 305 // Clear for future DnD
306 this._dropLayerID = null; 306 this._dropLayerID = null;
307 this._dragLayerID = null; 307 this._dragLayerID = null;
308
309 // Sometimes, just to be fun, the drop and dragend events don't fire.
310 // So just in case, set the draw routine to delete the helper.
311 this._deleteHelper = true;
312 this.needsDraw = true;
308 } 313 }
309 } 314 }
310 }, 315 },
316 _appendHelper: {
317 value: false
318 },
319 _deleteHelper: {
320 value: false
321 },
311 /* === END: Models === */ 322 /* === END: Models === */
312 /* === BEGIN: Draw cycle === */ 323 /* === BEGIN: Draw cycle === */
313 prepareForDraw:{ 324 prepareForDraw:{
@@ -329,7 +340,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
329 willDraw:{ 340 willDraw:{
330 value:function () { 341 value:function () {
331 if (this._isLayer) { 342 if (this._isLayer) {
332 // this.createNewLayer();
333 this._isLayer = false; 343 this._isLayer = false;
334 } 344 }
335 } 345 }
@@ -351,6 +361,26 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
351 } 361 }
352 this._dragAndDropHelperCoords = false; 362 this._dragAndDropHelperCoords = false;
353 } 363 }
364 // Do we have a helper to delete?
365 if (this._deleteHelper === true) {
366 if (this._dragAndDropHelper === null) {
367 // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
368 // Try and recover the helper so we can delete it.
369 var myHelper = this.container_layers.querySelector(".timeline-dnd-helper");
370 if (myHelper != null) {
371 this._dragAndDropHelper = myHelper;
372 }
373 }
374 if (this._dragAndDropHelper !== null) {
375 // We need to delete the helper. Can we delete it from container_layers?
376 if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) {
377 this.container_layers.removeChild(this._dragAndDropHelper);
378 this._dragAndDropHelper = null;
379 this._deleteHelper = false;
380 }
381 }
382
383 }
354 } 384 }
355 }, 385 },
356 /* === END: Draw cycle === */ 386 /* === END: Draw cycle === */
@@ -1043,7 +1073,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1043 } 1073 }
1044 this._dragAndDropHelperOffset = findYOffset(this.container_layers); 1074 this._dragAndDropHelperOffset = findYOffset(this.container_layers);
1045 this._appendHelper = true; 1075 this._appendHelper = true;
1046 // this.container_layers.appendChild(this._dragAndDropHelper); 1076 this._deleteHelper = false;
1047 } 1077 }
1048 }, 1078 },
1049 handleLayerDragover: { 1079 handleLayerDragover: {
@@ -1056,23 +1086,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1056 }, 1086 },
1057 handleLayerDragEnd : { 1087 handleLayerDragEnd : {
1058 value: function(event) { 1088 value: function(event) {
1059 // Delete the helper and clean up 1089 this._deleteHelper = true;
1060 if (this._dragAndDropHelper !== null) { 1090 this.needsDraw = true;
1061 this.container_layers.removeChild(this._dragAndDropHelper); 1091
1062 this._dragAndDropHelper = null;
1063 }
1064 } 1092 }
1065 }, 1093 },
1066 handleLayerDrop : { 1094 handleLayerDrop : {
1067 value: function(event) { 1095 value: function(event) {
1068 event.stopPropagation(); 1096 event.stopPropagation();
1069 event.preventDefault(); 1097 event.preventDefault();
1070 // Usually drop fires after dragend, but sometimes 1098 this._deleteHelper = true;
1071 // dragend doesn't fire. So if we're here in drop 1099 this.needsDraw = true;
1072 // and there's still a helper, we need to manually fire dragend.
1073 if (this._dragAndDropHelper !== null) {
1074 this.handleLayerDragEnd(event);
1075 }
1076 } 1100 }
1077 }, 1101 },
1078 /* === END: Controllers === */ 1102 /* === END: Controllers === */