2 files changed, 68 insertions, 21 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html
index ce51cb70..c161b3f8 100644
--- a/js/panels/Timeline/Tween.reel/Tween.html
+++ b/js/panels/Timeline/Tween.reel/Tween.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <copyright>
 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
@@ -11,8 +11,7 @@
        <script type="text/montage-serialization">
                    {
                        "owner": {
-                            "module": "js/panels/Timeline/Tween.reel",
+                            "prototype": "js/panels/Timeline/Tween.reel",
-                            "name": "Tween",
                            "properties": {
                                "element": {"#": "tweenspace"},
                                "keyframe": {"@": "keyframe"},
@@ -21,16 +20,14 @@
                        },
                        
                        "span": {
-                            "module": "js/panels/Timeline/Span.reel",
+                            "prototype": "js/panels/Timeline/Span.reel",
-                            "name": "Span",
                            "properties": {
                                "element": {"#": "span_container"}
                            }
                        },
                        "keyframe": {
-                            "module": "js/panels/Timeline/Keyframe.reel",
+                            "prototype": "js/panels/Timeline/Keyframe.reel",
-                            "name": "Keyframe",
                            "properties": {
                                "element": {"#": "keyframe_container"}
                            }
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 7339139f..b13a037f 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -6,7 +6,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, {
@@ -44,6 +43,8 @@ var Tween = exports.Tween = Montage.create(Component, {
        },
        set: function(value){
            this._spanWidth = value;
+            this.tweenData.spanWidth = value;
+            this.needsDraw=true;
        }
    },
@@ -58,6 +59,8 @@ var Tween = exports.Tween = Montage.create(Component, {
        },
        set:function (value) {
            this._spanPosition = value;
+            this.tweenData.spanPosition = value;
+            this.needsDraw=true;
        }
    },
@@ -72,6 +75,8 @@ var Tween = exports.Tween = Montage.create(Component, {
        },
        set:function (value) {
            this._keyFramePosition = value;
+            this.tweenData.keyFramePosition = value;
+            this.needsDraw=true;
        }
    },
@@ -133,6 +138,7 @@ var Tween = exports.Tween = Montage.create(Component, {
        }
    },
    draw:{
        value:function () {
            this.element.style.left = this.spanPosition + "px";
@@ -159,27 +165,69 @@ var Tween = exports.Tween = Montage.create(Component, {
    handleElementChange:{
        value:function (event) {
-                
+            // temp - testing var
+                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) {
+                if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) {
                    console.log("Wrong element selected for this keyframe track");
                } else {
-                    // update tweenedProperties and tell containing track to update CSS rule
+                    if(useAbsolute){
-                    // temp read only top and left.  need to change to loop over event details for prop changes generically
+                        this.setAbsoluteTweenProperties(event.detail);
-                    if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) {
+                    } else {
-                        this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
+                        this.setRelativeTweenProperties(event.detail);
-                        this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
-                        this.parentComponent.parentComponent.updateKeyframeRule();
                    }
-                    // highlight the tween's span
-                    this.tweenspan.highlightSpan();
-                    this.isTweenAnimated = true;
                }
            }
        }
    },
+    setAbsoluteTweenProperties:{
+        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;
+            }
+            // height
+            if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){
+                this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight;
+            }
+            // 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);
+        }
+    },
    selectTween:{
        value: function(){
            // turn on event listener for element change
@@ -203,8 +251,9 @@ var Tween = exports.Tween = Montage.create(Component, {
            // 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");
+            this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween");
+            this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");
        }
    },
@@ -218,4 +267,5 @@ var Tween = exports.Tween = Montage.create(Component, {
            this.keyframe.deselectKeyframe();
        }
    }
 });

diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html index ce51cb70..c161b3f8 100644 --- a/js/panels/Timeline/Tween.reel/Tween.html +++ b/js/panels/Timeline/Tween.reel/Tween.html
@@ -1,4 +1,4 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
2	<!-- <copyright>	2	<!-- <copyright>
3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>	3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>	4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
@@ -11,8 +11,7 @@
11	<script type="text/montage-serialization">	11	<script type="text/montage-serialization">
12	{	12	{
13	"owner": {	13	"owner": {
14	"module": "js/panels/Timeline/Tween.reel",	14	"prototype": "js/panels/Timeline/Tween.reel",
15	"name": "Tween",
16	"properties": {	15	"properties": {
17	"element": {"#": "tweenspace"},	16	"element": {"#": "tweenspace"},
18	"keyframe": {"@": "keyframe"},	17	"keyframe": {"@": "keyframe"},
@@ -21,16 +20,14 @@
21	},	20	},
22		21
23	"span": {	22	"span": {
24	"module": "js/panels/Timeline/Span.reel",	23	"prototype": "js/panels/Timeline/Span.reel",
25	"name": "Span",
26	"properties": {	24	"properties": {
27	"element": {"#": "span_container"}	25	"element": {"#": "span_container"}
28	}	26	}
29	},	27	},
30		28
31	"keyframe": {	29	"keyframe": {
32	"module": "js/panels/Timeline/Keyframe.reel",	30	"prototype": "js/panels/Timeline/Keyframe.reel",
33	"name": "Keyframe",
34	"properties": {	31	"properties": {
35	"element": {"#": "keyframe_container"}	32	"element": {"#": "keyframe_container"}
36	}	33	}


diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 7339139f..b13a037f 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -6,7 +6,6 @@
6		6
7	var Montage = require("montage/core/core").Montage;	7	var Montage = require("montage/core/core").Montage;
8	var Component = require("montage/ui/component").Component;	8	var Component = require("montage/ui/component").Component;
9	var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
10		9
11	var Tween = exports.Tween = Montage.create(Component, {	10	var Tween = exports.Tween = Montage.create(Component, {
12		11
@@ -44,6 +43,8 @@ var Tween = exports.Tween = Montage.create(Component, {
44	},	43	},
45	set: function(value){	44	set: function(value){
46	this._spanWidth = value;	45	this._spanWidth = value;
		46	this.tweenData.spanWidth = value;
		47	this.needsDraw=true;
47	}	48	}
48	},	49	},
49		50
@@ -58,6 +59,8 @@ var Tween = exports.Tween = Montage.create(Component, {
58	},	59	},
59	set:function (value) {	60	set:function (value) {
60	this._spanPosition = value;	61	this._spanPosition = value;
		62	this.tweenData.spanPosition = value;
		63	this.needsDraw=true;
61	}	64	}
62	},	65	},
63		66
@@ -72,6 +75,8 @@ var Tween = exports.Tween = Montage.create(Component, {
72	},	75	},
73	set:function (value) {	76	set:function (value) {
74	this._keyFramePosition = value;	77	this._keyFramePosition = value;
		78	this.tweenData.keyFramePosition = value;
		79	this.needsDraw=true;
75	}	80	}
76	},	81	},
77		82
@@ -133,6 +138,7 @@ var Tween = exports.Tween = Montage.create(Component, {
133	}	138	}
134	},	139	},
135		140
		141
136	draw:{	142	draw:{
137	value:function () {	143	value:function () {
138	this.element.style.left = this.spanPosition + "px";	144	this.element.style.left = this.spanPosition + "px";
@@ -159,27 +165,69 @@ var Tween = exports.Tween = Montage.create(Component, {
159		165
160	handleElementChange:{	166	handleElementChange:{
161	value:function (event) {	167	value:function (event) {
162		168	// temp - testing var
		169	var useAbsolute = true;
		170
163	if (event.detail.source && event.detail.source !== "tween") {	171	if (event.detail.source && event.detail.source !== "tween") {
164	// check for correct element selection	172	// check for correct element selection
165	if (this.application.ninja.selectedElements[0]!= this.parentComponent.parentComponent.animatedElement) {	173	if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) {
166	console.log("Wrong element selected for this keyframe track");	174	console.log("Wrong element selected for this keyframe track");
167	} else {	175	} else {
168	// update tweenedProperties and tell containing track to update CSS rule	176	if(useAbsolute){
169	// temp read only top and left. need to change to loop over event details for prop changes generically	177	this.setAbsoluteTweenProperties(event.detail);
170	if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) {	178	} else {
171	this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;	179	this.setRelativeTweenProperties(event.detail);
172	this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
173	this.parentComponent.parentComponent.updateKeyframeRule();
174	}	180	}
175	// highlight the tween's span
176	this.tweenspan.highlightSpan();
177	this.isTweenAnimated = true;
178	}	181	}
179	}	182	}
180	}	183	}
181	},	184	},
182		185
		186	setAbsoluteTweenProperties:{
		187	value:function (eventDetail) {
		188	//console.log(eventDetail);
		189
		190	// top
		191	if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){
		192	this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
		193	}
		194
		195	// left
		196	if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){
		197	this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
		198	}
		199
		200	// width
		201	if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){
		202	this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth;
		203	}
		204
		205	// height
		206	if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){
		207	this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight;
		208	}
		209
		210	// skewX
		211
		212	// skewY
		213
		214	// rotation
		215
		216	// tell track to update css rule
		217	this.parentComponent.parentComponent.updateKeyframeRule();
		218
		219	// highlight the tween's span
		220	this.tweenspan.highlightSpan();
		221	this.isTweenAnimated = true;
		222	}
		223	},
		224
		225	setRelativeTweenProperties:{
		226	value:function(eventDetail){
		227	//console.log(eventDetail);
		228	}
		229	},
		230
183	selectTween:{	231	selectTween:{
184	value: function(){	232	value: function(){
185	// turn on event listener for element change	233	// turn on event listener for element change
@@ -203,8 +251,9 @@ var Tween = exports.Tween = Montage.create(Component, {
203	// move animated element to correct position on stage	251	// move animated element to correct position on stage
204	var currentTop = this.tweenedProperties["top"] + "px";	252	var currentTop = this.tweenedProperties["top"] + "px";
205	var currentLeft = this.tweenedProperties["left"] + "px";	253	var currentLeft = this.tweenedProperties["left"] + "px";
206	ElementsMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween");	254
207	ElementsMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");	255	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween");
		256	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");
208		257
209	}	258	}
210	},	259	},
@@ -218,4 +267,5 @@ var Tween = exports.Tween = Montage.create(Component, {
218	this.keyframe.deselectKeyframe();	267	this.keyframe.deselectKeyframe();
219	}	268	}
220	}	269	}
		270
221	});	271	});