diff options
Diffstat (limited to 'js/panels/Timeline')
4 files changed, 16 insertions, 12 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 5234b43d..1b7132b9 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -185,8 +185,8 @@ | |||
185 | <div class="layer-master">Master Layer | 185 | <div class="layer-master">Master Layer |
186 | <div class="tl-configbutton" data-montage-id="tl-configbutton"> | 186 | <div class="tl-configbutton" data-montage-id="tl-configbutton"> |
187 | <div class="tl-dropdown"> | 187 | <div class="tl-dropdown"> |
188 | <div class="checkable checked" data-montage-id="checkable_relative">Use relative positioning</div> | 188 | <div class="checkable" data-montage-id="checkable_relative">Use relative positioning</div> |
189 | <div class="checkable" data-montage-id="checkable_absolute">Use absolute positioning</div> | 189 | <div class="checkable checked" data-montage-id="checkable_absolute">Use absolute positioning</div> |
190 | <div class="nj-divider divider-horizontal"></div> | 190 | <div class="nj-divider divider-horizontal"></div> |
191 | <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div> | 191 | <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div> |
192 | </div> | 192 | </div> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 7ee0ca16..7fb57396 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -6,10 +6,7 @@ | |||
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage; | 7 | var Montage = require("montage/core/core").Montage; |
8 | var Component = require("montage/ui/component").Component; | 8 | var Component = require("montage/ui/component").Component; |
9 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; | ||
10 | var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; | ||
11 | var nj = require("js/lib/NJUtils").NJUtils; | 9 | var nj = require("js/lib/NJUtils").NJUtils; |
12 | var ElementMediator = require("js/mediators/element-mediator").ElementMediator; | ||
13 | 10 | ||
14 | var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | 11 | var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { |
15 | 12 | ||
@@ -280,6 +277,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
280 | _scrollTracks: { | 277 | _scrollTracks: { |
281 | value: false | 278 | value: false |
282 | }, | 279 | }, |
280 | useAbsolutePosition:{ | ||
281 | value:true | ||
282 | }, | ||
283 | /* === END: Models === */ | 283 | /* === END: Models === */ |
284 | /* === BEGIN: Draw cycle === */ | 284 | /* === BEGIN: Draw cycle === */ |
285 | prepareForDraw:{ | 285 | prepareForDraw:{ |
@@ -1167,7 +1167,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1167 | this.handleCheckableClick(event); | 1167 | this.handleCheckableClick(event); |
1168 | } | 1168 | } |
1169 | this.checkable_absolute.classList.remove("checked"); | 1169 | this.checkable_absolute.classList.remove("checked"); |
1170 | // TODO: Use relative positioning | 1170 | this.useAbsolutePosition = false; |
1171 | } | 1171 | } |
1172 | }, | 1172 | }, |
1173 | handleAbsoluteClick: { | 1173 | handleAbsoluteClick: { |
@@ -1176,7 +1176,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1176 | this.handleCheckableClick(event); | 1176 | this.handleCheckableClick(event); |
1177 | } | 1177 | } |
1178 | this.checkable_relative.classList.remove("checked"); | 1178 | this.checkable_relative.classList.remove("checked"); |
1179 | // TODO: Use absolute positioning. | 1179 | this.useAbsolutePosition = true; |
1180 | } | 1180 | } |
1181 | }, | 1181 | }, |
1182 | handleCheckableClick: { | 1182 | handleCheckableClick: { |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 145b03ef..aacddd3b 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -548,6 +548,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
548 | handleNewTween:{ | 548 | handleNewTween:{ |
549 | value:function (ev) { | 549 | value:function (ev) { |
550 | if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { | 550 | if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { |
551 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | ||
552 | this.application.ninja.timeline.selectLayer(selectedIndex, false); | ||
551 | this.insertTween(ev.offsetX); | 553 | this.insertTween(ev.offsetX); |
552 | } else { | 554 | } else { |
553 | this.splitTween(ev); | 555 | this.splitTween(ev); |
@@ -557,6 +559,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
557 | 559 | ||
558 | insertTween:{ | 560 | insertTween:{ |
559 | value:function (clickPos) { | 561 | value:function (clickPos) { |
562 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | ||
563 | this.application.ninja.timeline.selectLayer(selectedIndex, true); | ||
564 | |||
560 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | 565 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); |
561 | var currentMillisec = currentMillisecPerPixel * clickPos; | 566 | var currentMillisec = currentMillisecPerPixel * clickPos; |
562 | this.trackDuration = currentMillisec; | 567 | this.trackDuration = currentMillisec; |
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index e4fb42b3..7dcd397c 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js | |||
@@ -6,7 +6,6 @@ | |||
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage; | 7 | var Montage = require("montage/core/core").Montage; |
8 | var Component = require("montage/ui/component").Component; | 8 | var Component = require("montage/ui/component").Component; |
9 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | ||
10 | 9 | ||
11 | var Tween = exports.Tween = Montage.create(Component, { | 10 | var Tween = exports.Tween = Montage.create(Component, { |
12 | 11 | ||
@@ -186,7 +185,7 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
186 | 185 | ||
187 | setAbsoluteTweenProperties:{ | 186 | setAbsoluteTweenProperties:{ |
188 | value:function (eventDetail) { | 187 | value:function (eventDetail) { |
189 | console.log(eventDetail); | 188 | //console.log(eventDetail); |
190 | if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) { | 189 | if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) { |
191 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; | 190 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; |
192 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; | 191 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; |
@@ -200,7 +199,7 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
200 | 199 | ||
201 | setRelativeTweenProperties:{ | 200 | setRelativeTweenProperties:{ |
202 | value:function(eventDetail){ | 201 | value:function(eventDetail){ |
203 | 202 | //console.log(eventDetail); | |
204 | } | 203 | } |
205 | }, | 204 | }, |
206 | 205 | ||
@@ -228,8 +227,8 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
228 | var currentTop = this.tweenedProperties["top"] + "px"; | 227 | var currentTop = this.tweenedProperties["top"] + "px"; |
229 | var currentLeft = this.tweenedProperties["left"] + "px"; | 228 | var currentLeft = this.tweenedProperties["left"] + "px"; |
230 | 229 | ||
231 | ElementsMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); | 230 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); |
232 | ElementsMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); | 231 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); |
233 | 232 | ||
234 | } | 233 | } |
235 | }, | 234 | }, |