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/Tween.reel/Tween.html | 47 ++++++++++++ js/panels/Timeline/Tween.reel/Tween.js | 109 ++++++++++++++++++++++++++++ js/panels/Timeline/Tween.reel/css/Tween.css | 4 + 3 files changed, 160 insertions(+) create mode 100644 js/panels/Timeline/Tween.reel/Tween.html create mode 100644 js/panels/Timeline/Tween.reel/Tween.js create mode 100644 js/panels/Timeline/Tween.reel/css/Tween.css (limited to 'js/panels/Timeline/Tween.reel') diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html new file mode 100644 index 00000000..3e72acc0 --- /dev/null +++ b/js/panels/Timeline/Tween.reel/Tween.html @@ -0,0 +1,47 @@ + + + + + + + + + +

+ + + \ No newline at end of file diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js new file mode 100644 index 00000000..64e998c3 --- /dev/null +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -0,0 +1,109 @@ +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +var Tween = exports.Tween = Montage.create(Component, { + + hasTemplate:{ + value: true + }, + + _spanWidth: { + value: 0 + }, + + spanWidth: { + serializable:true, + get: function(){ + return this._spanWidth; + }, + set: function(value){ + this._spanWidth = value; + } + }, + + _spanPosition:{ + value: 0 + }, + + spanPosition:{ + serializable:true, + get:function () { + return this._spanPosition; + }, + set:function (value) { + this._spanPosition = value; + } + }, + + _keyFramePosition:{ + value:0 + }, + + keyFramePosition:{ + serializable:true, + get:function () { + return this._keyFramePosition; + }, + set:function (value) { + this._keyFramePosition = value; + } + }, + + _keyFrameMillisec:{ + value:0 + }, + + keyFrameMillisec:{ + serializable:true, + get:function () { + return this._keyFrameMillisec; + }, + set:function (value) { + this._keyFrameMillisec = value; + } + }, + + _keyframeID:{ + value:0 + }, + + keyframeID:{ + serializable:true, + get:function () { + return this._keyframeID; + }, + set:function (value) { + this._keyframeID = value; + } + }, + + _timelineTrack:{ + value:0 + }, + + timelineTrack:{ + serializable:true, + get:function () { + return this._timelineTrack; + }, + set:function (value) { + this._timelineTrack = value; + } + }, + + prepareForDraw:{ + value:function(){ + this.keyframe.containingTrack = this.timelineTrack; + } + }, + + draw:{ + value:function(){ + this.span.spanWidth = this.spanWidth; + this.keyframe.position = this.spanWidth; + this.keyframe.timelinePosition = this.keyFramePosition; + this.keyframe.id = this.keyframeID; + this.tweencontainer.style.left = this.spanPosition + "px"; + } + } +}); diff --git a/js/panels/Timeline/Tween.reel/css/Tween.css b/js/panels/Timeline/Tween.reel/css/Tween.css new file mode 100644 index 00000000..942f9fc9 --- /dev/null +++ b/js/panels/Timeline/Tween.reel/css/Tween.css @@ -0,0 +1,4 @@ +.tween_container{ + height: 16px; + position: absolute; +} \ No newline at end of file -- 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/Tween.reel/Tween.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Tween.reel') diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html index 3e72acc0..307dcd02 100644 --- a/js/panels/Timeline/Tween.reel/Tween.html +++ b/js/panels/Timeline/Tween.reel/Tween.html @@ -28,7 +28,8 @@ "module": "js/panels/Timeline/Keyframe.reel", "name": "Keyframe", "properties": { - "element": {"#": "keyframe_container"} + "element": {"#": "keyframe_container"}, + "containingSpan": {"@": "span"} } } } -- cgit v1.2.3 From 112ba5f5beea03010d40a53a64bfa9595e0faa88 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 9 Feb 2012 09:09:01 -0800 Subject: Cleaning up more code and adding more models for timeline Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/Tween.reel') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 64e998c3..eddf1b17 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -92,17 +92,17 @@ var Tween = exports.Tween = Montage.create(Component, { }, prepareForDraw:{ - value:function(){ + value:function () { this.keyframe.containingTrack = this.timelineTrack; + this.keyframe.position = this.spanWidth; + this.keyframe.timelinePosition = this.keyFramePosition; + this.keyframe.id = this.keyframeID; } }, draw:{ - value:function(){ + value:function () { this.span.spanWidth = this.spanWidth; - this.keyframe.position = this.spanWidth; - this.keyframe.timelinePosition = this.keyFramePosition; - this.keyframe.id = this.keyframeID; this.tweencontainer.style.left = this.spanPosition + "px"; } } -- 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/Tween.reel/Tween.html | 16 ++--- js/panels/Timeline/Tween.reel/Tween.js | 114 +++++++++++++++++++++++++++---- 2 files changed, 105 insertions(+), 25 deletions(-) (limited to 'js/panels/Timeline/Tween.reel') diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html index 307dcd02..b5353b1b 100644 --- a/js/panels/Timeline/Tween.reel/Tween.html +++ b/js/panels/Timeline/Tween.reel/Tween.html @@ -11,8 +11,7 @@ "properties": { "element": {"#": "tweenspace"}, "keyframe": {"@": "keyframe"}, - "span": {"@": "span"}, - "tweencontainer": {"#": "tweencontainer"} + "tweenspan": {"@": "span"} } }, @@ -28,8 +27,7 @@ "module": "js/panels/Timeline/Keyframe.reel", "name": "Keyframe", "properties": { - "element": {"#": "keyframe_container"}, - "containingSpan": {"@": "span"} + "element": {"#": "keyframe_container"} } } } @@ -37,12 +35,10 @@ -

\ No newline at end of file diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index eddf1b17..af01deb2 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.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 Tween = exports.Tween = Montage.create(Component, { @@ -8,6 +9,7 @@ var Tween = exports.Tween = Montage.create(Component, { }, _spanWidth: { + serializable: true, value: 0 }, @@ -18,6 +20,7 @@ var Tween = exports.Tween = Montage.create(Component, { }, set: function(value){ this._spanWidth = value; + this.needsDraw = true; } }, @@ -32,6 +35,7 @@ var Tween = exports.Tween = Montage.create(Component, { }, set:function (value) { this._spanPosition = value; + this.needsDraw = true; } }, @@ -46,6 +50,7 @@ var Tween = exports.Tween = Montage.create(Component, { }, set:function (value) { this._keyFramePosition = value; + this.needsDraw = true; } }, @@ -63,47 +68,126 @@ var Tween = exports.Tween = Montage.create(Component, { } }, - _keyframeID:{ + _tweenID:{ value:0 }, - keyframeID:{ + tweenID:{ serializable:true, get:function () { - return this._keyframeID; + return this._tweenID; }, set:function (value) { - this._keyframeID = value; + this._tweenID = value; } }, - _timelineTrack:{ - value:0 + _tweenedProperties:{ + serializable: true, + value:[] + }, + + tweenedProperties:{ + serializable:true, + get:function(){ + return this._tweenedProperties; + }, + set:function(val){ + this._tweenedProperties = val; + } + }, + + _isTweenAnimated:{ + serializable:true, + value:false }, - timelineTrack:{ + isTweenAnimated:{ serializable:true, get:function () { - return this._timelineTrack; + return this._isTweenAnimated; }, set:function (value) { - this._timelineTrack = value; + this._isTweenAnimated = value; + this.needsDraw = true; } }, prepareForDraw:{ value:function () { - this.keyframe.containingTrack = this.timelineTrack; - this.keyframe.position = this.spanWidth; - this.keyframe.timelinePosition = this.keyFramePosition; - this.keyframe.id = this.keyframeID; + } }, draw:{ value:function () { - this.span.spanWidth = this.spanWidth; - this.tweencontainer.style.left = this.spanPosition + "px"; + this.element.style.left = this.spanPosition + "px"; + this.keyframe.position = this.spanWidth; + this.tweenspan.spanWidth = this.spanWidth; + if(this.isTweenAnimated){ + this.tweenspan.highlightSpan(); + } + } + }, + + handleElementChange:{ + value:function (event) { + if (event.detail.source && event.detail.source !== "tween") { + // check for correct element selection + if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) { + alert("Wrong element selected for this keyframe track"); + } else { + // update tweenedProperties and tell containing track to update CSS rule + // temp read only top and left. need to change to loop over event details for prop changes generically + if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) { + this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; + this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; + this.parentComponent.parentComponent.updateKeyframeRule(); + } + // highlight the tween's span + this.tweenspan.highlightSpan(); + this.isTweenAnimated = true; + } + } + } + }, + + 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); + + // 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"; + ElementsMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); + ElementsMediator.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(); } } }); -- 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/Tween.reel/Tween.html | 5 +++++ js/panels/Timeline/Tween.reel/Tween.js | 6 ++++++ js/panels/Timeline/Tween.reel/css/Tween.css | 6 ++++++ 3 files changed, 17 insertions(+) (limited to 'js/panels/Timeline/Tween.reel') diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html index b5353b1b..ce51cb70 100644 --- a/js/panels/Timeline/Tween.reel/Tween.html +++ b/js/panels/Timeline/Tween.reel/Tween.html @@ -1,4 +1,9 @@ + diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index af01deb2..f6dbf32c 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.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; var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; diff --git a/js/panels/Timeline/Tween.reel/css/Tween.css b/js/panels/Timeline/Tween.reel/css/Tween.css index 942f9fc9..81e00073 100644 --- a/js/panels/Timeline/Tween.reel/css/Tween.css +++ b/js/panels/Timeline/Tween.reel/css/Tween.css @@ -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. + */ + .tween_container{ height: 16px; position: absolute; -- cgit v1.2.3