From b7402018659cf8058d5646c08b2a916492269e33 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 07:37:17 -0800 Subject: Timeline Reset to clean Master branch. Code scrub. Fresh copy of ninja-internal/master with Timeline folder copied in to resolved merge issues. Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.html | 6 +- js/panels/Timeline/Keyframe.reel/Keyframe.js | 117 ++----------------------- 2 files changed, 11 insertions(+), 112 deletions(-) (limited to 'js/panels/Timeline/Keyframe.reel') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html index bf21994b..72da49d5 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.html +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html @@ -9,8 +9,7 @@ "module": "js/panels/Timeline/Keyframe.reel", "name": "Keyframe", "properties": { - "element": {"#": "keyframespace"}, - "tweenkeyframe": {"#": "tweenkeyframe"} + "element": {"#": "keyframespace"} } } @@ -19,8 +18,7 @@ -
-
+
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index c82a9086..bb2acee0 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -1,6 +1,5 @@ var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; -var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; var Keyframe = exports.Keyframe = Montage.create(Component, { @@ -19,136 +18,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { }, set:function(value){ this._position = value; + this.needsDraw = true; } }, - _id:{ - value:0 - }, - - id:{ - serializable:true, - get:function () { - return this._id; - }, - set:function (value) { - this._id = value; - } - }, - - _timelinePosition:{ - value:0 - }, - - timelinePosition:{ - serializable:true, - get:function () { - return this._timelinePosition; - }, - set:function (value) { - this._timelinePosition = value; - } - }, - - _containingTrack:{ - value:{} - }, - - containingTrack:{ - serializable:true, - get:function () { - return this._containingTrack; - }, - set:function (value) { - this._containingTrack = value; - } - }, - - _animatedProperties:{ - value:[] - }, - - animatedProperties:{ - serializable:true, - get:function () { - return this._animatedProperties; - }, - set:function (value) { - this._animatedProperties = value; - } - }, - - containingSpan:{ - value: null - }, - prepareForDraw:{ value:function(){ - this.tweenkeyframe.addEventListener("click", this, false); - this.animatedProperties = new Array(); - this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; - this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; + this.element.addEventListener("click", this, false); } }, draw:{ value:function(){ - this.tweenkeyframe.style.left = (this.position - 3) + "px"; - } - }, - - handleElementChange:{ - value:function (event) { - if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){ - alert("Wrong element selected for this keyframe track"); - return; - } - - if(event.detail.source && event.detail.source !== "keyframe") { - this.containingSpan.highlightSpan(); - if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){ - this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; - this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; - this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; - this.containingTrack.updateKeyframeRule(); - } - } + this.element.style.left = (this.position - 3) + "px"; } }, - deselect:{ + deselectKeyframe:{ value:function(){ - this.tweenkeyframe.classList.remove("keyframeSelected"); - this.eventManager.removeEventListener("elementChange", this, false); + this.element.classList.remove("keyframeSelected"); } }, - select:{ + selectKeyframe:{ value:function(){ - this.application.ninja.timeline.deselectKeyframes(); - this.tweenkeyframe.classList.add("keyframeSelected"); - this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px"; - this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px"; - this.application.ninja.timeline.selectedKeyframes.push(this); - - var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - var currentMillisec = currentMillisecPerPixel * this.timelinePosition; - this.application.ninja.timeline.updateTimeText(currentMillisec); - - var currentTop = this.animatedProperties["top"] + "px"; - var currentLeft = this.animatedProperties["left"] + "px"; - - ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe"); - ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe"); - - // turn on element change event listener - this.eventManager.addEventListener("elementChange", this, false); + this.element.classList.add("keyframeSelected"); + this.parentComponent.selectTween(); } }, handleClick:{ value:function(ev){ - this.select(); + this.selectKeyframe(); } } }); -- cgit v1.2.3