5 files changed, 71 insertions, 11 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 0d769c23..8a4073c9 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <copyright>
 Copyright (c) 2012, Motorola Mobility LLC.
 All Rights Reserved.
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 521c315d..7581d15a 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -527,7 +527,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
        set:function (newVal) {
            if (newVal !== this._millisecondsOffset) {
-                this.tempValue  = newVal;
+                this.zoomValue  = newVal;
                var tempValue = (1/newVal) * 1000000;
                newVal = tempValue;
@@ -1130,8 +1130,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected;
                this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected;
                this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;
+//                if(this.application.ninja.currentDocument.tlZoomSliderValue){
+//                this.millisecondsOffset = this.application.ninja.currentDocument.tlZoomSliderValue ;
+//                    if(this.zoom_slider){
+//                        this.zoom_slider.value = this.application.ninja.currentDocument.tlZoomSliderValue;
+//                    }
+//
+//                }
                // Are we only showing animated layers?
                                if (this.application.ninja.currentDocument.boolShowOnlyAnimated) {
                                        // Fake a click.
@@ -1706,12 +1711,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
    zoomTrackContainerWidthChange:{
        value:function () {
-            this.tempValue = this.tempValue/1000;
+            if(this.application.ninja.currentDocument && this.zoomValue){
-            this.tempValue *= 30;
+                this.application.ninja.currentDocument.tlZoomSliderValue = this.zoomValue;
+            }
-            this.container_tracks.style.width = (this.tempValue * 80) + "px";
+            this.zoomValue = this.zoomValue/1000;
-            this.master_track.style.width = (this.tempValue * 80) + "px";
+            this.zoomValue *= 30;
-            this.time_markers.style.width = (this.tempValue * 80) + "px";
+            this.container_tracks.style.width = (this.zoomValue * 80) + "px";
+            this.master_track.style.width = (this.zoomValue * 80) + "px";
+            this.time_markers.style.width = (this.zoomValue * 80) + "px";
            if (this.timeMarkerHolder) {
                this.time_markers.removeChild(this.timeMarkerHolder);
            }
@@ -1917,7 +1927,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
    handleElementsRemoved:{
        value:function (event) {
-            this.deleteLayers(event.detail);
+            if(typeof(event.detail.length) === "undefined"){
+                this.deleteLayers([event.detail]);
+            }else{
+                this.deleteLayers(event.detail);
+            }
        }
    },
diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
index cf6df347..cce01c90 100644
--- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
+++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
@@ -305,7 +305,7 @@ POSSIBILITY OF SUCH DAMAGE.
    top: 0;
    left: 0;
    position: absolute;
-    z-index: 91;
+    z-index: 1;
    opacity: 0.7;
 }
 .timebar{
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index f3ab0d84..56e5d2f1 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -354,6 +354,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
        }
    },
+    _enabled3D:{
+        value:false
+    },
+    enabled3D:{
+        serializable:true,
+        get:function () {
+            return this._enabled3D;
+        },
+        set:function (val) {
+            this._enabled3D = val;
+            this.trackData.enabled3D = val;
+        }
+    },
    _ruleList:{
        value:[]
    },
@@ -495,6 +509,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
            this.trackPosition = this.trackData.trackPosition;
            this.isVisible = this.trackData.isVisible;
            this.stageElement = this.trackData.stageElement;
+            this.enabled3D = this.trackData.enabled3D;
            this.trackEditorProperty = "master";
            this.needsDraw = true;
        }
@@ -1087,6 +1102,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
        }
    },
+    initial3DforAllTweens:{
+        value:function(){
+            var j;
+            var tweensLength = this.tweens.length;
+            for (j = 0; j < tweensLength; j++) {
+                this.tweens[j].tweenData.tweenedProperties["-webkit-transform"] = "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)";
+            }
+            this.enabled3D = true;
+        }
+    },
    addAnimationRuleToElement:{
        value:function (tweenEvent) {
            this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 0f567fbd..9ad88a69 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -299,6 +299,10 @@ var Tween = exports.Tween = Montage.create(Component, {
                    this.parentComponent.parentComponent.updateKeyframeRule();
                    this.isTweenAnimated = true;
                }
+            if(!this.parentComponent.parentComponent.enabled3D){
+                this.parentComponent.parentComponent.initial3DforAllTweens();
+            }
                        
                        if (eventDetail.source === "translateTool" || eventDetail.source === "rotateTool") {
                        var arrMat = eventDetail.data.value[0].properties.mat,
@@ -308,6 +312,15 @@ var Tween = exports.Tween = Montage.create(Component, {
                        this.parentComponent.parentComponent.updateKeyframeRule();
                        this.isTweenAnimated = true;
                }
+            if(eventDetail.source === "pi" && eventDetail.type === "setMatrix"){
+                var piArrMat = eventDetail.data.value,
+                    piStrTweenProperty = "perspective(1400) matrix3d(" + piArrMat.join() + ")";
+                this.tweenedProperties["-webkit-transform"] = piStrTweenProperty;
+                this.parentComponent.parentComponent.updateKeyframeRule();
+                this.isTweenAnimated = true;
+            }
        }
    },
@@ -373,6 +386,12 @@ var Tween = exports.Tween = Montage.create(Component, {
                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");
                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween");
                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween");
+                if(this.parentComponent.parentComponent.enabled3D){
+                    var current3DMatrix = this.tweenedProperties["-webkit-transform"];
+                    this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "-webkit-transform", [current3DMatrix], "Change", "tween");
+                }
            }
        }
    },

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 0d769c23..8a4073c9 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -1,4 +1,4 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
2	<!-- <copyright>	2	<!-- <copyright>
3	Copyright (c) 2012, Motorola Mobility LLC.	3	Copyright (c) 2012, Motorola Mobility LLC.
4	All Rights Reserved.	4	All Rights Reserved.


diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 521c315d..7581d15a 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -527,7 +527,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
527	set:function (newVal) {	527	set:function (newVal) {
528	if (newVal !== this._millisecondsOffset) {	528	if (newVal !== this._millisecondsOffset) {
529		529
530	this.tempValue = newVal;	530	this.zoomValue = newVal;
531	var tempValue = (1/newVal) * 1000000;	531	var tempValue = (1/newVal) * 1000000;
532	newVal = tempValue;	532	newVal = tempValue;
533		533
@@ -1130,8 +1130,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1130	this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected;	1130	this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected;
1131	this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected;	1131	this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected;
1132	this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;	1132	this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;
1133		1133	// if(this.application.ninja.currentDocument.tlZoomSliderValue){
1134		1134	// this.millisecondsOffset = this.application.ninja.currentDocument.tlZoomSliderValue ;
		1135	// if(this.zoom_slider){
		1136	// this.zoom_slider.value = this.application.ninja.currentDocument.tlZoomSliderValue;
		1137	// }
		1138	//
		1139	// }
1135	// Are we only showing animated layers?	1140	// Are we only showing animated layers?
1136	if (this.application.ninja.currentDocument.boolShowOnlyAnimated) {	1141	if (this.application.ninja.currentDocument.boolShowOnlyAnimated) {
1137	// Fake a click.	1142	// Fake a click.
@@ -1706,12 +1711,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1706	zoomTrackContainerWidthChange:{	1711	zoomTrackContainerWidthChange:{
1707	value:function () {	1712	value:function () {
1708		1713
1709	this.tempValue = this.tempValue/1000;	1714	if(this.application.ninja.currentDocument && this.zoomValue){
1710	this.tempValue *= 30;	1715	this.application.ninja.currentDocument.tlZoomSliderValue = this.zoomValue;
		1716
		1717	}
1711		1718
1712	this.container_tracks.style.width = (this.tempValue * 80) + "px";	1719	this.zoomValue = this.zoomValue/1000;
1713	this.master_track.style.width = (this.tempValue * 80) + "px";	1720	this.zoomValue *= 30;
1714	this.time_markers.style.width = (this.tempValue * 80) + "px";	1721
		1722	this.container_tracks.style.width = (this.zoomValue * 80) + "px";
		1723	this.master_track.style.width = (this.zoomValue * 80) + "px";
		1724	this.time_markers.style.width = (this.zoomValue * 80) + "px";
1715	if (this.timeMarkerHolder) {	1725	if (this.timeMarkerHolder) {
1716	this.time_markers.removeChild(this.timeMarkerHolder);	1726	this.time_markers.removeChild(this.timeMarkerHolder);
1717	}	1727	}
@@ -1917,7 +1927,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1917		1927
1918	handleElementsRemoved:{	1928	handleElementsRemoved:{
1919	value:function (event) {	1929	value:function (event) {
1920	this.deleteLayers(event.detail);	1930
		1931	if(typeof(event.detail.length) === "undefined"){
		1932	this.deleteLayers([event.detail]);
		1933	}else{
		1934	this.deleteLayers(event.detail);
		1935	}
1921	}	1936	}
1922	},	1937	},
1923		1938


diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss index cf6df347..cce01c90 100644 --- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss +++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
@@ -305,7 +305,7 @@ POSSIBILITY OF SUCH DAMAGE.
305	top: 0;	305	top: 0;
306	left: 0;	306	left: 0;
307	position: absolute;	307	position: absolute;
308	z-index: 91;	308	z-index: 1;
309	opacity: 0.7;	309	opacity: 0.7;
310	}	310	}
311	.timebar{	311	.timebar{


diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index f3ab0d84..56e5d2f1 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -354,6 +354,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
354	}	354	}
355	},	355	},
356		356
		357	_enabled3D:{
		358	value:false
		359	},
		360	enabled3D:{
		361	serializable:true,
		362	get:function () {
		363	return this._enabled3D;
		364	},
		365	set:function (val) {
		366	this._enabled3D = val;
		367	this.trackData.enabled3D = val;
		368	}
		369	},
		370
357	_ruleList:{	371	_ruleList:{
358	value:[]	372	value:[]
359	},	373	},
@@ -495,6 +509,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
495	this.trackPosition = this.trackData.trackPosition;	509	this.trackPosition = this.trackData.trackPosition;
496	this.isVisible = this.trackData.isVisible;	510	this.isVisible = this.trackData.isVisible;
497	this.stageElement = this.trackData.stageElement;	511	this.stageElement = this.trackData.stageElement;
		512	this.enabled3D = this.trackData.enabled3D;
498	this.trackEditorProperty = "master";	513	this.trackEditorProperty = "master";
499	this.needsDraw = true;	514	this.needsDraw = true;
500	}	515	}
@@ -1087,6 +1102,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1087	}	1102	}
1088	},	1103	},
1089		1104
		1105	initial3DforAllTweens:{
		1106	value:function(){
		1107	var j;
		1108	var tweensLength = this.tweens.length;
		1109	for (j = 0; j < tweensLength; j++) {
		1110	this.tweens[j].tweenData.tweenedProperties["-webkit-transform"] = "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)";
		1111	}
		1112	this.enabled3D = true;
		1113	}
		1114	},
		1115
1090	addAnimationRuleToElement:{	1116	addAnimationRuleToElement:{
1091	value:function (tweenEvent) {	1117	value:function (tweenEvent) {
1092	this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";	1118	this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";


diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 0f567fbd..9ad88a69 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -299,6 +299,10 @@ var Tween = exports.Tween = Montage.create(Component, {
299	this.parentComponent.parentComponent.updateKeyframeRule();	299	this.parentComponent.parentComponent.updateKeyframeRule();
300	this.isTweenAnimated = true;	300	this.isTweenAnimated = true;
301	}	301	}
		302
		303	if(!this.parentComponent.parentComponent.enabled3D){
		304	this.parentComponent.parentComponent.initial3DforAllTweens();
		305	}
302		306
303	if (eventDetail.source === "translateTool" \|\| eventDetail.source === "rotateTool") {	307	if (eventDetail.source === "translateTool" \|\| eventDetail.source === "rotateTool") {
304	var arrMat = eventDetail.data.value[0].properties.mat,	308	var arrMat = eventDetail.data.value[0].properties.mat,
@@ -308,6 +312,15 @@ var Tween = exports.Tween = Montage.create(Component, {
308	this.parentComponent.parentComponent.updateKeyframeRule();	312	this.parentComponent.parentComponent.updateKeyframeRule();
309	this.isTweenAnimated = true;	313	this.isTweenAnimated = true;
310	}	314	}
		315
		316	if(eventDetail.source === "pi" && eventDetail.type === "setMatrix"){
		317	var piArrMat = eventDetail.data.value,
		318	piStrTweenProperty = "perspective(1400) matrix3d(" + piArrMat.join() + ")";
		319
		320	this.tweenedProperties["-webkit-transform"] = piStrTweenProperty;
		321	this.parentComponent.parentComponent.updateKeyframeRule();
		322	this.isTweenAnimated = true;
		323	}
311	}	324	}
312	},	325	},
313		326
@@ -373,6 +386,12 @@ var Tween = exports.Tween = Montage.create(Component, {
373	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");	386	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");
374	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween");	387	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween");
375	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween");	388	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween");
		389
		390	if(this.parentComponent.parentComponent.enabled3D){
		391	var current3DMatrix = this.tweenedProperties["-webkit-transform"];
		392	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "-webkit-transform", [current3DMatrix], "Change", "tween");
		393	}
		394
376	}	395	}
377	}	396	}
378	},	397	},