2 files changed, 185 insertions, 9 deletions

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index 5efbccd0..b9c033aa 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);
+                    el = canvas;
+                    this.toggleWebGlMode(el, value);
+                    el.elementModel.shapeModel.GLWorld.render();
+                    this.application.ninja.selectionController.selectElement(el);
+                    return;
+                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,11 +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);
             }
@@ -275,6 +315,77 @@ 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 sm,
+                fm,
+                world,
+                worldData = el.elementModel.shapeModel.GLWorld.export();
+            if(worldData)
+            {
+                world = new GLWorld(el, true);
+                el.elementModel.shapeModel.GLWorld = world;
+                el.elementModel.shapeModel.GLGeomObj.setWorld(world);
+                el.elementModel.shapeModel.useWebGl = true;
+                sm = Object.create(MaterialsLibrary.getMaterial("FlatMaterial"));
+                fm = Object.create(MaterialsLibrary.getMaterial("FlatMaterial"));
+                if(sm && fm)
+                {
+                    el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm);
+                    el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
+                    el.elementModel.shapeModel.strokeMaterial = sm;
+                    el.elementModel.shapeModel.fillMaterial = fm;
+                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                }
+                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;
+                el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(null);
+                el.elementModel.shapeModel.GLGeomObj.setFillMaterial(null);
+                el.elementModel.shapeModel.strokeMaterial = null;
+                el.elementModel.shapeModel.fillMaterial = null;
+                world.import(worldData);
+            }
+
+        }
     }
 
 });
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 21024125..44e0e798 100644
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -175,10 +175,16 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             }
             
             stylesheet.insertRule(ruleText, index);
+
+            this.styleSheetModified(stylesheet);
             
             rule = stylesheet.rules[index];
             
             ///// attach specificity to rule object
+            // if rule is css keyframes, return rule and don't attach specificity
+            if (rule instanceof WebKitCSSKeyframesRule) {
+                return rule;
+            }
             rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(rule.selectorText);
             
             ///// return the rule we just inserted
@@ -283,6 +289,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 sheet.deleteRule(index);
             }
 
+            this.styleSheetModified(sheet);
+
             return index;
         }
     },
@@ -531,6 +539,9 @@ var stylesController = exports.StylesController = Montage.create(Component, {
         value : function(rule, selector) {
             rule.selectorText = selector;
             rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(selector);
+
+            this.styleSheetModified(rule.parentStyleSheet);
+
             return rule;
         }
     },
@@ -780,6 +791,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             ///// method to apply/test the new value
             dec.setProperty(property, value, priority);
 
+            this.styleSheetModified(rule.parentStyleSheet);
+
             ///// Return browser value for value we just set
             return dec.getPropertyValue(property);
         }
@@ -838,7 +851,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     
     deleteStyle : {