7 files changed, 176 insertions, 12 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html
index a4b598c5..40834466 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html
@@ -13,16 +13,50 @@
                        "owner": {
                            "prototype": "js/panels/Timeline/PropertyTrack.reel",
                            "properties": {
-                                "element": {"#": "property-track"}
+                                "element": {"#": "property-track"},
+                                "propTweenRepetition" : {"@" : "propTweenRepetition"},
+                                "propTween": {"@" : "propTween"}
                            }
-                        }
+                        },
+                        "propTween" : {
+                            "prototype" : "js/panels/timeline/Tween.reel",
+                            "properties" : {
+                                "element":{"#": "prop_track_lane"}
+                            },
+                                        "bindings" : {
+                                "tweenData" : {
+                                   "boundObject" : {"@": "propTweenRepetition"},
+                                   "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenData",
+                                   "oneway" : false
+                                }
+                            }
+                        },
+                        "propTweenRepetition": {
+                            "prototype": "montage/ui/repetition.reel",
+                            "properties": {
+                                "element": {"#": "prop_track_lanes"},
+                                   "isSelectionEnabled" : false
+                            },
+                            "bindings": {
+                               "objects": {
+                                 "boundObject": {"@": "owner"},
+                                 "boundObjectPropertyPath": "propTweens",
+                                 "oneway": false
+                               }
+                            }
+                        }
                    }
        </script>
        </head>
        <body>
-                <div data-montage-id="property-track" class="timeline-track"></div>
+                <div data-montage-id="property-track" class="timeline-track">
+            <div data-montage-id="prop_track_lanes" class="prop-track collapsible-content collapsible-collapsed">
+                <div data-montage-id="prop_track_lane"></div>
+            </div>
+                </div>
    </body>
 </html>
 \ No newline at end of file
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 175b77f9..8f7745e5 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -15,6 +15,119 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
    prepareForDraw:{
        value:function(){
+            this.element.addEventListener("click", this, false);
+        }
+    },
+    draw:{
+        value:function(){
+        }
+    },
+    _propTweenRepetition:{
+        value:null
+    },
+    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;
+        }
+    },
+    nextKeyframe:{
+        value:1
+    },
+    handleClick:{
+        value:function(ev){
+            var parentTrackID = this.parentComponent.parentComponent.parentComponent.trackID;
+            var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(parentTrackID);
+            //console.log(this.application.ninja.timeline.arrLayers[selectedIndex].layerData);
+            this.application.ninja.timeline.selectLayer(selectedIndex, true);
+            if (ev.shiftKey) {
+                if (this.propTweens.length < 1) {
+                    this.insertPropTween(0);
+                    this.addPropAnimationRuleToElement(ev);
+                    this.updatePropKeyframeRule();
+                } else {
+                    this.handleNewPropTween(ev);
+                    this.updatePropKeyframeRule();
+                }
+            }
+        }
+    },
+    handleNewPropTween:{
+        value:function(ev){
+            this.insertPropTween(ev.offsetX);
+        }
+    },
+    insertPropTween:{
+        value:function(clickPos){
+            var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
+            var currentMillisec = currentMillisecPerPixel * clickPos;
+            var newTween = {};
+            newTween.tweenData = {};
+            if (clickPos == 0) {
+                newTween.tweenData.spanWidth = 0;
+                newTween.tweenData.keyFramePosition = 0;
+                newTween.tweenData.keyFrameMillisec = 0;
+                newTween.tweenData.tweenID = 0;
+                newTween.tweenData.spanPosition = 0;
+                newTween.tweenData.tweenedProperties = [];
+                this.propTweens.push(newTween);
+            } else {
+                newTween.tweenData.spanWidth = clickPos - this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition;
+                newTween.tweenData.keyFramePosition = clickPos;
+                newTween.tweenData.keyFrameMillisec = currentMillisec;
+                newTween.tweenData.tweenID = this.nextKeyframe;
+                newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
+                newTween.tweenData.tweenedProperties = [];
+                this.propTweens.push(newTween);
+                this.nextKeyframe += 1;
+            }
+            this.application.ninja.documentController.activeDocument.needsSave = true;
+        }
+    },
+    updatePropKeyframeRule:{
+        value:function(){
+        }
+    },
+    addPropAnimationRuleToElement:{
+        value:function(tweenEvent){
+            console.log("SECOND PROP TWEEN ADDING at " + tweenEvent.offsetX);
+            this.insertPropTween(tweenEvent.offsetX);
        }
    }
diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css
index cb119a14..ddcc536e 100644
--- a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css
+++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css
@@ -9,11 +9,18 @@
 /* line 19, ../scss/PropertyTrack.scss */
 .content-main .collapsible-content .timeline-track {
  height: 20px;
+  padding-top: 2px;
  border-bottom: 1px solid #505050;
  background-image: url("../images/gridline.jpg");
 }
-/* line 26, ../scss/PropertyTrack.scss */
+/* line 27, ../scss/PropertyTrack.scss */
 .timeline-track .content-main {
  background-color: #474747;
 }
+/* line 31, ../scss/PropertyTrack.scss */
+.prop-track .collapsible-content.collapsible-collapsed {

diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html index a4b598c5..40834466 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html
@@ -13,16 +13,50 @@
13	"owner": {	13	"owner": {
14	"prototype": "js/panels/Timeline/PropertyTrack.reel",	14	"prototype": "js/panels/Timeline/PropertyTrack.reel",
15	"properties": {	15	"properties": {
16	"element": {"#": "property-track"}	16	"element": {"#": "property-track"},
		17	"propTweenRepetition" : {"@" : "propTweenRepetition"},
		18	"propTween": {"@" : "propTween"}
17	}	19	}
18	}	20	},
		21
		22	"propTween" : {
		23	"prototype" : "js/panels/timeline/Tween.reel",
		24	"properties" : {
		25	"element":{"#": "prop_track_lane"}
		26	},
		27	"bindings" : {
		28	"tweenData" : {
		29	"boundObject" : {"@": "propTweenRepetition"},
		30	"boundObjectPropertyPath" : "objectAtCurrentIteration.tweenData",
		31	"oneway" : false
		32	}
		33	}
		34	},
19		35
		36	"propTweenRepetition": {
		37	"prototype": "montage/ui/repetition.reel",
		38	"properties": {
		39	"element": {"#": "prop_track_lanes"},
		40	"isSelectionEnabled" : false
		41	},
		42	"bindings": {
		43	"objects": {
		44	"boundObject": {"@": "owner"},
		45	"boundObjectPropertyPath": "propTweens",
		46	"oneway": false
		47	}
		48	}
		49	}
20	}	50	}
21	</script>	51	</script>
22	</head>	52	</head>
23	<body>	53	<body>
24		54
25	<div data-montage-id="property-track" class="timeline-track"></div>	55	<div data-montage-id="property-track" class="timeline-track">
		56	<div data-montage-id="prop_track_lanes" class="prop-track collapsible-content collapsible-collapsed">
		57	<div data-montage-id="prop_track_lane"></div>
		58	</div>
		59	</div>
26		60
27	</body>	61	</body>
28	</html> \ No newline at end of file	62	</html> \ No newline at end of file


diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 175b77f9..8f7745e5 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -15,6 +15,119 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
15		15
16	prepareForDraw:{	16	prepareForDraw:{
17	value:function(){	17	value:function(){
		18	this.element.addEventListener("click", this, false);
		19	}
		20	},
		21
		22	draw:{
		23	value:function(){
		24
		25	}
		26	},
		27
		28	_propTweenRepetition:{
		29	value:null
		30	},
		31
		32	propTweenRepetition:{
		33	serializable:true,
		34	get:function () {
		35	return this._propTweenRepetition;
		36	},
		37	set:function (newVal) {
		38	this._propTweenRepetition = newVal;
		39	}
		40	},
		41
		42	_propTweens:{
		43	value:[]
		44	},
		45
		46	propTweens:{
		47	serializable:true,
		48	get:function () {
		49	return this._propTweens;
		50	},
		51	set:function (newVal) {
		52	this._propTweens = newVal;
		53	}
		54	},
		55
		56	nextKeyframe:{
		57	value:1
		58	},
		59
		60	handleClick:{
		61	value:function(ev){
		62	var parentTrackID = this.parentComponent.parentComponent.parentComponent.trackID;
		63	var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(parentTrackID);
		64	//console.log(this.application.ninja.timeline.arrLayers[selectedIndex].layerData);
		65	this.application.ninja.timeline.selectLayer(selectedIndex, true);
		66
		67	if (ev.shiftKey) {
		68	if (this.propTweens.length < 1) {
		69	this.insertPropTween(0);
		70	this.addPropAnimationRuleToElement(ev);
		71	this.updatePropKeyframeRule();
		72	} else {
		73	this.handleNewPropTween(ev);
		74	this.updatePropKeyframeRule();
		75	}
		76	}
		77	}
		78	},
		79
		80	handleNewPropTween:{
		81	value:function(ev){
		82	this.insertPropTween(ev.offsetX);
		83	}
		84	},
		85
		86	insertPropTween:{
		87	value:function(clickPos){
		88	var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
		89	var currentMillisec = currentMillisecPerPixel * clickPos;
		90
		91	var newTween = {};
		92	newTween.tweenData = {};
		93
		94	if (clickPos == 0) {
		95	newTween.tweenData.spanWidth = 0;
		96	newTween.tweenData.keyFramePosition = 0;
		97	newTween.tweenData.keyFrameMillisec = 0;
		98	newTween.tweenData.tweenID = 0;
		99	newTween.tweenData.spanPosition = 0;
		100	newTween.tweenData.tweenedProperties = [];
		101
		102	this.propTweens.push(newTween);
		103
		104	} else {
		105	newTween.tweenData.spanWidth = clickPos - this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition;
		106	newTween.tweenData.keyFramePosition = clickPos;
		107	newTween.tweenData.keyFrameMillisec = currentMillisec;
		108	newTween.tweenData.tweenID = this.nextKeyframe;
		109	newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
		110	newTween.tweenData.tweenedProperties = [];
		111
		112	this.propTweens.push(newTween);
		113
		114	this.nextKeyframe += 1;
		115	}
		116
		117	this.application.ninja.documentController.activeDocument.needsSave = true;
		118	}
		119	},
		120
		121	updatePropKeyframeRule:{
		122	value:function(){
		123
		124	}
		125	},
		126
		127	addPropAnimationRuleToElement:{
		128	value:function(tweenEvent){
		129	console.log("SECOND PROP TWEEN ADDING at " + tweenEvent.offsetX);
		130	this.insertPropTween(tweenEvent.offsetX);
18		131
19	}	132	}
20	}	133	}


diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css index cb119a14..ddcc536e 100644 --- a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css +++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css
@@ -9,11 +9,18 @@
9	/* line 19, ../scss/PropertyTrack.scss */	9	/* line 19, ../scss/PropertyTrack.scss */
10	.content-main .collapsible-content .timeline-track {	10	.content-main .collapsible-content .timeline-track {
11	height: 20px;	11	height: 20px;
		12	padding-top: 2px;
12	border-bottom: 1px solid #505050;	13	border-bottom: 1px solid #505050;
13	background-image: url("../images/gridline.jpg");	14	background-image: url("../images/gridline.jpg");
14	}	15	}
15		16
16	/* line 26, ../scss/PropertyTrack.scss */	17	/* line 27, ../scss/PropertyTrack.scss */
17	.timeline-track .content-main {	18	.timeline-track .content-main {
18	background-color: #474747;	19	background-color: #474747;
19	}	20	}
		21
		22	/* line 31, ../scss/PropertyTrack.scss */
		23	.prop-track .collapsible-content.collapsible-collapsed {