diff options
Diffstat (limited to 'js/panels/Timeline')
4 files changed, 68 insertions, 20 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index c9dd5328..9fb33956 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -60,7 +60,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
60 | } | 60 | } |
61 | }, | 61 | }, |
62 | _styleCounter : { | 62 | _styleCounter : { |
63 | value: 0 | 63 | value: 4 |
64 | }, | 64 | }, |
65 | styleCounter:{ | 65 | styleCounter:{ |
66 | serializable:true, | 66 | serializable:true, |
@@ -557,7 +557,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
557 | // Or at the end, if no rule is selected. | 557 | // Or at the end, if no rule is selected. |
558 | 558 | ||
559 | var newLength = 0, | 559 | var newLength = 0, |
560 | mySelection = 0, | 560 | // mySelection = 0, |
561 | // newStyle = LayerStyle.create(), | 561 | // newStyle = LayerStyle.create(), |
562 | newStyle = {}, | 562 | newStyle = {}, |
563 | newEvent = document.createEvent("CustomEvent"); | 563 | newEvent = document.createEvent("CustomEvent"); |
@@ -571,7 +571,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
571 | newEvent.layerEventType = "newStyle"; | 571 | newEvent.layerEventType = "newStyle"; |
572 | newEvent.layerID = this.layerID; | 572 | newEvent.layerID = this.layerID; |
573 | newEvent.styleIndex = this.styleCounter; | 573 | newEvent.styleIndex = this.styleCounter; |
574 | newEvent.styleID = this.layerID + "@" + this.styleCounter; | 574 | newEvent.styleID = this.layerID + "@" + this.styleCounter; // is this property needed? |
575 | 575 | ||
576 | newStyle.styleID = newEvent.styleID; | 576 | newStyle.styleID = newEvent.styleID; |
577 | newStyle.whichView = "hintable"; | 577 | newStyle.whichView = "hintable"; |
@@ -583,7 +583,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
583 | 583 | ||
584 | // Set up the event info and dispatch the event | 584 | // Set up the event info and dispatch the event |
585 | this.styleCounter += 1; | 585 | this.styleCounter += 1; |
586 | newEvent.styleSelection = mySelection; | 586 | // newEvent.styleSelection = mySelection; |
587 | defaultEventManager.dispatchEvent(newEvent); | 587 | defaultEventManager.dispatchEvent(newEvent); |
588 | } | 588 | } |
589 | }, | 589 | }, |
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 3c648642..8316540b 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -24,7 +24,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
24 | 24 | ||
25 | draw:{ | 25 | draw:{ |
26 | value:function(){ | 26 | value:function(){ |
27 | 27 | console.log(this.trackType); | |
28 | } | 28 | } |
29 | }, | 29 | }, |
30 | 30 | ||
@@ -105,18 +105,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
105 | } | 105 | } |
106 | }, | 106 | }, |
107 | 107 | ||
108 | _styleSelection:{ | 108 | _trackType:{ |
109 | value:null | 109 | value:null |
110 | }, | 110 | }, |
111 | 111 | ||
112 | styleSelection:{ | 112 | trackType:{ |
113 | serializable:true, | 113 | serializable:true, |
114 | get:function () { | 114 | get:function () { |
115 | return this._styleSelection; | 115 | return this._trackType; |
116 | }, | 116 | }, |
117 | set:function (value) { | 117 | set:function (value) { |
118 | if (value !== this._styleSelection) { | 118 | if (value !== this._trackType) { |
119 | this._styleSelection = value; | 119 | this._trackType = value; |
120 | } | 120 | } |
121 | } | 121 | } |
122 | }, | 122 | }, |
@@ -145,7 +145,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
145 | 145 | ||
146 | this.styleIndex = this.propTrackData.styleIndex; | 146 | this.styleIndex = this.propTrackData.styleIndex; |
147 | this.propTweens = this.propTrackData.propTweens; | 147 | this.propTweens = this.propTrackData.propTweens; |
148 | this.styleSelection = this.propTrackData.styleSelection; | 148 | this.trackType = this.propTrackData.trackType; |
149 | this.needsDraw = true; | 149 | this.needsDraw = true; |
150 | } | 150 | } |
151 | }, | 151 | }, |
@@ -153,21 +153,29 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
153 | handleClick:{ | 153 | handleClick:{ |
154 | value:function(ev){ | 154 | value:function(ev){ |
155 | if (ev.shiftKey) { | 155 | if (ev.shiftKey) { |
156 | console.log(this.trackType); | ||
156 | if (this.propTweens.length < 1) { | 157 | if (this.propTweens.length < 1) { |
157 | 158 | ||
158 | // check if there is an editor property assigned yet | 159 | // check if there is an editor property assigned yet |
159 | // get this property track's editor prop name from layer data arrays | 160 | // get this property track's editor prop name from layer data arrays |
160 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 161 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
161 | 162 | ||
162 | if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) { | 163 | if (this.trackType === "style") { |
163 | console.log("Please enter a style property for this track before adding keyframes."); | 164 | if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) { |
164 | return; | 165 | console.log("Please enter a style property for this track before adding keyframes."); |
165 | } else { | 166 | return; |
166 | this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; | 167 | } else { |
167 | console.log("Property track editorProperty set to: " + this.trackEditorProperty); | 168 | this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; |
169 | console.log("Property track editorProperty set to: " + this.trackEditorProperty); | ||
170 | } | ||
171 | } else if (this.trackType === "position") { | ||
172 | console.log("clicking on position track"); | ||
173 | |||
174 | console.log(this.trackEditorProperty); | ||
168 | } | 175 | } |
169 | 176 | ||
170 | 177 | ||
178 | |||
171 | this.insertPropTween(0); | 179 | this.insertPropTween(0); |
172 | this.addPropAnimationRuleToElement(ev); | 180 | this.addPropAnimationRuleToElement(ev); |
173 | this.updatePropKeyframeRule(); | 181 | this.updatePropKeyframeRule(); |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 3f3bf24a..b666f921 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | |||
@@ -98,7 +98,14 @@ | |||
98 | "prototype" : "js/panels/Timeline/PropertyTrack.reel", | 98 | "prototype" : "js/panels/Timeline/PropertyTrack.reel", |
99 | "properties" : { | 99 | "properties" : { |
100 | "element":{"#": "position-track-base"} | 100 | "element":{"#": "position-track-base"} |
101 | } | 101 | }, |
102 | "bindings" : { | ||
103 | "propTrackData" : { | ||
104 | "boundObject" : {"@" : "positionTracksRepetition"}, | ||
105 | "boundObjectPropertyPath" : "objectAtCurrentIteration.propTrackData", | ||
106 | "oneway" : false | ||
107 | } | ||
108 | } | ||
102 | }, | 109 | }, |
103 | 110 | ||
104 | "mainCollapser" : { | 111 | "mainCollapser" : { |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 891feada..2ce1a637 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -801,8 +801,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
801 | 801 | ||
802 | // create track objects for position and transform tracks and push into arrays instead of dummy arrays | 802 | // create track objects for position and transform tracks and push into arrays instead of dummy arrays |
803 | 803 | ||
804 | //this.createPositionTracks(); | 804 | this.createPositionTracks(); |
805 | this.arrPositionTracks = [0, 1, 2, 3]; | 805 | //this.arrPositionTracks = [0, 1, 2, 3]; |
806 | 806 | ||
807 | // get rid of transform tracks | 807 | // get rid of transform tracks |
808 | //this.arrTransformTracks = [0, 1, 2, 3, 4]; | 808 | //this.arrTransformTracks = [0, 1, 2, 3, 4]; |
@@ -816,6 +816,38 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
816 | createPositionTracks:{ | 816 | createPositionTracks:{ |
817 | value:function(){ | 817 | value:function(){ |
818 | // create track objects for position and transform tracks and push into arrays | 818 | // create track objects for position and transform tracks and push into arrays |
819 | |||
820 | // create 'top' track | ||
821 | var newTopTrack = {}; | ||
822 | newTopTrack.propTrackData = {}; | ||
823 | newTopTrack.propTrackData.propTweens = []; | ||
824 | newTopTrack.propTrackData.styleIndex = 0; | ||
825 | newTopTrack.propTrackData.trackType = "position"; | ||
826 | this.arrPositionTracks.push(newTopTrack); | ||
827 | |||
828 | // create 'left' track | ||
829 | var newLeftTrack = {}; | ||
830 | newLeftTrack.propTrackData = {}; | ||
831 | newLeftTrack.propTrackData.propTweens = []; | ||
832 | newLeftTrack.propTrackData.styleIndex = 1; | ||
833 | newLeftTrack.propTrackData.trackType = "position"; | ||
834 | this.arrPositionTracks.push(newLeftTrack); | ||
835 | |||
836 | // create 'width' track | ||
837 | var newWidthTrack = {}; | ||