aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js5
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html4
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js122
-rw-r--r--js/panels/Timeline/Style.reel/Style.js25
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js3
5 files changed, 121 insertions, 38 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index c8255cc0..f450dd8a 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -60,6 +60,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
60 if(this.isSelected){ 60 if(this.isSelected){
61 this.element.classList.add("keyframeSelected"); 61 this.element.classList.add("keyframeSelected");
62 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty; 62 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
63 console.log(this.application.ninja.timeline.selectedStyle)
63 }else{ 64 }else{
64 this.element.classList.remove("keyframeSelected"); 65 this.element.classList.remove("keyframeSelected");
65 this.application.ninja.timeline.selectedStyle = !(this.parentComponent.parentComponent.parentComponent.trackEditorProperty); 66 this.application.ninja.timeline.selectedStyle = !(this.parentComponent.parentComponent.parentComponent.trackEditorProperty);
@@ -70,17 +71,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
70 71
71 deselectKeyframe:{ 72 deselectKeyframe:{
72 value:function(){ 73 value:function(){
73 debugger;
74 this.isSelected=false; 74 this.isSelected=false;
75 this.element.style.left = (this.position - 5) + "px"; 75 this.element.style.left = (this.position - 5) + "px";
76 this.application.ninja.timeline.selectedStyle = !(this.parentComponent.parentComponent.parentComponent.trackEditorProperty)
76 } 77 }
77 }, 78 },
78 79
79 selectKeyframe:{ 80 selectKeyframe:{
80 value:function(){ 81 value:function(){
81 debugger;
82 this.isSelected=true; 82 this.isSelected=true;
83 this.element.style.left = (this.position - 6) + "px"; 83 this.element.style.left = (this.position - 6) + "px";
84 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty
84 this.parentComponent.selectTween(); 85 this.parentComponent.selectTween();
85 } 86 }
86 }, 87 },
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index fe3f49d2..3648cbbb 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -111,9 +111,9 @@
111 "boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener", 111 "boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener",
112 "oneway" : false 112 "oneway" : false
113 }, 113 },
114 "abcelement" : { 114 "colorelement" : {
115 "boundObject" : {"@": "repetition1"}, 115 "boundObject" : {"@": "repetition1"},
116 "boundObjectPropertyPath" : "objectAtCurrentIteration.abcelement", 116 "boundObjectPropertyPath" : "objectAtCurrentIteration.colorelement",
117 "oneway" : false 117 "oneway" : false
118 } 118 }
119 } 119 }
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 23ba1ef9..629b118c 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -654,7 +654,7 @@ var Layer = exports.Layer = Montage.create(Component, {
654 newStyle.editorValue = ""; 654 newStyle.editorValue = "";
655 newStyle.ruleTweener = false; 655 newStyle.ruleTweener = false;
656 newStyle.isSelected = false; 656 newStyle.isSelected = false;
657 newStyle.abcelement = ""; 657 newStyle.colorelement = "";
658 this.arrLayerStyles.push(newStyle); 658 this.arrLayerStyles.push(newStyle);
659 659
660 // Set up the event info and dispatch the event 660 // Set up the event info and dispatch the event
@@ -920,7 +920,7 @@ var Layer = exports.Layer = Montage.create(Component, {
920 if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){ 920 if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){
921 if(!event.wasSetByCode) { 921 if(!event.wasSetByCode) {
922 if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; 922 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
923 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "pi", prevPosition); 923 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition);
924 this.savedPosition = null; 924 this.savedPosition = null;
925 } 925 }
926 926
@@ -935,7 +935,7 @@ var Layer = exports.Layer = Montage.create(Component, {
935 if(!event.wasSetByCode) { 935 if(!event.wasSetByCode) {
936 if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; 936 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
937 937
938 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "pi", prevPosition); 938 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition);
939 this.savedPosition = null; 939 this.savedPosition = null;
940 } 940 }
941 } 941 }
@@ -949,7 +949,7 @@ var Layer = exports.Layer = Montage.create(Component, {
949 if(!event.wasSetByCode) { 949 if(!event.wasSetByCode) {
950 if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; 950 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
951 951
952 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "pi", prevPosition); 952 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition);
953 this.savedPosition = null; 953 this.savedPosition = null;
954 } 954 }
955 } 955 }
@@ -963,7 +963,7 @@ var Layer = exports.Layer = Montage.create(Component, {
963 if(!event.wasSetByCode) { 963 if(!event.wasSetByCode) {
964 if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; 964 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
965 965
966 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "pi", prevPosition); 966 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline", prevPosition);
967 this.savedPosition = null; 967 this.savedPosition = null;
968 } 968 }
969 } 969 }
@@ -972,10 +972,11 @@ var Layer = exports.Layer = Montage.create(Component, {
972 972
973 handleLeftChanging: { 973 handleLeftChanging: {
974 value: function(event) { 974 value: function(event) {
975
975 if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){ 976 if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){
976 if(!event.wasSetByCode) { 977 if(!event.wasSetByCode) {
977 if(!this.savedPosition) this.savedPosition = this.leftPosition; 978 if(!this.savedPosition) this.savedPosition = this.leftPosition;
978 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "pi"); 979 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "timeline");
979 } 980 }
980 } 981 }
981 982
@@ -987,7 +988,7 @@ var Layer = exports.Layer = Montage.create(Component, {
987 if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){ 988 if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){
988 if(!event.wasSetByCode) { 989 if(!event.wasSetByCode) {
989 if(!this.savedPosition) this.savedPosition = this.topPosition; 990 if(!this.savedPosition) this.savedPosition = this.topPosition;
990 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "pi"); 991 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "timeline");
991 } 992 }
992 } 993 }
993 994
@@ -999,7 +1000,7 @@ var Layer = exports.Layer = Montage.create(Component, {
999 if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){ 1000 if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){
1000 if(!event.wasSetByCode) { 1001 if(!event.wasSetByCode) {
1001 if(!this.savedPosition) this.savedPosition = this.dtextScaleX; 1002 if(!this.savedPosition) this.savedPosition = this.dtextScaleX;
1002 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "pi"); 1003 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "timeline");
1003 } 1004 }
1004 } 1005 }
1005 1006
@@ -1011,7 +1012,7 @@ var Layer = exports.Layer = Montage.create(Component, {
1011 if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){ 1012 if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){
1012 if(!event.wasSetByCode) { 1013 if(!event.wasSetByCode) {
1013 if(!this.savedPosition) this.savedPosition = this.dtextScaleY; 1014 if(!this.savedPosition) this.savedPosition = this.dtextScaleY;
1014 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "pi"); 1015 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "timeline");
1015 } 1016 }
1016 } 1017 }
1017 1018
@@ -1022,33 +1023,110 @@ var Layer = exports.Layer = Montage.create(Component, {
1022 handleElementChange:{ 1023 handleElementChange:{
1023 value:function(event){ 1024 value:function(event){
1024 var el =this.layerData.stageElement; 1025 var el =this.layerData.stageElement;
1025 var length = this.arrLayerStyles.length , i; 1026 var length = this.arrLayerStyles.length , i , k=0;
1026 1027
1027 this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left")); 1028 this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left"));
1028 this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top")); 1029 this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top"));
1029 this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height")); 1030 this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height"));
1030 this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width")); 1031 this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width"));
1031 1032
1033
1032 for(i=0; i<length; i++){ 1034 for(i=0; i<length; i++){
1033 if(event.detail.data.prop === "background-color"){ 1035 if (event.detail.data.prop === "color"){
1034 var currentValue = ElementsMediator.getColor(this.layerData.stageElement,true); 1036 var currentValue1 = ElementsMediator.getColor(this.layerData.stageElement,event.detail.data.isFill,event.detail.data.borderSide);
1035 this.arrLayerStyles[0].abcelement.color(currentValue.colorMode, currentValue.color); 1037 if(event.detail.data.isFill){
1038 while(k <length){
1039 if(this.arrLayerStyles[k].editorProperty === "background-color"){
1040 this.arrLayerStyles[k].colorelement.color(currentValue1.colorMode, currentValue1.color);
1041 this.application.ninja.timeline.selectedStyle = this.arrLayerStyles[k].editorProperty;
1042 break;
1043 }
1044 k++;
1045 }
1046 }else if (event.detail.data.borderSide === "bottom"){
1047 k=0;
1048 while(k <length){
1049 if(this.arrLayerStyles[k].editorProperty === "bottom-border-color"){
1050