/* <copyright> This file contains proprietary software owned by Motorola Mobility, Inc.<br/> No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. </copyright> */ var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; var Tween = exports.Tween = Montage.create(Component, { hasTemplate:{ value: true }, _tweenData:{ value:{} }, tweenData:{ get:function(){ return this._tweenData; }, set:function(val){ this._tweenData = val; if(this._tweenData){ this.setData(); } } }, _spanWidth: { value: 0 }, spanWidth: { serializable:true, get: function(){ return this._spanWidth; }, set: function(value){ this._spanWidth = value; this.tweenData.spanWidth = value; this.needsDraw=true; } }, _spanPosition:{ value: 0 }, spanPosition:{ serializable:true, get:function () { return this._spanPosition; }, set:function (value) { this._spanPosition = value; this.tweenData.spanPosition = value; this.needsDraw=true; } }, _keyFramePosition:{ value:0 }, keyFramePosition:{ serializable:true, get:function () { return this._keyFramePosition; }, set:function (value) { this._keyFramePosition = value; this.tweenData.keyFramePosition = value; this.needsDraw=true; } }, _keyFrameMillisec:{ value:0 }, keyFrameMillisec:{ serializable:true, get:function () { return this._keyFrameMillisec; }, set:function (value) { this._keyFrameMillisec = value; } }, _tweenID:{ value:0 }, tweenID:{ serializable:true, get:function () { return this._tweenID; }, set:function (value) { this._tweenID = value; } }, _tweenedProperties:{ value:[] }, tweenedProperties:{ serializable:true, get:function(){ return this._tweenedProperties; }, set:function(val){ this._tweenedProperties = val; } }, _isTweenAnimated:{ value:false }, isTweenAnimated:{ serializable:true, get:function () { return this._isTweenAnimated; }, set:function (value) { this._isTweenAnimated = value; } }, draw:{ value:function () { this.element.style.left = this.spanPosition + "px"; this.keyframe.position = this.spanWidth; this.tweenspan.spanWidth = this.spanWidth; if(this.isTweenAnimated){ this.tweenspan.highlightSpan(); } } }, setData:{ value:function(){ this.spanWidth = this.tweenData.spanWidth; this.keyFramePosition = this.tweenData.keyFramePosition; this.spanPosition = this.tweenData.spanPosition; this.keyFrameMillisec = this.tweenData.keyFrameMillisec; this.tweenID = this.tweenData.tweenID; this.tweenedProperties = this.tweenData.tweenedProperties; this.isTweenAnimated = this.tweenData.isTweenAnimated; this.needsDraw = true; } }, handleElementChange:{ value:function (event) { // temp - testing var var useAbsolute = true; if (event.detail.source && event.detail.source !== "tween") { // check for correct element selection if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { console.log("Wrong element selected for this keyframe track"); } else { if(useAbsolute){ this.setAbsoluteTweenProperties(event.detail); } else { this.setRelativeTweenProperties(event.detail); } } } } }, setAbsoluteTweenProperties:{ value:function (eventDetail) { //console.log(eventDetail); // top if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; } // left if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; } // width if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth; } // height if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; } // skewX // skewY // rotation // tell track to update css rule this.parentComponent.parentComponent.updateKeyframeRule(); // highlight the tween's span this.tweenspan.highlightSpan(); this.isTweenAnimated = true; } }, setRelativeTweenProperties:{ value:function(eventDetail){ //console.log(eventDetail); } }, selectTween:{ value: function(){ // turn on event listener for element change this.eventManager.addEventListener("elementChange", this, false); // select the containing layer var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); this.application.ninja.timeline.selectLayer(selectIndex, true); // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline this.application.ninja.timeline.deselectTweens(); this.application.ninja.timeline.selectedTweens.push(this); // update playhead position and time text this.application.ninja.timeline.playhead.style.left = (this.keyFramePosition - 2) + "px"; this.application.ninja.timeline.playheadmarker.style.left = this.keyFramePosition + "px"; var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * this.keyFramePosition; this.application.ninja.timeline.updateTimeText(currentMillisec); // move animated element to correct position on stage var currentTop = this.tweenedProperties["top"] + "px"; var currentLeft = this.tweenedProperties["left"] + "px"; this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); } }, deselectTween:{ value:function(){ // turn off event listener for element change this.eventManager.removeEventListener("elementChange", this, false); // deselect the keyframe for this tween this.keyframe.deselectKeyframe(); } } });