Merge pull request #159 from mqg734/WebGLMaterials

3D tools, eyedropper, fill, ink-bucket, gradients and shape fixes.

4 files changed, 68 insertions, 3 deletions

diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index f82d3660..0928da3a 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -47,6 +47,11 @@ padding-right:6px;
 
 }
 
+.propertiesPanel button.nj-skinned {
+    margin-left: -12px;
+    margin-top: -3px;
+}
+
 .propertiesPanel hr {
     border: 0;
     border-top: 1px solid #3c3c3c;
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index d5acd503..625e3eb6 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -146,8 +146,12 @@ exports.Properties = Montage.create(Component, {
         value: function(event) {
 //            console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update
             if(event.detail.source && event.detail.source !== "pi") {
+                var el = this.application.ninja.currentDocument.documentRoot;
+                if(this.application.ninja.selectedElements.length) {
+                    el = this.application.ninja.selectedElements[0];
+                }
+
                 // TODO - This should only update the properties that were changed.
-                var el = this.application.ninja.selectedElements[0];
                 this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left"));
                 this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top"));
                 this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
@@ -194,6 +198,19 @@ exports.Properties = Montage.create(Component, {
             this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(stage, "height"));
             this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(stage, "width"));
 
+            if(this.threeD.inGlobalMode)
+            {
+                this.threeD.xAngle = ElementsMediator.get3DProperty(stage, "xAngle");
+                this.threeD.yAngle = ElementsMediator.get3DProperty(stage, "yAngle");
+                this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle");
+            }
+
+            if(ElementsMediator.getProperty(stage, "-webkit-transform-style") === "preserve-3d") {
+                this.threeD.flatten = false;
+            } else {
+                this.threeD.flatten = true;
+            }
+
             if(this.customPi !== stage.elementModel.pi) {
                 // We need to unregister color chips from the previous selection from the Color Model
                 var len = this.customSections.length;
@@ -258,6 +275,11 @@ exports.Properties = Montage.create(Component, {
             this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
             this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width"));
 
+            if(ElementsMediator.getProperty(el, "-webkit-transform-style") === "preserve-3d") {
+                this.threeD.flatten = false;
+            } else {
+                this.threeD.flatten = true;
+            }
 
             if(this.threeD.inGlobalMode)
             {
diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html
index 18a7369e..b6c25baf 100755
--- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html
+++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html
@@ -22,7 +22,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "xAngleControl": {"@": "threeDRotX"},
                 "yAngleControl": {"@": "threeDRotY"},
                 "zAngleControl": {"@": "threeDRotZ"},
-                "axisModeGroupControl": {"@": "axisModeGroup"}
+                "axisModeGroupControl": {"@": "axisModeGroup"},
+                "flattenControl": {"@": "flattenCheckbox"}
             }
         },
 
@@ -242,6 +243,29 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "value": "Global",
                 "group": {"@": "axisModeGroup"}
             }
+        },
+        "flattenCheckbox": {
+            "module": "montage/ui/checkbox.reel",
+            "name": "Checkbox",
+            "properties": {
+                "element": {"#": "flattenCh"},
+                "identifier": "flatten",
+                "checked": false
+            },
+            "bindings": {
+                "checked": {
+                    "boundObject": {"@": "owner"},
+                    "boundObjectPropertyPath": "flatten",
+                    "oneway": false
+                }
+            },
+            "listeners": [
+                {
+                    "type": "action",
+                    "listener": {"@": "owner"},
+                    "capture": false
+                }
+            ]
         }
     }
     </script>
@@ -335,7 +359,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
         <article class="fieldRow oneCol checkbox">
             <div>
                 <div class="inputField">
-                    <input class="nj-skinned" type="checkbox" />
+                    <input id="flattenCh" class="nj-skinned" type="checkbox" />
                 </div>
                 <div>
                     <label> Flatten</label>
diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js
index f72d1ff6..dcba51a4 100755
--- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js
+++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js
@@ -79,6 +79,10 @@ exports.ThreeD = Montage.create(Component, {
         value: 0
     },
 
+    flatten: {
+        value: false
+    },
+
     _disableTranslation: {
         value: true
     },
@@ -107,6 +111,16 @@ exports.ThreeD = Montage.create(Component, {
         value: null
     },
 
+    handleAction: {
+        value: function(event) {
+            if(event.currentTarget.identifier === "flatten") {
+                this.application.ninja.elementMediator.setProperty([this.item],
+                                                                    "-webkit-transform-style",
+                                                                    event.currentTarget.checked ? ["flat"] : ["preserve-3d"]);
+            }
+        }
+    },
+
     handleChange: {
         value: function(event) {
             if(event.wasSetByCode) {