4 files changed, 494 insertions, 38 deletions

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 65c24b46..65d26bdd 100644
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -144,10 +144,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                             this.setProperty(el, "background-color", color.color.css);
                     }
                 }
-                else
-                {
-                    this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css);
-                }
                 el.elementModel.fill = color;
             }
             else
@@ -169,10 +165,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                             this.setProperty(el, "border-color", color.color.css);
                     }
                 }
-                else
-                {
-                    this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css);
-                }
                 el.elementModel.stroke = color;
             }
         }
@@ -187,8 +179,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
 
     setStroke: {
         value: function(el, stroke) {
-            var border = stroke.borderWidth + stroke.borderUnits + " " + stroke.borderStyle + " " + stroke.color.color.css;
-            this.application.ninja.stylesController.setElementStyle(el, "border", border);
+            this.application.ninja.stylesController.setElementStyle(el, "border-width", stroke.borderWidth + stroke.borderUnits);
+            this.application.ninja.stylesController.setElementStyle(el, "border-style", stroke.borderStyle);
+            this.setColor(el, stroke.color, false);
         }
     },
 
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index 1717db94..39300eb8 100644
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -5,7 +5,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var Montage =                   require("montage/core/core").Montage,
-    CanvasController = require("js/controllers/elements/canvas-controller").CanvasController;
+    CanvasController = require("js/controllers/elements/canvas-controller").CanvasController,
+    njModule = require("js/lib/NJUtils");
 
 exports.ShapesController = Montage.create(CanvasController, {
 
@@ -36,6 +37,35 @@ exports.ShapesController = Montage.create(CanvasController, {
                     el.elementModel.shapeModel.GLWorld.setViewportFromCanvas(el);
                     el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                     break;
+                case "useWebGl":
+                    var canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true);
+                    canvas.width = el.width;
+                    canvas.height = el.height;
+                    this.application.ninja.elementMediator.replaceElement(el, canvas);
+                    NJevent("elementDeleted", el);
+                    this.application.ninja.selectionController.selectElement(canvas);
+                    el = canvas;
+                    this.toggleWebGlMode(el, value);
+                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    break;
+                case "strokeMaterial":
+                    var sm = Object.create(MaterialsLibrary.getMaterial(value));
+                    if(sm)
+                    {
+                        el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm);
+                        el.elementModel.shapeModel.strokeMaterial = sm;
+                        el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    }
+                    break;
+                case "fillMaterial":
+                    var fm = Object.create(MaterialsLibrary.getMaterial(value));
+                    if(fm)
+                    {
+                        el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
+                        el.elementModel.shapeModel.fillMaterial = fm;
+                        el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    }
+                    break;
                 default:
                     CanvasController.setProperty(el, p, value);
             }
@@ -48,9 +78,25 @@ exports.ShapesController = Montage.create(CanvasController, {
             switch(p) {
                 case "strokeSize":
                 case "innerRadius":
+                case "tlRadius":
+                case "trRadius":
+                case "blRadius":
+                case "brRadius":
                 case "border":
                 case "background":
+                case "useWebGl":
                     return this.getShapeProperty(el, p);
+                case "strokeMaterial":
+                case "fillMaterial":
+                    var m = this.getShapeProperty(el, p);
+                    if(m)
+                    {
+                        return this.getShapeProperty(el, p).getName();
+                    }
+                    else
+                    {
+                        return "FlatMaterial";
+                    }
                 default:
                     return CanvasController.getProperty(el, p);
             }
@@ -249,6 +295,60 @@ exports.ShapesController = Montage.create(CanvasController, {
         {
             return (el.elementModel && el.elementModel.isShape);
         }
+    },
+
+    toggleWebGlMode: {
+        value: function(el, useWebGl)
+        {
+            if(useWebGl)
+            {
+                this.convertToWebGlWorld(el);
+            }
+            else
+            {
+                this.convertTo2DWorld(el);
+            }
+        }
+    },
+
+    convertToWebGlWorld: {
+        value: function(el)
+        {
+            if(el.elementModel.shapeModel.useWebGl)
+            {
+                return;
+            }
+            var world,
+                worldData = el.elementModel.shapeModel.GLWorld.export();
+            if(worldData)
+            {
+                world = new GLWorld(el, true);
+                el.elementModel.shapeModel.GLWorld = world;
+                el.elementModel.shapeModel.useWebGl = true;
+                world.import(worldData);
+            }
+
+        }
+    },
+
+    convertTo2DWorld: {
+        value: function(el)
+        {
+            if(!el.elementModel.shapeModel.useWebGl)
+            {
+                return;
+            }
+            var world,
+                worldData = el.elementModel.shapeModel.GLWorld.export();
+            if(worldData)
+            {
+                world = new GLWorld(el, false);
+                el.elementModel.shapeModel.GLWorld = world;
+                el.elementModel.shapeModel.useWebGl = false;
+                world.import(worldData);
+            }
+
+        }
     }
 
 });
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index afd298c9..011caec5 100644
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -171,10 +171,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             if(argType === 'string') {
                 ruleText += '{' + declaration + '}';
             } else if(argType === 'object') {
-                ruleText += '{' + nj.cssFromObject(declaration) + '}';
+                ruleText += '{' + this.cssFromObject(declaration) + '}';
             }
             
             stylesheet.insertRule(ruleText, index);
+
+            this.styleSheetModified(stylesheet);
             
             rule = stylesheet.rules[index];
             
@@ -199,25 +201,42 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             
             ///// Locally-scoped function to de-clutter variable declarations
             function getSelector(el, rule) {
-
                 return this._getMostSpecificSelectorForElement(el, rule[this.CONST.SPECIFICITY_KEY]).selector;
             }
 
             var selectorToOverride = getSelector.bind(this)(element, ruleToOverride),