diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 329 |
1 files changed, 294 insertions, 35 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index f6e0e252..1ddb3977 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -326,6 +326,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
326 | } | 326 | } |
327 | } | 327 | } |
328 | }, | 328 | }, |
329 | _dragLayerIndexes: { | ||
330 | value: [] | ||
331 | }, | ||
329 | _dropLayerID : { | 332 | _dropLayerID : { |
330 | value: null | 333 | value: null |
331 | }, | 334 | }, |
@@ -337,6 +340,38 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
337 | if (newVal !== this._dropLayerID) { | 340 | if (newVal !== this._dropLayerID) { |
338 | this._dropLayerID = newVal; | 341 | this._dropLayerID = newVal; |
339 | 342 | ||
343 | var dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), | ||
344 | arrDragLayers = [], | ||
345 | i = 0, | ||
346 | dragLayerIndexesLength = this._dragLayerIndexes.length; | ||
347 | |||
348 | // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order? | ||
349 | |||
350 | for (i = 0; i < dragLayerIndexesLength; i++) { | ||
351 | var myDraggingLayer = this.arrLayers[this._dragLayerIndexes[i]]; | ||
352 | arrDragLayers.push(myDraggingLayer); | ||
353 | this.arrLayers.splice(this._dragLayerIndexes[i], 1); | ||
354 | this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); | ||
355 | } | ||
356 | console.log(arrDragLayers); | ||
357 | //this.arrLayers.splice(dropLayerIndex, 0, arrDragLayers); | ||
358 | this.layersDragged = arrDragLayers; | ||
359 | console.log(this.layersDragged); | ||
360 | console.log(this.arrLayers); | ||
361 | this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; | ||
362 | this.cacheTimeline(); | ||
363 | |||
364 | this._dropLayerID = null; | ||
365 | this.dragLayerIndexes = []; | ||
366 | this._dragLayerIndexes = []; | ||
367 | this.lastLayerClicked = 0; | ||
368 | |||
369 | // Sometimes, just to be fun, the drop and dragend events don't fire. | ||
370 | // So just in case, set the draw routine to delete the helper. | ||
371 | this._deleteHelper = true; | ||
372 | this.needsDraw = true; | ||
373 | |||
374 | /* | ||
340 | var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), | 375 | var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), |
341 | dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), | 376 | dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), |
342 | dragLayer = this.arrLayers[dragLayerIndex]; | 377 | dragLayer = this.arrLayers[dragLayerIndex]; |
@@ -355,6 +390,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
355 | // So just in case, set the draw routine to delete the helper. | 390 | // So just in case, set the draw routine to delete the helper. |
356 | this._deleteHelper = true; | 391 | this._deleteHelper = true; |
357 | this.needsDraw = true; | 392 | this.needsDraw = true; |
393 | */ | ||
358 | } | 394 | } |
359 | } | 395 | } |
360 | }, | 396 | }, |
@@ -480,6 +516,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
480 | returnObj.layerData = {}; | 516 | returnObj.layerData = {}; |
481 | returnObj.layerData.layerName = null; | 517 | returnObj.layerData.layerName = null; |
482 | returnObj.layerData.layerID = null; | 518 | returnObj.layerData.layerID = null; |
519 | returnObj.layerData.stageElement = null; | ||
483 | returnObj.layerData.isMainCollapsed = true; | 520 | returnObj.layerData.isMainCollapsed = true; |
484 | returnObj.layerData.isPositionCollapsed = true; | 521 | returnObj.layerData.isPositionCollapsed = true; |
485 | returnObj.layerData.isTransformCollapsed = true; | 522 | returnObj.layerData.isTransformCollapsed = true; |
@@ -584,7 +621,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
584 | // Bind all document-specific events (pass in true to unbind) | 621 | // Bind all document-specific events (pass in true to unbind) |
585 | _bindDocumentEvents : { | 622 | _bindDocumentEvents : { |
586 | value: function(boolUnbind) { | 623 | value: function(boolUnbind) { |
587 | var arrEvents = [ "newLayer", | 624 | var arrEvents = [ "stageElement", |
588 | "deleteLayer", | 625 | "deleteLayer", |
589 | "elementAdded", | 626 | "elementAdded", |
590 | "elementsRemoved", | 627 | "elementsRemoved", |
@@ -895,13 +932,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
895 | } | 932 | } |
896 | }, | 933 | }, |
897 | 934 | ||
898 | handleSelectionChange:{ | 935 | // Event handler for changes in stage selection. |
899 | value:function () { | 936 | handleSelectionChange: { |
937 | value:function (event) { | ||
938 | this.updateLayerSelection(); | ||
939 | /* | ||
900 | var layerIndex, | 940 | var layerIndex, |
901 | i = 0, | 941 | i = 0, |
902 | j = 0, | 942 | j = 0, |
903 | arrLayersLength = this.arrLayers.length, | 943 | arrLayersLength = this.arrLayers.length, |
904 | intNumSelected = this.application.ninja.selectedElements.length, | 944 | intNumSelected = event.detail.elements.length, |
905 | checkIndex = 0; | 945 | checkIndex = 0; |
906 | 946 | ||
907 | //console.log("TimelinePanel.handleSelectionChange, intNumSelected is ", intNumSelected) | 947 | //console.log("TimelinePanel.handleSelectionChange, intNumSelected is ", intNumSelected) |
@@ -919,12 +959,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
919 | // Build an array of indexes of selected layers to give to the selectLayers method | 959 | // Build an array of indexes of selected layers to give to the selectLayers method |
920 | var arrSelectedIndexes = []; | 960 | var arrSelectedIndexes = []; |
921 | //this.currentLayerSelected = false; | 961 | //this.currentLayerSelected = false; |
962 | |||
963 | //console.log(event.detail.elements); | ||
964 | //console.log(this.layerRepetition.childComponents); | ||
965 | |||
922 | for (i = 0; i < intNumSelected; i++) { | 966 | for (i = 0; i < intNumSelected; i++) { |
923 | var currentCheck = this.application.ninja.selectedElements[i].uuid; | 967 | var currentCheck = event.detail.elements[i]; |
924 | //console.log("checking ", currentCheck); | 968 | //console.log("checking ", currentCheck); |
925 | for (j = 0; j < arrLayersLength; j++) { | 969 | for (j = 0; j < arrLayersLength; j++) { |
926 | //console.log(".......... ", this.arrLayers[j].layerData.elementsList[0].uuid) | 970 | //console.log(".......... ", this.arrLayers[j].layerData.stageElement) |
927 | if (currentCheck === this.arrLayers[j].layerData.elementsList[0].uuid) { | 971 | // if (currentCheck === this.arrLayers[j].layerData.elementsList[0].uuid) { |
972 | if (currentCheck === this.arrLayers[j].layerData.stageElement) { | ||
928 | //console.log("...............Yes!") | 973 | //console.log("...............Yes!") |
929 | arrSelectedIndexes.push(j); | 974 | arrSelectedIndexes.push(j); |
930 | } | 975 | } |
@@ -932,17 +977,120 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
932 | } | 977 | } |
933 | this.selectLayers(arrSelectedIndexes); | 978 | this.selectLayers(arrSelectedIndexes); |
934 | } | 979 | } |
980 | */ | ||
935 | } | 981 | } |
936 | }, | 982 | }, |
937 | 983 | ||
984 | // Select the layers whose indexes are passed in as arrSelectedIndexes. | ||
985 | // Pass in an empty array to clear all selections. | ||
938 | selectLayers:{ | 986 | selectLayers:{ |
939 | value:function (arrSelectedIndexes, userSelection) { | 987 | value:function (arrSelectedIndexes) { |
988 | var i = 0, | ||
989 | j = 0, | ||
990 | arrLayersLength = this.arrLayers.length, | ||
991 | arrSelectedIndexesLength = arrSelectedIndexes.length, | ||
992 | currentLayersSelectedLength = this.currentLayersSelected.length, | ||
993 | boolContinue = false, | ||
994 | arrSelectedLayers = false, | ||
995 | arrCurrentElementsSelected = []; | ||
996 | /* | ||
997 | console.log(arrSelectedIndexes); | ||
998 | console.log(this.currentLayersSelected); | ||
999 | // Compare arrSelectedIndexes with this.currentLayersSelected | ||
1000 | // If the items are the same, we do not need to do anything. | ||
1001 | if (arrSelectedIndexesLength !== currentLayersSelectedLength) { | ||
1002 | // Different length in the arrays, we definitely need to continue. | ||
1003 | console.log('diferent length') | ||
1004 | boolContinue = true; | ||
1005 | } else { | ||
1006 | // Check each selected index and see if it's in this.currentLayersSelected | ||
1007 | // If we find one that isn't, we need to continue | ||
1008 | |||
1009 | for (i = 0; i < arrSelectedIndexesLength; i++) { | ||
1010 | console.log('checking for ', arrSelectedIndexes[i]); | ||
1011 | if (this.currentLayersSelected.indexOf(arrSelectedIndexes[i]) === -1) { | ||
1012 | // Ooops, one of them was not found. | ||
1013 | boolContinue = true; | ||
1014 | } | ||
1015 | } | ||
1016 | } | ||
1017 | if (boolContinue === false) { | ||
1018 | console.log('exiting') | ||
1019 | return; | ||
1020 | } | ||
1021 | */ | ||
1022 | |||
940 | 1023 | ||
1024 | // Deselect all layers. | ||
1025 | for (i = 0; i < arrLayersLength; i++) { | ||
1026 | if (this.arrLayers[i].layerData.isSelected === true) { | ||
1027 | this.arrLayers[i].layerData.isSelected = false; | ||
1028 | this.triggerLayerBinding(i); | ||
1029 | } | ||
1030 | } | ||
1031 | if (this.currentLayersSelected !== false) { | ||
1032 | this.currentLayersSelected = false; | ||
1033 | } | ||
1034 | |||
< |