aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rwxr-xr-xjs/controllers/elements/element-controller.js2
-rwxr-xr-xjs/mediators/element-mediator.js4
-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
5 files changed, 322 insertions, 48 deletions
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 20225c61..eecf319e 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -17,7 +17,7 @@ exports.ElementController = Montage.create(Component, {
17 if(selectedLayerIndex === 0) { 17 if(selectedLayerIndex === 0) {
18 this.application.ninja.currentSelectedContainer.appendChild(el); 18 this.application.ninja.currentSelectedContainer.appendChild(el);
19 } else { 19 } else {
20 var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.elementsList[0]; 20 var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.stageElement;
21 element.parentNode.insertBefore(el, element.nextSibling); 21 element.parentNode.insertBefore(el, element.nextSibling);
22 } 22 }
23 } else { 23 } else {
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 06514076..9c8a9ac4 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -524,9 +524,9 @@ exports.ElementMediator = Montage.create(Component, {
524 length = layersDraggedArray.length; 524 length = layersDraggedArray.length;
525 525
526 for(var i=0; documentRoot.children[i]; i++) { 526 for(var i=0; documentRoot.children[i]; i++) {
527 if(documentRoot.children[i] === layerDroppedAfter.layerData.elementsList[0]) { 527 if(documentRoot.children[i] === layerDroppedAfter.layerData.stageElement) {
528 if(length >0){ 528 if(length >0){
529 documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.elementsList[0], documentRoot.children[i]); 529 documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.stageElement, documentRoot.children[i]);
530 } 530 }
531 531
532 /* Will require for Multiple Drag n Drop */ 532 /* Will require for Multiple Drag n Drop */
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