From 8a3fb9c3f9b3497884ec7e898924b13dad1d685a Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 19 Jun 2012 11:37:06 -0700 Subject: Fix position tracks collapser to use unique element Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 9 ++++---- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1 + .../Timeline/TimelineTrack.reel/TimelineTrack.html | 23 ++++++++++-------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 27 ++++++++++++++++++---- 4 files changed, 41 insertions(+), 19 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 791239d7..0605e300 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -40,10 +40,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:"" }, - _propTweenRepetition:{ - value:null - }, - animatedElement:{ value:null }, @@ -52,8 +48,11 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:true }, + _propTweenRepetition:{ + value:null + }, + propTweenRepetition:{ - serializable:true, get:function () { return this._propTweenRepetition; }, diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 339ca5a4..a67de4cc 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -686,6 +686,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { returnObj.layerData.currentKeyframeRule = null; returnObj.layerData.trackPosition = 0; returnObj.layerData.arrStyleTracks = []; + returnObj.layerData.arrPositionTracks = []; returnObj.layerData.tweens = []; returnObj.layerData.layerTag = ""; returnObj.layerData.isVisible = true; diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 502c455b..79014ae6 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -17,6 +17,8 @@ "tweenRepetition" : {"@" : "tweenRepetition"}, "track_lanes" : {"#" : "track_lanes"}, "tween": {"@" : "tween"}, + "positionTracksRepetition" : {"@" : "positionTracksRepetition"}, + "positionPropertyTrack" : {"@" : "positionPropertyTrack"}, "mainCollapser" : {"@" : "mainCollapser"}, "positionCollapser" : {"@" : "positionCollapser"}, "styleCollapser" : {"@" : "styleCollapser"} @@ -81,7 +83,7 @@ "positionTracksRepetition": { "prototype": "montage/ui/repetition.reel", "properties": { - "element": {"#": "content-position-tracks"}, + "element": {"#": "content_position_tracks"}, "isSelectionEnabled" : false }, "bindings": { @@ -95,7 +97,7 @@ "positionPropertyTrack" : { "prototype" : "js/panels/Timeline/PropertyTrack.reel", "properties" : { - "element":{"#": "position-track-base"} + "element":{"#": "position_track_base"} }, "bindings" : { "propTrackData" : { @@ -134,8 +136,8 @@ "positionCollapser" : { "prototype" : "js/panels/timeline/Collapser", "properties" : { - "element" : {"#" : "content-position-tracks"}, - "myContent" : {"#":"content-position-tracks"}, + "element" : {"#" : "content_position_collapser"}, + "myContent" : {"#":"content_position_collapser"}, "contentHeight" : 40, "isLabelClickable" : false, "clicker" : {"#" : "label-position"}, @@ -194,11 +196,14 @@
- -
-
-
-
+ +
+
+
+
+
+
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 84bac2cb..26ccfe09 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -41,6 +41,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._tween = newVal; } }, + + positionPropertyTrack:{ + value:null + }, _isFirstDraw: { value: true @@ -171,9 +175,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set: function(newVal) { this._arrPositionTracks = newVal; - if (typeof(this.trackData) === "undefined") { - //this.createTrackData(); - } this.trackData.arrPositionTracks = newVal; } @@ -189,8 +190,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._positionTracksRepetition = newVal; } }, - - + + /* Transform Property Tracks */ _arrTransformTracks : { value: [] @@ -470,6 +471,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.bypassAnimation = this.trackData.bypassAnimation; this.trackID = this.trackData.layerID; this.tweens = this.trackData.tweens; + this.arrPositionTracks = this.trackData.arrPositionTracks; this.animatedElement = this.trackData.animatedElement; this.arrStyleTracks = this.trackData.arrStyleTracks; this.isTrackAnimated = this.trackData.isTrackAnimated; @@ -486,6 +488,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.needsDraw = true; } }, + createTrackData: { value: function() { tempData = {}; @@ -494,6 +497,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { tempData.tweens = this.tweens; tempData.animatedElement = this.animatedElement; tempData.arrStyleTracks = this.arrStyleTracks; + tempData.arrPositionTracks = this.arrPositionTracks; tempData.isTrackAnimated = this.isTrackAnimated; tempData.trackDuration = this.trackDuration; tempData.animationName = this.animationName; @@ -785,10 +789,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.nextKeyframe += 1; } + this.createMatchingPositionSizeTweens(clickPos); + this.application.ninja.currentDocument.model.needsSave = true; } }, + createMatchingPositionSizeTweens:{ + value:function (position) { + console.log(this.positionTracksRepetition); + var i; + var posTracks = this.positionTracksRepetition.length; + for (i = 0; i < posTracks; i++) { + + } + } + }, + splitTween:{ value:function (ev) { var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX, -- cgit v1.2.3 From a065caf8793cafe5508bffe572ba95e0017840b8 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 19 Jun 2012 12:44:58 -0700 Subject: Lock Position and Size keyframes to main track keyframes Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 15 ++++++++------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 20 ++++++++++++-------- 2 files changed, 20 insertions(+), 15 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 0605e300..3a998617 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -17,7 +17,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:function(){ this.element.addEventListener("click", this, false); this.trackID = this.parentComponent.parentComponent.parentComponent.trackID; - this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; + this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; this.ninjaStylesContoller = this.application.ninja.stylesController; } }, @@ -180,7 +180,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { if (ev.shiftKey) { if (this.trackType == "position") { - this.parentComponent.parentComponent.parentComponent.handleNewTween(ev); + this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev); } if (this.propTweens.length < 1) { @@ -199,16 +199,17 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } + this.insertPropTween(0); + this.addPropAnimationRuleToElement(ev); + this.updatePropKeyframeRule(); } else if (this.trackType == "position") { //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } - - this.insertPropTween(0); - this.addPropAnimationRuleToElement(ev); - this.updatePropKeyframeRule(); } else { this.handleNewPropTween(ev); - this.updatePropKeyframeRule(); + if (this.trackType == "style") { + this.updatePropKeyframeRule(); + } } } } diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 26ccfe09..1a8b6f4e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -763,12 +763,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.keyFrameMillisec = 0; newTween.tweenData.tweenID = 0; newTween.tweenData.spanPosition = 0; + newTween.tweenData.easing = "none"; newTween.tweenData.tweenedProperties = []; newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px"; newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px"; this.tweens.push(newTween); + + this.createMatchingPositionSizeTween(newTween); + } else { newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; newTween.tweenData.keyFramePosition = clickPos; @@ -787,21 +791,22 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var animationDuration = (this.trackDuration / 1000) + "s"; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.nextKeyframe += 1; + + this.createMatchingPositionSizeTween(newTween); } - this.createMatchingPositionSizeTweens(clickPos); + this.application.ninja.currentDocument.model.needsSave = true; } }, - createMatchingPositionSizeTweens:{ - value:function (position) { - console.log(this.positionTracksRepetition); + createMatchingPositionSizeTween:{ + value:function (newTween) { var i; - var posTracks = this.positionTracksRepetition.length; + var posTracks = this.positionTracksRepetition.childComponents.length; for (i = 0; i < posTracks; i++) { - + this.positionTracksRepetition.childComponents[i].propTweens.push(newTween); } } }, @@ -812,8 +817,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { i, tweensLength = this.tweens.length-1, prevTween, nextTween, splitTweenIndex; - - consol.log(ev.target.className) + for(i=0; i --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 83 +++++++++++++++++++++- js/panels/Timeline/Tween.reel/Tween.js | 3 + 2 files changed, 84 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 3a998617..9971933f 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -231,11 +231,28 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { }, handleNewPropTween:{ - value:function(ev){ + value:function (ev) { if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { this.insertPropTween(ev.offsetX); } else { - console.log("Splitting style tweens not yet supported."); + // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. + // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. + + // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element + var findXOffset = function (obj) { + var curleft = 0; + if (obj.offsetParent) { + do { + curleft += (obj.offsetLeft - obj.scrollLeft); + + } while (obj = obj.offsetParent); + } + return curleft; + } + var targetElementOffset = findXOffset(ev.currentTarget), + position = event.pageX - targetElementOffset; + + this.splitPropTweenAt(position - 18); } } }, @@ -324,6 +341,68 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + // splitTweenAt: Split a tween at a particular position (x coordinate) + splitPropTweenAt:{ + value:function (position) { + var i, j, nextComponentIndex, + tweensLength = this.propTweens.length - 1, + prevTween, + nextTween, + splitTweenIndex; + + // Search through the tweens and find the pair whose keyframes bracket position. + for (i = 0; i < tweensLength; i++) { + prevTween = this.propTweens[i].tweenData.keyFramePosition; + nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; + if (position > prevTween && position < nextTween) { + + // We will insert a new tween at this index + splitTweenIndex = i + 1; + + // Update the next tween to have new span position and width. + this.propTweens[i + 1].tweenData.spanPosition = position; + this.propTweens[i + 1].spanPosition = position; + this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - position; + this.propTweens[i + 1].spanWidth = this.propTweens[i + 1].keyFramePosition - position; + + // You'd think that would be enough to make the component associated with that part of the array redraw, wouldn't you? + // Turns out we have to manually poke the desired childComponent in the repetition to register its new changes. + // So we have to get the index of the actual componentin the repetition, which may not match our iteration index. + for (j = 0; j < tweensLength + 1; j++) { + if (this.propTweenRepetition.childComponents[j].keyFramePosition === nextTween) { + nextComponentIndex = j; + } + } + this.propTweenRepetition.childComponents[nextComponentIndex].setData(); + + // Create the new tween and splice it into the model + var newTweenToInsert = {}; + newTweenToInsert.tweenData = {}; + newTweenToInsert.tweenData.spanWidth = position - prevTween; + newTweenToInsert.tweenData.keyFramePosition = position; + newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * position; + newTweenToInsert.tweenData.tweenID = this.propTweens.length; + newTweenToInsert.tweenData.spanPosition = position - newTweenToInsert.tweenData.spanWidth; + newTweenToInsert.tweenData.tweenedProperties = []; + newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); + + // We are done, so end the loop. + i = tweensLength; + } + } + + // We've made a change, so set the needsSave flag + this.application.ninja.currentDocument.model.needsSave = true; + + // Our tween IDs are now all messed up. Fix them. + for (i = 0; i <= tweensLength + 1; i++) { + this.propTweens[i].tweenID = i; + this.propTweens[i].tweenData.tweenID = i; + } + } + }, + retrieveStoredStyleTweens:{ value:function(){ var percentValue, fraction, splitValue; diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index dcc139a5..db368caf 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -271,6 +271,9 @@ var Tween = exports.Tween = Montage.create(Component, { // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) this.tweenedProperties["-webkit-animation-timing-function"] = easeType; if(this.parentComponent.parentComponent.isSubproperty){ + if(this.parentComponent.parentComponent.trackType == "position"){ + return; + } this.parentComponent.parentComponent.updatePropKeyframeRule(); } else { this.parentComponent.parentComponent.updateKeyframeRule(); -- cgit v1.2.3