Turn on width and height as tweenable properties

Signed-off-by: Jonathan Duran <jduran@motorola.com>

2 files changed, 31 insertions, 2 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index e79602e7..e46a5eb0 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -578,6 +578,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 newTween.tweenData.tweenedProperties = [];
                 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
                 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft;
+                newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth;
+                newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight;
                 this.tweens.push(newTween);
             } else {
                 newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition;
@@ -588,6 +590,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 newTween.tweenData.tweenedProperties = [];
                 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
                 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft;
+                newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth;
+                newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight;
                 this.tweens.push(newTween);
 
                 // update the animation duration
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 7dcd397c..b13a037f 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -186,11 +186,36 @@ var Tween = exports.Tween = Montage.create(Component, {
     setAbsoluteTweenProperties:{
         value:function (eventDetail) {
             //console.log(eventDetail);
-            if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) {
+
+            // top
+            if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){
                 this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
+            }
+
+            // left
+            if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){
                 this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
-                this.parentComponent.parentComponent.updateKeyframeRule();
             }
+
+            // width
+            if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){
+                this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth;
+            }
+
+            // height
+            if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){
+                this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight;
+            }
+
+            // skewX
+
+            // skewY
+
+            // rotation
+
+            // tell track to update css rule
+            this.parentComponent.parentComponent.updateKeyframeRule();
+
             // highlight the tween's span
             this.tweenspan.highlightSpan();
             this.isTweenAnimated = true;