diff options
-rwxr-xr-x | js/controllers/elements/element-controller.js | 22 | ||||
-rwxr-xr-x | js/mediators/element-mediator.js | 4 | ||||
-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 |
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 |