From a065e1394e45bc7a58c861efd0912e60e8b37a03 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 14:23:22 -0700 Subject: remove old method Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 21 ++------------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 33fed17a..bb7ce735 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -147,7 +147,6 @@ var Tween = exports.Tween = Montage.create(Component, { }, - draw:{ value:function () { this.element.style.left = this.spanPosition + "px"; @@ -186,20 +185,14 @@ var Tween = exports.Tween = Montage.create(Component, { 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); - } + this.setTweenProperties(event.detail); } } - - } } }, - setAbsoluteTweenProperties:{ + setTweenProperties:{ value:function (eventDetail) { if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; @@ -222,17 +215,10 @@ var Tween = exports.Tween = Montage.create(Component, { } }, - setRelativeTweenProperties:{ - value:function(eventDetail){ - //console.log(eventDetail); - } - }, - setStyleTweenProperty:{ value:function (eventDetail) { //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); //console.log(eventDetail); - if(eventDetail.type == "setProperties"){ // need to ignore top, left, width, and height //console.log(eventDetail.data.value[0]); @@ -292,7 +278,6 @@ var Tween = exports.Tween = Montage.create(Component, { this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween"); this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween"); - } } }, @@ -301,10 +286,8 @@ var Tween = exports.Tween = Montage.create(Component, { 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 9bc43e9f815dc8c2eda3a3d3413f950481c5f86d Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 16 May 2012 08:01:39 -0700 Subject: CSS pixel fix for prop tracks Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 1 - .../Timeline/PropertyTrack.reel/css/PropertyTrack.css | 2 +- .../Timeline/PropertyTrack.reel/scss/PropertyTrack.scss | 2 +- .../Timeline/TimelineTrack.reel/css/TimelineTrack.css | 16 +++++++--------- 4 files changed, 9 insertions(+), 12 deletions(-) diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index f2004b94..8fe87500 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -222,7 +222,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } else { console.log("spitting sub keyframes not yet supported"); } - } }, diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css index ddcc536e..5d71e2e7 100644 --- a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css +++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css @@ -8,7 +8,7 @@ */ /* line 19, ../scss/PropertyTrack.scss */ .content-main .collapsible-content .timeline-track { - height: 20px; + height: 18px; padding-top: 2px; border-bottom: 1px solid #505050; background-image: url("../images/gridline.jpg"); diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss index 31aed851..a560ff3c 100644 --- a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss +++ b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss @@ -17,7 +17,7 @@ .content-main .collapsible-content .timeline-track { - height: 20px; + height: 18px; padding-top: 2px; border-bottom: 1px solid $color-menu-divider; background-image: url("../images/gridline.jpg"); diff --git a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css index 57e4dce6..03d1cf8d 100644 --- a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css +++ b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css @@ -1,15 +1,13 @@ @charset "UTF-8"; - /* 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. */ - /* TimelineTrack.scss * Main SCSS file for TimelineTrack component, compiled by SASS into the file css/TimelineTrack.css. */ -/* line 16, ../scss/TimelineTrack.scss */ +/* line 22, ../scss/TimelineTrack.scss */ .tracklane { height: 19px; width: 100%; @@ -22,7 +20,7 @@ overflow: hidden; } -/* line 28, ../scss/TimelineTrack.scss */ +/* line 34, ../scss/TimelineTrack.scss */ .keyframe { position: absolute; height: 16px; @@ -30,7 +28,7 @@ background-color: white; } -/* line 36, ../scss/TimelineTrack.scss */ +/* line 42, ../scss/TimelineTrack.scss */ .defaultSpan { position: absolute; height: 16px; @@ -38,23 +36,23 @@ background-color: white; } -/* line 45, ../scss/TimelineTrack.scss */ +/* line 51, ../scss/TimelineTrack.scss */ .tl_layertracks .content-position { height: 63px; } -/* line 48, ../scss/TimelineTrack.scss */ +/* line 54, ../scss/TimelineTrack.scss */ .tl_layertracks .content-transform { height: 106px; } -/* line 52, ../scss/TimelineTrack.scss */ +/* line 58, ../scss/TimelineTrack.scss */ .tl_layertracks .collapsible-content.collapsible-collapsed { overflow: hidden; height: 0px; } -/* line 57, ../scss/TimelineTrack.scss */ +/* line 63, ../scss/TimelineTrack.scss */ .tl_layertracks .collapsible-content .collapsible-label { height: 21px; background-color: #474747; -- cgit v1.2.3 From e5830f3424c7db84f0e76b237616cbf59fe9ed1c Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 16 May 2012 08:58:03 -0700 Subject: Remove span highlighting and start syncing pos tracks and main track keyframes Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 12 ++++++++---- js/panels/Timeline/Tween.reel/Tween.js | 3 --- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 8fe87500..a8adbf04 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -183,16 +183,20 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { }, handleClick:{ - value:function(ev){ + value:function (ev) { if (ev.shiftKey) { + if (this.trackType == "position") { + this.parentComponent.parentComponent.parentComponent.handleNewTween(ev); + } + if (this.propTweens.length < 1) { // check if there is an editor property assigned yet // get this property track's editor prop name from layer data arrays var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - if (this.trackType === "style") { + if (this.trackType == "style") { if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) { console.log("Please enter a style property for this track before adding keyframes."); return; @@ -200,7 +204,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } - } else if (this.trackType === "position") { + } else if (this.trackType == "position") { //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } @@ -220,7 +224,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { this.insertPropTween(ev.offsetX); } else { - console.log("spitting sub keyframes not yet supported"); + console.log("Splitting style tweens not yet supported."); } } }, diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index bb7ce735..f857ebd4 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -208,9 +208,6 @@ var Tween = exports.Tween = Montage.create(Component, { } // tell track to update css rule this.parentComponent.parentComponent.updateKeyframeRule(); - - // highlight the tween's span - this.tweenspan.highlightSpan(); this.isTweenAnimated = true; } }, -- cgit v1.2.3 From a5e3eb0cec55858cf911bffc429ce1de817a60ef Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 16 May 2012 11:20:13 -0700 Subject: methods for setting simple ease and splitting sub prop spans Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 39 ++++++++++++++++++++++ js/panels/Timeline/Tween.reel/Tween.js | 8 +++++ 2 files changed, 47 insertions(+) diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index a8adbf04..fbc3edd0 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -269,6 +269,45 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + splitPropTween:{ + value:function (ev) { + console.log("splitting sub prop tween with new keyframe"); + var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX; + var i; + var tweensLength = this.propTweens.length - 1; + var prevTween, nextTween, splitTweenIndex; + for (i = 0; i < tweensLength; i++) { + prevTween = this.propTweens[i].tweenData.keyFramePosition; + nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; + if (clickPos > prevTween && clickPos < nextTween) { + //console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID); + splitTweenIndex = this.propTweens[i + 1].tweenData.tweenID; + this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - clickPos; + this.propTweens[i + 1].tweenData.spanPosition = ev.target.parentElement.offsetLeft + ev.offsetX; + if (ev.target.className != "tween-span") { + // don't set styles on timeline track if event is coming from the track + } else { + ev.target.style.width = this.propTweens[i + 1].tweenData.spanWidth + "px"; + ev.target.parentElement.style.left = clickPos + "px"; + ev.target.parentElement.children[1].style.left = (this.propTweens[i + 1].tweenData.spanWidth - 3) + "px"; + } + var newTweenToInsert = {}; + newTweenToInsert.tweenData = {}; + newTweenToInsert.tweenData.spanWidth = clickPos - prevTween; + newTweenToInsert.tweenData.keyFramePosition = clickPos; + newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * clickPos; + newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1; + newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth; + newTweenToInsert.tweenData.tweenedProperties = []; + newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); + break; + } + } + this.application.ninja.documentController.activeDocument.needsSave = true; + } + }, + retrieveStoredStyleTweens:{ value:function(){ console.log("retrieve style tweens"); diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index f857ebd4..b61b0ca9 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -239,6 +239,14 @@ var Tween = exports.Tween = Montage.create(Component, { } }, + setKeyframeEase:{ + value:function(easeType){ + // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) + this.tweenedProperties["-webkit-animation-timing-function"] = easeType; + this.parentComponent.parentComponent.updatePropKeyframeRule(); + } + }, + selectTween:{ value: function(){ // turn on event listener for element change -- cgit v1.2.3