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 ++ 5 files changed, 164 insertions(+), 4 deletions(-) create mode 100644 js/panels/Timeline/PropertyTrack.reel/scss/.sass-cache/a26ed2cbe268f8c721d1b1d8dfa075c8c5b47e72/PropertyTrack.scssc (limited to 'js/panels/Timeline/PropertyTrack.reel') 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 -- cgit v1.2.3 From 16f95cb8c70608eeede6c9e0834b184ade6c7752 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 4 May 2012 02:21:58 -0700 Subject: update data bindings for subproperty tracks Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 54 +++++++++++++++++++++- 1 file changed, 52 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 8f7745e5..83d4ce73 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -16,6 +16,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { prepareForDraw:{ value:function(){ this.element.addEventListener("click", this, false); + this.trackID = this.parentComponent.parentComponent.parentComponent.trackID; + this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; } }, @@ -29,6 +31,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:null }, + animatedElement:{ + value:null + }, + propTweenRepetition:{ serializable:true, get:function () { @@ -53,10 +59,56 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + _propTrackData:{ + value:false + }, + + propTrackData:{ + get:function () { + return this._propTrackData; + }, + set:function (val) { + this._propTrackData = val; + if (this._propTrackData) { + this.setData(); + } + } + }, + + setData:{ + value:function(){ + if (typeof(this.propTrackData) === "undefined") { + return; + } + + + this.propTweens = this.propTrackData.propTweens; + + this.needsDraw = true; + } + }, + nextKeyframe:{ value:1 }, + _trackID:{ + value:null + }, + + trackID:{ + serializable:true, + get:function () { + return this._trackID; + }, + set:function (value) { + if (value !== this._trackID) { + this._trackID = value; + this.propTrackData.layerID = value; + } + } + }, + handleClick:{ value:function(ev){ var parentTrackID = this.parentComponent.parentComponent.parentComponent.trackID; @@ -126,9 +178,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ - console.log("SECOND PROP TWEEN ADDING at " + tweenEvent.offsetX); this.insertPropTween(tweenEvent.offsetX); - } } }); -- cgit v1.2.3 From 0e12f00d6afffabd370347335a56d0ddd17c0232 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 4 May 2012 11:00:12 -0700 Subject: Fix subproperty keyframe selection Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 83d4ce73..60da4e71 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -35,6 +35,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:null }, + isSubproperty:{ + value:true + }, + propTweenRepetition:{ serializable:true, get:function () { @@ -111,11 +115,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { 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); @@ -137,6 +137,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { insertPropTween:{ value:function(clickPos){ + var parentTrackID = this.parentComponent.parentComponent.parentComponent.trackID; + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(parentTrackID); + 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 From eaef072648eb539e648aabf7bc1aea8d02c21085 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 4 May 2012 21:46:29 -0700 Subject: property track additions to serialization data object Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 75 +++++++++++++++++----- 1 file changed, 58 insertions(+), 17 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 60da4e71..f2dbd683 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -27,6 +27,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + trackEditorProperty:{ + value:"" + }, + _propTweenRepetition:{ value:null }, @@ -68,6 +72,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { }, propTrackData:{ + serializable:true, get:function () { return this._propTrackData; }, @@ -79,19 +84,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, - setData:{ - value:function(){ - if (typeof(this.propTrackData) === "undefined") { - return; - } - - - this.propTweens = this.propTrackData.propTweens; - - this.needsDraw = true; - } - }, - nextKeyframe:{ value:1 }, @@ -108,16 +100,66 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { set:function (value) { if (value !== this._trackID) { this._trackID = value; - this.propTrackData.layerID = value; } } }, + _styleSelection:{ + value:null + }, + + styleSelection:{ + serializable:true, + get:function () { + return this._styleSelection; + }, + set:function (value) { + if (value !== this._styleSelection) { + this._styleSelection = value; + } + } + }, + + _styleIndex:{ + value:null + }, + + styleIndex:{ + serializable:true, + get:function () { + return this._styleIndex; + }, + set:function (value) { + if (value !== this._styleIndex) { + this._styleIndex = value; + } + } + }, + + setData:{ + value:function () { + if (typeof(this.propTrackData) === "undefined") { + return; + } + + this.styleIndex = this.propTrackData.styleIndex; + this.propTweens = this.propTrackData.propTweens; + this.styleSelection = this.propTrackData.styleSelection; + this.needsDraw = true; + } + }, + handleClick:{ value:function(ev){ - //console.log(this.application.ninja.timeline.arrLayers[selectedIndex].layerData); if (ev.shiftKey) { if (this.propTweens.length < 1) { + + // check if there is an editor property assigned yet + // get this property track's editor prop name from layer data arrays + var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + console.log(this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles); + console.log(this.styleIndex); + this.insertPropTween(0); this.addPropAnimationRuleToElement(ev); this.updatePropKeyframeRule(); @@ -137,8 +179,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { insertPropTween:{ value:function(clickPos){ - var parentTrackID = this.parentComponent.parentComponent.parentComponent.trackID; - var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(parentTrackID); + 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); -- cgit v1.2.3 From a831e11ef6ae97bbd90c896b5cb6f4306e9001dd Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 4 May 2012 23:30:49 -0700 Subject: more sub prop additions Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index f2dbd683..54be3faf 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -157,8 +157,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { // check if there is an editor property assigned yet // get this property track's editor prop name from layer data arrays var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - console.log(this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles); - console.log(this.styleIndex); + console.log(this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty); this.insertPropTween(0); this.addPropAnimationRuleToElement(ev); -- cgit v1.2.3 From 4f1693b953befabf4495df668f542c7f52270864 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 8 May 2012 13:42:04 -0700 Subject: Change sub property track arrays Remove transform section and move width and height into Position section. rename position section Position and Size. additional support for generic prop tweens Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 54be3faf..3c648642 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -18,6 +18,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.element.addEventListener("click", this, false); this.trackID = this.parentComponent.parentComponent.parentComponent.trackID; this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; + } }, @@ -157,7 +158,15 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { // check if there is an editor property assigned yet // get this property track's editor prop name from layer data arrays var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - console.log(this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty); + + if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) { + console.log("Please enter a style property for this track before adding keyframes."); + return; + } else { + this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; + console.log("Property track editorProperty set to: " + this.trackEditorProperty); + } + this.insertPropTween(0); this.addPropAnimationRuleToElement(ev); @@ -223,6 +232,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ this.insertPropTween(tweenEvent.offsetX); + this.animationName = this.parentComponent.parentComponent.parentComponent.animationName; + console.log(this.animationName); } } }); -- cgit v1.2.3 From 40670fd9a723fe6f95fe6c1ceefa0d2435b83aa4 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 9 May 2012 09:47:31 -0700 Subject: sub property additions Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 34 +++++++++++++--------- 1 file changed, 21 insertions(+), 13 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') 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, { draw:{ value:function(){ - + console.log(this.trackType); } }, @@ -105,18 +105,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, - _styleSelection:{ + _trackType:{ value:null }, - styleSelection:{ + trackType:{ serializable:true, get:function () { - return this._styleSelection; + return this._trackType; }, set:function (value) { - if (value !== this._styleSelection) { - this._styleSelection = value; + if (value !== this._trackType) { + this._trackType = value; } } }, @@ -145,7 +145,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.styleIndex = this.propTrackData.styleIndex; this.propTweens = this.propTrackData.propTweens; - this.styleSelection = this.propTrackData.styleSelection; + this.trackType = this.propTrackData.trackType; this.needsDraw = true; } }, @@ -153,21 +153,29 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { handleClick:{ value:function(ev){ if (ev.shiftKey) { + console.log(this.trackType); if (this.propTweens.length < 1) { // check if there is an editor property assigned yet // get this property track's editor prop name from layer data arrays var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) { - console.log("Please enter a style property for this track before adding keyframes."); - return; - } else { - this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; - console.log("Property track editorProperty set to: " + this.trackEditorProperty); + if (this.trackType === "style") { + if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) { + console.log("Please enter a style property for this track before adding keyframes."); + return; + } else { + this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; + console.log("Property track editorProperty set to: " + this.trackEditorProperty); + } + } else if (this.trackType === "position") { + console.log("clicking on position track"); + + console.log(this.trackEditorProperty); } + this.insertPropTween(0); this.addPropAnimationRuleToElement(ev); this.updatePropKeyframeRule(); -- cgit v1.2.3 From b42e5dc5922fb427b9edc7af60e9fa4a5dfcbe0e Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 10 May 2012 10:43:49 -0700 Subject: Some sub prop updates Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 8316540b..4f798f36 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -146,6 +146,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.styleIndex = this.propTrackData.styleIndex; this.propTweens = this.propTrackData.propTweens; this.trackType = this.propTrackData.trackType; + this.trackEditorProperty = this.propTrackData.trackEditorProperty; this.needsDraw = true; } }, @@ -170,12 +171,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } else if (this.trackType === "position") { console.log("clicking on position track"); - console.log(this.trackEditorProperty); } - - this.insertPropTween(0); this.addPropAnimationRuleToElement(ev); this.updatePropKeyframeRule(); -- cgit v1.2.3 From 48a0d3a091602d4d04b0b529b780261f0d2ebc1d Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 10 May 2012 10:44:18 -0700 Subject: Timeline: Bug fix: tweens now hide when their container collapses. Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html index 40834466..9c4160c8 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html @@ -53,7 +53,7 @@
-
+
-- cgit v1.2.3 From 675dfa5057e118dac694b8fb9b960cfed48e1d52 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 11 May 2012 00:51:17 -0700 Subject: allow splitting existing spans with new keyframe Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 4f798f36..53b7bd5e 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, { draw:{ value:function(){ - console.log(this.trackType); + } }, -- cgit v1.2.3 From 32257ac142f872d3c1f6c07504bae77ae884ed93 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 11 May 2012 02:34:26 -0700 Subject: Fix a bug in span splitting interaction and remove console logs Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 53b7bd5e..690c912b 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -154,7 +154,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { handleClick:{ value:function(ev){ if (ev.shiftKey) { - console.log(this.trackType); + if (this.propTweens.length < 1) { // check if there is an editor property assigned yet @@ -170,8 +170,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { console.log("Property track editorProperty set to: " + this.trackEditorProperty); } } else if (this.trackType === "position") { - console.log("clicking on position track"); - console.log(this.trackEditorProperty); + //console.log("clicking on position track"); + //console.log(this.trackEditorProperty); } this.insertPropTween(0); @@ -239,7 +239,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:function(tweenEvent){ this.insertPropTween(tweenEvent.offsetX); this.animationName = this.parentComponent.parentComponent.parentComponent.animationName; - console.log(this.animationName); + //console.log(this.animationName); } } }); -- cgit v1.2.3 From eb7c3c8db304bdfb01f747a50e932665d9ec03fa Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 22:09:35 -0700 Subject: style keyframe rule addition Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 51 +++++++++++++++++++--- 1 file changed, 44 insertions(+), 7 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 690c912b..f44afcec 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -18,7 +18,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.element.addEventListener("click", this, false); this.trackID = this.parentComponent.parentComponent.parentComponent.trackID; this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; - + this.ninjaStylesContoller = this.application.ninja.stylesController; } }, @@ -89,6 +89,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:1 }, + ninjaStylesContoller:{ + value:null + }, + + animationName:{ + value:null + }, + + currentKeyframeRule:{ + value:null + }, + _trackID:{ value:null }, @@ -167,11 +179,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { return; } else { this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; - console.log("Property track editorProperty set to: " + this.trackEditorProperty); + //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } } else if (this.trackType === "position") { - //console.log("clicking on position track"); - //console.log(this.trackEditorProperty); + console.log("Property track editorProperty set to: " + this.trackEditorProperty); } this.insertPropTween(0); @@ -219,7 +230,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween.tweenData.tweenID = this.nextKeyframe; newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; newTween.tweenData.tweenedProperties = []; - + newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens.push(newTween); this.nextKeyframe += 1; @@ -237,9 +248,35 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ + var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; + + + this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; + var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; + var newAnimationNames = currentAnimationNameString + "," + this.animationName; + var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; + var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); + var newIterationCount = currentIterationCount + ",1"; + + this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; + + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); + + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); + //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); + //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); + + + console.log(currentStyleValue); + + var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; + console.log(initRule); + this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); + this.insertPropTween(tweenEvent.offsetX); - this.animationName = this.parentComponent.parentComponent.parentComponent.animationName; - //console.log(this.animationName); } } }); -- cgit v1.2.3 From b38e020fb5e64c7d9a1d42c97393a0a84f9841a8 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 22:30:27 -0700 Subject: handle style changes on keyframes Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 31 +++++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index f44afcec..03287df9 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -101,6 +101,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:null }, + trackDuration:{ + value:0 + }, + _trackID:{ value:null }, @@ -209,6 +213,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; + this.trackDuration = currentMillisec; var newTween = {}; newTween.tweenData = {}; @@ -242,7 +247,28 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { updatePropKeyframeRule:{ value:function(){ - + // delete the current rule + this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); + + // build the new keyframe string + var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; + + for (var i = 0; i < this.propTweens.length; i++) { + var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); + // TODO - trackDur should be parseFloat rounded to significant digits + var trackDur = parseInt(this.trackDuration); + var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; + var keyframePropertyString = " " + keyframePercent + " {"; + for(var prop in this.propTweens[i].tweenData.tweenedProperties){ + keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop]; + } + keyframePropertyString += "}"; + keyframeString += keyframePropertyString; + } + keyframeString += " }"; + // set the keyframe string as the new rule + this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); + this.application.ninja.documentController.activeDocument.needsSave = true; } }, @@ -269,9 +295,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); - - console.log(currentStyleValue); - var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; console.log(initRule); this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); -- cgit v1.2.3 From 13ebb58be961e92ba7c109298ef73daa7dea79c7 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 23:08:24 -0700 Subject: fix keyframe bug when adding keyframes to sub properties Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 03287df9..8d2c1918 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -291,12 +291,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); - this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); + //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; - console.log(initRule); + //console.log(initRule); this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.insertPropTween(tweenEvent.offsetX); -- cgit v1.2.3 From 4438dae53bb528d94b9f21272f7c240dd546b0a8 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 23:51:34 -0700 Subject: handle more prop types in subgroup keyframe rules Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 8d2c1918..43370a64 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -225,6 +225,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween.tweenData.tweenID = 0; newTween.tweenData.spanPosition = 0; newTween.tweenData.tweenedProperties = []; + newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens.push(newTween); @@ -290,7 +291,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); - this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); + //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); -- cgit v1.2.3 From 847276c1e62d55c10d059683e7180635aa994890 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 00:47:52 -0700 Subject: support width and height tween prop on re-opening saved doc Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 43370a64..31e0b3b6 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -246,6 +246,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + retrieveStoredStyleTweens:{ + value:function(){ + + } + }, + updatePropKeyframeRule:{ value:function(){ // delete the current rule @@ -278,14 +284,13 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; - this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; var newAnimationNames = currentAnimationNameString + "," + this.animationName; - var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); - var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; - var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); - var newIterationCount = currentIterationCount + ",1"; + //var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + //var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; + //var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); + //var newIterationCount = currentIterationCount + ",1"; this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; -- cgit v1.2.3 From b7adc6f1ec09edcad523b1ddd32856ddf27c6724 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 10:02:26 -0700 Subject: remove console logs. add retrieve tweens method for prop tracks Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 31e0b3b6..b3a31bf2 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -28,6 +28,21 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + didDraw:{ + value:function () { + if ((!this.application.ninja.documentController.creatingNewFile) || (!this.application.ninja.currentDocument.setLevel)) { + if (this.application.ninja.currentDocument.documentRoot.children[0]) { + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + if (selectedIndex !== false) { + if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { + //this.retrieveStoredStyleTweens(); + } + } + } + } + } + }, + trackEditorProperty:{ value:"" }, @@ -248,7 +263,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { retrieveStoredStyleTweens:{ value:function(){ - + console.log("retrieve style tweens"); } }, -- cgit v1.2.3 From e9995c973acadc507b802fdefdb22b4c4bf82325 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 11:27:51 -0700 Subject: fix keyframe splitting Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index b3a31bf2..f2004b94 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -201,7 +201,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } } else if (this.trackType === "position") { - console.log("Property track editorProperty set to: " + this.trackEditorProperty); + //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } this.insertPropTween(0); @@ -217,7 +217,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { handleNewPropTween:{ value:function(ev){ - this.insertPropTween(ev.offsetX); + if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { + this.insertPropTween(ev.offsetX); + } else { + console.log("spitting sub keyframes not yet supported"); + } + } }, -- cgit v1.2.3 From 9bc43e9f815dc8c2eda3a3d3413f950481c5f86d Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 16 May 2012 08:01:39 -0700 Subject: CSS pixel fix for prop tracks Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 1 - js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css | 2 +- js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index f2004b94..8fe87500 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -222,7 +222,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } else { console.log("spitting sub keyframes not yet supported"); } - } }, diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css index ddcc536e..5d71e2e7 100644 --- a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css +++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css @@ -8,7 +8,7 @@ */ /* line 19, ../scss/PropertyTrack.scss */ .content-main .collapsible-content .timeline-track { - height: 20px; + height: 18px; padding-top: 2px; border-bottom: 1px solid #505050; background-image: url("../images/gridline.jpg"); diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss index 31aed851..a560ff3c 100644 --- a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss +++ b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss @@ -17,7 +17,7 @@ .content-main .collapsible-content .timeline-track { - height: 20px; + height: 18px; padding-top: 2px; border-bottom: 1px solid $color-menu-divider; background-image: url("../images/gridline.jpg"); -- cgit v1.2.3 From e5830f3424c7db84f0e76b237616cbf59fe9ed1c Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 16 May 2012 08:58:03 -0700 Subject: Remove span highlighting and start syncing pos tracks and main track keyframes Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 8fe87500..a8adbf04 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -183,16 +183,20 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { }, handleClick:{ - value:function(ev){ + value:function (ev) { if (ev.shiftKey) { + if (this.trackType == "position") { + this.parentComponent.parentComponent.parentComponent.handleNewTween(ev); + } + if (this.propTweens.length < 1) { // check if there is an editor property assigned yet // get this property track's editor prop name from layer data arrays var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - if (this.trackType === "style") { + if (this.trackType == "style") { if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) { console.log("Please enter a style property for this track before adding keyframes."); return; @@ -200,7 +204,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } - } else if (this.trackType === "position") { + } else if (this.trackType == "position") { //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } @@ -220,7 +224,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { this.insertPropTween(ev.offsetX); } else { - console.log("spitting sub keyframes not yet supported"); + console.log("Splitting style tweens not yet supported."); } } }, -- cgit v1.2.3 From a5e3eb0cec55858cf911bffc429ce1de817a60ef Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 16 May 2012 11:20:13 -0700 Subject: methods for setting simple ease and splitting sub prop spans Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 39 ++++++++++++++++++++++ 1 file changed, 39 insertions(+) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index a8adbf04..fbc3edd0 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -269,6 +269,45 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + splitPropTween:{ + value:function (ev) { + console.log("splitting sub prop tween with new keyframe"); + var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX; + var i; + var tweensLength = this.propTweens.length - 1; + var prevTween, nextTween, splitTweenIndex; + for (i = 0; i < tweensLength; i++) { + prevTween = this.propTweens[i].tweenData.keyFramePosition; + nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; + if (clickPos > prevTween && clickPos < nextTween) { + //console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID); + splitTweenIndex = this.propTweens[i + 1].tweenData.tweenID; + this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - clickPos; + this.propTweens[i + 1].tweenData.spanPosition = ev.target.parentElement.offsetLeft + ev.offsetX; + if (ev.target.className != "tween-span") { + // don't set styles on timeline track if event is coming from the track + } else { + ev.target.style.width = this.propTweens[i + 1].tweenData.spanWidth + "px"; + ev.target.parentElement.style.left = clickPos + "px"; + ev.target.parentElement.children[1].style.left = (this.propTweens[i + 1].tweenData.spanWidth - 3) + "px"; + } + var newTweenToInsert = {}; + newTweenToInsert.tweenData = {}; + newTweenToInsert.tweenData.spanWidth = clickPos - prevTween; + newTweenToInsert.tweenData.keyFramePosition = clickPos; + newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * clickPos; + newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1; + newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth; + newTweenToInsert.tweenData.tweenedProperties = []; + newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); + break; + } + } + this.application.ninja.documentController.activeDocument.needsSave = true; + } + }, + retrieveStoredStyleTweens:{ value:function(){ console.log("retrieve style tweens"); -- cgit v1.2.3 From 517661250fb478f460df3f57f4654bf85723ea2a Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 29 May 2012 11:32:04 -0700 Subject: fix to set default prop for tween Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index fbc3edd0..af58199a 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -344,27 +344,31 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + if (currentStyleValue == null) { + currentStyleValue = "1px"; + } + console.log(currentStyleValue); + this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; + this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; var newAnimationNames = currentAnimationNameString + "," + this.animationName; - //var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); - //var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; - //var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); - //var newIterationCount = currentIterationCount + ",1"; + var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; + var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); + var newIterationCount = currentIterationCount + ",1"; this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); - //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); - //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); - //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); - //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); var initRule = "@-webkit-keyframes " + this.animationName + " {