Merge pull request #332 from mqg734/ViewPortHack

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

1 files changed, 18 insertions, 2 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":