1 files changed, 125 insertions, 54 deletions

diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index dda06028..c0949f93 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, {
 
@@ -108,6 +110,7 @@ var Tween = exports.Tween = Montage.create(Component, {
         },
         set:function (value) {
             this._tweenID = value;
+            this.tweenData.tweenID = value;
         }
     },
 
@@ -138,13 +141,43 @@ 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: "none"
+    },
+    easing: {
+        serializable: true,
+        get:function () {
+            return this._easing;
+        },
+        set:function (newVal) {
+            this._easing = newVal;
+        }
+        
+    },
 
     draw:{
         value:function () {
+                this.tweenspan.element.style.width = this.spanWidth + "px";
+            this.keyframe.element.style.left = (this.spanWidth -5) + "px";
+            this.tweenspan.spanWidth = this.spanWidth;
             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 +193,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 +204,92 @@ 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){
+                        console.log("setting style tween property")
+                    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;
-            }
-
-            // left
-            if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){
-                this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
-            }
-
-            // width
-            if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){
-                this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth;
-            }
+                if (eventDetail.source === "SelectionTool") {
+                    if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){
+                        this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px";
+                    }
+                    if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){
+                        this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft + "px";
+                    }
+                    if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){
+                        this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth + "px";
+                    }
+                    if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){
+                        this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px";
+                    }
+                    // tell track to update css rule
+                    this.parentComponent.parentComponent.updateKeyframeRule();
+                    this.isTweenAnimated = true;
+                }
+                        
+                        if (eventDetail.source === "translateTool") {
+                        var arrMat = eventDetail.data.value[0].properties.mat,
+                                strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")";
+                        
+                        this.tweenedProperties["-webkit-transform"] = strTweenProperty;
+                        this.parentComponent.parentComponent.updateKeyframeRule();
+                        this.isTweenAnimated = true;
+                }
+        }
+    },
 
-            // height
-            if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){
-                this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight;
+    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);
             }
-
-            // 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){
-            //console.log(eventDetail);
+    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){
+                if(this.parentComponent.parentComponent.trackType == "position"){
+                    return;
+                }
+                this.parentComponent.parentComponent.updatePropKeyframeRule();
+            } else {
+                this.parentComponent.parentComponent.updateKeyframeRule();
+            }
         }
     },
 
@@ -238,7 +302,7 @@ var Tween = exports.Tween = Montage.create(Component, {