From 390e5f7e3ba41ef0c71d1f944d926f9eee0c8846 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 26 Jun 2012 12:34:30 -0700 Subject: Timeline: Bug fix IKNINJA-1816 --- js/panels/Timeline/Layer.reel/Layer.js | 5 +++++ .../Timeline/TimelinePanel.reel/TimelinePanel.js | 26 ++++++++++++++++++++++ 2 files changed, 31 insertions(+) (limited to 'js/panels') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 776d5ec8..a8c22b2a 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -945,12 +945,14 @@ var Layer = exports.Layer = Montage.create(Component, { this.isMainCollapsed = false; } else { this.isMainCollapsed = true; + this.application.ninja.timeline.synchScrollbars(43); } this.triggerOutgoingBinding(); } }, handlePositionCollapserClick : { value: function(event) { + var myHeight = this.positionCollapser.element.offsetHeight; this.positionCollapser.bypassAnimation = false; this.bypassAnimation = false; this.layerData.bypassAnimation = false; @@ -958,12 +960,14 @@ var Layer = exports.Layer = Montage.create(Component, { this.isPositionCollapsed = false; } else { this.isPositionCollapsed = true; + this.application.ninja.timeline.synchScrollbars(myHeight); } this.triggerOutgoingBinding(); } }, handleStyleCollapserClick : { value: function(event) { + var myHeight = this.styleCollapser.element.offsetHeight; this.styleCollapser.bypassAnimation = false; this.bypassAnimation = false; this.layerData.bypassAnimation = false; @@ -971,6 +975,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.isStyleCollapsed = false; } else { this.isStyleCollapsed = true; + this.application.ninja.timeline.synchScrollbars(myHeight); } this.triggerOutgoingBinding(); } diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 470062ba..ceb37db6 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -243,6 +243,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value: false }, + _areTracksCollapsing: { + value: false + }, + _currentOpenSpanMenu: { value: false }, @@ -687,6 +691,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // We have shuffled layers, so we need to update this.selectedLayers. this.selectLayers([]) } + + // Do we need to scroll the layers? + if (this._areTracksCollapsing !== false) { + //console.log("diddraw: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop); + //this.layout_tracks.scrollTop = this.user_layers.scrollTop;\ + this.layout_tracks.scrollTop = this._areTracksCollapsing; + this._areTracksCollapsing = false; + } } }, @@ -1097,11 +1109,25 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.drawTimeMarkers(); } }, + + synchScrollbars: { + value: function(intScrollBy) { + //this.updateLayerScroll(); + //this.user_layers.scrollTop = 0; + //this.layout_tracks.scrollTop = this.user_layers.scrollTop; + //console.log("synch: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop); + this._areTracksCollapsing = this.layout_tracks.scrollTop - intScrollBy; + this.needsDraw = true; + + } + }, updateLayerScroll:{ value:function () { + //console.log("TimelinePanel.updateLayerScroll") this._areTracksScrolling = true; this.needsDraw = true; + } }, -- cgit v1.2.3 From df6e43cea10a0c976390017ba41c33f74c4b7692 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 26 Jun 2012 13:38:57 -0700 Subject: Fix - deselect tweens when selecting a layer Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 470062ba..040ae7be 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1188,6 +1188,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (this.currentLayersSelected !== false) { this.currentLayersSelected = false; } + + // Deselect any tweens + this.deselectTweens(); // If we are actually going to be selecting things, create an empty array to use if (arrSelectedIndexesLength > 0) { -- 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/Layer.reel/Layer.js | 14 +++++++++++--- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 14 ++++++++++++++ 2 files changed, 25 insertions(+), 3 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index a8c22b2a..2deb20da 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -752,12 +752,20 @@ var Layer = exports.Layer = Montage.create(Component, { //defaultEventManager.dispatchEvent(newEvent); // Dispatch the event to the TimelineTrack component associated with this Layer. - var myIndex = this.application.ninja.timeline.getActiveLayerIndex(), + var myIndex = false, + i = 0, + arrLayersLength = this.parentComponent.parentComponent.arrLayers.length, arrTracks = document.querySelectorAll('[data-montage-id="track"]'); - + + for (i = 0; i < arrLayersLength; i++) { + if (this.stageElement == this.parentComponent.parentComponent.arrLayers[i].layerData.stageElement) { + myIndex = i; + } + } + if (myIndex !== false) { arrTracks[myIndex].dispatchEvent(newEvent); - } + } } }, 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. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 34 +++++++++++++++++++--- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 15 +++++++--- 2 files changed, 41 insertions(+), 8 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index ceb37db6..3f1af281 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1090,10 +1090,36 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { var tempEv = {}; tempEv.offsetX = this.playheadmarker.offsetLeft; tempEv.actionType = action; - if (typeof(this.trackRepetition.childComponents[this.currentLayersSelected[0]]) !== "undefined") { - this.trackRepetition.childComponents[this.currentLayersSelected[0]].handleKeyboardShortcut(tempEv); - } else { - // oops, we do not have a layer selected. We should growl at the user. For now, this will fail silently. + + if (this.currentLayersSelected === false) { + // oops, we do not have a layer selected. We should growl at the user. For now, this will fail silently. + return; + } + + // Okay. We need to get the correct layer(s). For each currentElementSelected, + // loop through trackRepetition.childComponents and compare to stageElement. + // If they match, that's one of the components that needs the event. + var i = 0, + j = 0, + currentElementsSelectedLength = this.currentElementsSelected.length, + trackRepLength = this.trackRepetition.childComponents.length, + arrTargetIndexes = [], + arrTargetIndexesLength = 0; + + + for (i = 0; i < trackRepLength; i++) { + var currentElement = this.trackRepetition.childComponents[i].stageElement; + for (j = 0; j < currentElementsSelectedLength; j++) { + if (currentElement === this.currentElementsSelected[j]) { + arrTargetIndexes.push(i); + } + } + } + arrTargetIndexesLength = arrTargetIndexes.length; + + // Now we have an array of things that need to handle the event. + for (i = 0; i < arrTargetIndexesLength; i++) { + this.trackRepetition.childComponents[arrTargetIndexes[i]].handleKeyboardShortcut(tempEv); } } }, 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') 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 bdeedb6c37212b4991b5f492ce665361997dd8e6 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 26 Jun 2012 16:52:08 -0700 Subject: Fix missing serialization in Layer.js Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 2deb20da..b4833fa2 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -325,6 +325,7 @@ var Layer = exports.Layer = Montage.create(Component, { value: false }, isActive: { + serializable:true, get: function() { return this._isActive; }, -- cgit v1.2.3 From 555b03e7be67f387a07433f8fd59d533b5c4993e Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 26 Jun 2012 17:07:58 -0700 Subject: Fix keyframe selection stickiness Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'js/panels') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 95a94b36..f7c936f7 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -76,6 +76,9 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { selectKeyframe:{ value:function(){ + if(this.isSelected){ + return; + } if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){ var tweenID = this.parentComponent.tweenID; -- cgit v1.2.3 From 9cefcd17e5b1943685130553f6a4f62179df8936 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 26 Jun 2012 17:48:31 -0700 Subject: FIx - hook up play button in timeline to live preview Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 6 ++---- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 16 ++++++++++++++++ 2 files changed, 18 insertions(+), 4 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index eac361a8..f6fae9b8 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -37,7 +37,8 @@ "checkable_animated" : {"#" : "checkable_animated"}, "tl_configbutton" : {"#" : "tl-configbutton"}, "checkable_lock" : {"#" : "checkable_lock"}, - "checkable_visible":{"#" : "checkable_visible"} + "checkable_visible":{"#" : "checkable_visible"}, + "play_button" : {"#" : "play_button"} } }, @@ -164,10 +165,7 @@
-
-
-
00:00:00
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index af358468..12b481de 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -910,6 +910,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false); this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false); + this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false); this.addPropertyChangeListener("currentDocument.model.domContainer", this); @@ -1085,6 +1086,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + handlePlayButtonClick:{ + value:function(ev){ + this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview; + + if (this.application.ninja.appModel.livePreview) { + this.play_button.classList.remove("playbutton"); + this.play_button.classList.add("pausebutton"); + + } else { + this.play_button.classList.remove("pausebutton"); + this.play_button.classList.add("playbutton"); + } + } + }, + handleKeyframeShortcut:{ value:function(action){ var tempEv = {}; -- cgit v1.2.3