4 files changed, 280 insertions, 192 deletions

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] );
-                        }
-                    }
-                }
-            }
-
-            return rtnMat;
-        }
     }
+
 });
\ No newline at end of file
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index c9164e3e..14cdc473 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -13,12 +13,74 @@ var Montage = 			require("montage/core/core").Montage,
 exports.ShapesController = Montage.create(CanvasController, {
 
     setProperty: {
-        value: function(el, p, value) {
-            var val = parseInt(value);
+        value: function(el, p, value, eventType, source) {
+            var val = parseInt(value),
+                canvas,
+                m,
+                color;
             switch(p) {
                 case "strokeSize":
                     // TODO - For now, just handling px units.
                     this.setShapeProperty(el, "strokeSize", value);
+                    // TODO - For now, just handle Line, Rectangle and Oval. Eventually, move this into each class's
+                    // setStrokeWidth code like SubPath and BrushStroke do.
+                    var geomType = el.elementModel.shapeModel.GLGeomObj.geomType();
+                    if( (geomType > 0) && (geomType < 4) )
+                    {
+                        // Changing stroke size should grow/shrink the shape from the center.
+                        var delta = ~~(val - el.elementModel.shapeModel.GLGeomObj.getStrokeWidth()),
+                            l = this.application.ninja.elementMediator.getProperty(el, "left", parseInt),
+                            t = this.application.ninja.elementMediator.getProperty(el, "top", parseInt),
+                            w = this.application.ninja.elementMediator.getProperty(el, "width", parseInt),
+                            h = this.application.ninja.elementMediator.getProperty(el, "height", parseInt);
+
+                        if(geomType === 3)
+                        {
+                            var slope = el.elementModel.shapeModel.slope;
+                            // set the dimensions
+                            if(slope === "horizontal")
+                            {
+                                h = Math.max(val, 1);
+                                t -= ~~(delta/2);
+                            }
+                            else if(slope === "vertical")
+                            {
+                                w = Math.max(val, 1);
+                                l -= ~~(delta/2);
+                            }
+                            else
+                            {
+                                var oldXAdj = el.elementModel.shapeModel.GLGeomObj.getXAdj();
+                                var oldYAdj = el.elementModel.shapeModel.GLGeomObj.getYAdj();
+                                var theta = Math.atan(el.elementModel.shapeModel.slope);
+                                var xAdj = Math.abs((val/2)*Math.sin(theta));
+                                var yAdj = Math.abs((val/2)*Math.cos(theta));
+                                var dX = ~~(xAdj*2 - oldXAdj*2);
+                                var dY = ~~(yAdj*2 - oldYAdj*2);
+
+                                l -= dX;
+                                t -= dY;
+                                w += dX*2;
+                                h += dY*2;
+
+                                el.elementModel.shapeModel.GLGeomObj.setXAdj(xAdj);
+                                el.elementModel.shapeModel.GLGeomObj.setYAdj(yAdj);
+                            }
+                        }
+                        else
+                        {
+                            l -= ~~(delta/2);
+                            t -= ~~(delta/2);
+                            w += delta;
+                            h += delta;
+                        }
+                        this.application.ninja.elementMediator.setProperties([el],
+                                                                            { "left": [l + "px"],
+                                                                              "top": [t + "px"],
+                                                                              "width": [w + "px"],
+                                                                              "height": [h + "px"] },
+                                                                            eventType, source );
+                    }
                     el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(val);
                     el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                     el.elementModel.shapeModel.GLWorld.render();
@@ -68,43 +130,47 @@ exports.ShapesController = Montage.create(CanvasController, {
                     el.elementModel.shapeModel.GLWorld.render();
                     break;
                 case "useWebGl":
-                    var canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true);
+                    canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true);
                     canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom());
                     canvas.width = el.width;
                     canvas.height = el.height;
                     canvas.elementModel = el.elementModel;
-                    this.application.ninja.currentDocument.documentRoot.replaceChild(canvas, el);
+                    this.toggleWebGlMode(canvas, value);