1 files changed, 57 insertions, 127 deletions

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index b35251ad..35a543ac 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -5,22 +5,27 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var Montage = require("montage/core/core").Montage,
-    NJComponent =   require("js/lib/nj-base").NJComponent;
+    Component = require("montage/ui/component").Component;
 
-var ElementController = exports.ElementController = Montage.create(NJComponent, {
+exports.ElementController = Montage.create(Component, {
 
     addElement: {
         value: function(el, styles) {
             this.application.ninja.currentDocument.documentRoot.appendChild(el);
-            // Nested elements -
-            // TODO make sure the CSS is correct before nesting elements
+            // Nested elements - TODO make sure the CSS is correct before nesting elements
             // this.application.ninja.currentSelectedContainer.appendChild(el);
-            this.application.ninja.stylesController.setElementStyles(el, styles);
+            if(styles) {
+                this.application.ninja.stylesController.setElementStyles(el, styles);
+            }
         }
     },
 
+    // Remove the element from the DOM and clear the GLWord.
     removeElement: {
         value: function(el) {
+            if(el.elementModel && el.elementModel.shapeModel && el.elementModel.shapeModel.GLWorld) {
+                el.elementModel.shapeModel.GLWorld.clearTree();
+            }
             el.parentNode.removeChild(el);
         }
     },
@@ -42,10 +47,10 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
     },
 
     setProperties: {
-        value: function(el, props, index) {
-            for(var p in props) {
-                this.application.ninja.stylesController.setElementStyle(el, p, props[p][index]);
-            }
+        value: function(element, properties) {
+            for(var property in properties) {
+                this.application.ninja.stylesController.setElementStyle(element, property, properties[property]);
+        }
         }
     },
 
@@ -60,37 +65,29 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
     // borderSide : "top", "right", "bottom", or "left"
     getColor: {
         value: function(el, isFill, borderSide) {
-            var colorObj,
-                color,
-                image;
+            var colorObj, color, image;
 
             // Return cached value if one exists
-            if(isFill)
-            {
-                if(el.elementModel.fill)
-                {
+            if(isFill) {
+                if(el.elementModel.fill) {
                     return el.elementModel.fill;
                 }
                 //TODO: Once logic for color and gradient is established, this needs to be revised
                 color = this.getProperty(el, "background-color");
                 image = this.getProperty(el, "background-image");
-            }
-            else
-            {
+            } else {
                 // Try getting border color from specific side first
-                if(borderSide)
-                {
+                if(borderSide) {
                     color = this.getProperty(el, "border-" + borderSide + "-color");
                     image = this.getProperty(el, "border-" + borderSide + "-image");
                 }
 
                 // If no color was found, look up the shared border color
-                if(!color && !image)
-                {
-                    if(el.elementModel.stroke)
-                    {
+                if(!color && !image) {
+                    if(el.elementModel.stroke) {
                         return el.elementModel.stroke;
                     }
+
                     color = this.getProperty(el, "border-color");
                     image = this.getProperty(el, "border-image");
                 }
@@ -107,17 +104,12 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
             }
 
             // Update cache
-            if(isFill)
-            {
+            if(isFill) {
                 el.elementModel.fill = colorObj;
-            }
-            else if(!borderSide)
-            {
+            } else if(!borderSide) {
                 // TODO - Need to update border style and width also
                 el.elementModel.stroke = colorObj;
-            }
-            else
-            {
+            } else {
                 // TODO - Should update specific border sides too
             }
 
@@ -128,10 +120,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
     setColor: {
         value: function(el, color, isFill) {
             var mode = color.mode;
-            if(isFill)
-            {
-                if(mode)
-                {
+
+            if(isFill) {
+                if(mode) {
                     switch (mode) {
                         case 'nocolor':
                             this.setProperty(el, "background-image", "none");
@@ -147,12 +138,10 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                             this.setProperty(el, "background-color", color.color.css);
                     }
                 }
+
                 el.elementModel.fill = color;
-            }
-            else
-            {
-                if(mode)
-                {
+            } else {
+                if(mode) {
                     switch (mode) {
                         case 'nocolor':
                             this.setProperty(el, "border-image", "none");
@@ -162,20 +151,16 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                         case 'gradient':
                             this.setProperty(el, "border-image", color.color.css);
                             this.setProperty(el, "border-color", "none");
-                            if(color.borderInfo)
-                            {
-                                this.setProperty(el, "border-width", color.borderInfo.borderWidth +
-                                                                        color.borderInfo.borderUnits);
+                            if(color.borderInfo) {
+                                this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits);
                                 this.setProperty(el, "border-style", color.borderInfo.borderStyle);
                             }
                             break;
                         default:
                             this.setProperty(el, "border-image", "none");
                             this.setProperty(el, "border-color", color.color.css);
-                            if(color.borderInfo)
-                            {
-                                this.setProperty(el, "border-width", color.borderInfo.borderWidth +
-                                                                        color.borderInfo.borderUnits);
+                            if(color.borderInfo) {
+                                this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits);
                                 this.setProperty(el, "border-style", color.borderInfo.borderStyle);
                             }
                     }
@@ -204,8 +189,7 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
     // Routines to get/set 3D properties
     get3DProperty: {
         value: function(el, prop) {
-            if(el.elementModel && el.elementModel.props3D)
-            {
+            if(el.elementModel && el.elementModel.props3D) {
                 return el.elementModel.props3D[prop];
             }
         }
@@ -213,21 +197,16 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
 
     getMatrix: {
         value: function(el) {