aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html40
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js113
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css9
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/scss/.sass-cache/a26ed2cbe268f8c721d1b1d8dfa075c8c5b47e72/PropertyTrack.scsscbin0 -> 5151 bytes
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss6
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html9
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js11
7 files changed, 176 insertions, 12 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html
index a4b598c5..40834466 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html
@@ -13,16 +13,50 @@
13 "owner": { 13 "owner": {
14 "prototype": "js/panels/Timeline/PropertyTrack.reel", 14 "prototype": "js/panels/Timeline/PropertyTrack.reel",
15 "properties": { 15 "properties": {
16 "element": {"#": "property-track"} 16 "element": {"#": "property-track"},
17 "propTweenRepetition" : {"@" : "propTweenRepetition"},
18 "propTween": {"@" : "propTween"}
17 } 19 }
18 } 20 },
21
22 "propTween" : {
23 "prototype" : "js/panels/timeline/Tween.reel",
24 "properties" : {
25 "element":{"#": "prop_track_lane"}
26 },
27 "bindings" : {
28 "tweenData" : {
29 "boundObject" : {"@": "propTweenRepetition"},
30 "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenData",
31 "oneway" : false
32 }
33 }
34 },
19 35
36 "propTweenRepetition": {
37 "prototype": "montage/ui/repetition.reel",
38 "properties": {
39 "element": {"#": "prop_track_lanes"},
40 "isSelectionEnabled" : false
41 },
42 "bindings": {
43 "objects": {
44 "boundObject": {"@": "owner"},
45 "boundObjectPropertyPath": "propTweens",
46 "oneway": false
47 }
48 }
49 }
20 } 50 }
21 </script> 51 </script>
22 </head> 52 </head>
23 <body> 53 <body>
24 54
25 <div data-montage-id="property-track" class="timeline-track"></div> 55 <div data-montage-id="property-track" class="timeline-track">
56 <div data-montage-id="prop_track_lanes" class="prop-track collapsible-content collapsible-collapsed">
57 <div data-montage-id="prop_track_lane"></div>
58 </div>
59 </div>
26 60
27 </body> 61 </body>
28</html> \ No newline at end of file 62</html> \ No newline at end of file
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 175b77f9..8f7745e5 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -15,6 +15,119 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
15 15
16 prepareForDraw:{ 16 prepareForDraw:{
17 value:function(){ 17 value:function(){
18 this.element.addEventListener("click", this, false);
19 }
20 },
21
22 draw:{
23 value:function(){
24
25 }
26 },
27
28 _propTweenRepetition:{
29 value:null
30 },
31
32 propTweenRepetition:{
33 serializable:true,
34 get:function () {
35 return this._propTweenRepetition;
36 },
37 set:function (newVal) {
38 this._propTweenRepetition = newVal;
39 }
40 },
41
42 _propTweens:{
43 value:[]
44 },
45
46 propTweens:{
47 serializable:true,
48 get:function () {
49 return this._propTweens;
50 },
51 set:function (newVal) {
52 this._propTweens = newVal;
53 }
54 },
55
56 nextKeyframe:{
57 value:1
58 },
59
60 handleClick:{
61 value:function(ev){
62 var parentTrackID = this.parentComponent.parentComponent.parentComponent.trackID;
63 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(parentTrackID);
64 //console.log(this.application.ninja.timeline.arrLayers[selectedIndex].layerData);
65 this.application.ninja.timeline.selectLayer(selectedIndex, true);
66
67 if (ev.shiftKey) {
68 if (this.propTweens.length < 1) {
69 this.insertPropTween(0);
70 this.addPropAnimationRuleToElement(ev);
71 this.updatePropKeyframeRule();
72 } else {
73 this.handleNewPropTween(ev);
74 this.updatePropKeyframeRule();
75 }
76 }
77 }
78 },
79
80 handleNewPropTween:{
81 value:function(ev){
82 this.insertPropTween(ev.offsetX);
83 }
84 },
85
86 insertPropTween:{
87 value:function(clickPos){
88 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
89 var currentMillisec = currentMillisecPerPixel * clickPos;
90
91 var newTween = {};
92 newTween.tweenData = {};
93
94 if (clickPos == 0) {
95 newTween.tweenData.spanWidth = 0;
96 newTween.tweenData.keyFramePosition = 0;
97 newTween.tweenData.keyFrameMillisec = 0;
98 newTween.tweenData.tweenID = 0;
99 newTween.tweenData.spanPosition = 0;
100 newTween.tweenData.tweenedProperties = [];
101
102 this.propTweens.push(newTween);
103
104 } else {
105 newTween.tweenData.spanWidth = clickPos - this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition;
106 newTween.tweenData.keyFramePosition = clickPos;
107 newTween.tweenData.keyFrameMillisec = currentMillisec;
108 newTween.tweenData.tweenID = this.nextKeyframe;
109 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
110 newTween.tweenData.tweenedProperties = [];
111
112 this.propTweens.push(newTween);
113
114 this.nextKeyframe += 1;
115 }
116
117 this.application.ninja.documentController.activeDocument.needsSave = true;
118 }
119 },
120
121 updatePropKeyframeRule:{
122 value:function(){
123
124 }
125 },
126
127 addPropAnimationRuleToElement:{
128 value:function(tweenEvent){
129 console.log("SECOND PROP TWEEN ADDING at " + tweenEvent.offsetX);
130 this.insertPropTween(tweenEvent.offsetX);
18 131
19 } 132 }
20 } 133 }
diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css
index cb119a14..ddcc536e 100644
--- a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css
+++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css
@@ -9,11 +9,18 @@
9/* line 19, ../scss/PropertyTrack.scss */ 9/* line 19, ../scss/PropertyTrack.scss */
10.content-main .collapsible-content .timeline-track { 10.content-main .collapsible-content .timeline-track {
11 height: 20px; 11 height: 20px;
12 padding-top: 2px;
12 border-bottom: 1px solid #505050; 13 border-bottom: 1px solid #505050;
13 background-image: url("../images/gridline.jpg"); 14 background-image: url("../images/gridline.jpg");
14} 15}
15 16
16/* line 26, ../scss/PropertyTrack.scss */ 17/* line 27, ../scss/PropertyTrack.scss */
17.timeline-track .content-main { 18.timeline-track .content-main {
18 background-color: #474747; 19 background-color: #474747;
19} 20}