Merge pull request #64 from imix23ways/Timeline

Timeline

1 files changed, 9 insertions, 108 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index c82a9086..bb2acee0 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -1,6 +1,5 @@
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
-var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
 
 var Keyframe = exports.Keyframe = Montage.create(Component, {
 
@@ -19,136 +18,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
         },
         set:function(value){
             this._position = value;
+            this.needsDraw = true;
         }
     },
 
-    _id:{
-        value:0
-    },
-
-    id:{
-        serializable:true,
-        get:function () {
-            return this._id;
-        },
-        set:function (value) {
-            this._id = value;
-        }
-    },
-
-    _timelinePosition:{
-        value:0
-    },
-
-    timelinePosition:{
-        serializable:true,
-        get:function () {
-            return this._timelinePosition;
-        },
-        set:function (value) {
-            this._timelinePosition = value;
-        }
-    },
-
-    _containingTrack:{
-        value:{}
-    },
-
-    containingTrack:{
-        serializable:true,
-        get:function () {
-            return this._containingTrack;
-        },
-        set:function (value) {
-            this._containingTrack = value;
-        }
-    },
-
-    _animatedProperties:{
-        value:[]
-    },
-
-    animatedProperties:{
-        serializable:true,
-        get:function () {
-            return this._animatedProperties;
-        },
-        set:function (value) {
-            this._animatedProperties = value;
-        }
-    },
-
-    containingSpan:{
-        value: null
-    },
-
     prepareForDraw:{
         value:function(){
-            this.tweenkeyframe.addEventListener("click", this, false);
-            this.animatedProperties = new Array();
-            this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
-            this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
+            this.element.addEventListener("click", this, false);
         }
     },
 
     draw:{
         value:function(){
-            this.tweenkeyframe.style.left = (this.position - 3) + "px";
-        }
-    },
-
-    handleElementChange:{
-        value:function (event) {
-            if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){
-                alert("Wrong element selected for this keyframe track");
-                return;
-            }
-
-            if(event.detail.source && event.detail.source !== "keyframe") {
-                this.containingSpan.highlightSpan();
-                if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){
-                    this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
-                    this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
-                    this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
-                    this.containingTrack.updateKeyframeRule();
-                }
-            }
+            this.element.style.left = (this.position - 3) + "px";
         }
     },
 
-    deselect:{
+    deselectKeyframe:{
         value:function(){
-            this.tweenkeyframe.classList.remove("keyframeSelected");
-            this.eventManager.removeEventListener("elementChange", this, false);
+            this.element.classList.remove("keyframeSelected");
         }
     },
 
-    select:{
+    selectKeyframe:{
         value:function(){
-            this.application.ninja.timeline.deselectKeyframes();
-            this.tweenkeyframe.classList.add("keyframeSelected");
-            this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px";
-            this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px";
-            this.application.ninja.timeline.selectedKeyframes.push(this);
-
-            var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
-            var currentMillisec = currentMillisecPerPixel * this.timelinePosition;
-            this.application.ninja.timeline.updateTimeText(currentMillisec);
-
-            var currentTop = this.animatedProperties["top"] + "px";
-            var currentLeft = this.animatedProperties["left"] + "px";
-
-            ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe");
-            ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe");
-
-            // turn on element change event listener
-            this.eventManager.addEventListener("elementChange", this, false);
+            this.element.classList.add("keyframeSelected");
+            this.parentComponent.selectTween();
         }
     },
 
     handleClick:{
         value:function(ev){
-            this.select();
+            this.selectKeyframe();
         }
     }
 });