diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 139 |
1 files changed, 93 insertions, 46 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 0ca4800d..df1a25a8 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -305,9 +305,23 @@ 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 | }, | ||
322 | _scrollTracks: { | ||
323 | value: false | ||
324 | }, | ||
311 | /* === END: Models === */ | 325 | /* === END: Models === */ |
312 | /* === BEGIN: Draw cycle === */ | 326 | /* === BEGIN: Draw cycle === */ |
313 | prepareForDraw:{ | 327 | prepareForDraw:{ |
@@ -329,7 +343,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
329 | willDraw:{ | 343 | willDraw:{ |
330 | value:function () { | 344 | value:function () { |
331 | if (this._isLayer) { | 345 | if (this._isLayer) { |
332 | // this.createNewLayer(); | ||
333 | this._isLayer = false; | 346 | this._isLayer = false; |
334 | } | 347 | } |
335 | } | 348 | } |
@@ -351,6 +364,31 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
351 | } | 364 | } |
352 | this._dragAndDropHelperCoords = false; | 365 | this._dragAndDropHelperCoords = false; |
353 | } | 366 | } |
367 | // Do we need to scroll the tracks? | ||
368 | if (this._scrollTracks !== false) { | ||
369 | this.layout_tracks.scrollTop = this._scrollTracks; | ||
370 | this._scrollTracks = false; | ||
371 | } | ||
372 | // Do we have a helper to delete? | ||
373 | if (this._deleteHelper === true) { | ||
374 | if (this._dragAndDropHelper === null) { | ||
375 | // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. | ||
376 | // Try and recover the helper so we can delete it. | ||
377 | var myHelper = this.container_layers.querySelector(".timeline-dnd-helper"); | ||
378 | if (myHelper != null) { | ||
379 | this._dragAndDropHelper = myHelper; | ||
380 | } | ||
381 | } | ||
382 | if (this._dragAndDropHelper !== null) { | ||
383 | // We need to delete the helper. Can we delete it from container_layers? | ||
384 | if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) { | ||
385 | this.container_layers.removeChild(this._dragAndDropHelper); | ||
386 | this._dragAndDropHelper = null; | ||
387 | this._deleteHelper = false; | ||
388 | } | ||
389 | } | ||
390 | |||
391 | } | ||
354 | } | 392 | } |
355 | }, | 393 | }, |
356 | /* === END: Draw cycle === */ | 394 | /* === END: Draw cycle === */ |
@@ -563,7 +601,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
563 | // this._firstTimeLoaded = true; | 601 | // this._firstTimeLoaded = true; |
564 | this.end_hottext.value = 25; | 602 | this.end_hottext.value = 25; |
565 | this.updateTrackContainerWidth(); | 603 | this.updateTrackContainerWidth(); |
566 | 604 | this.masterDuration = 0; | |
567 | // Clear the repetitions | 605 | // Clear the repetitions |
568 | if (this.arrLayers.length > 0) { | 606 | if (this.arrLayers.length > 0) { |
569 | this.arrLayers = []; | 607 | this.arrLayers = []; |
@@ -702,41 +740,42 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
702 | 740 | ||
703 | createNewLayer:{ | 741 | createNewLayer:{ |
704 | value:function (object) { | 742 | value:function (object) { |
705 | var hashVariable = 0; | 743 | var hashVariable = 0, |
706 | 744 | newLayerName = "", | |
707 | var newLayerName = "", | 745 | thingToPush = this.createLayerTemplate(), |
708 | thingToPush = this.createLayerTemplate(), | 746 | myIndex = 0, |
709 | myIndex = 0; | 747 | i = 0, |
748 | arrLayersLength = this.arrLayers.length; | ||
710 | 749 | ||
711 | this.currentLayerNumber = this.currentLayerNumber + 1; | 750 | this.currentLayerNumber = this.currentLayerNumber + 1; |
712 | newLayerName = "Layer " + this.currentLayerNumber; | 751 | newLayerName = "Layer " + this.currentLayerNumber; |
713 | thingToPush.layerData.layerName = newLayerName; | 752 | thingToPush.layerData.layerName = newLayerName; |
714 | thingToPush.layerData.layerID = this.currentLayerNumber; | 753 | thingToPush.layerData.layerID = this.currentLayerNumber; |
715 | thingToPush.parentElement = this.application.ninja.currentSelectedContainer; | 754 | thingToPush.parentElement = this.application.ninja.currentSelectedContainer; |
716 | thingToPush.layerData.isSelected = true; | 755 | thingToPush.layerData.isSelected = true; |
717 | thingToPush.layerData._isFirstDraw = true; | 756 | thingToPush.layerData._isFirstDraw = true; |
718 | thingToPush.layerData.created = true; | 757 | thingToPush.layerData.created = true; |
758 | |||
759 | for (i = 0; i < this.arrLayersLength; i++) { | ||
760 | this.arrLayers[i].layerData.isSelected = false; | ||
761 | this.arrLayers[i].layerData._isFirstDraw = false; | ||
762 | } | ||
719 | 763 | ||
720 | for (var i = 0; i < this.arrLayers.length; i++) { | 764 | if (this.layerRepetition.selectedIndexes) { |
721 | this.arrLayers[i].layerData.isSelected = false; | 765 | // There is a selected layer, so we need to splice the new layer on top of it. |
722 | this.arrLayers[i].layerData._isFirstDraw = false; | 766 | myIndex = this.layerRepetition.selectedIndexes[0]; |
723 | } | 767 | thingToPush.layerData.layerPosition = myIndex; |
768 | thingToPush.layerData.trackPosition = myIndex; | ||
769 | this.arrLayers.splice(myIndex, 0, thingToPush); | ||
724 | 770 | ||
725 | if (this.layerRepetition.selectedIndexes) { | 771 | } else { |
726 | // There is a selected layer, so we need to splice the new layer on top of it. | 772 | thingToPush.layerData.layerPosition = myIndex; |
727 | myIndex = this.layerRepetition.selectedIndexes[0]; | 773 | this.arrLayers.splice(myIndex, 0, thingToPush); |
728 | thingToPush.layerData.layerPosition = myIndex; | ||
729 | thingToPush.layerData.trackPosition = myIndex; | ||
730 | this.arrLayers.splice(myIndex, 0, thingToPush); | ||
731 | 774 | ||
732 | } else { | 775 | } |
733 | thingToPush.layerData.layerPosition = myIndex; | ||
734 | this.arrLayers.splice(myIndex, 0, thingToPush); | ||
735 | 776 | ||
736 | } | 777 | this.selectLayer(myIndex); |
737 | 778 | ||
738 | this.selectLayer(myIndex); | ||
739 | // } | ||
740 | } | 779 | } |
741 | }, | 780 | }, |
742 | 781 | ||
@@ -1039,6 +1078,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1039 | // Get the offset | 1078 | // Get the offset |
1040 | var findYOffset = function(obj) { | 1079 | var findYOffset = function(obj) { |
1041 | var curleft = curtop = 0; | 1080 | var curleft = curtop = 0; |
1081 | |||
1042 | if (obj.offsetParent) { | 1082 | if (obj.offsetParent) { |
1043 | do { | 1083 | do { |
1044 | curleft += obj.offsetLeft; | 1084 | curleft += obj.offsetLeft; |
@@ -1050,37 +1090,44 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1050 | } | 1090 | } |
1051 | this._dragAndDropHelperOffset = findYOffset(this.container_layers); | 1091 | this._dragAndDropHelperOffset = findYOffset(this.container_layers); |
1052 | this._appendHelper = true; | 1092 | this._appendHelper = true; |
1053 | // this.container_layers.appendChild(this._dragAndDropHelper); | 1093 | this._deleteHelper = false; |
1054 | } | 1094 | } |
1055 | }, | 1095 | }, |
1056 | handleLayerDragover: { | 1096 | handleLayerDragover: { |
1057 | value: function(event) { | 1097 | value: function(event) { |
1058 | var currPos = 0; | 1098 | var currPos = 0, |
1059 | currPos = event.y - this._dragAndDropHelperOffset -28; | 1099 | myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop; |
1100 | if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) { | ||
1101 | this._scrollTracks = (this.user_layers.scrollTop - 10) | ||
1102 | } | ||
1103 | if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) { | ||
1104 | this._scrollTracks = (this.user_layers.scrollTop - 20) | ||
1105 | } | ||
1106 | if ((myScrollTest > (this.user_layers.clientHeight + 10))) { | ||
1107 | this._scrollTracks = (this.user_layers.scrollTop + 10) | ||
1108 | } | ||
1109 | if ((myScrollTest > (this.user_layers.clientHeight + 20))) { | ||
1110 | this._scrollTracks = (this.user_layers.scrollTop + 20) | ||
1111 | |||
1112 | } | ||
1113 | currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28; | ||
1060 | this._dragAndDropHelperCoords = currPos + "px"; | 1114 | this._dragAndDropHelperCoords = currPos + "px"; |
1061 | this.needsDraw = true; | 1115 | this.needsDraw = true; |
1062 | } | 1116 | } |
1063 | }, | 1117 | }, |
1064 | handleLayerDragEnd : { | 1118 | handleLayerDragEnd : { |
1065 | value: function(event) { | 1119 | value: function(event) { |