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/Layer.reel/Layer.html | 114 ++------------------- js/panels/Timeline/Layer.reel/Layer.js | 90 +--------------- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 13 ++- .../Timeline/TimelineTrack.reel/TimelineTrack.html | 52 +--------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 19 +++- js/panels/Timeline/Tween.reel/Tween.js | 4 +- 6 files changed, 40 insertions(+), 252 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 10334b31..ba7c18c3 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -20,7 +20,6 @@ "slotStyle" : {"@":"slot1"}, "mainCollapser" : {"@" : "mainCollapser"}, "positionCollapser" : {"@" : "positionCollapser"}, - "transformCollapser" : {"@" : "transformCollapser"}, "styleCollapser" : {"@" : "styleCollapser"}, "clickerMain" : {"#" : "clicker-main"}, "myLabel" : {"#" : "myLabel"}, @@ -182,60 +181,6 @@ } } }, - "dtext_skew_x" : { - "prototype": "js/components/hottextunit.reel[HotTextUnit]", - "properties": { - "element": {"#": "skew-x"}, - "maxValue" : 100, - "minValue" : 0, - "acceptableUnits" : "%", - "units" : "%", - "value" : 0 - }, - "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "dtextSkewX", - "oneway": false - } - } - }, - "dtext_skew_y" : { - "prototype": "js/components/hottextunit.reel[HotTextUnit]", - "properties": { - "element": {"#": "skew-y"}, - "maxValue" : 100, - "minValue" : 0, - "acceptableUnits" : "%", - "units" : "%", - "value" : 0 - }, - "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "dtextSkewY", - "oneway": false - } - } - }, - "dtext_rotate" : { - "prototype": "js/components/hottextunit.reel[HotTextUnit]", - "properties": { - "element": {"#": "rotation"}, - "maxValue" : 360, - "minValue" : -360, - "acceptableUnits" : "degrees", - "units" : "degrees", - "value" : 0 - }, - "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "dtextRotate", - "oneway": false - } - } - }, "mainCollapser" : { "prototype" : "js/panels/timeline/Collapser", @@ -277,26 +222,6 @@ } }, - "transformCollapser" : { - "prototype" : "js/panels/timeline/Collapser", - "properties" : { - "element" : {"#" : "content-transform"}, - "myContent" : {"#":"content-transform"}, - "contentHeight" : 60, - "isLabelClickable" : true, - "clicker" : {"#" : "clicker-transform"}, - "isCollapsed" : true, - "isAnimated" : true - }, - "bindings" : { - "isToggling" : { - "boundObject" : {"@" : "owner" }, - "boundObjectPropertyPath" : "isTransformCollapsed", - "oneway" : false - } - } - }, - "styleCollapser" : { "prototype" : "js/panels/timeline/Collapser", "properties" : { @@ -333,7 +258,7 @@
- Position + Position and Size
@@ -346,37 +271,16 @@
Top
+
+
Width
+
+
+
+
Height
+
+
-
- Transform - -
-
-
-
-
Width
-
-
-
-
Height
-
-
-
-
Skew X
-
-
-
-
Skew Y
-
-
-
-
Rotation
-
-
-
- -
Style diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 233e811f..c9dd5328 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -147,7 +147,7 @@ var Layer = exports.Layer = Montage.create(Component, { } }, - /* Position and Transform hottext values */ + /* Position and Size hottext values */ _dtextPositionX : { value:null }, @@ -220,60 +220,6 @@ var Layer = exports.Layer = Montage.create(Component, { } }, - _dtextSkewX : { - value:null - }, - - dtextSkewX:{ - serializable: true, - get:function(){ - return this._dtextSkewX; - }, - set:function(value){ - if (this._dtextSkewX !== value) { - this._dtextSkewX = value; - this.layerData.dtextSkewX = value; - } - - } - }, - - _dtextSkewY : { - value:null - }, - - dtextSkewY:{ - serializable: true, - get:function(){ - return this._dtextSkewY; - }, - set:function(value){ - if (this._dtextSkewY !== value) { - this._dtextSkewY = value; - this.layerData.dtextSkewY = value; - } - - } - }, - - _dtextRotate : { - value:null - }, - - dtextRotate:{ - serializable: true, - get:function(){ - return this._dtextRotate; - }, - set:function(value){ - if (this._dtextRotate !== value) { - this._dtextRotate = value; - this.layerData.dtextRotate = value; - } - - } - }, - /* isSelected: whether or not the layer is currently selected. */ _isSelected:{ value: false @@ -372,20 +318,6 @@ var Layer = exports.Layer = Montage.create(Component, { } }, - _isTransformCollapsed : { - value: true - }, - isTransformCollapsed : { - serializable: true, - get: function() { - return this._isTransformCollapsed; - }, - set: function(newVal) { - this._isTransformCollapsed = newVal; - this.layerData.isTransformCollapsed = newVal; - } - }, - _isPositionCollapsed : { value: true }, @@ -469,7 +401,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.arrLayerStyles = this.layerData.arrLayerStyles; this.isMainCollapsed = this.layerData.isMainCollapsed; this.isPositionCollapsed = this.layerData.isPositionCollapsed; - this.isTransformCollapsed = this.layerData.isTransformCollapsed; this.isSelected = this.layerData.isSelected; this.isActive = this.layerData.isActive; this.isStyleCollapsed = this.layerData.isStyleCollapsed; @@ -537,7 +468,6 @@ var Layer = exports.Layer = Montage.create(Component, { // Collapser event handlers. this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); - this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); // Add event listeners to add and delete style buttons @@ -595,11 +525,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.positionCollapser.myContent.classList.remove(this.positionCollapser.collapsedClass); this.positionCollapser.clicker.classList.remove(this.positionCollapser.collapsedClass); } - if (this.isTransformCollapsed === false) { - this.transformCollapser.myContent.style.height = "auto"; - this.transformCollapser.myContent.classList.remove(this.transformCollapser.collapsedClass); - this.transformCollapser.clicker.classList.remove(this.transformCollapser.collapsedClass); - } if (this.isStyleCollapsed === false) { this.styleCollapser.myContent.style.height = "auto"; this.styleCollapser.myContent.classList.remove(this.styleCollapser.collapsedClass); @@ -823,19 +748,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.triggerOutgoingBinding(); } }, - handleTransformCollapserClick : { - value: function(event) { - this.transformCollapser.bypassAnimation = false; - this.bypassAnimation = false; - this.layerData.bypassAnimation = false; - if (this.isTransformCollapsed) { - this.isTransformCollapsed = false; - } else { - this.isTransformCollapsed = true; - } - this.triggerOutgoingBinding(); - } - }, handleStyleCollapserClick : { value: function(event) { this.styleCollapser.bypassAnimation = false; 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); } } }); diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index dc32d44d..3f3bf24a 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -100,26 +100,6 @@ "element":{"#": "position-track-base"} } }, - "transformTracksRepetition": { - "prototype": "montage/ui/repetition.reel", - "properties": { - "element": {"#": "content-transform-tracks"}, - "isSelectionEnabled" : false - }, - "bindings": { - "objects": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "arrTransformTracks", - "oneway": false - } - } - }, - "transformPropertyTrack" : { - "prototype" : "js/panels/Timeline/PropertyTrack.reel", - "properties" : { - "element":{"#": "transform-track-base"} - } - }, "mainCollapser" : { "prototype" : "js/panels/timeline/Collapser", @@ -171,31 +151,6 @@ } }, - "transformCollapser" : { - "prototype" : "js/panels/timeline/Collapser", - "properties" : { - "element" : {"#" : "content-transform-tracks"}, - "myContent" : {"#":"content-transform-tracks"}, - "contentHeight" : 40, - "isLabelClickable" : false, - "clicker" : {"#" : "label-transform"}, - "isCollapsed" : true, - "isAnimated" : true - }, - "bindings" : { - "isToggling" : { - "boundObject" : {"@" : "owner" }, - "boundObjectPropertyPath" : "isTransformCollapsed", - "oneway" : false - }, - "bypassAnimation" : { - "boundObject" : {"@": "owner"}, - "boundObjectPropertyPath" : "bypassAnimation", - "oneway" : false - } - } - }, - "styleCollapser" : { "prototype" : "js/panels/timeline/Collapser", "properties" : { @@ -239,12 +194,7 @@
-
- -
-
-
-
+
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index ddeb1449..891feada 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -771,6 +771,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // delete the current rule this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); + // first combine all style track tween arrays with the main track tween array + // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; @@ -796,9 +798,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // Init and event handler for layer expand/collapse init:{ value:function () { - - this.arrPositionTracks = [0, 1]; - this.arrTransformTracks = [0, 1, 2, 3, 4]; + + // create track objects for position and transform tracks and push into arrays instead of dummy arrays + + //this.createPositionTracks(); + this.arrPositionTracks = [0, 1, 2, 3]; + + // get rid of transform tracks + //this.arrTransformTracks = [0, 1, 2, 3, 4]; // Register event handler for layer events. defaultEventManager.addEventListener("layerEvent", this, false); @@ -806,6 +813,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + createPositionTracks:{ + value:function(){ + // create track objects for position and transform tracks and push into arrays + } + }, + handleLayerEvent:{ value:function (layerEvent) { if (layerEvent.layerID !== this.trackID) { diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index c733b8d7..6c273a49 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -239,8 +239,6 @@ var Tween = exports.Tween = Montage.create(Component, { selectTween:{ value: function(){ - console.log("tween select"); - // turn on event listener for element change this.eventManager.addEventListener("elementChange", this, false); @@ -248,7 +246,7 @@ var Tween = exports.Tween = Montage.create(Component, { var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); this.application.ninja.timeline.selectLayer(selectIndex, true); - // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline + // tell timeline to deselect all other tweens and push this one into the selectedTweens in timeline this.application.ninja.timeline.deselectTweens(); this.application.ninja.timeline.selectedTweens.push(this); -- cgit v1.2.3