32 files changed, 700 insertions, 473 deletions

diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index a35f473d..2ca76962 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -121,13 +121,13 @@ NinjaCvsRt.GLRuntime = function ( canvas, jObj,  assetPath )
         // all "live" materials
         this._materials = [];
 
-        // provide the mapping for the asset directory
-        if (assetPath)
-        {
-                this._assetPath = assetPath.slice();
-                if (this._assetPath[this._assetPath.length-1] != '/')
-                        this._assetPath += '/';
-        }
+                // provide the mapping for the asset directory
+                if (assetPath)
+                {
+                        this._assetPath = assetPath.slice();
+                        if (this._assetPath[this._assetPath.length-1] != '/')
+                                this._assetPath += '/';
+                }
 
         if(this._assetPath !== undefined) {
                 RDGE.globals.engine.setAssetPath(this._assetPath);
@@ -638,7 +638,7 @@ NinjaCvsRt.RuntimeGeomObj = function ()
         
                 return mat;     
         };
-        
+
         this.MatrixRotationZ = function( angle )
         {
                 var mat = this.MatrixIdentity(4);
@@ -998,7 +998,7 @@ NinjaCvsRt.RuntimeOval = function ()
                                         mat[5] = yScale;
 
                                         // get the bezier points
-                                        var bezPtsInside = this.circularArcToBezier( Vector.create([0,0,0]), Vector.create([1,0,0]), -2.0*Math.PI );
+                                        var bezPtsInside = this.circularArcToBezier( [0,0,0], [1,0,0], -2.0*Math.PI );
                                         if (bezPtsInside)
                                         {
                                                 n = bezPtsInside.length;
@@ -1465,7 +1465,7 @@ NinjaCvsRt.RuntimeUberMaterial = function ()
                                         // currently not exported
                                         var uvTransform = [ 2.0, 0, 0, 0, 0, 2.0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1];
                                         technique.u_uvMatrix.set(uvTransform);
-                                                
+        
                     var tex = null;
                                         if (this._diffuseMap)
                                         {
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index e792c646..f9b63942 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -13,12 +13,62 @@ 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);
+                    // 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(el.elementModel.selection === "Line")
+                    {
+                        var slope = el.elementModel.shapeModel.slope;
+                        // set the dimensions
+                        if(slope === "horizontal")
+                        {
+                            h = Math.max(val, 1);
+                        }
+                        else if(slope === "vertical")
+                        {
+                            w = Math.max(val, 1);
+                        }
+                        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);
+
+                            if(delta > 0)
+                            {
+                                l -= dX*2;
+                                t -= dY*2;
+                                w += dX*2;
+                                h += dY*2;
+                            }
+
+                            el.elementModel.shapeModel.GLGeomObj.setXAdj(xAdj);
+                            el.elementModel.shapeModel.GLGeomObj.setYAdj(yAdj);
+
+                        }
+                    }
+                    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,39 +118,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.toggleWebGlMode(canvas, value);
                     this.application.ninja.elementMediator.replaceElement(canvas, el);
-                    return;
+                    break;
                 case "strokeMaterial":
-                    var sm = Object.create(MaterialsModel.getMaterial(value));
-                    if(sm)
+                    m = Object.create(MaterialsModel.getMaterial(value));
+                    if(m)
                     {
-                        el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm);
-                        el.elementModel.shapeModel.strokeMaterial = sm;
+                        el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(m);
+                        color = this.getMaterialColor(value);
+                        if(color)
+                        {
+                            el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color);
+                        }
                         el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                         el.elementModel.shapeModel.GLWorld.render();
                     }
                     break;
                 case "fillMaterial":