From aabd9b98341308cd0d276e6e788b7a3f9531c394 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 21 Jun 2012 11:32:20 -0700 Subject: Timeline: Bug Fix: Document switching was doubling position tracks. --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 5 +++++ 1 file changed, 5 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 bf380e00..3cf754b8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -1051,6 +1051,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { createPositionTracks:{ value:function(){ // create track objects for position and transform tracks and push into arrays + + // ... but only do it if we haven't already. + if (this.arrPositionTracks.length > 0) { + return; + } // create 'left' track var newLeftTrack = {}; -- cgit v1.2.3 From 616ade06c8f669d18c27d27c3ee46a9c844a54ca Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 26 Jun 2012 08:12:33 -0700 Subject: Timeline Bug fixes Fix keyframe selection updating stage for sub props. Fix tween 0 for sub props on re-open. Fix repetition mismatch for styles and position tracks. Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.html | 21 +++++++++++---------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 1 + 2 files changed, 12 insertions(+), 10 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 79014ae6..658764c8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -56,7 +56,7 @@ "styleTrackRepetition": { "prototype": "montage/ui/repetition.reel", "properties": { - "element": {"#": "content-styles"}, + "element": {"#": "content_style_tracks"}, "isSelectionEnabled" : false }, "bindings": { @@ -195,22 +195,23 @@
-
-
-
+
+ +
-
- -
-
-
+
+ +
+
+
+
+
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index dc1a5d99..7576b33f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -969,6 +969,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.tweenID = 0; newTween.tweenData.spanPosition = 0; this.tweens.push(newTween); + this.createMatchingPositionSizeTween(newTween); } else { tempTiming = trackTiming.split("s"); -- cgit v1.2.3 From e1d35d82d144d51a107a4facd47b47cffde79bcf Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 26 Jun 2012 08:59:32 -0700 Subject: Move time marker when clicking anywhere in timeline tracks Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 8 ++++++++ 1 file changed, 8 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 7576b33f..e6b773c9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -682,6 +682,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // 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.playheadmarker.style.left = ev.offsetX + "px"; + var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + var currentMillisec = currentMillisecPerPixel * ev.offsetX; + this.application.ninja.timeline.updateTimeText(currentMillisec); + if (ev.shiftKey) { if (this.tweens.length < 1) { this.insertTween(0); @@ -1051,6 +1057,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; + console.log(this.animationName); + for (var i = 0; i < this.tweens.length; i++) { var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec); // TODO - trackDur should be parseFloat rounded to significant digits -- cgit v1.2.3 From f0d4d89d856b99da1ca8dd3366c48bb76ba6b1f6 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 26 Jun 2012 09:08:47 -0700 Subject: Fix play marker appearing in wrong position when clicking on a tween Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 35 ++++++++++++---------- 1 file changed, 20 insertions(+), 15 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 e6b773c9..3a8d1ff3 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -683,9 +683,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // This needs to move to a keyboard shortcut that is TBD var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.playheadmarker.style.left = ev.offsetX + "px"; + var targetElementOffset = this.findXOffset(ev.currentTarget), + position = (event.pageX - targetElementOffset) - 18; + + this.application.ninja.timeline.playheadmarker.style.left = position + "px"; var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - var currentMillisec = currentMillisecPerPixel * ev.offsetX; + var currentMillisec = currentMillisecPerPixel * position; this.application.ninja.timeline.updateTimeText(currentMillisec); if (ev.shiftKey) { @@ -733,19 +736,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } else { // 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), + var targetElementOffset = this.findXOffset(ev.currentTarget), position = event.pageX - targetElementOffset; this.splitTweenAt(position-18); @@ -753,6 +744,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + findXOffset:{ + value:function (obj) { + // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element + var curleft = 0; + if (obj.offsetParent) { + do { + curleft += (obj.offsetLeft - obj.scrollLeft); + + } while (obj = obj.offsetParent); + } + return curleft; + } + }, + insertTween:{ value:function (clickPos) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); -- cgit v1.2.3 From 64a3eb467e3ba92d2b0dd2c060d09ad6331cb763 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 26 Jun 2012 10:36:47 -0700 Subject: Fix animation to end at last keyframe Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 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 3a8d1ff3..98989022 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -1039,16 +1039,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function (tweenEvent) { this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; + this.tweens[0].tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px"; + this.tweens[0].tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px"; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; this.animationName = this.animatedElement.classList[0] + "_PositionSize"; this.animationNamesString = this.animationName; 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-fill-mode", "forwards"); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); + 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.insertTween(tweenEvent.offsetX); this.isTrackAnimated = true; } @@ -1062,7 +1065,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; - console.log(this.animationName); + //console.log(this.animationName); for (var i = 0; i < this.tweens.length; i++) { var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec); -- cgit v1.2.3 From 9aa987003f0c7866e66aabcc7d9cc2b9da8ed91c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 26 Jun 2012 13:49:03 -0700 Subject: Timeline: Bug fix: Indexing on styles when loading files. --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 14 ++++++++++++++ 1 file changed, 14 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 98989022..d4eabbf5 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -72,6 +72,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackData.isVisible = value; } }, + + _stageElement: { + value: null + }, + stageElement: { + get: function() { + return this._stageElement; + }, + set: function(newVal) { + this._stageElement = newVal; + this.trackData.stageElement = newVal; + } + }, // Are the various collapsers collapsed or not _isMainCollapsed:{ @@ -484,6 +497,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.isStyleCollapsed = this.trackData.isStyleCollapsed; this.trackPosition = this.trackData.trackPosition; this.isVisible = this.trackData.isVisible; + this.stageElement = this.trackData.stageElement; this.trackEditorProperty = "master"; this.needsDraw = true; } -- cgit v1.2.3 From ab9d14780eed98f39786fae4518e69861b34bad7 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 26 Jun 2012 14:56:58 -0700 Subject: Timeline: Bug fix: Keyboard shortcut now works for adding keyframes, including splitting tweens. --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 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 d4eabbf5..297423dd 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -743,6 +743,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { handleNewTween:{ value:function (ev) { + if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.selectLayer(selectedIndex, false); @@ -750,10 +751,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } else { // 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. - var targetElementOffset = this.findXOffset(ev.currentTarget), - position = event.pageX - targetElementOffset; - - this.splitTweenAt(position-18); + if (typeof(ev.currentTarget) === "undefined") { + this.splitTweenAt(ev.offsetX); + } else { + var targetElementOffset = this.findXOffset(ev.currentTarget), + position = event.pageX - targetElementOffset; + this.splitTweenAt(position-18); + } } } }, @@ -762,6 +766,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function (obj) { // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element var curleft = 0; + if (typeof(obj) === "undefined") { + //debugger; + } if (obj.offsetParent) { do { curleft += (obj.offsetLeft - obj.scrollLeft); -- cgit v1.2.3 From 45a5deac8ee1e38a6835275230f947b6aa8fb62a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 26 Jun 2012 15:13:05 -0700 Subject: Timeline: Bug fix: Adding or splitting tweens on multiple layers at once will no longer change the selection. --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 5 ++--- 1 file changed, 2 insertions(+), 3 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 297423dd..014d3f34 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -706,6 +706,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.application.ninja.timeline.updateTimeText(currentMillisec); if (ev.shiftKey) { + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + this.application.ninja.timeline.selectLayer(selectedIndex, true); if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); @@ -781,9 +783,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { insertTween:{ value:function (clickPos) { - var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.selectLayer(selectedIndex, true); - var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; this.trackDuration = currentMillisec; -- cgit v1.2.3 From 0b0ad28a216d839aab37b2563912bb82f79768d1 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 27 Jun 2012 12:08:54 -0700 Subject: Fix animation names breaking Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 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 014d3f34..26ce526f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -1063,8 +1063,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.tweens[0].tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px"; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; this.animationName = this.animatedElement.classList[0] + "_PositionSize"; - this.animationNamesString = this.animationName; - this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); + if(this.animationNamesString.length == 0){ + this.animationNamesString = this.animationName; + } else { + this.animationNamesString = this.animationName + ", " + this.animationNamesString; + } + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationNamesString); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards"); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); -- cgit v1.2.3