From a39bad832722a10f6556f91e94c3301a41f59bd5 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 13:30:49 -0800 Subject: merge new timeline Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 147 +++++++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 js/panels/Timeline/Keyframe.reel/Keyframe.js (limited to 'js/panels/Timeline/Keyframe.reel/Keyframe.js') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js new file mode 100644 index 00000000..1259fa63 --- /dev/null +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -0,0 +1,147 @@ +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +var Keyframe = exports.Keyframe = Montage.create(Component, { + + hasTemplate:{ + value: true + }, + + _position:{ + value:0 + }, + + position:{ + serializable:true, + get:function(){ + return this._position; + }, + set:function(value){ + this._position = value; + } + }, + + _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; + } + }, + + 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; + } + }, + + draw:{ + value:function(){ + this.tweenkeyframe.style.left = (this.position - 2) + "px"; + } + }, + + handleElementChange:{ + value:function (event) { + + if(event.detail.source && event.detail.source !== "pi") { + + var items = this.application.ninja.selectedElements; + + // update this keyframe's animated properties from the item[0] element props + this.animatedProperties["top"] = items[0]._element.offsetTop; + this.animatedProperties["left"] = items[0]._element.offsetLeft; + this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; + + this.containingTrack.updateKeyframeRule(); + } + + + } + }, + + deselect:{ + value:function(){ + this.tweenkeyframe.classList.remove("keyframeSelected"); + + this.eventManager.removeEventListener("elementChange", this, false); + } + }, + + select:{ + 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 currentTop = this.animatedProperties["top"] + "px"; + var currentLeft = this.animatedProperties["left"] + "px"; + + this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "top", currentTop); + this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "left", currentLeft); + + // turn on element change event listener + this.eventManager.addEventListener("elementChange", this, false); + } + }, + + handleClick:{ + value:function(ev){ + this.select(); + } + } +}); -- cgit v1.2.3 From 7e83bb2ac681eb1340dea0f6efaaddfcf0f2b52a Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 19:27:53 -0800 Subject: Change keyframe to use element mediator when repositioning animated elements on stage Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline/Keyframe.reel/Keyframe.js') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 1259fa63..4bb73514 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -1,5 +1,6 @@ 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, { @@ -82,6 +83,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { this.tweenkeyframe.addEventListener("click", this, false); this.animatedProperties = new Array(); + // should element mediator be used here? this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; } @@ -96,7 +98,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { handleElementChange:{ value:function (event) { - if(event.detail.source && event.detail.source !== "pi") { + if(event.detail.source && event.detail.source !== "keyframe") { var items = this.application.ninja.selectedElements; @@ -131,8 +133,8 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { var currentTop = this.animatedProperties["top"] + "px"; var currentLeft = this.animatedProperties["left"] + "px"; - this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "top", currentTop); - this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "left", currentLeft); + 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); -- cgit v1.2.3 From 8cb53b7ec3b4f34fd77945256ad80bc1ae54b887 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 7 Feb 2012 21:28:14 -0800 Subject: Add Span color highlight for animated spans and restyle keyframes Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) (limited to 'js/panels/Timeline/Keyframe.reel/Keyframe.js') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 4bb73514..b6623dcd 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -78,6 +78,10 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { } }, + containingSpan:{ + value: null + }, + prepareForDraw:{ value:function(){ this.tweenkeyframe.addEventListener("click", this, false); @@ -91,7 +95,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { draw:{ value:function(){ - this.tweenkeyframe.style.left = (this.position - 2) + "px"; + this.tweenkeyframe.style.left = (this.position - 3) + "px"; } }, @@ -101,16 +105,15 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { if(event.detail.source && event.detail.source !== "keyframe") { var items = this.application.ninja.selectedElements; - - // update this keyframe's animated properties from the item[0] element props - this.animatedProperties["top"] = items[0]._element.offsetTop; - this.animatedProperties["left"] = items[0]._element.offsetLeft; - this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; - - this.containingTrack.updateKeyframeRule(); + this.containingSpan.highlightSpan(); + if(items[0]._element.offsetTop != this.animatedProperties["top"] && items[0]._element.offsetLeft != this.animatedProperties["left"]){ + // update this keyframe's animated properties from the item[0] element props + this.animatedProperties["top"] = items[0]._element.offsetTop; + this.animatedProperties["left"] = items[0]._element.offsetLeft; + this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; + this.containingTrack.updateKeyframeRule(); + } } - - } }, -- cgit v1.2.3 From c84c9c97b4aa8f6b6d8e18b628e083c66ae3eb6b Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 8 Feb 2012 21:50:50 -0800 Subject: Display time reading above layers and code clean up Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'js/panels/Timeline/Keyframe.reel/Keyframe.js') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index b6623dcd..c46ae8c9 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -133,6 +133,10 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { 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"; -- cgit v1.2.3 From a822fec0e8e044b647306ed50619cb9a818269e4 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 9 Feb 2012 11:17:47 -0800 Subject: Fixes for animation element assignment Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) (limited to 'js/panels/Timeline/Keyframe.reel/Keyframe.js') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index c46ae8c9..c82a9086 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -86,8 +86,6 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { value:function(){ this.tweenkeyframe.addEventListener("click", this, false); this.animatedProperties = new Array(); - - // should element mediator be used here? this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; } @@ -101,15 +99,16 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { 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") { - - var items = this.application.ninja.selectedElements; this.containingSpan.highlightSpan(); - if(items[0]._element.offsetTop != this.animatedProperties["top"] && items[0]._element.offsetLeft != this.animatedProperties["left"]){ - // update this keyframe's animated properties from the item[0] element props - this.animatedProperties["top"] = items[0]._element.offsetTop; - this.animatedProperties["left"] = items[0]._element.offsetLeft; + 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(); } @@ -120,7 +119,6 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { deselect:{ value:function(){ this.tweenkeyframe.classList.remove("keyframeSelected"); - this.eventManager.removeEventListener("elementChange", this, false); } }, -- cgit v1.2.3 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.js | 117 +++------------------------ 1 file changed, 9 insertions(+), 108 deletions(-) (limited to 'js/panels/Timeline/Keyframe.reel/Keyframe.js') 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 From 5de5dc6454fe6ca097ce4baf34768c9174a827d9 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 24 Feb 2012 10:20:04 -0800 Subject: Adding some missing copyrights Signed-off-by: Valerio Virgillito --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'js/panels/Timeline/Keyframe.reel/Keyframe.js') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index bb2acee0..859cdfb1 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -1,3 +1,9 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; -- cgit v1.2.3