diff options
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 3 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 20 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 6 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 79 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 34 |
5 files changed, 124 insertions, 18 deletions
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, { | |||
76 | 76 | ||
77 | selectKeyframe:{ | 77 | selectKeyframe:{ |
78 | value:function(){ | 78 | value:function(){ |
79 | if(this.isSelected){ | ||
80 | return; | ||
81 | } | ||
79 | 82 | ||
80 | if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){ | 83 | if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){ |
81 | var tweenID = this.parentComponent.tweenID; | 84 | var tweenID = this.parentComponent.tweenID; |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 776d5ec8..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, { | |||
325 | value: false | 325 | value: false |
326 | }, | 326 | }, |
327 | isActive: { | 327 | isActive: { |
328 | serializable:true, | ||
328 | get: function() { | 329 | get: function() { |
329 | return this._isActive; | 330 | return this._isActive; |
330 | }, | 331 | }, |
@@ -752,12 +753,20 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
752 | //defaultEventManager.dispatchEvent(newEvent); | 753 | //defaultEventManager.dispatchEvent(newEvent); |
753 | 754 | ||
754 | // Dispatch the event to the TimelineTrack component associated with this Layer. | 755 | // Dispatch the event to the TimelineTrack component associated with this Layer. |
755 | var myIndex = this.application.ninja.timeline.getActiveLayerIndex(), | 756 | var myIndex = false, |
757 | i = 0, | ||
758 | arrLayersLength = this.parentComponent.parentComponent.arrLayers.length, | ||
756 | arrTracks = document.querySelectorAll('[data-montage-id="track"]'); | 759 | arrTracks = document.querySelectorAll('[data-montage-id="track"]'); |
757 | 760 | ||
761 | for (i = 0; i < arrLayersLength; i++) { | ||
762 | if (this.stageElement == this.parentComponent.parentComponent.arrLayers[i].layerData.stageElement) { | ||
763 | myIndex = i; | ||
764 | } | ||
765 | } | ||
766 | |||
758 | if (myIndex !== false) { | 767 | if (myIndex !== false) { |
759 | arrTracks[myIndex].dispatchEvent(newEvent); | 768 | arrTracks[myIndex].dispatchEvent(newEvent); |
760 | } | 769 | } |
761 | } | 770 | } |
762 | }, | 771 | }, |
763 | 772 | ||
@@ -945,12 +954,14 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
945 | this.isMainCollapsed = false; | 954 | this.isMainCollapsed = false; |
946 | } else { | 955 | } else { |
947 | this.isMainCollapsed = true; | 956 | this.isMainCollapsed = true; |
957 | this.application.ninja.timeline.synchScrollbars(43); | ||
948 | } | 958 | } |
949 | this.triggerOutgoingBinding(); | 959 | this.triggerOutgoingBinding(); |
950 | } | 960 | } |
951 | }, | 961 | }, |
952 | handlePositionCollapserClick : { | 962 | handlePositionCollapserClick : { |
953 | value: function(event) { | 963 | value: function(event) { |
964 | var myHeight = this.positionCollapser.element.offsetHeight; | ||
954 | this.positionCollapser.bypassAnimation = false; | 965 | this.positionCollapser.bypassAnimation = false; |
955 | this.bypassAnimation = false; | 966 | this.bypassAnimation = false; |
956 | this.layerData.bypassAnimation = false; | 967 | this.layerData.bypassAnimation = false; |
@@ -958,12 +969,14 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
958 | this.isPositionCollapsed = false; | 969 | this.isPositionCollapsed = false; |
959 | } else { | 970 | } else { |
960 | this.isPositionCollapsed = true; | 971 | this.isPositionCollapsed = true; |
972 | this.application.ninja.timeline.synchScrollbars(myHeight); | ||
961 | } | 973 | } |
962 | this.triggerOutgoingBinding(); | 974 | this.triggerOutgoingBinding(); |
963 | } | 975 | } |
964 | }, | 976 | }, |
965 | handleStyleCollapserClick : { | 977 | handleStyleCollapserClick : { |
966 | value: function(event) { | 978 | value: function(event) { |
979 | var myHeight = this.styleCollapser.element.offsetHeight; | ||
967 | this.styleCollapser.bypassAnimation = false; | 980 | this.styleCollapser.bypassAnimation = false; |
968 | this.bypassAnimation = false; | 981 | this.bypassAnimation = false; |
969 | this.layerData.bypassAnimation = false; | 982 | this.layerData.bypassAnimation = false; |
@@ -971,6 +984,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
971 | this.isStyleCollapsed = false; | 984 | this.isStyleCollapsed = false; |
972 | } else { | 985 | } else { |
973 | this.isStyleCollapsed = true; | 986 | this.isStyleCollapsed = true; |
987 | this.application.ninja.timeline.synchScrollbars(myHeight); | ||
974 | } | 988 | } |
975 | this.triggerOutgoingBinding(); | 989 | this.triggerOutgoingBinding(); |
976 | } | 990 | } |
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 @@ | |||
37 | "checkable_animated" : {"#" : "checkable_animated"}, | 37 | "checkable_animated" : {"#" : "checkable_animated"}, |
38 | "tl_configbutton" : {"#" : "tl-configbutton"}, | 38 | "tl_configbutton" : {"#" : "tl-configbutton"}, |
39 | "checkable_lock" : {"#" : "checkable_lock"}, | 39 | "checkable_lock" : {"#" : "checkable_lock"}, |
40 | "checkable_visible":{"#" : "checkable_visible"} | 40 | "checkable_visible":{"#" : "checkable_visible"}, |
41 | "play_button" : {"#" : "play_button"} | ||
41 | } | 42 | } |
42 | }, | 43 | }, |
43 | 44 | ||
@@ -164,10 +165,7 @@ | |||
164 | <div data-montage-id="leftpane_inside" class="leftinside"> | 165 | <div data-montage-id="leftpane_inside" class="leftinside"> |
165 | <div data-montage-id="timeline_controller" class="timelinecontroller"> | 166 | <div data-montage-id="timeline_controller" class="timelinecontroller"> |
166 | <div data-montage-id="timeline_controls" class="timelinecontrols"> | 167 | <div data-montage-id="timeline_controls" class="timelinecontrols"> |
167 | <div data-montage-id="rewind_button" class="rewindbutton"></div> | ||
168 | <div data-montage-id="play_button" class="playbutton"></div> | 168 | <div data-montage-id="play_button" class="playbutton"></div> |
169 | <div data-montage-id="pause_button" class="pausebutton"></div> | ||
170 | <div data-montage-id="forward_button" class="forwardbutton"></div> | ||
171 | <div data-montage-id="time_text" class="timetext">00:00:00</div> | 169 | <div data-montage-id="time_text" class="timetext">00:00:00</div> |
172 | </div> | 170 | </div> |
173 | </div> | 171 | </div> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 470062ba..12b481de 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, { | |||
243 | value: false | 243 | value: false |
244 | }, | 244 | }, |
245 | 245 | ||
246 | _areTracksCollapsing: { | ||
247 | value: false | ||
248 | }, | ||
249 | |||
246 | _currentOpenSpanMenu: { | 250 | _currentOpenSpanMenu: { |
247 | value: false | 251 | value: false |
248 | }, | 252 | }, |
@@ -687,6 +691,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
687 | // We have shuffled layers, so we need to update this.selectedLayers. | 691 | // We have shuffled layers, so we need to update this.selectedLayers. |
688 | this.selectLayers([]) | 692 | this.selectLayers([]) |
689 | } | 693 | } |
694 | |||
695 | // Do we need to scroll the layers? | ||
696 | if (this._areTracksCollapsing !== false) { | ||
697 | //console.log("diddraw: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop); | ||
698 | //this.layout_tracks.scrollTop = this.user_layers.scrollTop;\ | ||
699 | this.layout_tracks.scrollTop = this._areTracksCollapsing; | ||
700 | this._areTracksCollapsing = false; | ||
701 | } | ||
690 | } | 702 | } |
691 | }, | 703 | }, |
692 | 704 | ||
@@ -898,6 +910,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
898 | this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false); | 910 | this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false); |
899 | this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); | 911 | this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); |
900 | this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false); | 912 | this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false); |
913 | this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false); | ||
901 | 914 | ||
902 | this.addPropertyChangeListener("currentDocument.model.domContainer", this); | 915 | this.addPropertyChangeListener("currentDocument.model.domContainer", this); |
903 | 916 | ||
@@ -1073,15 +1086,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1073 | } | 1086 | } |
1074 | }, | 1087 | }, |
1075 | 1088 | ||
1089 | handlePlayButtonClick:{ | ||
1090 | value:function(ev){ | ||
1091 | this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview; | ||
1092 | |||
1093 | if (this.application.ninja.appModel.livePreview) { | ||
1094 | this.play_button.classList.remove("playbutton"); | ||
1095 | this.play_button.classList.add("pausebutton"); | ||
1096 | |||
1097 | } else { | ||
1098 | this.play_button.classList.remove("pausebutton"); | ||
1099 | this.play_button.classList.add("playbutton"); | ||
1100 | } | ||
1101 | } | ||
1102 | }, | ||
1103 | |||
1076 | handleKeyframeShortcut:{ | 1104 | handleKeyframeShortcut:{ |
1077 | value:function(action){ | 1105 | value:function(action){ |
1078 | var tempEv = {}; | 1106 | var tempEv = {}; |
1079 | tempEv.offsetX = this.playheadmarker.offsetLeft; | 1107 | tempEv.offsetX = this.playheadmarker.offsetLeft; |
1080 | tempEv.actionType = action; |