1 files changed, 99 insertions, 15 deletions

diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index eddf1b17..af01deb2 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -1,5 +1,6 @@
 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, {
 
@@ -8,6 +9,7 @@ var Tween = exports.Tween = Montage.create(Component, {
     },
 
     _spanWidth: {
+        serializable: true,
         value: 0
     },
 
@@ -18,6 +20,7 @@ var Tween = exports.Tween = Montage.create(Component, {
         },
         set: function(value){
             this._spanWidth = value;
+            this.needsDraw = true;
         }
     },
 
@@ -32,6 +35,7 @@ var Tween = exports.Tween = Montage.create(Component, {
         },
         set:function (value) {
             this._spanPosition = value;
+            this.needsDraw = true;
         }
     },
 
@@ -46,6 +50,7 @@ var Tween = exports.Tween = Montage.create(Component, {
         },
         set:function (value) {
             this._keyFramePosition = value;
+            this.needsDraw = true;
         }
     },
 
@@ -63,47 +68,126 @@ var Tween = exports.Tween = Montage.create(Component, {
         }
     },
 
-    _keyframeID:{
+    _tweenID:{
         value:0
     },
 
-    keyframeID:{
+    tweenID:{
         serializable:true,
         get:function () {
-            return this._keyframeID;
+            return this._tweenID;
         },
         set:function (value) {
-            this._keyframeID = value;
+            this._tweenID = value;
         }
     },
 
-    _timelineTrack:{
-        value:0
+    _tweenedProperties:{
+        serializable: true,
+        value:[]
+    },
+
+    tweenedProperties:{
+        serializable:true,
+        get:function(){
+            return this._tweenedProperties;
+        },
+        set:function(val){
+            this._tweenedProperties = val;
+        }
+    },
+
+    _isTweenAnimated:{
+        serializable:true,
+        value:false
     },
 
-    timelineTrack:{
+    isTweenAnimated:{
         serializable:true,
         get:function () {
-            return this._timelineTrack;
+            return this._isTweenAnimated;
         },
         set:function (value) {
-            this._timelineTrack = value;
+            this._isTweenAnimated = value;
+            this.needsDraw = true;
         }
     },
 
     prepareForDraw:{
         value:function () {
-            this.keyframe.containingTrack = this.timelineTrack;
-            this.keyframe.position = this.spanWidth;
-            this.keyframe.timelinePosition = this.keyFramePosition;
-            this.keyframe.id = this.keyframeID;
+
         }
     },
 
     draw:{
         value:function () {
-            this.span.spanWidth = this.spanWidth;
-            this.tweencontainer.style.left = this.spanPosition + "px";
+            this.element.style.left = this.spanPosition + "px";
+            this.keyframe.position = this.spanWidth;
+            this.tweenspan.spanWidth = this.spanWidth;
+            if(this.isTweenAnimated){
+                this.tweenspan.highlightSpan();
+            }
+        }
+    },
+
+    handleElementChange:{
+        value:function (event) {
+            if (event.detail.source && event.detail.source !== "tween") {
+                // check for correct element selection
+                if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) {
+                    alert("Wrong element selected for this keyframe track");
+                } else {
+                    // update tweenedProperties and tell containing track to update CSS rule
+                    // temp read only top and left.  need to change to loop over event details for prop changes generically
+                    if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) {
+                        this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
+                        this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
+                        this.parentComponent.parentComponent.updateKeyframeRule();
+                    }
+                    // highlight the tween's span
+                    this.tweenspan.highlightSpan();
+                    this.isTweenAnimated = true;
+                }
+            }
+        }
+    },
+
+    selectTween:{
+        value: function(){
+            // turn on event listener for element change
+            this.eventManager.addEventListener("elementChange", this, false);
+
+            // select the containing layer
+            var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID);
+            this.application.ninja.timeline.selectLayer(selectIndex);
+
+            // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline
+            this.application.ninja.timeline.deselectTweens();
+            this.application.ninja.timeline.selectedTweens.push(this);
+
+            // update playhead position and time text
+            this.application.ninja.timeline.playhead.style.left = (this.keyFramePosition - 2) + "px";
+            this.application.ninja.timeline.playheadmarker.style.left = this.keyFramePosition + "px";
+            var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
+            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";
+            ElementsMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween");
+            ElementsMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");
+
+        }
+    },
+
+    deselectTween:{
+        value:function(){
+            // turn off event listener for element change
+            this.eventManager.removeEventListener("elementChange", this, false);
+
+            // deselect the keyframe for this tween
+            this.keyframe.deselectKeyframe();
         }
     }
 });