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.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
5 files changed, 549 insertions, 497 deletions
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){
855 for(var k=0;k<i;k++){
856 if(this.application.ninja.timeline.arrLayers[k].layerData.layerID=== this.application.ninja.timeline.currentLayerSelected.layerData.layerID){
857 this.application.ninja.timeline.currentLayerSelected.layerData.layerName = event.detail.id;
858 this.application.ninja.timeline.triggerLayerBinding(k);
859 this.needsDraw=true;
860 }
861 }
862
863 }
864 }
865 }
866
867 /* End: Logging routines */ 852 /* End: Logging routines */
868 853
869}); 854});
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 3648fda5..788a786e 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -71,26 +71,27 @@
71} 71}
72 72
73/******************************************/ 73/******************************************/
74/* line 77, ../scss/Layer.scss */ 74/* line 78, ../scss/Layer.scss */
75.container-layer { 75.container-layer,
76.container-layer.selected {
76 background-color: #474747; 77 background-color: #474747;
77 color: white; 78 color: white;
78 font-size: 12px; 79 font-size: 12px;
79 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); 80 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
80} 81}
81 82
82/* line 83, ../scss/Layer.scss */ 83/* line 84, ../scss/Layer.scss */
83.selected .container-layer { 84.selected .container-layer {
84 background-color: #474747; 85 background-color: #474747;
85} 86}
86 87
87/* line 86, ../scss/Layer.scss */ 88/* line 87, ../scss/Layer.scss */
88.selected .container-layer .label-layer { 89.selected .container-layer .label-layer {
89 background-color: #b2b2b2; 90 background-color: #b2b2b2;
90 color: #242424; 91 color: #242424;
91} 92}
92 93
93/* line 91, ../scss/Layer.scss */ 94/* line 92, ../scss/Layer.scss */
94.userlayers .collapsible-label { 95.userlayers .collapsible-label {
95 display: block; 96 display: block;
96 height: 21px; 97 height: 21px;
@@ -103,32 +104,32 @@
103 text-overflow: ellipsis; 104 text-overflow: ellipsis;
104} 105}
105 106
106/* line 103, ../scss/Layer.scss */ 107/* line 104, ../scss/Layer.scss */
107.userlayers .layer-tag { 108.userlayers .layer-tag {
108 position: absolute; 109 position: absolute;
109 top: 3px; 110 top: 3px;
110 left: 20px; 111 left: 20px;
111} 112}
112 113
113/* line 110, ../scss/Layer.scss */ 114/* line 111, ../scss/Layer.scss */
114.layerSelected .label-layer { 115.layerSelected .label-layer {
115 background-color: #b2b2b2;