Make stage transparent when rotating/zooming templates and draw an outline around the user's root instead.

Also, fixed the background color setting on banner and animation templates' "body."
Stage outline draws using drawGridLines code so it can show intersection with element planes.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

4 files changed, 65 insertions, 3 deletions

diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js
index 0ca6c417..604b22d0 100755
--- a/js/controllers/elements/body-controller.js
+++ b/js/controllers/elements/body-controller.js
@@ -19,6 +19,14 @@ exports.BodyController = Montage.create(ElementController, {
             el.elementModel.props3D.matrix3d = mat;
             el.elementModel.props3D.perspectiveDist = dist;
 
+            if(this.application.ninja.currentDocument.model.views.design._template) {
+                if(!MathUtils.isIdentityMatrix(mat)) {
+                    el.parentNode.style.backgroundColor = "transparent";
+                } else {
+                    el.parentNode.style.removeProperty("background-color");
+                }
+            }
+
             this.application.ninja.stage.updatedStage = true;
 
             if(update3DModel) {
@@ -32,7 +40,11 @@ exports.BodyController = Montage.create(ElementController, {
             switch(p) {
                 case "background" :
                 case "background-color":
-                    return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color"));
+                    if(this.application.ninja.currentDocument.model.views.design._template) {
+                        return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el.parentNode, "background-color"));
+                    } else {
+                        return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color"));
+                    }
                 case "border":
                     return 0;
                 case "height":
@@ -51,7 +63,11 @@ exports.BodyController = Montage.create(ElementController, {
             switch(p) {
                 case "background":
                 case "background-color":
-                    this.application.ninja.stylesController.setElementStyle(el, "background-color", value);
+                    if(this.application.ninja.currentDocument.model.views.design._template) {
+                        this.application.ninja.stylesController.setElementStyle(el.parentNode, "background-color", value);
+                    } else {
+                        this.application.ninja.stylesController.setElementStyle(el, "background-color", value);
+                    }
                     break;
                 case "overflow":
                 case "width":
diff --git a/js/document/mediators/template.js b/js/document/mediators/template.js
index c5b46c3a..f43b1a2c 100755
--- a/js/document/mediators/template.js
+++ b/js/document/mediators/template.js
@@ -158,6 +158,15 @@ exports.TemplateDocumentMediator = Montage.create(Component, {
                     ninjaContentTagDoc.removeAttribute('style');
                     ninjaContentTagDoc.removeAttribute('data-ninja-style');
                 }
+                // TODO - clean up into single method
+                ninjaContentTagMem = template.document.getElementsByTagName('ninja-viewport')[0], ninjaContentTagDoc = template.file.content.document.getElementsByTagName('ninja-viewport')[0];
+                if (ninjaContentTagMem && ninjaContentTagMem.getAttribute('data-ninja-style') !== null) {
+                    ninjaContentTagDoc.setAttribute('style', ninjaContentTagMem.getAttribute('data-ninja-style'));
+                    ninjaContentTagDoc.removeAttribute('data-ninja-style');
+                } else if (ninjaContentTagMem && ninjaContentTagMem.getAttribute('data-ninja-style') === null) {
+                    ninjaContentTagDoc.removeAttribute('style');
+                    ninjaContentTagDoc.removeAttribute('data-ninja-style');
+                }
             } else {
                 if (template.body && template.body.getAttribute('data-ninja-style') !== null) {
                     template.file.content.document.body.setAttribute('style', template.body.getAttribute('data-ninja-style'));
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 44c61617..d5c5c6c4 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -281,6 +281,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
                 this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]);
                         //Getting style and link tags in document
             var htags = this.document.getElementsByTagName('html'),
+                bannerWrapper,
                 userStyles,
                 stags = this.document.getElementsByTagName('style'),
                 ltags = this.document.getElementsByTagName('link'), i, orgNodes,
@@ -326,6 +327,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
             //TODO: Verify appropiate location for this operation
                 if (this._template && this._template.type === 'banner') {
                         this.documentRoot = this.document.body.getElementsByTagName('ninja-content')[0];
+                bannerWrapper = this.documentRoot.parentNode;
                 } else {
                         this.documentRoot = this.document.body;
                 }
@@ -349,6 +351,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
                     this.documentRoot.setAttribute('data-ninja-style', userStyles);
                 }
             }
+            if(bannerWrapper) {
+                if(userStyles = bannerWrapper.getAttribute('style')) {
+                    bannerWrapper.setAttribute('data-ninja-style', userStyles);
+                }
+            }
                 //Making callback if specified
                 if (this._callback) this._callback();
         }
diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index bd47ffc3..87151964 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -1185,8 +1185,38 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
             var context = this.application.ninja.stage.gridContext;
             var stage = this.application.ninja.stage;
             var stageRoot = this.application.ninja.currentDocument.model.documentRoot;
-            var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot);
 
+            // draw an outline around the template body if stage has any transforms
+            if(stage.currentDocument.model.views.design._template && !MathUtils.isIdentityMatrix(this.viewUtils.getMatrixFromElement(stageRoot))) {
+                var saveContext = this.getDrawingSurfaceElement();
+                this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas);
+
+                var stagePt = MathUtils.getPointOnPlane([0,0,1,0]);
+                var stageMat = this.getPlaneToWorldMatrix([0,0,1], stagePt);
+                var width = this.snapManager.getStageWidth(),
+                    height = this.snapManager.getStageHeight(),
+                    pt0 = [0, 0, 0],
+                    pt1 = [0, height, 0],
+                    delta = [width, 0, 0];
+
+                this._gridLineArray.length = 0;
+                this.drawGridLines(pt0, pt1, delta, stageMat, 2);
+
+                pt0 = [0, 0, 0];
+                pt1 = [width, 0, 0];
+                delta = [0, height, 0];
+                this.drawGridLines(pt0, pt1, delta, stageMat, 2);
+
+                this._lineColor = "red";
+                for (var i = 0; i < 4; i++) {
+                    this.drawIntersectedLine(this._gridLineArray[i], this._drawingContext);
+                }
+
+                this.setDrawingSurfaceElement(saveContext);
+            }
+
+            // draw reference lines across origin
+            var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot);
             var l = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [0, 0, 0], [0, stage.canvas.height, 0], 0.1);
             if(!l) return;
             var r = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [stage.canvas.width, 0, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1);