1 files changed, 96 insertions, 43 deletions

diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index dda06028..51a9e215 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -6,6 +6,8 @@
 
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
+
 
 var Tween = exports.Tween = Montage.create(Component, {
 
@@ -138,13 +140,41 @@ var Tween = exports.Tween = Montage.create(Component, {
             this._isTweenAnimated = value;
         }
     },
-
+    
+    _isDragging: {
+        value: false
+    },
+    isDragging: {
+        serializable: true,
+        get:function () {
+            return this._isDragging;
+        },
+        set:function (newVal) {
+            this._isDragging = newVal;
+        }
+        
+    },
+    
+    _easing: {
+        value: "ease-in"
+    },
+    easing: {
+        serializable: true,
+        get:function () {
+            return this._easing;
+        },
+        set:function (newVal) {
+            this._easing = newVal;
+        }
+        
+    },
 
     draw:{
         value:function () {
             this.element.style.left = this.spanPosition + "px";
             this.keyframe.position = this.spanWidth;
             this.tweenspan.spanWidth = this.spanWidth;
+            this.tweenspan.easing = this.easing;
             if(this.isTweenAnimated){
                 this.tweenspan.highlightSpan();
             }
@@ -160,6 +190,7 @@ var Tween = exports.Tween = Montage.create(Component, {
             this.tweenID = this.tweenData.tweenID;
             this.tweenedProperties = this.tweenData.tweenedProperties;
             this.isTweenAnimated = this.tweenData.isTweenAnimated;
+            this.easing = this.tweenData.easing;
             this.needsDraw = true;
         }
     },
@@ -170,62 +201,77 @@ var Tween = exports.Tween = Montage.create(Component, {
                 var useAbsolute = true;
 
             if (event.detail.source && event.detail.source !== "tween") {
-                // check for correct element selection
-                if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) {
-                    console.log("Wrong element selected for this keyframe track");
+
+                if(this.parentComponent.parentComponent.isSubproperty){
+                    this.setStyleTweenProperty(event.detail);
                 } else {
-                    if(useAbsolute){
-                        this.setAbsoluteTweenProperties(event.detail);
+                    // check for correct element selection
+                    if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) {
+                        console.log("Wrong element selected for this keyframe track");
                     } else {
-                        this.setRelativeTweenProperties(event.detail);
+                        this.setTweenProperties(event.detail);
                     }
                 }
             }
         }
     },
 
-    setAbsoluteTweenProperties:{
+    setTweenProperties:{
         value:function (eventDetail) {
-            //console.log(eventDetail);
-
-            // top
             if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){
-                this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
+                this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px";
             }
-
-            // left
             if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){
-                this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
+                this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft + "px";
             }
-
-            // width
             if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){
-                this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth;
+                this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth + "px";
             }
-
-            // height
             if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){
-                this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight;
+                this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px";
             }
-
-            // skewX
-
-            // skewY
-
-            // rotation
-
             // tell track to update css rule
             this.parentComponent.parentComponent.updateKeyframeRule();
-
-            // highlight the tween's span
-            this.tweenspan.highlightSpan();
             this.isTweenAnimated = true;
         }
     },
 
-    setRelativeTweenProperties:{
-        value:function(eventDetail){
+    setStyleTweenProperty:{
+        value:function (eventDetail) {
+            //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty);
             //console.log(eventDetail);
+            if(eventDetail.type == "setProperties"){
+                // need to ignore top, left, width, and height
+                //console.log(eventDetail.data.value[0]);
+                this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0];
+                this.parentComponent.parentComponent.updatePropKeyframeRule();
+
+            } else if(eventDetail.type == "setColor"){
+                var prop = this.parentComponent.parentComponent.trackEditorProperty;
+                this.tweenedProperties[prop] = eventDetail.data.value.color.css;
+                this.parentComponent.parentComponent.updatePropKeyframeRule();
+
+            } else if(eventDetail.type == "setProperty"){
+                // need to ignore top, left, width, and height
+                //console.log(eventDetail.data.value[0]);
+                this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0];
+                this.parentComponent.parentComponent.updatePropKeyframeRule();
+
+            }else {
+                console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type);
+            }
+        }
+    },
+
+    setKeyframeEase:{
+        value:function(easeType){
+            // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2)
+            this.tweenedProperties["-webkit-animation-timing-function"] = easeType;
+            if(this.parentComponent.parentComponent.isSubproperty){
+                this.parentComponent.parentComponent.updatePropKeyframeRule();
+            } else {
+                this.parentComponent.parentComponent.updateKeyframeRule();
+            }
         }
     },
 
@@ -238,7 +284,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);
 
@@ -249,13 +295,22 @@ var Tween = exports.Tween = Montage.create(Component, {
             var currentMillisec = currentMillisecPerPixel * this.keyFramePosition;
             this.application.ninja.timeline.updateTimeText(currentMillisec);
 
-            // move animated element to correct position on stage
-            var currentTop = this.tweenedProperties["top"] + "px";
-            var currentLeft = this.tweenedProperties["left"] + "px";
-
+            if(this.parentComponent.parentComponent.isSubproperty){
+                // set property specific style on element
+                var currentValue = this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty];
+                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], this.parentComponent.parentComponent.trackEditorProperty, [currentValue], "Change", "tween");