diff options
Diffstat (limited to 'js/panels/Timeline')
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 | } |