1 files changed, 418 insertions, 0 deletions

diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 175b77f9..925d4a9d 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -15,7 +15,425 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
     prepareForDraw:{
         value:function(){
+            this.element.addEventListener("click", this, false);
+            this.trackID = this.parentComponent.parentComponent.parentComponent.trackID;
+            this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement;
+            this.ninjaStylesContoller = this.application.ninja.stylesController;
+        }
+    },
+
+    draw:{
+        value:function(){
+
+        }
+    },
+
+    didDraw:{
+        value:function () {
+            if(this.currentKeyframeRule){
+                this.retrieveStoredStyleTweens();
+            }
+        }
+    },
+
+    trackEditorProperty:{
+        value:""
+    },
+
+    _propTweenRepetition:{
+        value:null
+    },
+
+    animatedElement:{
+        value:null
+    },
+
+    isSubproperty:{
+        value:true
+    },
+
+    propTweenRepetition:{
+        serializable:true,
+        get:function () {
+            return this._propTweenRepetition;
+        },
+        set:function (newVal) {
+            this._propTweenRepetition = newVal;
+        }
+    },
+
+    _propTweens:{
+        value:[]
+    },
+
+    propTweens:{
+        serializable:true,
+        get:function () {
+            return this._propTweens;
+        },
+        set:function (newVal) {
+            this._propTweens = newVal;
+        }
+    },
+
+    _propTrackData:{
+        value:false
+    },
+
+    propTrackData:{
+        serializable:true,
+        get:function () {
+            return this._propTrackData;
+        },
+        set:function (val) {
+            this._propTrackData = val;
+            if (this._propTrackData) {
+                this.setData();
+            }
+        }
+    },
+
+    nextKeyframe:{
+        value:1
+    },
+
+    ninjaStylesContoller:{
+        value:null
+    },
+
+    animationName:{
+        value:null
+    },
+
+    currentKeyframeRule:{
+        value:null
+    },
+
+    trackDuration:{
+        value:0
+    },
+
+    _trackID:{
+        value:null
+    },
+
+    trackID:{
+        serializable:true,
+        get:function () {
+            return this._trackID;
+        },
+        set:function (value) {
+            if (value !== this._trackID) {
+                this._trackID = value;
+            }
+        }
+    },
+
+    _trackType:{
+        value:null
+    },
+
+    trackType:{
+        serializable:true,
+        get:function () {
+            return this._trackType;
+        },
+        set:function (value) {
+            if (value !== this._trackType) {
+                this._trackType = value;
+            }
+        }
+    },
+
+    _styleIndex:{
+        value:null
+    },
+
+    styleIndex:{
+        serializable:true,
+        get:function () {
+            return this._styleIndex;
+        },
+        set:function (value) {
+            if (value !== this._styleIndex) {
+                this._styleIndex = value;
+            }
+        }
+    },
+
+    setData:{
+        value:function () {
+            if (typeof(this.propTrackData) === "undefined") {
+                return;
+            }
+
+            this.styleIndex = this.propTrackData.styleIndex;
+            this.propTweens = this.propTrackData.propTweens;
+            this.trackType = this.propTrackData.trackType;
+            this.trackEditorProperty = this.propTrackData.trackEditorProperty;
+            this.currentKeyframeRule = this.propTrackData.existingRule;
+            this.needsDraw = true;
+        }
+    },
+
+    handleClick:{
+        value:function (ev) {
+            if (ev.shiftKey) {
+
+                if (this.trackType == "position") {
+                    this.parentComponent.parentComponent.parentComponent.handleNewTween(ev);
+                }
+
+                if (this.propTweens.length < 1) {
+
+                    // check if there is an editor property assigned yet
+                    // get this property track's editor prop name from layer data arrays
+                    var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
+
+                    if (this.trackType == "style") {
+                        if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) {
+                            console.log("Please enter a style property for this track before adding keyframes.");
+                            return;
+                        } else {
+                            this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty;
+                            //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
+                        }
+                    } else if (this.trackType == "position") {
+                        //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
+                    }
+
+                    this.insertPropTween(0);
+                    this.addPropAnimationRuleToElement(ev);
+                    this.updatePropKeyframeRule();
+                } else {
+                    this.handleNewPropTween(ev);
+                    this.updatePropKeyframeRule();
+                }
+            }
+        }
+    },
+
+    handleNewPropTween:{
+        value:function(ev){
+            if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) {
+                this.insertPropTween(ev.offsetX);
+            } else {
+                console.log("Splitting style tweens not yet supported.");
+            }
+        }
+    },
+
+    insertPropTween:{
+        value:function(clickPos){
+            var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
+            this.application.ninja.timeline.selectLayer(selectedIndex, true);
+
+            var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
+            var currentMillisec = currentMillisecPerPixel * clickPos;
+            this.