From 7b32af1ebeec13f4186ba0a88a6d33362178d60f Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 10 Jul 2012 09:55:55 -0700 Subject: Adding Zoom Control to Property Tracks Signed-off-by: Kruti Shah --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 42 +++++++++++++++++++++- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +- 2 files changed, 42 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index b2683d30..8c8112ad 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -192,6 +192,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.trackID = this.timelineTrack.trackID; this.animatedElement = this.timelineTrack.animatedElement; this.ninjaStylesContoller = this.application.ninja.stylesController; + this.eventManager.addEventListener("tlZoomSlider", this, false); } }, @@ -274,6 +275,45 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + handleTlZoomSlider: { + value: function(event) { + + var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush; + var i = 0, + tweensLength = this.propTweens.length; + + for (i = 0; i < tweensLength; i++) { + + if (i === 0) { + // Exception: 0th item does not depend on anything + // If 0th tween is draggable, this will need to be fixed. + this.propTweens[i].tweenData.spanWidth=0; + this.propTweens[i].tweenData.spanPosition=0; + this.propTweens[i].tweenData.keyFramePosition=0; + this.propTweens[i].tweenData.keyFrameMillisec=0; + + } else { + var prevKeyFramePosition = this.propTweens[i - 1].tweenData.keyFramePosition, + myObj = {}, + thing = {}; + + currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + currentMilliSec = this.propTweens[i].tweenData.keyFrameMillisec; + clickPos = currentMilliSec / currentMilliSecPerPixel; + + for (thing in this.propTweens[i].tweenData) { + myObj[thing] = this.propTweens[i].tweenData[thing]; + } + myObj.spanWidth = clickPos - prevKeyFramePosition; + myObj.keyFramePosition = clickPos; + myObj.spanPosition = clickPos - (clickPos - prevKeyFramePosition); + + this.propTweens[i].tweenData = myObj; + } + } + } + }, + /* End: Event Handlers */ /* Begin: Controllers */ @@ -303,7 +343,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween; selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.selectLayer(selectedIndex, true); + this.application.ninja.timeline.selectLayers([selectedIndex]); currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); currentMillisec = currentMillisecPerPixel * clickPos; diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index f443553c..c9516d1f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -645,7 +645,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); // this.application.ninja.timeline.selectLayer(selectedIndex, true); // deprecated this.application.ninja.timeline.selectLayers([selectedIndex]); - this.application.ninja.timeine.updateStageSelection(); + this.application.ninja.timeline.updateStageSelection(); if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); -- cgit v1.2.3 From ec15c5ed111f8d2608941c2ce86fb4b6f68117a0 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Thu, 12 Jul 2012 14:21:31 -0700 Subject: Zooming the tweens Signed-off-by: Kruti Shah --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 4 ++++ js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 2 +- js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss | 1 - 3 files changed, 5 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 93b4d67e..88b37563 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -509,6 +509,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, set:function (newVal) { if (newVal !== this._millisecondsOffset) { + + var tempValue = (1/newVal) * 1000000; + newVal = tempValue; + this._millisecondsOffset= newVal; this.drawTimeMarkers(); NJevent('tlZoomSlider',this); diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index f7e9234e..d8293d77 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -132,7 +132,7 @@ POSSIBILITY OF SUCH DAMAGE. .timeline-dnd-helper { -webkit-transform: scale(0.9, 0.9); } /* line 308, ../scss/TimelinePanel.scss */ -.tl_slider { width: 65px; height: 5px; background: none; float: left; margin-left: 5%; visibility: hidden; } +.tl_slider { width: 65px; height: 5px; background: none; float: left; margin-left: 5%;} /* Configuration menu */ /* line 318, ../scss/TimelinePanel.scss */ diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss index 460fe5e3..4fbcc400 100644 --- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss +++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss @@ -335,7 +335,6 @@ POSSIBILITY OF SUCH DAMAGE. background: none; float:left; margin-left: 5%; - visibility: hidden; } /* Configuration menu */ -- cgit v1.2.3