aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xjs/controllers/elements/element-controller.js22
-rwxr-xr-xjs/mediators/element-mediator.js4
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js65
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css75
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss5
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js885
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js16
-rwxr-xr-xjs/panels/properties.reel/properties.js5
8 files changed, 574 insertions, 503 deletions
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 20225c61..675176e9 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -11,13 +11,32 @@ exports.ElementController = Montage.create(Component, {
11 11
12 addElement: { 12 addElement: {
13 value: function(el, styles) { 13 value: function(el, styles) {
14 // Updated to use new methods in TimelinePanel. JR.
15 var insertionIndex = this.application.ninja.timeline.getInsertionIndex();
16 if (insertionIndex === false) {
17 this.application.ninja.currentSelectedContainer.appendChild(el);
18 } else {
19 if (insertionIndex === 0) {
20 this.application.ninja.currentSelectedContainer.appendChild(el);
21 } else {
22 var element = this.application.ninja.timeline.arrLayers[insertionIndex].layerData.stageElement;
23 element.parentNode.insertBefore(el, element.nextSibling);
24 }
25 }
26
27 if(styles) {
28 this.application.ninja.stylesController.setElementStyles(el, styles);
29 }
30
31 /*
32 // Old methods. Kept for reference. Delete if not needed. JR.
14 if(this.application.ninja.timeline.currentLayerSelected) { 33 if(this.application.ninja.timeline.currentLayerSelected) {
15 var selectedLayerIndex = this.application.ninja.timeline.getLayerIndexByID(this.application.ninja.timeline.currentLayerSelected.layerData.layerID); 34 var selectedLayerIndex = this.application.ninja.timeline.getLayerIndexByID(this.application.ninja.timeline.currentLayerSelected.layerData.layerID);
16 35
17 if(selectedLayerIndex === 0) { 36 if(selectedLayerIndex === 0) {
18 this.application.ninja.currentSelectedContainer.appendChild(el); 37 this.application.ninja.currentSelectedContainer.appendChild(el);
19 } else { 38 } else {
20 var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.elementsList[0]; 39 var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.stageElement;
21 element.parentNode.insertBefore(el, element.nextSibling); 40 element.parentNode.insertBefore(el, element.nextSibling);
22 } 41 }
23 } else { 42 } else {
@@ -27,6 +46,7 @@ exports.ElementController = Montage.create(Component, {
27 if(styles) { 46 if(styles) {
28 this.application.ninja.stylesController.setElementStyles(el, styles); 47 this.application.ninja.stylesController.setElementStyles(el, styles);
29 } 48 }
49 */
30 } 50 }
31 }, 51 },
32 52
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 b0f6d220..4fb3e43c 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;
@@ -485,19 +500,18 @@ var Layer = exports.Layer = Montage.create(Component, {
485 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); 500 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
486 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); 501 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
487 this.element.addEventListener("drop", this.handleDrop.bind(this), false); 502 this.element.addEventListener("drop", this.handleDrop.bind(this), false);
488
489 this.eventManager.addEventListener("updatedID", this, false);
490
491
492
493 } 503 }
494 }, 504 },
495 draw: { 505 draw: {
496 value: function() { 506 value: function() {
497 if (this.isSelected) { 507 var boolHasClass = this.element.classList.contains("layerSelected");
498 this.element.classList.add("selected"); 508 if (this.isSelected && !boolHasClass) {
499 } else { 509 //console.log('Layer.draw, adding selection for layer ', this.layerName)
500 this.element.classList.remove("selected"); 510 this.element.classList.add("layerSelected");
511 }
512 if (!this.isSelected && boolHasClass) {
513 //console.log('Layer.draw, removing selection for layer ', this.layerName)
514 this.element.classList.remove("layerSelected");
501 } 515 }
502 } 516 }
503 }, 517 },
@@ -505,14 +519,6 @@ var Layer = exports.Layer = Montage.create(Component, {
505 value: function() { 519 value: function() {
506 // console.log("Layer.didDraw: Layer "+ this.layerID ); 520 // console.log("Layer.didDraw: Layer "+ this.layerID );
507 if (this._isFirstDraw === true) { 521 if (this._isFirstDraw === true) {
508 if (this.isSelected === true) {
509 if (this.application.ninja.currentDocument._uuid === this._docUUID) {
510 // Once we're done drawing the first time we need to tell the TimelinePanel if
511 // this layer is supposed to be selected.
512 //console.log('layerName ' + this.layerName);
513 this.parentComponent.parentComponent.selectedLayerID = this.layerID;
514 }
515 }
516 this._isFirstDraw = false; 522 this._isFirstDraw = false;
517 this.layerData._isFirstDraw = false; 523 this.layerData._isFirstDraw = false;
518 524
@@ -520,7 +526,6 @@ var Layer = exports.Layer = Montage.create(Component, {
520 this.mainCollapser.myContent.style.height = "auto"; 526 this.mainCollapser.myContent.style.height = "auto";
521 this.mainCollapser.myContent.classList.remove(this.mainCollapser.collapsedClass); 527 this.mainCollapser.myContent.classList.remove(this.mainCollapser.collapsedClass);
522 this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass); 528 this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass);
523
524 } 529 }
525 if (this.isPositionCollapsed === false) { 530 if (this.isPositionCollapsed === false) {
526 this.positionCollapser.myContent.style.height = "auto"; 531 this.positionCollapser.myContent.style.height = "auto";
@@ -534,9 +539,6 @@ var Layer = exports.Layer = Montage.create(Component, {
534 } 539 }
535 540
536 } 541 }
537
538
539
540 } 542 }
541 }, 543 },
542 /* End: Draw cycle */ 544 /* End: Draw cycle */
@@ -674,7 +676,7 @@ var Layer = exports.Layer = Montage.create(Component, {
674 this.dynamicLayerName.value = this._layerEditable.value; 676 this.dynamicLayerName.value = this._layerEditable.value;
675 this.needsDraw = true; 677 this.needsDraw = true;
676 this.application.ninja.documentController.activeDocument.needsSave = true; 678 this.application.ninja.documentController.activeDocument.needsSave = true;
677 this.layerData.elementsList[0].setAttribute("id",this.dynamicLayerName.value); 679 this.layerData.stageElement.setAttribute("id",this.dynamicLayerName.value);
678 } 680 }
679 }, 681 },
680 handleAddStyleClick: { 682 handleAddStyleClick: {
@@ -786,7 +788,7 @@ var Layer = exports.Layer = Montage.create(Component, {
786 }, 788 },
787 handleDragstart: { 789 handleDragstart: {
788 value: function(event) { 790 value: function(event) {
789 this.parentComponent.parentComponent.dragLayerID = this.layerID; 791 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
790 event.dataTransfer.setData('Text', 'Layer'); 792 event.dataTransfer.setData('Text', 'Layer');
791 this.parentComponent.parentComponent.draggingType = "layer"; 793 this.parentComponent.parentComponent.draggingType = "layer";
792 } 794 }
@@ -847,23 +849,6 @@ var Layer = exports.Layer = Montage.create(Component, {
847 } 849 }
848 } 850 }
849 }, 851 },
850
851 handleUpdatedID:{
852 value:function(event){
853 var i= this.application.ninja.timeline.arrLayers.length;
854 if(event.detail.id){