aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js19
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js329
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js16
3 files changed, 319 insertions, 45 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 418d2226..4a737490 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -133,6 +133,20 @@ var Layer = exports.Layer = Montage.create(Component, {
133 } 133 }
134 }, 134 },
135 135
136 _stageElement: {
137 value: null
138 },
139
140 stageElement: {
141 get: function() {
142 return this._stageElement;
143 },
144 set: function(newVal) {
145 this._stageElement = newVal;
146 this.layerData.stageElement = newVal;
147 }
148 },
149
136 150
137 _elementsList : { 151 _elementsList : {
138 value: [] 152 value: []
@@ -398,6 +412,7 @@ var Layer = exports.Layer = Montage.create(Component, {
398 412
399 this.layerName = this.layerData.layerName; 413 this.layerName = this.layerData.layerName;
400 this.layerID = this.layerData.layerID; 414 this.layerID = this.layerData.layerID;
415 this.stageElement = this.layerData.stageElement
401 this.arrLayerStyles = this.layerData.arrLayerStyles; 416 this.arrLayerStyles = this.layerData.arrLayerStyles;
402 this.isMainCollapsed = this.layerData.isMainCollapsed; 417 this.isMainCollapsed = this.layerData.isMainCollapsed;
403 this.isPositionCollapsed = this.layerData.isPositionCollapsed; 418 this.isPositionCollapsed = this.layerData.isPositionCollapsed;
@@ -678,7 +693,7 @@ var Layer = exports.Layer = Montage.create(Component, {
678 this.dynamicLayerName.value = this._layerEditable.value; 693 this.dynamicLayerName.value = this._layerEditable.value;
679 this.needsDraw = true; 694 this.needsDraw = true;
680 this.application.ninja.documentController.activeDocument.needsSave = true; 695 this.application.ninja.documentController.activeDocument.needsSave = true;
681 this.layerData.elementsList[0].setAttribute("id",this.dynamicLayerName.value); 696 this.layerData.stageElement.setAttribute("id",this.dynamicLayerName.value);
682 } 697 }
683 }, 698 },
684 handleAddStyleClick: { 699 handleAddStyleClick: {
@@ -790,7 +805,7 @@ var Layer = exports.Layer = Montage.create(Component, {
790 }, 805 },
791 handleDragstart: { 806 handleDragstart: {
792 value: function(event) { 807 value: function(event) {
793 this.parentComponent.parentComponent.dragLayerID = this.layerID; 808 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
794 event.dataTransfer.setData('Text', 'Layer'); 809 event.dataTransfer.setData('Text', 'Layer');
795 this.parentComponent.parentComponent.draggingType = "layer"; 810 this.parentComponent.parentComponent.draggingType = "layer";
796 } 811 }
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