33 files changed, 318 insertions, 204 deletions

diff --git a/js/components/layout/tools-list.reel/tools-list.js b/js/components/layout/tools-list.reel/tools-list.js
index 5ea6f70f..d68e8a56 100755
--- a/js/components/layout/tools-list.reel/tools-list.js
+++ b/js/components/layout/tools-list.reel/tools-list.js
@@ -56,6 +56,7 @@ exports.ToolsList = Montage.create(Component, {
             this.SubselectionTool.options = this.application.ninja.toolsProperties.subSelectionProperties;
 
             this.Rotate3DTool.options = this.application.ninja.toolsProperties.rotate3DProperties;
+            this.Translate3DTool.options = this.application.ninja.toolsProperties.rotate3DProperties;
             this.TagTool.options = this.application.ninja.toolsProperties.tagProperties;
             this.PenTool.options = this.application.ninja.toolsProperties.penProperties;
             this.TextTool.options = this.application.ninja.toolsProperties.textProperties;
diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js
index 7a7411da..4e64b2e8 100755
--- a/js/components/ui/color-chip.reel/color-chip.js
+++ b/js/components/ui/color-chip.reel/color-chip.js
@@ -56,6 +56,8 @@ var ColorChip = exports.ColorChip = Montage.create(Component, {
             if(this.hasIcon) {
                 var icon = this.iconType || this.mode + "Icon";
                 this.application.ninja.colorController.addButton(icon, this.icon);
+            } else {
+                this.icon.style.display = "none";
             }
 
             this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: this.offset};
diff --git a/js/components/ui/input-group.reel/input-group.css b/js/components/ui/input-group.reel/input-group.css
index 0b7cd1ef..5707b17e 100755
--- a/js/components/ui/input-group.reel/input-group.css
+++ b/js/components/ui/input-group.reel/input-group.css
@@ -23,11 +23,24 @@
 
 .propControl .inputRow div .hottext,
 .propControl .inputRow div .hottextInput,
-.prop-controller .nj-skinned
+.prop-controller .nj-skinned,
+.prop-controller .hottext,
+.prop-controller .hottextInput
 {
     border: 1px solid black;
     width: 30px !important;
     float:left;
     margin: 2px 0;
     text-align: center;
+}
+
+.prop-controller .file-path
+{
+    width: 170px !important;
+}
+
+.propControl .inputRow div.propControl
+{
+    float:left;
+    margin: 2px 0;
 }
\ No newline at end of file
diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js
index 260ee8a0..d902e4a1 100755
--- a/js/controllers/elements/component-controller.js
+++ b/js/controllers/elements/component-controller.js
@@ -16,6 +16,7 @@ exports.ComponentController = Montage.create(ElementController, {
             switch(prop) {
                 case "id":
                 case "class":
+                case "-webkit-transform-style":
                 case "left":
                 case "top":
                 case "width":
@@ -38,6 +39,7 @@ exports.ComponentController = Montage.create(ElementController, {
             switch(p) {
                 case "id":
                 case "class":
+                case "-webkit-transform-style":
                 case "left":
                 case "top":
                 case "width":
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index efb33292..fda3a3c5 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -228,11 +228,10 @@ exports.ElementController = Montage.create(Component, {
 
                 if (el)
                 {
-                    var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform");
-                    if (xformStr)
-                        mat = this.transformStringToMat( xformStr );
-                    if (!mat)
+                    mat = this.application.ninja.stylesController.getMatrixFromElement(el, false);
+                    if (!mat) {
                         mat = Matrix.I(4);
+                    }
                 }
 
                 el.elementModel.props3D.matrix3d = mat;
@@ -249,23 +248,9 @@ exports.ElementController = Montage.create(Component, {
             }
             else
             {
-                var dist = 1400;
-
-                var str = this.getProperty(el, "-webkit-transform");
-                if (str)
-                {
-                    var index1 = str.indexOf( "perspective(");
-                    if (index1 >= 0)
-                    {
-                        index1 += 12;    // do not include 'perspective('
-                        var index2 = str.indexOf( ")", index1 );
-                        if (index2 >= 0)
-                        {
-                            var substr = str.substr( index1, (index2-index1));
-                            if (substr && (substr.length > 0))
-                                dist = MathUtils.styleToNumber( substr );
-                        }
-                    }
+                var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, false);
+                if(dist == null) {
+                    dist = 1400;
                 }
 
                 el.elementModel.props3D.perspectiveDist = dist;
@@ -308,36 +293,6 @@ exports.ElementController = Montage.create(Component, {
                 elt.elementModel.props3D.z3D = ~~(elt3DInfo.translation[2]);
             }
         }
-    },
-
-    transformStringToMat: {
-        value: function( str )    {
-            var rtnMat;
-
-            var index1 = str.indexOf( "matrix3d(");
-            if (index1 >= 0)
-            {
-                index1 += 9;    // do not include 'matrix3d('
-                var index2 = str.indexOf( ")", index1 );
-                if (index2 >= 0)
-                {
-                    var substr = str.substr( index1, (index2-index1));
-                    if (substr && (substr.length > 0))
-                    {
-                        var numArray = substr.split(',');
-                        var nNums = numArray.length;
-                        if (nNums == 16)
-                        {
-                            // gl-matrix wants row order
-                            rtnMat = numArray;
-                            for (var i=0;  i<16;  i++)
-                                rtnMat[i] = Number( rtnMat[i] );
-                        }
-                    }
-                }
-            }
-