diff options
Diffstat (limited to 'js/panels/Timeline/Layer.reel/Layer.js')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 65 |
1 files changed, 25 insertions, 40 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 | }); |