stage and elements fixes

- Resizing the iframe container when resizing the stage
- Removing 3d rules from elements when adding them
- Adding a name property in the pi

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

5 files changed, 59 insertions, 14 deletions

diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js
index abad3736..34bb1fb5 100755
--- a/js/controllers/elements/stage-controller.js
+++ b/js/controllers/elements/stage-controller.js
@@ -104,9 +104,11 @@ exports.StageController = Montage.create(ElementController, {
                     el.elementModel.viewPort.style.setProperty(p, value);
                     break;
                 case "width":
+                    this.application.ninja.currentDocument.iframe.width = parseInt(value) + 1400;
                     el.elementModel.stageDimension.style.setProperty(p, value);
                     break;
                 case "height":
+                    this.application.ninja.currentDocument.iframe.height = parseInt(value) + 400;
                     el.elementModel.stageDimension.style.setProperty(p, value);
                     break;
                 default:
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 127f73e1..60a75992 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -90,10 +90,11 @@ exports.ElementMediator = Montage.create(NJComponent, {
     _addElement: {
         value: function(el, rules, noEvent) {
             ElementController.addElement(el, rules);
-            var p3d = this.get3DProperties(el);
-            if(p3d) {
-                el.elementModel.controller["set3DProperties"](el, [p3d], 0, true);
-            }
+            // Commenting this out because we should not add 3D properties by default when creating new elements.
+//            var p3d = this.get3DProperties(el);
+//            if(p3d) {
+//                el.elementModel.controller["set3DProperties"](el, [p3d], 0, true);
+//            }
             if(!noEvent) {
                 this.application.ninja.documentController.activeDocument.needsSave = true;
                 NJevent("elementAdded", el);
diff --git a/js/panels/properties/content.reel/content.html b/js/panels/properties/content.reel/content.html
index ab485323..bf11e215 100755
--- a/js/panels/properties/content.reel/content.html
+++ b/js/panels/properties/content.reel/content.html
@@ -58,6 +58,22 @@
                 }
             },
 
+            "elementNameAttribute": {
+                "module": "montage/ui/textfield.reel",
+                "name": "Textfield",
+                "properties": {
+                    "element": {"#": "elementNameAttribute"},
+                    "readOnly": false
+                },
+                "bindings": {
+                    "value": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "nameAttribute",
+                        "oneway": false
+                    }
+                }
+            },
+
 
             "PosSizeSection": {
                 "module": "js/panels/properties/section.reel",
@@ -128,6 +144,7 @@
                     "element":              {"#": "propertiesPanel"},
                     "elementNameInput":     {"@": "elementNameInput1"},
                     "elementId":            {"@": "elementID"},
+                    "elementNameAttribute": {"@": "elementNameAttribute"},
                     "positionSize":         {"@": "PosSize"},
                     "threeD":               {"@": "threeDProperties"}
                 }
@@ -150,6 +167,10 @@
                 <label id="lblClass">Class:</label>
                 <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article>
             </section>
+            <section class="fieldCol">
+                <label id="lblName">Name:</label>
+                <article class="fieldRow"><input type="text" id="elementNameAttribute" class="nj-skinned" /></article>
+            </section>
         </section>
         <section id="PosSize"></section>
         <section id="customSections">
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index 72c02ffd..d4b0edc4 100755
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -25,6 +25,10 @@ exports.Content = Montage.create(Component, {
         value: null
     },
 
+    nameAttribute: {
+        value: null
+    },
+
     customSections: {
         value: []
     },
@@ -72,6 +76,9 @@ exports.Content = Montage.create(Component, {
 
             this.elementId.element.addEventListener("blur", this, false);
             this.elementId.element.addEventListener("keyup", this, false);
+
+            this.elementNameAttribute.element.addEventListener("blur", this, false);
+            this.elementNameAttribute.element.addEventListener("keyup", this, false);
         }
     },
 
@@ -95,10 +102,18 @@ exports.Content = Montage.create(Component, {
      */
     handleBlur: {
         value: function(event) {
-            if(this.application.ninja.selectedElements.length) {
-                ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
-            } else {
-                ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
+            console.log(event.target);
+            if(event.target.id === "elementID") {
+                if(this.application.ninja.selectedElements.length) {
+                    ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
+                } else {
+                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
+                }
+            } else if(event.target.id === "elementNameAttribute") {
+                if(this.application.ninja.selectedElements.length) {
+                    //ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "name", this.elementNameAttribute.value, "Change", "pi");
+                    this.application.ninja.selectedElements[0]._element.setAttribute("name", this.elementNameAttribute.value);
+                }
             }
         }
     },
@@ -106,7 +121,11 @@ exports.Content = Montage.create(Component, {
     handleKeyup: {
         value: function(event) {
             if(event.keyCode === 13) {
-                this.elementId.element.blur();
+                if(event.target === "elementID") {
+                    this.elementId.element.blur();
+                } else if(event.target === "elementNameAttribute") {
+                    this.elementNameAttribute.element.blur();
+                }
             }      
         }
     },
@@ -164,6 +183,7 @@ exports.Content = Montage.create(Component, {
             this.elementName = "Stage";
             this.elementId.value = stage.elementModel.id;
             this.elementClassName = "";
+            this.nameAttribute = "";
 
             this.positionSize.disablePosition = true;
             this.threeD.disableTranslation = true;
@@ -226,6 +246,7 @@ exports.Content = Montage.create(Component, {
             this.elementName = el.elementModel.selection;
             this.elementId.value = el.getAttribute("id") || "";
             this.elementClassName = el.getAttribute("class");
+            this.nameAttribute = el.getAttribute("name") || "";
 
             this.positionSize.disablePosition = false;
             this.threeD.disableTranslation = false;
diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js
index e3f49bbe..39667aa7 100755
--- a/js/tools/TagTool.js
+++ b/js/tools/TagTool.js
@@ -232,9 +232,9 @@ exports.TagTool = Montage.create(DrawingTool, {
             styles = {
                 'position': 'absolute',
                 'top' : top + 'px',
-                'left' : left + 'px',
-                '-webkit-transform-style' : 'preserve-3d',
-                '-webkit-transform' : matStr
+                'left' : left + 'px'
+//                '-webkit-transform-style' : 'preserve-3d',
+//                '-webkit-transform' : matStr
             };
 
             // TODO - for canvas, set both as style and attribute.
@@ -254,8 +254,8 @@ exports.TagTool = Montage.create(DrawingTool, {
     makeStaticElement: {
         value: function(tag) {
             var styles = {
-                "-webkit-transform-style": "preserve-3d",
-                "-webkit-transform": "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"
+//                "-webkit-transform-style": "preserve-3d",
+//                "-webkit-transform": "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"
             };
             tag.innerHTML = "content";