diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 65 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/css/Layer.css | 75 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 5 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 885 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 16 | ||||
-rwxr-xr-x | js/panels/properties.reel/properties.js | 5 |
6 files changed, 551 insertions, 500 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 |