7 files changed, 71 insertions, 44 deletions
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 4be0767a..7795a74d 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -483,6 +483,8 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
            if(!this.webTemplate) {
                this._showCurrentDocument();
+            } else {
+                this.application.ninja.stage.stageView.showRulers();
            }
            this.webTemplate = false;
diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js
index fbbb7c6e..839d0787 100755
--- a/js/controllers/elements/body-controller.js
+++ b/js/controllers/elements/body-controller.js
@@ -12,6 +12,17 @@ exports.BodyController = Montage.create(ElementController, {
    // TODO - perspective distance needs to be passed in as "dist" and matrix3d needs to be passed in as "mat"
    set3DProperties: {
        value: function(el, props, update3DModel) {
+            var dist = props["dist"], mat = props["mat"];
+            this.application.ninja.stylesController.setElementStyle(el, "-webkit-transform", "perspective(" + dist + ") " + "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")", true);
+            el.elementModel.props3D.matrix3d = mat;
+            el.elementModel.props3D.perspectiveDist = dist;
+            this.application.ninja.stage.updatedStage = true;
+            if(update3DModel) {
+                this._update3DProperties(el, mat, dist);
+            }
        }
    },
diff --git a/js/document/templates/montage-web/default_html.css b/js/document/templates/montage-web/default_html.css
index 08e39f22..e62a20a9 100755
--- a/js/document/templates/montage-web/default_html.css
+++ b/js/document/templates/montage-web/default_html.css
@@ -10,6 +10,15 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
    -webkit-animation-name: none !important;
 }
+body {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    -webkit-transform-style: preserve-3d;
+    -webkit-perspective: 1400px;
+}
 .active-element-outline {
    outline: #adff2f solid 2px;
 }
diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html
index 630794a4..caebc8d0 100755
--- a/js/document/templates/montage-web/index.html
+++ b/js/document/templates/montage-web/index.html
@@ -29,20 +29,10 @@
        }
        </script>
-        <style>
-            div {
-                width: 4000px;
-                height: 300px;
-                background: red;
-            }
-        </style>
        </head>
        <body>
-                
+        <style></style>
-                <!--<div>IPSUM</div>-->
        </body>
 </html>
 \ No newline at end of file
diff --git a/js/stage/layout.js b/js/stage/layout.js
index a096848e..0a76dbe5 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -174,7 +174,7 @@ exports.Layout = Montage.create(Component, {
            var tmpMat = viewUtils.getLocalToGlobalMatrix( item );
            var zoomFactor = 1;
-            if (this.stage._viewport.style && this.stage._viewport.style.zoom) {
+            if (this.stage._viewport && this.stage._viewport.style && this.stage._viewport.style.zoom) {
                                zoomFactor = Number(this.stage._viewport.style.zoom);
            }
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 1ea14d64..515165bf 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -231,33 +231,43 @@ exports.Stage = Montage.create(Component, {
            this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;
            this._documentRoot = this.application.ninja.currentDocument.documentRoot;
-            this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode;
-            this.documentOffsetLeft = this._viewport.offsetLeft;
-            this.documentOffsetTop = this._viewport.offsetTop;
-            // Center the stage
-            this.centerStage();
-            this._scrollLeft = this._iframeContainer.scrollLeft;
-            this._scrollTop = this._iframeContainer.scrollTop;
-            this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
-            this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop;
            // Hardcode this value so that it does not fail for the new stage architecture
            // TODO: Remove marker for old template: NINJA-STAGE-REWORK
            if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
-                this.userContentBorder = 1; //parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border"));
+                this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode;
+                this.documentOffsetLeft = this._viewport.offsetLeft;
+                this.documentOffsetTop = this._viewport.offsetTop;
+                // Center the stage
+                this.centerStage();
+                this._scrollLeft = this._iframeContainer.scrollLeft;
+                this._scrollTop = this._iframeContainer.scrollTop;
+                this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
+                this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop;
+                this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border"));
+                this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
+                this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
+                this._iframeContainer.addEventListener("scroll", this, false);
+                this.application.ninja.currentDocument.iframe.style.opacity = 1.0;
            } else {
                this.userContentBorder = 0;
-            }
-            this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
+                this._scrollLeft = 0;
-            this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
+                this._scrollTop = 0;
+                this._userContentLeft = 0;
+                this._userContentTop = 0;
+                this.application.ninja.currentDocument._window.addEventListener("scroll", this, false);
+            }
-            this.application.ninja.currentDocument.iframe.style.opacity = 1.0;
-            this._iframeContainer.addEventListener("scroll", this, false);
            // TODO - We will need to modify this once we support switching between multiple documents
            this.application.ninja.toolsData.selectedToolInstance._configure(true);
@@ -415,13 +425,10 @@ exports.Stage = Montage.create(Component, {
    handleSelectionChange: {
        value: function(event) {
            // TODO - this is a hack for now because some tools depend on selectionDrawn event for some logic
-            if(this.drawNow)
+            if(this.drawNow) {
-            {
                this.draw();
                this.drawNow = false;
-            }
+            } else {
-            else
-            {
                this.needsDraw = true;
            }
        }
@@ -444,11 +451,20 @@ exports.Stage = Montage.create(Component, {
     */
    handleScroll: {
        value: function() {
-            this._scrollLeft = this._iframeContainer.scrollLeft;
+             // TODO: Remove marker for old template: NINJA-STAGE-REWORK
-            this._scrollTop = this._iframeContainer.scrollTop;
+            if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
+                this._scrollLeft = this._iframeContainer.scrollLeft;
+                this._scrollTop = this._iframeContainer.scrollTop;
-            this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
+                this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
-            this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
+                this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
+            } else {
+                this._scrollLeft = this.application.ninja.currentDocument.documentRoot.scrollLeft;
+                this._scrollTop = this.application.ninja.currentDocument.documentRoot.scrollTop;
+                this.userContentLeft = -this._scrollLeft;
+                this.userContentTop = -this._scrollTop;
+            }
            // Need to clear the snap cache and set up the drag plane
            //snapManager.setupDragPlaneFromPlane( workingPlane );
@@ -457,7 +473,6 @@ exports.Stage = Montage.create(Component, {
            this.needsDraw = true;
            this.layout.draw();
            //this._toolsList.action("DrawHandles");
        }
    },

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 4be0767a..7795a74d 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js
@@ -483,6 +483,8 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
483		483
484	if(!this.webTemplate) {	484	if(!this.webTemplate) {
485	this._showCurrentDocument();	485	this._showCurrentDocument();
		486	} else {
		487	this.application.ninja.stage.stageView.showRulers();
486	}	488	}
487		489
488	this.webTemplate = false;	490	this.webTemplate = false;


diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js index fbbb7c6e..839d0787 100755 --- a/js/controllers/elements/body-controller.js +++ b/js/controllers/elements/body-controller.js
@@ -12,6 +12,17 @@ exports.BodyController = Montage.create(ElementController, {
12	// TODO - perspective distance needs to be passed in as "dist" and matrix3d needs to be passed in as "mat"	12	// TODO - perspective distance needs to be passed in as "dist" and matrix3d needs to be passed in as "mat"
13	set3DProperties: {	13	set3DProperties: {
14	value: function(el, props, update3DModel) {	14	value: function(el, props, update3DModel) {
		15	var dist = props["dist"], mat = props["mat"];
		16	this.application.ninja.stylesController.setElementStyle(el, "-webkit-transform", "perspective(" + dist + ") " + "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")", true);
		17
		18	el.elementModel.props3D.matrix3d = mat;
		19	el.elementModel.props3D.perspectiveDist = dist;
		20
		21	this.application.ninja.stage.updatedStage = true;
		22
		23	if(update3DModel) {
		24	this._update3DProperties(el, mat, dist);
		25	}
15	}	26	}
16	},	27	},
17		28


diff --git a/js/document/templates/montage-web/default_html.css b/js/document/templates/montage-web/default_html.css index 08e39f22..e62a20a9 100755 --- a/js/document/templates/montage-web/default_html.css +++ b/js/document/templates/montage-web/default_html.css
@@ -10,6 +10,15 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
10	-webkit-animation-name: none !important;	10	-webkit-animation-name: none !important;
11	}	11	}
12		12
		13	body {
		14	margin: 0;
		15	padding: 0;
		16
		17	position: absolute;
		18	-webkit-transform-style: preserve-3d;
		19	-webkit-perspective: 1400px;
		20	}
		21
13	.active-element-outline {	22	.active-element-outline {
14	outline: #adff2f solid 2px;	23	outline: #adff2f solid 2px;
15	}	24	}


diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html index 630794a4..caebc8d0 100755 --- a/js/document/templates/montage-web/index.html +++ b/js/document/templates/montage-web/index.html
@@ -29,20 +29,10 @@
29	}	29	}
30	</script>	30	</script>
31		31
32	<style>
33	div {
34	width: 4000px;
35	height: 300px;
36	background: red;
37	}
38	</style>
39
40	</head>	32	</head>
41		33
42	<body>	34	<body>
43		35	<style></style>
44	<!--<div>IPSUM</div>-->
45
46	</body>	36	</body>
47		37
48	</html> \ No newline at end of file	38	</html> \ No newline at end of file


diff --git a/js/stage/layout.js b/js/stage/layout.js index a096848e..0a76dbe5 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js
@@ -174,7 +174,7 @@ exports.Layout = Montage.create(Component, {
174	var tmpMat = viewUtils.getLocalToGlobalMatrix( item );	174	var tmpMat = viewUtils.getLocalToGlobalMatrix( item );
175		175
176	var zoomFactor = 1;	176	var zoomFactor = 1;
177	if (this.stage._viewport.style && this.stage._viewport.style.zoom) {	177	if (this.stage._viewport && this.stage._viewport.style && this.stage._viewport.style.zoom) {
178	zoomFactor = Number(this.stage._viewport.style.zoom);	178	zoomFactor = Number(this.stage._viewport.style.zoom);
179	}	179	}
180		180


diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 1ea14d64..515165bf 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js
@@ -231,33 +231,43 @@ exports.Stage = Montage.create(Component, {
231	this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;	231	this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;
232		232
233	this._documentRoot = this.application.ninja.currentDocument.documentRoot;	233	this._documentRoot = this.application.ninja.currentDocument.documentRoot;
234	this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode;
235
236	this.documentOffsetLeft = this._viewport.offsetLeft;
237	this.documentOffsetTop = this._viewport.offsetTop;
238
239	// Center the stage
240	this.centerStage();
241
242	this._scrollLeft = this._iframeContainer.scrollLeft;
243	this._scrollTop = this._iframeContainer.scrollTop;
244	this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
245	this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop;
246		234
247	// Hardcode this value so that it does not fail for the new stage architecture	235	// Hardcode this value so that it does not fail for the new stage architecture
248	// TODO: Remove marker for old template: NINJA-STAGE-REWORK	236	// TODO: Remove marker for old template: NINJA-STAGE-REWORK
249	if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {	237	if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
250	this.userContentBorder = 1; //parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border"));	238	this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode;
		239
		240	this.documentOffsetLeft = this._viewport.offsetLeft;
		241	this.documentOffsetTop = this._viewport.offsetTop;
		242
		243	// Center the stage
		244	this.centerStage();
		245
		246	this._scrollLeft = this._iframeContainer.scrollLeft;
		247	this._scrollTop = this._iframeContainer.scrollTop;
		248	this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
		249	this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop;
		250
		251	this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border"));
		252
		253	this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
		254	this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
		255
		256	this._iframeContainer.addEventListener("scroll", this, false);
		257
		258	this.application.ninja.currentDocument.iframe.style.opacity = 1.0;
251	} else {	259	} else {
252	this.userContentBorder = 0;	260	this.userContentBorder = 0;
253	}
254		261
255	this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;	262	this._scrollLeft = 0;
256	this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;	263	this._scrollTop = 0;
		264	this._userContentLeft = 0;
		265	this._userContentTop = 0;
		266
		267	this.application.ninja.currentDocument._window.addEventListener("scroll", this, false);
		268	}
257		269
258	this.application.ninja.currentDocument.iframe.style.opacity = 1.0;
259		270
260	this._iframeContainer.addEventListener("scroll", this, false);
261		271
262	// TODO - We will need to modify this once we support switching between multiple documents	272	// TODO - We will need to modify this once we support switching between multiple documents
263	this.application.ninja.toolsData.selectedToolInstance._configure(true);	273	this.application.ninja.toolsData.selectedToolInstance._configure(true);
@@ -415,13 +425,10 @@ exports.Stage = Montage.create(Component, {
415	handleSelectionChange: {	425	handleSelectionChange: {
416	value: function(event) {	426	value: function(event) {
417	// TODO - this is a hack for now because some tools depend on selectionDrawn event for some logic	427	// TODO - this is a hack for now because some tools depend on selectionDrawn event for some logic
418	if(this.drawNow)	428	if(this.drawNow) {
419	{
420	this.draw();	429	this.draw();
421	this.drawNow = false;	430	this.drawNow = false;
422	}	431	} else {
423	else
424	{
425	this.needsDraw = true;	432	this.needsDraw = true;
426	}	433	}
427	}	434	}
@@ -444,11 +451,20 @@ exports.Stage = Montage.create(Component, {
444	*/	451	*/
445	handleScroll: {	452	handleScroll: {
446	value: function() {	453	value: function() {
447	this._scrollLeft = this._iframeContainer.scrollLeft;	454	// TODO: Remove marker for old template: NINJA-STAGE-REWORK
448	this._scrollTop = this._iframeContainer.scrollTop;	455	if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
		456	this._scrollLeft = this._iframeContainer.scrollLeft;
		457	this._scrollTop = this._iframeContainer.scrollTop;
449		458
450	this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;	459	this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
451	this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;	460	this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
		461	} else {
		462	this._scrollLeft = this.application.ninja.currentDocument.documentRoot.scrollLeft;
		463	this._scrollTop = this.application.ninja.currentDocument.documentRoot.scrollTop;
		464
		465	this.userContentLeft = -this._scrollLeft;
		466	this.userContentTop = -this._scrollTop;
		467	}
452		468
453	// Need to clear the snap cache and set up the drag plane	469	// Need to clear the snap cache and set up the drag plane
454	//snapManager.setupDragPlaneFromPlane( workingPlane );	470	//snapManager.setupDragPlaneFromPlane( workingPlane );
@@ -457,7 +473,6 @@ exports.Stage = Montage.create(Component, {
457	this.needsDraw = true;	473	this.needsDraw = true;
458	this.layout.draw();	474	this.layout.draw();
459	//this._toolsList.action("DrawHandles");	475	//this._toolsList.action("DrawHandles");
460
461	}	476	}
462	},	477	},
463