3 files changed, 419 insertions, 24 deletions

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index 48072309..e764de4e 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, {
 
@@ -56,6 +57,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);
             }
@@ -72,12 +102,21 @@ exports.ShapesController = Montage.create(CanvasController, {
                 case "trRadius":
                 case "blRadius":
                 case "brRadius":
-                case "strokeMaterial":
-                case "fillMaterial":
                 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);
             }
@@ -276,6 +315,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..21024125 100644
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -171,7 +171,7 @@ 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);
@@ -199,25 +199,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),
-                tokens             = selectorToOverride.split(/\s/),
-                newClass           = this.generateClassName(element.nodeName),
-                lastToken, pseudoSplit, base, pseudo, newToken, newSelector, rule;
+                overrideData, rule;
+
+            ///// Get the overriding selector and className
+            overrideData = this.createOverrideSelector(selectorToOverride, element.nodeName);
+
+            ///// Create new rule with selector and insert it after the rule we're overriding
+            rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1);
+            
+            return {
+                className : overrideData.className,
+                rule      : rule
+            };
+            
+        }
+    },
+
+    createOverrideSelector : {
+        value: function(selectorToOverride, classPrefix, className) {
+            var tokens = selectorToOverride.split(/\s/),
+                newClass = className || this.generateClassName(classPrefix, true),
+                lastToken, pseudoSplit, base, pseudo, newToken, newSelector;
 
             ///// Creating an overriding selector by replacing the last
             ///// class, attribute or type selector in passed-in rule's selector
-            
+
             ///// Grab the last token
             lastToken   = tokens[tokens.length-1];
             pseudoSplit = lastToken.split(':');
             ///// The last token can have pseudo class. Let's preserve it
             base   = pseudoSplit[0];
             pseudo = (pseudoSplit[1]) ? ':'+pseudoSplit[1] : '';
-            
+
             ///// Now, all we want to do is replace the last token with a
             ///// generated class name, except if the last token is an ID selector,
             ///// in which case we append the generated class name to the ID selector
@@ -231,18 +248,15 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 ///// Append the generated class
                 newToken += '.' + newClass + pseudo;
             }
-            
+