2 files changed, 76 insertions, 43 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html
index ce51cb70..aba42436 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"}
                            }
@@ -40,9 +37,9 @@
        </head>
        <body>
-    <div id="tweenspace" class="tween_container">
+    <div data-montage-id="tweenspace" class="tween_container">
-        <div id="span_container"></div>
+        <div data-montage-id="span_container"></div>
-        <div id="keyframe_container"></div>
+        <div data-montage-id="keyframe_container"></div>
    </div>
    </body>
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index b13a037f..3c0223c1 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -14,12 +14,10 @@ var Tween = exports.Tween = Montage.create(Component, {
    },
    _tweenData:{
-        serializable: true,
        value:{}
    },
    tweenData:{
-        serializable: true,
        get:function(){
            return this._tweenData;
        },
@@ -32,7 +30,6 @@ var Tween = exports.Tween = Montage.create(Component, {
    },
    _spanWidth: {
-        serializable: true,
        value: 0
    },
@@ -109,7 +106,6 @@ var Tween = exports.Tween = Montage.create(Component, {
    },
    _tweenedProperties:{
-        serializable: true,
        value:[]
    },
@@ -124,7 +120,6 @@ var Tween = exports.Tween = Montage.create(Component, {
    },
    _isTweenAnimated:{
-        serializable:true,
        value:false
    },
@@ -137,6 +132,20 @@ var Tween = exports.Tween = Montage.create(Component, {
            this._isTweenAnimated = value;
        }
    },
+    
+    _isDragging: {
+        value: false
+    },
+    isDragging: {
+        serializable: true,
+        get:function () {
+            return this._isDragging;
+        },
+        set:function (newVal) {
+            this._isDragging = newVal;
+        }
+        
+    },
    draw:{
@@ -169,50 +178,41 @@ var Tween = exports.Tween = Montage.create(Component, {
                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.parentComponent.parentComponent.isSubproperty){
-                    console.log("Wrong element selected for this keyframe track");
+                    this.setStyleTweenProperty(event.detail);
                } else {
-                    if(useAbsolute){
+                    // check for correct element selection
-                        this.setAbsoluteTweenProperties(event.detail);
+                    if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) {
+                        console.log("Wrong element selected for this keyframe track");
                    } else {
-                        this.setRelativeTweenProperties(event.detail);
+                        if (useAbsolute) {
+                            this.setAbsoluteTweenProperties(event.detail);
+                        } else {
+                            this.setRelativeTweenProperties(event.detail);
+                        }
                    }
                }
            }
        }
    },
    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();
@@ -228,6 +228,34 @@ var Tween = exports.Tween = Montage.create(Component, {
        }
    },
+    setStyleTweenProperty:{
+        value:function (eventDetail) {
+            //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty);
+            //console.log(eventDetail);
+            if(eventDetail.type == "setProperties"){
+                // ignore top, left, width, and height
+                console.log(eventDetail.data.value[0]);

diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html index ce51cb70..aba42436 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	}
@@ -40,9 +37,9 @@
40	</head>	37	</head>
41	<body>	38	<body>
42		39
43	<div id="tweenspace" class="tween_container">	40	<div data-montage-id="tweenspace" class="tween_container">
44	<div id="span_container"></div>	41	<div data-montage-id="span_container"></div>
45	<div id="keyframe_container"></div>	42	<div data-montage-id="keyframe_container"></div>
46	</div>	43	</div>
47		44
48	</body>	45	</body>


diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index b13a037f..3c0223c1 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -14,12 +14,10 @@ var Tween = exports.Tween = Montage.create(Component, {
14	},	14	},
15		15
16	_tweenData:{	16	_tweenData:{
17	serializable: true,
18	value:{}	17	value:{}
19	},	18	},
20		19
21	tweenData:{	20	tweenData:{
22	serializable: true,
23	get:function(){	21	get:function(){
24	return this._tweenData;	22	return this._tweenData;
25	},	23	},
@@ -32,7 +30,6 @@ var Tween = exports.Tween = Montage.create(Component, {
32	},	30	},
33		31
34	_spanWidth: {	32	_spanWidth: {
35	serializable: true,
36	value: 0	33	value: 0
37	},	34	},
38		35
@@ -109,7 +106,6 @@ var Tween = exports.Tween = Montage.create(Component, {
109	},	106	},
110		107
111	_tweenedProperties:{	108	_tweenedProperties:{
112	serializable: true,
113	value:[]	109	value:[]
114	},	110	},
115		111
@@ -124,7 +120,6 @@ var Tween = exports.Tween = Montage.create(Component, {
124	},	120	},
125		121
126	_isTweenAnimated:{	122	_isTweenAnimated:{
127	serializable:true,
128	value:false	123	value:false
129	},	124	},
130		125
@@ -137,6 +132,20 @@ var Tween = exports.Tween = Montage.create(Component, {
137	this._isTweenAnimated = value;	132	this._isTweenAnimated = value;
138	}	133	}
139	},	134	},
		135
		136	_isDragging: {
		137	value: false
		138	},
		139	isDragging: {
		140	serializable: true,
		141	get:function () {
		142	return this._isDragging;
		143	},
		144	set:function (newVal) {
		145	this._isDragging = newVal;
		146	}
		147
		148	},
140		149
141		150
142	draw:{	151	draw:{
@@ -169,50 +178,41 @@ var Tween = exports.Tween = Montage.create(Component, {
169	var useAbsolute = true;	178	var useAbsolute = true;
170		179
171	if (event.detail.source && event.detail.source !== "tween") {	180	if (event.detail.source && event.detail.source !== "tween") {
172	// check for correct element selection	181
173	if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) {	182	if(this.parentComponent.parentComponent.isSubproperty){
174	console.log("Wrong element selected for this keyframe track");	183	this.setStyleTweenProperty(event.detail);
175	} else {	184	} else {
176	if(useAbsolute){	185	// check for correct element selection
177	this.setAbsoluteTweenProperties(event.detail);	186	if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) {
		187	console.log("Wrong element selected for this keyframe track");
178	} else {	188	} else {
179	this.setRelativeTweenProperties(event.detail);	189	if (useAbsolute) {
		190	this.setAbsoluteTweenProperties(event.detail);
		191	} else {
		192	this.setRelativeTweenProperties(event.detail);
		193	}
180	}	194	}
181	}	195	}
		196
		197
182	}	198	}
183	}	199	}
184	},	200	},
185		201
186	setAbsoluteTweenProperties:{	202	setAbsoluteTweenProperties:{
187	value:function (eventDetail) {	203	value:function (eventDetail) {
188	//console.log(eventDetail);
189
190	// top
191	if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){	204	if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){
192	this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;	205	this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
193	}	206	}
194
195	// left
196	if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){	207	if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){
197	this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;	208	this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
198	}	209	}
199
200	// width
201	if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){	210	if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){
202	this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth;	211	this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth;
203	}	212	}
204
205	// height
206	if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){	213	if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){
207	this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight;	214	this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight;
208	}	215	}
209
210	// skewX
211
212	// skewY
213
214	// rotation
215
216	// tell track to update css rule	216	// tell track to update css rule
217	this.parentComponent.parentComponent.updateKeyframeRule();	217	this.parentComponent.parentComponent.updateKeyframeRule();
218		218
@@ -228,6 +228,34 @@ var Tween = exports.Tween = Montage.create(Component, {
228	}	228	}
229	},	229	},
230		230
		231	setStyleTweenProperty:{
		232	value:function (eventDetail) {
		233	//console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty);
		234	//console.log(eventDetail);
		235
		236	if(eventDetail.type == "setProperties"){
		237	// ignore top, left, width, and height
		238	console.log(eventDetail.data.value[0]);