From 54fd77320dcce93987c138923bcb8a9b9899c4c0 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 3 May 2012 23:09:48 -0700 Subject: apply old stash to new branch initial work and stubs for sub property support. serialization for property track components and classes Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.html | 40 +++++++- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 113 +++++++++++++++++++++ .../PropertyTrack.reel/css/PropertyTrack.css | 9 +- .../PropertyTrack.scssc | Bin 0 -> 5151 bytes .../PropertyTrack.reel/scss/PropertyTrack.scss | 6 ++ .../Timeline/TimelineTrack.reel/TimelineTrack.html | 9 +- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 11 +- 7 files changed, 176 insertions(+), 12 deletions(-) create mode 100644 js/panels/Timeline/PropertyTrack.reel/scss/.sass-cache/a26ed2cbe268f8c721d1b1d8dfa075c8c5b47e72/PropertyTrack.scssc diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html index a4b598c5..40834466 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html @@ -13,16 +13,50 @@ "owner": { "prototype": "js/panels/Timeline/PropertyTrack.reel", "properties": { - "element": {"#": "property-track"} + "element": {"#": "property-track"}, + "propTweenRepetition" : {"@" : "propTweenRepetition"}, + "propTween": {"@" : "propTween"} } - } + }, + + "propTween" : { + "prototype" : "js/panels/timeline/Tween.reel", + "properties" : { + "element":{"#": "prop_track_lane"} + }, + "bindings" : { + "tweenData" : { + "boundObject" : {"@": "propTweenRepetition"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenData", + "oneway" : false + } + } + }, + "propTweenRepetition": { + "prototype": "montage/ui/repetition.reel", + "properties": { + "element": {"#": "prop_track_lanes"}, + "isSelectionEnabled" : false + }, + "bindings": { + "objects": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "propTweens", + "oneway": false + } + } + } } -

\ No newline at end of file diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 175b77f9..8f7745e5 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -15,6 +15,119 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { prepareForDraw:{ value:function(){ + this.element.addEventListener("click", this, false); + } + }, + + draw:{ + value:function(){ + + } + }, + + _propTweenRepetition:{ + value:null + }, + + propTweenRepetition:{ + serializable:true, + get:function () { + return this._propTweenRepetition; + }, + set:function (newVal) { + this._propTweenRepetition = newVal; + } + }, + + _propTweens:{ + value:[] + }, + + propTweens:{ + serializable:true, + get:function () { + return this._propTweens; + }, + set:function (newVal) { + this._propTweens = newVal; + } + }, + + nextKeyframe:{ + value:1 + }, + + handleClick:{ + value:function(ev){ + var parentTrackID = this.parentComponent.parentComponent.parentComponent.trackID; + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(parentTrackID); + //console.log(this.application.ninja.timeline.arrLayers[selectedIndex].layerData); + this.application.ninja.timeline.selectLayer(selectedIndex, true); + + if (ev.shiftKey) { + if (this.propTweens.length < 1) { + this.insertPropTween(0); + this.addPropAnimationRuleToElement(ev); + this.updatePropKeyframeRule(); + } else { + this.handleNewPropTween(ev); + this.updatePropKeyframeRule(); + } + } + } + }, + + handleNewPropTween:{ + value:function(ev){ + this.insertPropTween(ev.offsetX); + } + }, + + insertPropTween:{ + value:function(clickPos){ + var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + var currentMillisec = currentMillisecPerPixel * clickPos; + + var newTween = {}; + newTween.tweenData = {}; + + if (clickPos == 0) { + newTween.tweenData.spanWidth = 0; + newTween.tweenData.keyFramePosition = 0; + newTween.tweenData.keyFrameMillisec = 0; + newTween.tweenData.tweenID = 0; + newTween.tweenData.spanPosition = 0; + newTween.tweenData.tweenedProperties = []; + + this.propTweens.push(newTween); + + } else { + newTween.tweenData.spanWidth = clickPos - this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition; + newTween.tweenData.keyFramePosition = clickPos; + newTween.tweenData.keyFrameMillisec = currentMillisec; + newTween.tweenData.tweenID = this.nextKeyframe; + newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; + newTween.tweenData.tweenedProperties = []; + + this.propTweens.push(newTween); + + this.nextKeyframe += 1; + } + + this.application.ninja.documentController.activeDocument.needsSave = true; + } + }, + + updatePropKeyframeRule:{ + value:function(){ + + } + }, + + addPropAnimationRuleToElement:{ + value:function(tweenEvent){ + console.log("SECOND PROP TWEEN ADDING at " + tweenEvent.offsetX); + this.insertPropTween(tweenEvent.offsetX); } } diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css index cb119a14..ddcc536e 100644 --- a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css +++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css @@ -9,11 +9,18 @@ /* line 19, ../scss/PropertyTrack.scss */ .content-main .collapsible-content .timeline-track { height: 20px; + padding-top: 2px; border-bottom: 1px solid #505050; background-image: url("../images/gridline.jpg"); } -/* line 26, ../scss/PropertyTrack.scss */ +/* line 27, ../scss/PropertyTrack.scss */ .timeline-track .content-main { background-color: #474747; } + +/* line 31, ../scss/PropertyTrack.scss */ +.prop-track .collapsible-content.collapsible-collapsed { + overflow: hidden; + height: 0px; +} diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/.sass-cache/a26ed2cbe268f8c721d1b1d8dfa075c8c5b47e72/PropertyTrack.scssc b/js/panels/Timeline/PropertyTrack.reel/scss/.sass-cache/a26ed2cbe268f8c721d1b1d8dfa075c8c5b47e72/PropertyTrack.scssc new file mode 100644 index 00000000..38b8b6fe Binary files /dev/null and b/js/panels/Timeline/PropertyTrack.reel/scss/.sass-cache/a26ed2cbe268f8c721d1b1d8dfa075c8c5b47e72/PropertyTrack.scssc differ diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss index c7ae6f0c..31aed851 100644 --- a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss +++ b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss @@ -18,6 +18,7 @@ .content-main .collapsible-content .timeline-track { height: 20px; + padding-top: 2px; border-bottom: 1px solid $color-menu-divider; background-image: url("../images/gridline.jpg"); } @@ -26,3 +27,8 @@ .timeline-track .content-main { background-color: $color-menu-bg; } + +.prop-track .collapsible-content.collapsible-collapsed { + overflow: hidden; + height: 0px; +} \ No newline at end of file diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 44ad9abb..3936328e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -52,7 +52,6 @@ } } }, - "styleTrackRepetition": { "prototype": "montage/ui/repetition.reel", "properties": { @@ -67,6 +66,12 @@ } } }, + "stylePropertyTrack" : { + "prototype" : "js/panels/Timeline/PropertyTrack.reel", + "properties" : { + "element":{"#": "style-track-base"} + } + }, "positionTracksRepetition": { "prototype": "montage/ui/repetition.reel", "properties": { @@ -236,7 +241,7 @@

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index efeeba00..000c81e2 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -218,10 +218,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { tweenRepetition:{ get:function () { - return this._spanRepetition; + return this._tweenRepetition; }, set:function (newVal) { - this._spanRepetition = newVal; + this._tweenRepetition = newVal; } }, @@ -371,7 +371,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.bypassAnimation = this.trackData.bypassAnimation; this.trackID = this.trackData.layerID; this.tweens = this.trackData.tweens; - this.animatedElement = this.trackData.animatedElement; // unneeded with one element per layer restriction + this.animatedElement = this.trackData.animatedElement; this.arrStyleTracks = this.trackData.arrStyleTracks; this.isTrackAnimated = this.trackData.isTrackAnimated; this.trackDuration = this.trackData.trackDuration; @@ -431,7 +431,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; } } - } }, @@ -443,7 +442,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (selectedIndex !== false) { if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { this.retrieveStoredTweens(); - } } } @@ -507,6 +505,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.updateKeyframeRule(); } } else { + // TEMP error check console.log("There must be exactly one element in an animated layer."); } } @@ -528,7 +527,7 @@ 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); + this.application.ninja.timeline.selectLayer(selectedIndex, true); var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; -- cgit v1.2.3