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.js29
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html30
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js264
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js.orig1057
-rw-r--r--js/panels/Timeline/Style.reel/Style.html7
-rw-r--r--js/panels/Timeline/Style.reel/Style.js709
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js19
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js3
8 files changed, 1801 insertions, 317 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index b91027b6..f450dd8a 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -28,6 +28,21 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
28 } 28 }
29 }, 29 },
30 30
31 _isSelected:{
32 value:false
33 },
34
35 isSelected:{
36 serializable:true,
37 get:function(){
38 return this._isSelected;
39 },
40 set:function(value){
41 this._isSelected = value;
42 this.needsDraw = true;
43 }
44 },
45
31 prepareForDraw:{ 46 prepareForDraw:{
32 value:function(){ 47 value:function(){
33 this.element.addEventListener("click", this, false); 48 this.element.addEventListener("click", this, false);
@@ -42,21 +57,31 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
42 57
43 draw:{ 58 draw:{
44 value:function(){ 59 value:function(){
60 if(this.isSelected){
61 this.element.classList.add("keyframeSelected");
62 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
63 console.log(this.application.ninja.timeline.selectedStyle)
64 }else{
65 this.element.classList.remove("keyframeSelected");
66 this.application.ninja.timeline.selectedStyle = !(this.parentComponent.parentComponent.parentComponent.trackEditorProperty);
67 }
45 this.element.style.left = (this.position - 5) + "px"; 68 this.element.style.left = (this.position - 5) + "px";
46 } 69 }
47 }, 70 },
48 71
49 deselectKeyframe:{ 72 deselectKeyframe:{
50 value:function(){ 73 value:function(){
51 this.element.classList.remove("keyframeSelected"); 74 this.isSelected=false;
52 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)
53 } 77 }
54 }, 78 },
55 79
56 selectKeyframe:{ 80 selectKeyframe:{
57 value:function(){ 81 value:function(){
58 this.element.classList.add("keyframeSelected"); 82 this.isSelected=true;
59 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
60 this.parentComponent.selectTween(); 85 this.parentComponent.selectTween();
61 } 86 }
62 }, 87 },
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 44022211..3648cbbb 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -22,7 +22,12 @@
22 "positionCollapser" : {"@" : "positionCollapser"}, 22 "positionCollapser" : {"@" : "positionCollapser"},
23 "styleCollapser" : {"@" : "styleCollapser"}, 23 "styleCollapser" : {"@" : "styleCollapser"},
24 "clickerMain" : {"#" : "clicker-main"}, 24 "clickerMain" : {"#" : "clicker-main"},
25 "myLabel" : {"#" : "myLabel"} 25 "myLabel" : {"#" : "myLabel"},
26 "leftControl": {"@" : "dtext_position_x"},
27 "topControl": {"@" : "dtext_position_y"},
28 "widthControl": {"@" : "dtext_scale_x"},
29 "heightControl": {"@" : "dtext_scale_y"},
30 "styleType":{"@" : "style"}
26 } 31 }
27 }, 32 },
28 "dtext1" : { 33 "dtext1" : {
@@ -105,7 +110,12 @@
105 "boundObject" : {"@": "repetition1"}, 110 "boundObject" : {"@": "repetition1"},
106 "boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener", 111 "boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener",
107 "oneway" : false 112 "oneway" : false
108 } 113 },
114 "colorelement" : {
115 "boundObject" : {"@": "repetition1"},
116 "boundObjectPropertyPath" : "objectAtCurrentIteration.colorelement",
117 "oneway" : false
118 }
109 } 119 }
110 }, 120 },
111 "dtext_position_x" : { 121 "dtext_position_x" : {
@@ -148,10 +158,10 @@
148 "prototype": "js/components/hottextunit.reel[HotTextUnit]", 158 "prototype": "js/components/hottextunit.reel[HotTextUnit]",
149 "properties": { 159 "properties": {
150 "element": {"#": "scale-x"}, 160 "element": {"#": "scale-x"},
151 "maxValue" : 100, 161 "maxValue" : 100000,
152 "minValue" : 0, 162 "minValue" : -100000,
153 "acceptableUnits" : "%", 163 "acceptableUnits" : "px",
154 "units" : "%", 164 "units" : "px",
155 "value" : 0 165 "value" : 0
156 }, 166 },
157 "bindings": { 167 "bindings": {
@@ -166,10 +176,10 @@
166 "prototype": "js/components/hottextunit.reel[HotTextUnit]", 176 "prototype": "js/components/hottextunit.reel[HotTextUnit]",
167 "properties": { 177 "properties": {
168 "element": {"#": "scale-y"}, 178 "element": {"#": "scale-y"},
169 "maxValue" : 100, 179 "maxValue" : 100000,
170 "minValue" : 0, 180 "minValue" : -100000,
171 "acceptableUnits" : "%", 181 "acceptableUnits" : "px",
172 "units" : "%", 182 "units" : "px",
173 "value" : 0 183 "value" : 0
174 }, 184 },
175 "bindings": { 185 "bindings": {
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index f81d8b09..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
@@ -543,8 +543,33 @@ var Layer = exports.Layer = Montage.create(Component, {
543 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); 543 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
544 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); 544 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
545 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"));
546 } 570 }
547 }, 571 },
572
548 draw: { 573 draw: {
549 value: function() { 574 value: function() {
550 var boolHasClass = this.element.classList.contains("layerSelected"); 575 var boolHasClass = this.element.classList.contains("layerSelected");
@@ -650,6 +675,7 @@ var Layer = exports.Layer = Montage.create(Component, {
650 newStyle.editorValue = ""; 675 newStyle.editorValue = "";
651 newStyle.ruleTweener = false; 676 newStyle.ruleTweener = false;
652 newStyle.isSelected = false; 677 newStyle.isSelected = false;
678 newStyle.colorelement = "";
653 this.arrLayerStyles.push(newStyle); 679