From d555b8e68bb672be620e15171039ab9ec8f1fabd Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Mon, 26 Mar 2012 11:08:04 -0700 Subject: Timeline : Adding Zoom Slider Signed-off-by: Kruti Shah --- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 19 ++++++ .../Timeline/TimelinePanel.reel/TimelinePanel.js | 30 ++++++++- .../TimelinePanel.reel/css/TimelinePanel.css | 6 ++ js/panels/Timeline/Tween.reel/Tween.js | 75 ++++++++++++++++++++++ 4 files changed, 129 insertions(+), 1 deletion(-) diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 2e0bf7dd..42921a2d 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -119,6 +119,24 @@ } }, + + "timelineZoomSlider":{ + "module":"js/components/slider.reel", + "name":"Slider", + "properties":{ + "element":{"#":"tl_slider"}, + "maxValue" : 10000, + "minValue" : 1000 + }, + "bindings": { + "value": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "millisecondsOffset", + "oneway": false + } + } + }, + "endHottext" : { "module": "js/components/hottextunit.reel", "name": "HotTextUnit", @@ -168,6 +186,7 @@
+
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index bc474a46..1d22c109 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -137,10 +137,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - millisecondsOffset:{ + _millisecondsOffset:{ value:1000 }, + millisecondsOffset:{ + get:function () { + return this._millisecondsOffset; + }, + set:function (newVal) { + if (newVal !== this._millisecondsOffset) { + this._millisecondsOffset= newVal; + this.drawTimeMarkers(); + NJevent('tlZoomSlider',this); + } + } + }, + + tweenarray:{ + value:[], + writable:true + }, + + tempArray:{ + value:[], + writable:true + }, + _masterDuration:{ serializable:true, value:0 @@ -686,6 +709,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { drawTimeMarkers:{ value:function () { this.timeMarkerHolder = document.createElement("div"); + + if(this.time_markers.children[0]){ + this.time_markers.removeChild(this.time_markers.children[0]); + } + this.time_markers.appendChild(this.timeMarkerHolder); var i; var totalMarkers = Math.floor(this.time_markers.offsetWidth / 80); diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 129b9771..21a7535c 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -284,3 +284,9 @@ display: none; box-shadow: rgb(17, 17, 17) 0px 0px 14px inset; } +.tl_slider{ + width: 65px; + height: 5px; + background: none; + margin-left: 25%; +} diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 2b308d9a..e8c7e187 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -44,6 +44,7 @@ var Tween = exports.Tween = Montage.create(Component, { }, set: function(value){ this._spanWidth = value; + this.needsDraw=true; } }, @@ -58,6 +59,7 @@ var Tween = exports.Tween = Montage.create(Component, { }, set:function (value) { this._spanPosition = value; + this.needsDraw=true; } }, @@ -72,6 +74,7 @@ var Tween = exports.Tween = Montage.create(Component, { }, set:function (value) { this._keyFramePosition = value; + this.needsDraw=true; } }, @@ -133,6 +136,12 @@ var Tween = exports.Tween = Montage.create(Component, { } }, + prepareForDraw:{ + value:function(){ + this.eventManager.addEventListener("tlZoomSlider", this, false); + } + }, + draw:{ value:function () { this.element.style.left = this.spanPosition + "px"; @@ -216,6 +225,72 @@ var Tween = exports.Tween = Montage.create(Component, { // deselect the keyframe for this tween this.keyframe.deselectKeyframe(); + } + }, + + handleTlZoomSlider:{ + value:function(event){ + var currentMilliSecPerPixel , currentMilliSec , clickPos,i=0; + + length = this.application.ninja.timeline.tempArray.length; + if(length > 0 && this.application.ninja.timeline.tempArray[length-1]!== this.parentComponent.parentComponent.trackID){ + this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID); + var i = this.application.ninja.timeline.tweenarray.length-1; + for(;this.currentTween = this.application.ninja.timeline.tweenarray[i];i--){ + if(this.application.ninja.timeline.tweenarray[i].tweenID===0){ + this.currentTween.spanWidth=0; + this.currentTween.spanPosition=0; + this.currentTween.keyFramePosition=0; + this.currentTween.keyFrameMillisec=0; + this.needsDraw=true; + }else{ + currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + currentMilliSec = this.currentTween.keyFrameMillisec; + clickPos = currentMilliSec / currentMilliSecPerPixel; + this.currentTween.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[i+1].keyFramePosition; + this.currentTween.keyFramePosition = clickPos; + this.currentTween.spanPosition=clickPos-this.currentTween.spanWidth; + this.needsDraw=true; + } + + } + this.application.ninja.timeline.tweenarray.length=0; + this.application.ninja.timeline.tweenarray.push(this); + }else if(length===0){ + this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID); + this.application.ninja.timeline.tweenarray.push(this); + }else{ + this.application.ninja.timeline.tweenarray.push(this); + } + + var levelNumber = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); + var k = this.application.ninja.timeline.tweenarray.length-1; + if(this.parentComponent.parentComponent.tweens.length === this.application.ninja.timeline.tweenarray.length && levelNumber===0){ + for(;this.currentTween = this.application.ninja.timeline.tweenarray[k];k--){ + if(this.application.ninja.timeline.tweenarray[k].tweenID===0){ + this.currentTween.spanWidth=0; + this.currentTween.spanPosition=0; + this.currentTween.keyFramePosition=0; + this.currentTween.keyFrameMillisec=0; + this.needsDraw=true; + }else{ + currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + currentMilliSec = this.currentTween.keyFrameMillisec; + clickPos = currentMilliSec / currentMilliSecPerPixel; + this.currentTween.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[k+1].keyFramePosition; + this.currentTween.keyFramePosition = clickPos; + this.currentTween.spanPosition=clickPos-this.currentTween.spanWidth; + this.needsDraw=true; + } + + } + this.application.ninja.timeline.tempArray.length=0; + this.application.ninja.timeline.tweenarray.length=0; + } + + + } } + }); -- cgit v1.2.3