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 --- .../Timeline/TimelineTrack.reel/TimelineTrack.html | 42 ++++- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 192 +++++++++++++++------ .../TimelineTrack.reel/css/TimelineTrack.css | 65 +------ .../TimelineTrack.reel/scss/TimelineTrack.scss | 18 +- 4 files changed, 188 insertions(+), 129 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index b0d191c2..4808e4d8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -11,7 +11,8 @@ "properties": { "element": {"#": "track"}, "tweenRepetition" : {"@" : "tweenRepetition"}, - "track_lane": {"#": "track_lanes"} + "styleTracksRepetition" : {"@" : "styleTracksRepetition"}, + "tween": {"@" : "tween"} } }, @@ -37,19 +38,24 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.spanPosition", "oneway" : false }, - "timelineTrack" : { + "keyFrameMillisec" : { "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.timelineTrack", + "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec", "oneway" : false }, - "keyFrameMillisec" : { + "tweenID" : { "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec", + "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenID", "oneway" : false }, - "keyframeID" : { + "tweenedProperties" : { "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.keyframeID", + "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenedProperties", + "oneway" : false + }, + "isTweenAnimated" : { + "boundObject" : {"@": "tweenRepetition"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated", "oneway" : false } } @@ -69,7 +75,25 @@ "oneway": false } } + }, + + "styleTrackRepetition": { + "module": "montage/ui/repetition.reel", + "name": "Repetition", + "properties": { + "element": {"#": "content-styles"}, + "isSelectionEnabled" : false + }, + "bindings": { + "objects": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "arrStyleTracks", + "oneway": false + } + } } + + } @@ -102,8 +126,8 @@
-
- +
+
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 62688825..1c33a040 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -10,10 +10,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _trackID:{ - value:null, - writable:true, serializable:true, - enumerable:true + value:null }, trackID:{ @@ -85,21 +83,50 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } }, - - _tweens:{ + + _arrStyleTracks : { serializable:true, enumerable:true, + value: [] + }, + arrStyleTracks: { + serializable:true, + enumerable:true, + get: function() { + return this._arrStyleTracks; + }, + set: function(newVal) { + this._arrStyleTracks = newVal; + this.needsDraw = true; + } + }, + _styleTracksRepetition: { + serializable: true, + value: null + }, + styleTracksRepetition : { + serializable: true, + get: function() { + return this._styleTracksRepetition; + }, + set: function(newVal) { + this._styleTracksRepetition = newVal; + this.needsDraw = true; + } + }, + + _tweens:{ + enumerable: false, value:[] }, tweens:{ serializable:true, - enumerable:true, get:function () { - return this._spans; + return this._tweens; }, set:function (newVal) { - this._spans = newVal; + this._tweens = newVal; } }, @@ -118,14 +145,51 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + _trackDuration:{ + serializable: true, + value:0 + }, + trackDuration:{ + serializable:true, + get:function () { + return this._trackDuration; + }, + set:function (val) { + this._trackDuration = val; + } + }, + + _trackPosition:{ + serializable:true, value:0 }, - currentKeyframeRule:{ + trackPosition:{ + serializable:true, + get:function () { + return this._trackPosition; + }, + set:function (val) { + this._trackPosition = val; + } + }, + + _currentKeyframeRule:{ + serializable: true, value:null }, + currentKeyframeRule:{ + serializable: true, + get:function(){ + return this._currentKeyframeRule; + }, + set:function(val){ + this._currentKeyframeRule = val; + } + }, + nextKeyframe:{ value:1 }, @@ -134,14 +198,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:0 }, - isAnimated:{ - value:false + _isTrackAnimated:{ + serializable: true, + value:null + }, + + isTrackAnimated:{ + serializable: true, + get:function(){ + return this._isTrackAnimated; + }, + set:function(val){ + this._isTrackAnimated = val; + } }, _animatedElement:{ serializable:true, - enumerable:true, - writable:true, value:null }, @@ -155,12 +228,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - animationName:{ + _animationName:{ + serializable:true, value:null }, - keyFramePropertyData:{ - value:[] + animationName:{ + serializable:true, + get:function () { + return this._animationName; + }, + set:function (val) { + this._animationName = val; + } }, ninjaStylesContoller:{ @@ -184,8 +264,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function () { this.init(); this.ninjaStylesContoller = this.application.ninja.stylesController; - this.track_lane.addEventListener("click", this, false); - this.keyFramePropertyData = new Array(); + this.element.addEventListener("click", this, false); } }, @@ -210,8 +289,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function (ev) { // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span // This needs to move to a keyboard shortcut that is TBD + + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + //this.application.ninja.timeline.selectLayer(selectIndex); + if (ev.shiftKey) { - if (this.application.ninja.timeline.arrLayers[this.trackID - 1].element.length == 1) { + if (this.application.ninja.timeline.arrLayers[selectedIndex].element.length == 1) { if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); @@ -238,36 +321,41 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { insertTween:{ value:function (clickPos) { - // calculate new tween's keyframe percent by clickPos + // calculate new tween's keyframe milliseconds by clickPos var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; // need to check timeline master duration if greater than this track duration this.trackDuration = currentMillisec; + if(this.trackDuration > this.application.ninja.timeline.masterDuration){ + this.application.ninja.timeline.masterDuration = this.trackDuration; + } + var newTween = {}; + if (clickPos == 0) { + this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; newTween.spanWidth = 0; newTween.keyFramePosition = 0; newTween.keyFrameMillisec = 0; - newTween.keyframeID = 0; + newTween.tweenID = 0; newTween.spanPosition = 0; - newTween.timelineTrack = this; + newTween.tweenedProperties = []; + newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; this.tweens.push(newTween); } else { newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; newTween.keyFramePosition = clickPos; newTween.keyFrameMillisec = currentMillisec; - newTween.keyframeID = this.nextKeyframe; + newTween.tweenID = this.nextKeyframe; newTween.spanPosition = clickPos - newTween.spanWidth; - newTween.timelineTrack = this; + newTween.tweenedProperties = []; + newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; this.tweens.push(newTween); - var animatedProperties = new Array(); - animatedProperties["top"] = this.keyFramePropertyData[0]["top"]; - animatedProperties["left"] = this.keyFramePropertyData[0]["left"]; - this.keyFramePropertyData[this.nextKeyframe] = animatedProperties; - // update the animation duration var animationDuration = Math.round(this.trackDuration / 1000) + "s"; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); @@ -279,32 +367,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { splitTween:{ value:function (ev) { - alert("Splitting an existing span with a new keyframe is not yet supported.") + alert("Splitting an existing span with a new keyframe is not yet supported."); //console.log("splitting tween at span offsetX: " + ev.offsetX); } }, addAnimationRuleToElement:{ value:function (tweenEvent) { - this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; - var initAnimatedProperties = new Array(); - initAnimatedProperties["top"] = this.animatedElement.offsetTop; - initAnimatedProperties["left"] = this.animatedElement.offsetLeft; - this.keyFramePropertyData[0] = initAnimatedProperties; - + this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop; + this.tweens[0].tweenedProperties["left"] = this.animatedElement.offsetLeft; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; - this.animationName = this.animatedElement.className + this.trackID; - + this.animationName = "animation_" + this.animatedElement.className; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); - var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); - - this.isAnimated = true; - this.insertTween(tweenEvent.offsetX); + this.isTrackAnimated = true; } }, @@ -316,18 +396,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; - for (var i = 0; i < this.keyFramePropertyData.length; i++) { - + for (var i = 0; i < this.tweens.length; i++) { var keyframePercent = Math.round((this.tweens[i].keyFrameMillisec / this.trackDuration) * 100) + "%"; - var keyframePropertyString = " " + keyframePercent + " {"; - keyframePropertyString += "top: " + this.keyFramePropertyData[i]["top"] + "px;"; - keyframePropertyString += " left: " + this.keyFramePropertyData[i]["left"] + "px;"; + keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; + keyframePropertyString += " left: " + this.tweens[i].tweenedProperties["left"] + "px;"; keyframePropertyString += "}"; keyframeString += keyframePropertyString; } keyframeString += " }"; - // set the keyframe string as the new rule this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); } @@ -337,7 +414,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { init:{ value:function () { var that = this; - this.label = this.element.querySelector(".label-main"); this.myContent = this.element.querySelector(".content-main"); this.labelPosition = this.element.querySelector(".label-position"); @@ -357,7 +433,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._mainCollapser.isAnimated = true; this._mainCollapser.labelClickEvent = function () { that.isMainCollapsed = that._mainCollapser.isCollapsed; - } + }; this._mainCollapser.needsDraw = true; this._positionCollapser = Collapser.create(); @@ -370,7 +446,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._positionCollapser.isAnimated = true; this._positionCollapser.labelClickEvent = function () { that.isPositionCollapsed = that._positionCollapser.isCollapsed; - } + }; this._positionCollapser.needsDraw = true; this._transformCollapser = Collapser.create(); @@ -383,20 +459,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._transformCollapser.isAnimated = true; this._transformCollapser.labelClickEvent = function () { that.isTransformCollapsed = that._transformCollapser.isCollapsed; - } + }; this._transformCollapser.needsDraw = true; this._styleCollapser = Collapser.create(); this._styleCollapser.clicker = this.labelStyles; this._styleCollapser.myContent = this.contentStyles; - this._styleCollapser.contentHeight = 60; + this._styleCollapser.contentHeight = 20; this._styleCollapser.isLabelClickable = false; this._styleCollapser.element = this.element; this._styleCollapser.isCollapsed = this.isStyleCollapsed; this._styleCollapser.isAnimated = true; this._styleCollapser.labelClickEvent = function () { that.isStyleCollapsed = that._styleCollapser.isCollapsed; - } + }; this._styleCollapser.needsDraw = true; // Register event handler for layer events. @@ -408,11 +484,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { handleLayerEvent:{ value:function (layerEvent) { - if (layerEvent.layerID !== this.trackID) { return; } - if (layerEvent.layerEventType === "labelClick") { if (layerEvent.layerEventLocale === "content-main") { this._mainCollapser.bypassAnimation = layerEvent.bypassAnimation; @@ -427,6 +501,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; this._styleCollapser.handleCollapserLabelClick(); } + } else if (layerEvent.layerEventType === "newStyle") { + this.arrStyleTracks.push("1"); + if (this._styleCollapser.isCollapsed === true) { + this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; + this._styleCollapser.handleCollapserLabelClick(); + } } } } diff --git a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css index ddaccd32..842015e9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css +++ b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css @@ -2,63 +2,6 @@ /* TimelineTrack.scss * Main SCSS file for TimelineTrack component, compiled by SASS into the file css/TimelineTrack.css. */ -/* - 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. - */ -/* - * _colors.scss - * Defines the colors for the UI of the application. - * To create a new theme, copy this file and change the values as desired. - * Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values. - */ -/* Colors for radio buttons and other form elements */ -/* Base colors for dividers - * - * Dividers consist of a div with a background color and either - * a top & bottom border (in the case of horizontal dividers) - * or a left & right border (in the case of vertical dividers), - * for a total of three different colors. - * - */ -/* top and left */ -/* Middle */ -/* Bottom and right */ -/* Main background color of entire app */ -/* Main app background color. */ -/* rgba version */ -/* Main app border color */ -/* color of drop shadows */ -/* Stage color */ -/* body border color */ -/* Body background color */ -/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */ -/* Colors for tools: background, text, how they interact with the UI */ -/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */ -/* used for editable items in their non-edit state, etc. */ -/* Border for panel and for block elements */ -/* Shadow for text and block elements */ -/* Colors for scroll bars */ -/* - 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. - */ -/* - * themes/themename/mixins.scss - * Mixins that are theme-dependent (e.g. sprite mixins, etc) - */ -/* - 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. - */ -/* - * mixins.scss - * Generic mixins. Theme-specific mixins (e.g. for sprites) - * should go in the theme/themename/mixins.scss file. - */ /* line 16, ../scss/TimelineTrack.scss */ .tracklane { height: 19px; @@ -113,5 +56,11 @@ /* line 63, ../scss/TimelineTrack.scss */ .tl_layertracks .collapsible-content .timeline-track { - height: 21px; + height: 20px; + border-bottom: 1px solid #505050; +} + +/* line 69, ../scss/TimelineTrack.scss */ +.timeline-track .content-main { + background-color: #474747; } diff --git a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss index c492d18d..01dd948c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss +++ b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss @@ -5,13 +5,13 @@ */ // Import theme settings -@import "../../../../../_scss/imports/themes/default/colors"; -// @import "../../../../../_scss/imports/themes/default/fonts"; -@import "../../../../../_scss/imports/themes/default/mixins"; +@import "../../../../../scss/imports/themes/default/colors"; +// @import "../../../../../scss/imports/themes/default/fonts"; +@import "../../../../../scss/imports/themes/default/mixins"; // Import generic mixins and styles -@import "../../../../../_scss/imports/scss/mixins"; -// @import "../../../../../_scss/imports/scss/Base"; +@import "../../../../../scss/imports/scss/mixins"; +// @import "../../../../../scss/imports/scss/Base"; .tracklane{ height: 19px; @@ -61,5 +61,11 @@ } .tl_layertracks .collapsible-content .timeline-track { - height: 21px; + height: 20px; + border-bottom: 1px solid $color-menu-divider; } + + +.timeline-track .content-main { + background-color: $color-menu-bg; +} -- cgit v1.2.3 From cf671b4855ecca0278128e82459691292a3d3dc9 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 08:08:30 -0800 Subject: Timeline: Create new PropertyTrack subcomponent, and use it in the TimelineTrack component. Cherry pick commit from jreid/Timeline-jreid Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.html | 60 +++++++++++++++---- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 69 ++++++++++++++++++++++ .../TimelineTrack.reel/css/TimelineTrack.css | 11 ---- .../TimelineTrack.reel/scss/TimelineTrack.scss | 8 --- 4 files changed, 118 insertions(+), 30 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 4808e4d8..cabd92c0 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -91,7 +91,51 @@ "oneway": false } } - } + }, + "positionTracksRepetition": { + "module": "montage/ui/repetition.reel", + "name": "Repetition", + "properties": { + "element": {"#": "content-position-tracks"}, + "isSelectionEnabled" : false + }, + "bindings": { + "objects": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "arrPositionTracks", + "oneway": false + } + } + }, + "positionPropertyTrack" : { + "module" : "js/panels/Timeline/PropertyTrack.reel", + "name" : "PropertyTrack", + "properties" : { + "element":{"#": "position-track-base"} + } + }, + "transformTracksRepetition": { + "module": "montage/ui/repetition.reel", + "name": "Repetition", + "properties": { + "element": {"#": "content-transform-tracks"}, + "isSelectionEnabled" : false + }, + "bindings": { + "objects": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "arrTransformTracks", + "oneway": false + } + } + }, + "transformPropertyTrack" : { + "module" : "js/panels/Timeline/PropertyTrack.reel", + "name" : "PropertyTrack", + "properties" : { + "element":{"#": "transform-track-base"} + } + } } @@ -108,20 +152,14 @@
-
-
-
-
+
+
-
-
-
-
-
-
+
+
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 1c33a040..de2c75c7 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -114,6 +114,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.needsDraw = true; } }, + + /* Position Property Tracks */ + _arrPositionTracks : { + serializable:true, + enumerable:true, + value: [] + }, + arrPositionTracks: { + serializable:true, + enumerable:true, + get: function() { + return this._arrPositionTracks; + }, + set: function(newVal) { + this._arrPositionTracks = newVal; + this.needsDraw = true; + } + }, + _positionTracksRepetition: { + serializable: true, + value: null + }, + positionTracksRepetition : { + serializable: true, + get: function() { + return this._positionTracksRepetition; + }, + set: function(newVal) { + this._positionTracksRepetition = newVal; + this.needsDraw = true; + } + }, + + + /* Transform Property Tracks */ + _arrTransformTracks : { + serializable:true, + enumerable:true, + value: [] + }, + arrTransformTracks: { + serializable:true, + enumerable:true, + get: function() { + return this._arrTransformTracks; + }, + set: function(newVal) { + this._arrTransformTracks = newVal; + this.needsDraw = true; + } + }, + _transformTracksRepetition: { + serializable: true, + value: null + }, + transformTracksRepetition : { + serializable: true, + get: function() { + return this._transformTracksRepetition; + }, + set: function(newVal) { + this._transformTracksRepetition = newVal; + this.needsDraw = true; + } + }, _tweens:{ enumerable: false, @@ -414,6 +479,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { init:{ value:function () { var that = this; + + this.arrPositionTracks = [0, 1, 2]; + this.arrTransformTracks = [0, 1, 2, 3, 4]; + this.label = this.element.querySelector(".label-main"); this.myContent = this.element.querySelector(".content-main"); this.labelPosition = this.element.querySelector(".label-position"); diff --git a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css index 842015e9..7a778e25 100644 --- a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css +++ b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css @@ -53,14 +53,3 @@ background-color: #474747; color: white; } - -/* line 63, ../scss/TimelineTrack.scss */ -.tl_layertracks .collapsible-content .timeline-track { - height: 20px; - border-bottom: 1px solid #505050; -} - -/* line 69, ../scss/TimelineTrack.scss */ -.timeline-track .content-main { - background-color: #474747; -} diff --git a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss index 01dd948c..43d5f438 100644 --- a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss +++ b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss @@ -60,12 +60,4 @@ color: $color-panel-text; } - .tl_layertracks .collapsible-content .timeline-track { - height: 20px; - border-bottom: 1px solid $color-menu-divider; - } - -.timeline-track .content-main { - background-color: $color-menu-bg; -} -- cgit v1.2.3 From d382eca23468b10575ca857a9feb1ede136ab813 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 11:05:38 -0800 Subject: Timeline Track Open doc Signed-off-by: Kruti Shah Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 54 ++++++++++++++++++++++ 1 file changed, 54 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index de2c75c7..40e680de 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -347,6 +347,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (this._styleCollapser.isCollapsed !== this.isStyleCollapsed) { this._styleCollapser.toggle(false); } + this.retrieveStoredTweens(); } }, @@ -437,6 +438,59 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + retrieveStoredTweens:{ + value:function(){ + var animationDuration,trackDuration,currentMilliSec , currentMillisecPerPixel,clickPos,i=0,k=0; + if(this.application.ninja.timeline.currentLayerSelected.element[0]){ + this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; + this.animationName = this.ninjaStylesContoller.getElementStyle(this.animatedElement,"-webkit-animation-name"); + animationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement,"-webkit-animation-duration"); + trackDuration = animationDuration.split("s"); + currentMilliSec =trackDuration[0]*1000; + currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + clickPos = currentMilliSec / currentMillisecPerPixel; + + this.currentKeyframeRule = this.ninjaStylesContoller.getAnimationRuleWithName(this.animationName , this.application.ninja.currentDocument._document); + + var newTween = {}; + if( this.currentKeyframeRule[i].keyText==="0%"){ + newTween.spanWidth = 0; + newTween.keyFramePosition = 0; + newTween.keyFrameMillisec = 0; + newTween.keyframeID = i; + newTween.spanPosition = 0; + this.tweens.push(newTween); + + }else{ + + newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; + newTween.keyFramePosition = clickPos; + newTween.keyFrameMillisec = currentMilliSec; + newTween.keyframeID = i; + newTween.spanPosition = clickPos - newTween.spanWidth; + this.tweens.push(newTween); + + } + this.needsDraw=true; + // this.retrieveAnimationRuleToElement(); + this.i++; + + // this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); + + } + + } + }, + + retrieveAnimationRuleToElement:{ + value:function(){ + // this.animatedElement = this.tempArray[0]; + // var initAnimatedProperties = new Array(); + // initAnimatedProperties["top"] = this.currentKeyframeRule[this.i].style[0]; + // initAnimatedProperties["left"] = this.currentKeyframeRule[this.i].style[1]; + } + }, + addAnimationRuleToElement:{ value:function (tweenEvent) { this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop; -- cgit v1.2.3 From 7de846bfe60bde190c14053107fcb227f6404d65 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 11:17:22 -0800 Subject: Timeline: Reopen Doc Restore TimeLine Signed-off-by: Kruti Shah Conflicts: js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 108 ++++++++++++--------- 1 file changed, 60 insertions(+), 48 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 40e680de..bb1d5a1f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -192,6 +192,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set:function (newVal) { this._tweens = newVal; + this.needsDraw=true; } }, @@ -324,7 +325,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _styleCollapser:{ value:null }, - + _openDocRedrawCheck:{ + value:true, + writable:true + }, prepareForDraw:{ value:function () { this.init(); @@ -335,6 +339,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { draw:{ value:function () { + this.ninjaStylesContoller = this.application.ninja.stylesController; if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { this._mainCollapser.toggle(false); } @@ -347,7 +352,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (this._styleCollapser.isCollapsed !== this.isStyleCollapsed) { this._styleCollapser.toggle(false); } + + } + }, + + didDraw:{ + value:function(){ + if(this._openDocRedrawCheck){ this.retrieveStoredTweens(); + this._openDocRedrawCheck=false; + } } }, @@ -360,7 +374,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { //this.application.ninja.timeline.selectLayer(selectIndex); if (ev.shiftKey) { - if (this.application.ninja.timeline.arrLayers[selectedIndex].element.length == 1) { + if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) { if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); @@ -401,7 +415,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var newTween = {}; if (clickPos == 0) { - this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; + this.animatedElement = this.application.ninja.timeline.currentLayerSelected.elementsList[0]; newTween.spanWidth = 0; newTween.keyFramePosition = 0; newTween.keyFrameMillisec = 0; @@ -440,54 +454,52 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { retrieveStoredTweens:{ value:function(){ - var animationDuration,trackDuration,currentMilliSec , currentMillisecPerPixel,clickPos,i=0,k=0; - if(this.application.ninja.timeline.currentLayerSelected.element[0]){ - this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; - this.animationName = this.ninjaStylesContoller.getElementStyle(this.animatedElement,"-webkit-animation-name"); - animationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement,"-webkit-animation-duration"); - trackDuration = animationDuration.split("s"); - currentMilliSec =trackDuration[0]*1000; - currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - clickPos = currentMilliSec / currentMillisecPerPixel; - - this.currentKeyframeRule = this.ninjaStylesContoller.getAnimationRuleWithName(this.animationName , this.application.ninja.currentDocument._document); - - var newTween = {}; - if( this.currentKeyframeRule[i].keyText==="0%"){ - newTween.spanWidth = 0; - newTween.keyFramePosition = 0; - newTween.keyFrameMillisec = 0; - newTween.keyframeID = i; - newTween.spanPosition = 0; - this.tweens.push(newTween); - - }else{ - - newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; - newTween.keyFramePosition = clickPos; - newTween.keyFrameMillisec = currentMilliSec; - newTween.keyframeID = i; - newTween.spanPosition = clickPos - newTween.spanWidth; - this.tweens.push(newTween); - - } - this.needsDraw=true; - // this.retrieveAnimationRuleToElement(); - this.i++; - - // this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); - + var percentValue,fraction,splitValue,i=0,k=0 + while(this.application.ninja.timeline.arrLayers[k]){ + this.animatedElement = this.application.ninja.timeline.arrLayers[k].elementsList[0]; + this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement,"-webkit-animation-name"); + this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement,"-webkit-animation-duration"); + this.trackDuration = this.animationDuration.split("s"); + this.currentMilliSec =this.trackDuration[0]*1000; + this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; + this.nextKeyframe=0; + + this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName , this.application.ninja.currentDocument._document); + while(this.currentKeyframeRule[i]){ + var newTween = {}; + if( this.currentKeyframeRule[i].keyText==="0%"){ + newTween.spanWidth = 0; + newTween.keyFramePosition = 0; + newTween.keyFrameMillisec = 0; + newTween.tweenID = 0; + newTween.spanPosition = 0; + this.tweens.push(newTween); + + } + else{ + percentValue=this.currentKeyframeRule[i].keyText; + splitValue=percentValue.split("%"); + fraction=splitValue[0]/100; + this.currentMilliSec =fraction*this.trackDuration[0]*1000; + this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; + newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; + newTween.keyFramePosition = this.clickPos; + newTween.keyFrameMillisec = this.currentMilliSec; + newTween.tweenID = this.nextKeyframe; + newTween.spanPosition = this.clickPos - newTween.spanWidth; + this.tweens.push(newTween); + + + } + i++; + this.nextKeyframe+=1; + } + k++; } - } - }, - retrieveAnimationRuleToElement:{ - value:function(){ - // this.animatedElement = this.tempArray[0]; - // var initAnimatedProperties = new Array(); - // initAnimatedProperties["top"] = this.currentKeyframeRule[this.i].style[0]; - // initAnimatedProperties["left"] = this.currentKeyframeRule[this.i].style[1]; } }, -- cgit v1.2.3 From 935d3e8b592fc9a3a6b252dd5fe0469e35b84713 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 12:09:23 -0800 Subject: Fix for tween repetition arrays getting overwritten on file open Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 92 +++++++++++----------- 1 file changed, 44 insertions(+), 48 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index bb1d5a1f..fddfd170 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -357,10 +357,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, didDraw:{ - value:function(){ - if(this._openDocRedrawCheck){ - this.retrieveStoredTweens(); - this._openDocRedrawCheck=false; + value:function () { + if (this._openDocRedrawCheck) { + this.retrieveStoredTweens(); + this._openDocRedrawCheck = false; } } }, @@ -453,55 +453,51 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, retrieveStoredTweens:{ - value:function(){ - var percentValue,fraction,splitValue,i=0,k=0 - while(this.application.ninja.timeline.arrLayers[k]){ - this.animatedElement = this.application.ninja.timeline.arrLayers[k].elementsList[0]; - this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement,"-webkit-animation-name"); - this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement,"-webkit-animation-duration"); - this.trackDuration = this.animationDuration.split("s"); - this.currentMilliSec =this.trackDuration[0]*1000; + value:function () { + var percentValue, fraction, splitValue, i = 0; + + this.animatedElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].elementsList[0]; + this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); + this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + this.trackDuration = this.animationDuration.split("s"); + this.currentMilliSec = this.trackDuration[0] * 1000; + this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; + this.nextKeyframe = 0; + + this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); + while (this.currentKeyframeRule[i]) { + var newTween = {}; + if (this.currentKeyframeRule[i].keyText === "0%") { + newTween.spanWidth = 0; + newTween.keyFramePosition = 0; + newTween.keyFrameMillisec = 0; + newTween.tweenID = 0; + newTween.spanPosition = 0; + this.tweens.push(newTween); + + } + else { + percentValue = this.currentKeyframeRule[i].keyText; + splitValue = percentValue.split("%"); + fraction = splitValue[0] / 100; + this.currentMilliSec = fraction * this.trackDuration[0] * 1000; this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; - this.nextKeyframe=0; - - this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName , this.application.ninja.currentDocument._document); - while(this.currentKeyframeRule[i]){ - var newTween = {}; - if( this.currentKeyframeRule[i].keyText==="0%"){ - newTween.spanWidth = 0; - newTween.keyFramePosition = 0; - newTween.keyFrameMillisec = 0; - newTween.tweenID = 0; - newTween.spanPosition = 0; - this.tweens.push(newTween); - - } - else{ - percentValue=this.currentKeyframeRule[i].keyText; - splitValue=percentValue.split("%"); - fraction=splitValue[0]/100; - this.currentMilliSec =fraction*this.trackDuration[0]*1000; - this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; - newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; - newTween.keyFramePosition = this.clickPos; - newTween.keyFrameMillisec = this.currentMilliSec; - newTween.tweenID = this.nextKeyframe; - newTween.spanPosition = this.clickPos - newTween.spanWidth; - this.tweens.push(newTween); - - - } - i++; - this.nextKeyframe+=1; - } - k++; - } + newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; + newTween.keyFramePosition = this.clickPos; + newTween.keyFrameMillisec = this.currentMilliSec; + newTween.tweenID = this.nextKeyframe; + newTween.spanPosition = this.clickPos - newTween.spanWidth; + this.tweens.push(newTween); + } + i++; + this.nextKeyframe += 1; } - }, + } + }, addAnimationRuleToElement:{ value:function (tweenEvent) { -- cgit v1.2.3