aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Layer.reel/Layer.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Layer.reel/Layer.js')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js282
1 files changed, 279 insertions, 3 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 3fc5a3e1..4773489c 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -12,6 +12,7 @@ var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle;
12var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText; 12var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText;
13var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; 13var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
14var nj = require("js/lib/NJUtils").NJUtils; 14var nj = require("js/lib/NJUtils").NJUtils;
15var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
15 16
16var Layer = exports.Layer = Montage.create(Component, { 17var Layer = exports.Layer = Montage.create(Component, {
17 18
@@ -205,7 +206,6 @@ var Layer = exports.Layer = Montage.create(Component, {
205 this._dtextPositionX = value; 206 this._dtextPositionX = value;
206 this.layerData.dtextPositionX = value; 207 this.layerData.dtextPositionX = value;
207 } 208 }
208
209 } 209 }
210 }, 210 },
211 211
@@ -348,6 +348,19 @@ var Layer = exports.Layer = Montage.create(Component, {
348 _layerEditable : { 348 _layerEditable : {
349 value: false 349 value: false
350 }, 350 },
351
352 _dynamicLayerName:{
353 value:true
354 },
355 dynamicLayerName:{
356 serializable:true,
357 get:function () {
358 return this._dynamicLayerName;
359 },
360 set:function (newVal) {
361 this._dynamicLayerName = newVal;
362 }
363 },
351 364
352 // Are the various collapsers collapsed or not 365 // Are the various collapsers collapsed or not
353 _isMainCollapsed : { 366 _isMainCollapsed : {
@@ -530,8 +543,33 @@ var Layer = exports.Layer = Montage.create(Component, {
530 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); 543 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
531 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); 544 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
532 this.element.addEventListener("drop", this.handleDrop.bind(this), false); 545 this.element.addEventListener("drop", this.handleDrop.bind(this), false);
546
547 this.eventManager.addEventListener("elementChange",this,false);
548
549 this.leftControl.identifier = "left";
550 this.leftControl.addEventListener("changing",this,false);
551 this.leftControl.addEventListener("change",this,false);
552
553 this.topControl.identifier = "top";
554 this.topControl.addEventListener("changing",this,false);
555 this.topControl.addEventListener("change",this,false);
556
557 this.widthControl.identifier = "width";
558 this.widthControl.addEventListener("changing",this,false);
559 this.widthControl.addEventListener("change",this,false);
560
561 this.heightControl.identifier = "height";
562 this.heightControl.addEventListener("changing",this,false);
563 this.heightControl.addEventListener("change",this,false);
564
565 el=this.layerData.stageElement;
566 this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left"));
567 this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top"));
568 this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height"));
569 this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width"));
533 } 570 }
534 }, 571 },
572
535 draw: { 573 draw: {
536 value: function() { 574 value: function() {
537 var boolHasClass = this.element.classList.contains("layerSelected"); 575 var boolHasClass = this.element.classList.contains("layerSelected");
@@ -601,7 +639,7 @@ var Layer = exports.Layer = Montage.create(Component, {
601 } 639 }
602 }, 640 },
603 addStyle : { 641 addStyle : {
604 value: function(styleProperty) { 642 value: function(styleProperty, existingRule) {
605 // Add a new style rule. It should be added above the currently selected rule, 643 // Add a new style rule. It should be added above the currently selected rule,
606 // Or at the end, if no rule is selected. 644 // Or at the end, if no rule is selected.
607 645
@@ -630,10 +668,14 @@ var Layer = exports.Layer = Montage.create(Component, {
630 newStyle.editorProperty = styleProperty; 668 newStyle.editorProperty = styleProperty;
631 newEvent.layerEventType = "restoreStyle"; 669 newEvent.layerEventType = "restoreStyle";
632 newEvent.trackEditorProperty = styleProperty; 670 newEvent.trackEditorProperty = styleProperty;
671 if(existingRule){
672 newEvent.existingRule = existingRule;
673 }
633 } 674 }
634 newStyle.editorValue = ""; 675 newStyle.editorValue = "";
635 newStyle.ruleTweener = false; 676 newStyle.ruleTweener = false;
636 newStyle.isSelected = false; 677 newStyle.isSelected = false;
678 newStyle.colorelement = "";
637 this.arrLayerStyles.push(newStyle); 679 this.arrLayerStyles.push(newStyle);
638 this.selectStyle(this.arrLayerStyles.length -1); 680 this.selectStyle(this.arrLayerStyles.length -1);
639 681
@@ -643,6 +685,7 @@ var Layer = exports.Layer = Montage.create(Component, {
643 defaultEventManager.dispatchEvent(newEvent); 685 defaultEventManager.dispatchEvent(newEvent);
644 } 686 }
645 }, 687 },
688
646 deleteStyle : { 689 deleteStyle : {
647 value: function() { 690 value: function() {
648 691
@@ -757,6 +800,7 @@ var Layer = exports.Layer = Montage.create(Component, {
757 this.triggerOutgoingBinding(); 800 this.triggerOutgoingBinding();
758 801
759 this.addStyle(); 802 this.addStyle();
803
760 } 804 }
761 }, 805 },
762 handleDeleteStyleClick: { 806 handleDeleteStyleClick: {
@@ -903,6 +947,238 @@ var Layer = exports.Layer = Montage.create(Component, {
903 return false; 947 return false;
904 } 948 }
905 }, 949 },
950
951 handleLeftChange: {
952 value: function(event) {
953 var prevPosition;
954 if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){
955 if(!event.wasSetByCode) {
956 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
957 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition);
958 this.savedPosition = null;
959 }
960
961 }
962 }
963 },
964
965 handleTopChange: {
966 value: function(event) {
967 var prevPosition;
968 if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){
969 if(!event.wasSetByCode) {
970 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
971
972 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition);
973 this.savedPosition = null;
974 }
975 }
976 }
977 },
978
979 handleWidthChange:{
980 value: function(event) {
981 var prevPosition;
982 if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){
983 if(!event.wasSetByCode) {
984 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
985
986 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition);
987 this.savedPosition = null;
988 }
989 }
990 }
991 },
992
993 handleHeightChange:{
994 value: function(event) {
995 var prevPosition;
996 if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){
997 if(!event.wasSetByCode) {
998 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
999
1000 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline", prevPosition);
1001 this.savedPosition = null;
1002 }
1003 }
1004 }
1005 },
1006
1007 handleLeftChanging: {
1008 value: function(event) {
1009
1010 if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){
1011 if(!event.wasSetByCode) {
1012 if(!this.savedPosition) this.savedPosition = this.leftPosition;
1013 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "timeline");
1014 }
1015 }
1016
1017 }
1018 },
1019
1020 handleTopChanging: {
1021 value: function(event) {
1022 if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){
1023 if(!event.wasSetByCode) {
1024 if(!this.savedPosition) this.savedPosition = this.topPosition;
1025 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "timeline");
1026 }
1027 }
1028
1029 }
1030 },
1031