From 5b4f6b1618cf571a6bce5a631f976a008e04a64e Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Thu, 29 Mar 2012 15:52:08 -0700
Subject: Updated shapes to always check for its stroke and fill colors and
 materials instead of relying on the shapeModel cache because it can get out
 of sync.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/controllers/elements/shapes-controller.js | 277 +++++++++++++++------------
 js/document/html-document.js                 |  11 +-
 js/lib/drawing/world.js                      |   2 +-
 js/lib/geom/circle.js                        |  15 ++
 js/lib/geom/geom-obj.js                      |  82 ++++----
 js/lib/geom/line.js                          |   8 +
 js/lib/geom/rectangle.js                     |  15 ++
 js/models/color-model.js                     |  56 +++++-
 js/models/shape-model.js                     |   7 -
 js/tools/LineTool.js                         |   7 -
 js/tools/OvalTool.js                         |  13 --
 js/tools/RectTool.js                         |  13 --
 12 files changed, 287 insertions(+), 219 deletions(-)

(limited to 'js')

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index f0e9458b..45b822e2 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -84,7 +84,6 @@ exports.ShapesController = Montage.create(CanvasController, {
                     if(sm)
                     {
                         el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm);
-                        el.elementModel.shapeModel.strokeMaterial = sm;
                         el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                         el.elementModel.shapeModel.GLWorld.render();
                     }
@@ -94,16 +93,15 @@ exports.ShapesController = Montage.create(CanvasController, {
                     if(fm)
                     {
                         el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
-                        el.elementModel.shapeModel.fillMaterial = fm;
                         el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                         el.elementModel.shapeModel.GLWorld.render();
                     }
                     break;
                 case "editStrokeMaterial":
-                    NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()});
+                    NJevent("showMaterialPopup",{materialId : this.getProperty(el, "strokeMaterial")});
                     break;
                 case "editFillMaterial":
-                    NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()});
+                    NJevent("showMaterialPopup",{materialId : this.getProperty(el, "fillMaterial")});
                     break;
                 case "animate":
                     if(value)
@@ -134,17 +132,28 @@ exports.ShapesController = Montage.create(CanvasController, {
                 case "trRadius":
                 case "blRadius":
                 case "brRadius":
-                case "border":
-                case "background":
                 case "useWebGl":
                 case "animate":
                     return this.getShapeProperty(el, p);
+                case "border":
+                    return this.getColor(el, false);
+                case "background":
+                    return this.getColor(el, true);
                 case "strokeMaterial":
+                    var sm = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial();
+                    if(sm)
+                    {
+                        return sm.getName();
+                    }
+                    else
+                    {
+                        return "FlatMaterial";
+                    }
                 case "fillMaterial":
-                    var m = this.getShapeProperty(el, p);
-                    if(m)
+                    var fm = el.elementModel.shapeModel.GLGeomObj.getFillMaterial();
+                    if(fm)
                     {
-                        return this.getShapeProperty(el, p).getName();
+                        return fm.getName();
                     }
                     else
                     {
@@ -255,67 +264,94 @@ exports.ShapesController = Montage.create(CanvasController, {
     // Routines to get/set color properties
     getColor: {
         value: function(el, isFill) {
-            var color,
-                css;
             if(isFill)
             {
-                if(el.elementModel.shapeModel.background)
+                if(el.elementModel.shapeModel.GLGeomObj.getFillColor)
                 {
-                    return el.elementModel.shapeModel.background;
+                    return this.application.ninja.colorController.colorModel.webGlToColor(el.elementModel.shapeModel.GLGeomObj.getFillColor());
                 }
-                color = this.getShapeProperty(el, "fill");
-            }
-            else
-            {
-                if(el.elementModel.shapeModel.border)
+                else
                 {
-                    return el.elementModel.shapeModel.border;
+                    return null;
                 }
-                color = this.getShapeProperty(el, "stroke");
             }
-
-            if(!css) {
-                return null;
+            else
+            {
+                return this.application.ninja.colorController.colorModel.webGlToColor(el.elementModel.shapeModel.GLGeomObj.getStrokeColor());
             }
-
-            css = this.application.ninja.colorController.colorModel.webGlToCss(color);
-            return this.application.ninja.colorController.getColorObjFromCss(css);
         }
     },
 
     _setGradientMaterial: {
         value: function(el, gradientMode, isFill) {
-            var m = "LinearGradientMaterial",
-                fm;
+            var m,
+                gradientM;
+            if(isFill)
+            {
+                m = el.elementModel.shapeModel.GLGeomObj.getFillMaterial();
+            }
+            else
+            {
+                m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial();
+            }
+
             if(gradientMode === "radial")
             {
-                m = "RadialGradientMaterial";
+                if( !m || (m.getName() !== "RadialGradientMaterial") )
+                {
+                    gradientM = Object.create(MaterialsModel.getMaterial("RadialGradientMaterial"));
+                }
+            }
+            else
+            {
+                if( !m || (m.getName() !== "LinearGradientMaterial") )
+                {
+                    gradientM = Object.create(MaterialsModel.getMaterial("LinearGradientMaterial"));
+                }
             }
 
-            if(isFill)
+            if(gradientM)
             {
-                if(el.elementModel.shapeModel.fillMaterial.getName() !== m)
+                if(isFill)
                 {
-                    fm = Object.create(MaterialsModel.getMaterial(m));
-                    if(fm)
-                    {
-                        el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
-                        el.elementModel.shapeModel.fillMaterial = fm;
-                        el.elementModel.shapeModel.GLGeomObj.buildBuffers();
-                    }
+                    el.elementModel.shapeModel.GLGeomObj.setFillMaterial(gradientM);
                 }
+                else
+                {
+                    el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(gradientM);
+                }
+                el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+            }
+        }
+    },
+
+    _setFlatMaterial: {
+        value: function(el, isFill) {
+            var m,
+                flatM;
+            if(isFill)
+            {
+                m = el.elementModel.shapeModel.GLGeomObj.getFillMaterial();
             }
             else
             {
-                if(el.elementModel.shapeModel.strokeMaterial.getName() !== m)
+                m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial();
+            }
+
+            if(!m || ((m.getName() === "LinearGradientMaterial") || m.getName() === "RadialGradientMaterial") )
+            {
+                flatM = Object.create(MaterialsModel.getMaterial("FlatMaterial"));
+                if(flatM)
                 {
-                    fm = Object.create(MaterialsModel.getMaterial(m));
-                    if(fm)
+                    if(isFill)
                     {
-                        el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm);
-                        el.elementModel.shapeModel.strokeMaterial = fm;
-                        el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                        el.elementModel.shapeModel.GLGeomObj.setFillMaterial(flatM);
+                    }
+                    else
+                    {
+                        el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(flatM);
                     }
+                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                 }
             }
         }
@@ -324,7 +360,8 @@ exports.ShapesController = Montage.create(CanvasController, {
     setColor: {
         value: function(el, color, isFill) {
             var mode = color.mode,
-                webGl;
+                webGl,
+                m;
             if(isFill)
             {
                 if(mode)
@@ -332,9 +369,6 @@ exports.ShapesController = Montage.create(CanvasController, {
                     switch (mode) {
                         case 'nocolor':
                             el.elementModel.shapeModel.GLGeomObj.setFillColor(null);
-                            this.setShapeProperty(el, "fill", null);
-                            this.setShapeProperty(el, "background", color);
-                            el.elementModel.fill = null;
                             return;
                         case 'gradient':
                             if(el.elementModel.shapeModel.useWebGl)
@@ -343,16 +377,15 @@ exports.ShapesController = Montage.create(CanvasController, {
                             }
                             el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops});
                             el.elementModel.shapeModel.GLWorld.render();
-                            this.setShapeProperty(el, "fill", color.color.css);
-                            this.setShapeProperty(el, "background", color);
-                            el.elementModel.fill = color;
                             break;
                         default:
+                            if(el.elementModel.shapeModel.useWebGl)
+                            {
+                                this._setFlatMaterial(el, isFill);
+                            }
                             webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
                             el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl);
-                            this.setShapeProperty(el, "fill", webGl);
-                            this.setShapeProperty(el, "background", color);
-                            el.elementModel.fill = color;
+                            el.elementModel.shapeModel.GLWorld.render();
                     }
                 }
             }
@@ -373,9 +406,6 @@ exports.ShapesController = Montage.create(CanvasController, {
                     switch (mode) {
                         case 'nocolor':
                             el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null);
-                            this.setShapeProperty(el, "stroke", null);
-                            this.setShapeProperty(el, "border", color);
-                            el.elementModel.fill = null;
                             return;
                         case 'gradient':
                             if(el.elementModel.shapeModel.useWebGl)
@@ -384,50 +414,18 @@ exports.ShapesController = Montage.create(CanvasController, {
                             }
                             el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops});
                             el.elementModel.shapeModel.GLWorld.render();
-                            this.setShapeProperty(el, "stroke", color.color.css);
-                            this.setShapeProperty(el, "border", color);
-                            el.elementModel.fill = color;
                             break;
                         default:
+                            if(el.elementModel.shapeModel.useWebGl)
+                            {
+                                this._setFlatMaterial(el, isFill);
+                            }
                             webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
                             el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl);
-                            this.setShapeProperty(el, "stroke", webGl);
-                            this.setShapeProperty(el, "border", color);
-                            el.elementModel.fill = color;
+                            el.elementModel.shapeModel.GLWorld.render();
                     }
                 }
             }
-
-
-
-
-
-
-//            var webGl = color.webGlColor || color.color.webGlColor;
-//            if(!webGl)
-//            {
-//                webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
-//            }
-//            if(isFill)
-//            {
-//                el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl);
-//                this.setShapeProperty(el, "fill", webGl);
-//                this.setShapeProperty(el, "background", color);
-//            }
-//            else
-//            {
-//                el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl);
-//                this.setShapeProperty(el, "stroke", webGl);
-//                this.setShapeProperty(el, "border", color);
-//                if(color.strokeInfo)
-//                {
-//                    var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize,
-//                                                            color.strokeInfo.strokeUnits);
-//                    el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(strokeWidth);
-//                    this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " "
-//                                                                + color.strokeInfo.strokeUnits);
-//                }
-//            }
             el.elementModel.shapeModel.GLWorld.render();
         }
     },
@@ -505,9 +503,7 @@ exports.ShapesController = Montage.create(CanvasController, {
             {
                 return;
             }
-            var sm,
-                fm,
-                world,
+            var world,
                 worldData = el.elementModel.shapeModel.GLWorld.exportJSON();
             if(worldData)
             {
@@ -517,21 +513,6 @@ exports.ShapesController = Montage.create(CanvasController, {
                 el.elementModel.shapeModel.useWebGl = true;
                 world.importJSON(worldData);
                 el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot();
-
-                sm = Object.create(MaterialsModel.getMaterial("FlatMaterial"));
-                if(sm)
-                {
-                    el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm);
-                    el.elementModel.shapeModel.strokeMaterial = sm;
-                }
-                fm = Object.create(MaterialsModel.getMaterial("FlatMaterial"));
-                // TODO - Use consts after GL code is converted to object literal notation
-//                if( fm && (el.elementModel.shapeModel.GLGeomObj.geomType() !== GLGeomObj.GEOM_TYPE_LINE) )
-                if( fm && (el.elementModel.shapeModel.GLGeomObj.geomType() !== 3) )
-                {
-                    el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
-                    el.elementModel.shapeModel.fillMaterial = fm;
-                }
             }
 
         }
@@ -554,14 +535,6 @@ exports.ShapesController = Montage.create(CanvasController, {
                 el.elementModel.shapeModel.useWebGl = false;
                 world.importJSON(worldData);
                 el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot();
-                el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(null);
-                el.elementModel.shapeModel.strokeMaterial = null;
-                // TODO - Use consts after GL code is converted to object literal notation
-                if(el.elementModel.shapeModel.GLGeomObj.geomType() !== 3)
-                {
-                    el.elementModel.shapeModel.GLGeomObj.setFillMaterial(null);
-                    el.elementModel.shapeModel.fillMaterial = null;
-                }
             }
         }
     },
@@ -578,6 +551,70 @@ exports.ShapesController = Montage.create(CanvasController, {
                 var jStr = importStr.substr( index+1 );
                 jObj = JSON.parse( jStr );
                 jObj.webGL = !jObj.webGL;
+
+                if(jObj.children)
+                {
+                    var nKids = jObj.children.length;
+                    for (var i=0;  i<nKids;  i++)
+                    {
+                        var child = jObj.children[i];
+
+                        if(jObj.webGL)
+                        {
+                            // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient
+                            if(child.strokeColor && child.strokeColor.gradientMode)
+                            {
+                                if(child.strokeColor.gradientMode === "radial")
+                                {
+                                    child.strokeMat = "RadialGradientMaterial";
+                                }
+                                else
+                                {
+                                    child.strokeMat = "LinearGradientMaterial";
+                                }
+                            }
+
+                            if(child.fillColor && child.fillColor.gradientMode)
+                            {
+                                if(child.fillColor.gradientMode === "radial")
+                                {
+                                    child.fillMat = "RadialGradientMaterial";
+                                }
+                                else
+                                {
+                                    child.fillMat = "LinearGradientMaterial";
+                                }
+                            }
+                        }
+//                        else
+//                        {
+//                            // Set flat color for children geometry if color in WebGL has been changed to solid
+//                            if(child.strokeColor && !child.strokeColor.gradientMode)
+//                            {
+//                                if(child.strokeColor.gradientMode === "radial")
+//                                {
+//                                    child.strokeMat = "RadialGradientMaterial";
+//                                }
+//                                else
+//                                {
+//                                    child.strokeMat = "LinearGradientMaterial";
+//                                }
+//                            }
+//
+//                            if(child.fillColor && child.fillColor.gradientMode)
+//                            {
+//                                if(child.fillColor.gradientMode === "radial")
+//                                {
+//                                    child.fillMat = "RadialGradientMaterial";
+//                                }
+//                                else
+//                                {
+//                                    child.fillMat = "LinearGradientMaterial";
+//                                }
+//                            }
+//                        }
+                    }
+                }
             }
 
             return jObj;
diff --git a/js/document/html-document.js b/js/document/html-document.js
index 8f9d2870..6ca9eaa3 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -307,19 +307,15 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 			{
 				shapeModel.GLGeomObj			= root;
 				shapeModel.strokeSize			= root._strokeWidth;
-				shapeModel.stroke				= root._strokeColor.slice();
-				shapeModel.strokeMaterial		= root._strikeMaterial ? root._strokeMaterial.dup() : null;
+				shapeModel.stroke				= root._strokeColor;
 				shapeModel.strokeStyle			= "solid";
 				//shapeModel.strokeStyleIndex
-				//shapeModel.border
-				//shapeModel.background
 				switch (root.geomType())
 				{
 					case root.GEOM_TYPE_RECTANGLE:
                         elementModel.selection = "Rectangle";
                         elementModel.pi = "RectanglePi";
-                        shapeModel.fill					= root._fillColor.slice();
-                        shapeModel.fillMaterial			= root._fillMaterial ? root._fillMaterial.dup() : null;
+                        shapeModel.fill					= root._fillColor;
 						shapeModel.tlRadius = root._tlRadius;
 						shapeModel.trRadius = root._trRadius;
 						shapeModel.blRadius = root._blRadius;
@@ -329,8 +325,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 					case root.GEOM_TYPE_CIRCLE:
                         elementModel.selection = "Oval";
                         elementModel.pi = "OvalPi";
-                        shapeModel.fill					= root._fillColor.slice();
-                        shapeModel.fillMaterial			= root._fillMaterial ? root._fillMaterial.dup() : null;
+                        shapeModel.fill					= root._fillColor;
 						shapeModel.innerRadius = root._innerRadius;
 						break;
 
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index fec6a478..1bf8c2e5 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -930,7 +930,7 @@ World.prototype.importObjectsJSON = function( jObj,  parentGeomObj )
 	// determine if we have children
 	if (jObj.children)
 	{
-		var nKids = ojObjbj.chilodren.length;
+		var nKids = jObj.children.length;
 		for (var i=0;  i<nKids;  i++)
 		{
 			var child = jObj.children[i];
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index d48bf98b..ee3e2abd 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -633,6 +633,21 @@ var Circle = function GLCircle() {
 		this._strokeStyle		= jObj.strokeStyle;
 		var strokeMaterialName	= jObj.strokeMat;
 		var fillMaterialName	= jObj.fillMat;
+
+        var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
+        if (!strokeMat) {
+            console.log( "object material not found in library: " + strokeMaterialName );
+            strokeMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+        }
+        this._strokeMaterial = strokeMat;
+
+        var fillMat = MaterialsModel.getMaterial( fillMaterialName );
+        if (!fillMat) {
+            console.log( "object material not found in library: " + fillMaterialName );
+            fillMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+        }
+        this._fillMaterial = fillMat;
+
 		this.importMaterialsJSON( jObj.materials );
 	};
 
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js
index 3c4e4bbf..df4a018d 100755
--- a/js/lib/geom/geom-obj.js
+++ b/js/lib/geom/geom-obj.js
@@ -141,54 +141,56 @@ var GeomObj = function GLGeomObj() {
 	this.setMaterialColor = function(c, type) {
         var i = 0,
             nMats = 0;
-        if(c.gradientMode) {
-            // Gradient support
-            if (this._materialArray && this._materialTypeArray) {
-                nMats = this._materialArray.length;
-            }
+        if(c) {
+            if(c.gradientMode) {
+                // Gradient support
+                if (this._materialArray && this._materialTypeArray) {
+                    nMats = this._materialArray.length;
+                }
 
-            var stops = [],
-                colors = c.color;
+                var stops = [],
+                    colors = c.color;
 
-            var len = colors.length;
-            // TODO - Current shaders only support 4 color stops
-            if(len > 4) {
-                len = 4;
-            }
+                var len = colors.length;
+                // TODO - Current shaders only support 4 color stops
+                if(len > 4) {
+                    len = 4;
+                }
 
-            for(var n=0; n<len; n++) {
-                var position = colors[n].position/100;
-                var cs = colors[n].value;
-                var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a];
-                stops.push(stop);
-
-                if (nMats === this._materialTypeArray.length) {
-                    for (i=0;  i<nMats;  i++) {
-                        if (this._materialTypeArray[i] == type) {
-                            this._materialArray[i].setProperty( "color"+(n+1), stop.slice(0) );
-                            this._materialArray[i].setProperty( "colorStop"+(n+1), position );
+                for(var n=0; n<len; n++) {
+                    var position = colors[n].position/100;
+                    var cs = colors[n].value;
+                    var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a];
+                    stops.push(stop);
+
+                    if (nMats === this._materialTypeArray.length) {
+                        for (i=0;  i<nMats;  i++) {
+                            if (this._materialTypeArray[i] == type) {
+                                this._materialArray[i].setProperty( "color"+(n+1), stop.slice(0) );
+                                this._materialArray[i].setProperty( "colorStop"+(n+1), position );
+                            }
                         }
                     }
                 }
-            }
-            if (type === "fill") {
-                this._fillColor = c;
-            } else {
-                this._strokeColor = c;
-            }
-        } else {
-            if (type === "fill") {
-                this._fillColor = c.slice(0);
+                if (type === "fill") {
+                    this._fillColor = c;
+                } else {
+                    this._strokeColor = c;
+                }
             } else {
-                this._strokeColor = c.slice(0);
-            }
+                if (type === "fill") {
+                    this._fillColor = c.slice(0);
+                } else {
+                    this._strokeColor = c.slice(0);
+                }
 
-            if (this._materialArray && this._materialTypeArray) {
-                nMats = this._materialArray.length;
-                if (nMats === this._materialTypeArray.length) {
-                    for (i=0;  i<nMats;  i++) {
-                        if (this._materialTypeArray[i] == type) {
-                            this._materialArray[i].setProperty( "color", c.slice(0) );
+                if (this._materialArray && this._materialTypeArray) {
+                    nMats = this._materialArray.length;
+                    if (nMats === this._materialTypeArray.length) {
+                        for (i=0;  i<nMats;  i++) {
+                            if (this._materialTypeArray[i] == type) {
+                                this._materialArray[i].setProperty( "color", c.slice(0) );
+                            }
                         }
                     }
                 }
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index e839e229..2b2434f5 100755
--- a/js/lib/geom/line.js
+++ b/js/lib/geom/line.js
@@ -137,6 +137,14 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
 		this._strokeStyle		= jObj.strokeStyle;
 		this._strokeColor		= jObj.strokeColor;
 		var strokeMaterialName	= jObj.strokeMat;
+
+        var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
+        if (!strokeMat) {
+            console.log( "object material not found in library: " + strokeMaterialName );
+            strokeMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+        }
+        this._strokeMaterial = strokeMat;
+
 		this.importMaterialsJSON( jObj.materials );
 	};
 
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index e511d5f4..b01aea53 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -290,6 +290,21 @@ var Rectangle = function GLRectangle() {
 		this._strokeStyle		= jObj.strokeStyle;
 		var strokeMaterialName	= jObj.strokeMat;
 		var fillMaterialName	= jObj.fillMat;
+
+        var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
+        if (!strokeMat) {
+            console.log( "object material not found in library: " + strokeMaterialName );
+            strokeMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+        }
+        this._strokeMaterial = strokeMat;
+
+        var fillMat = MaterialsModel.getMaterial( fillMaterialName );
+        if (!fillMat) {
+            console.log( "object material not found in library: " + fillMaterialName );
+            fillMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+        }
+        this._fillMaterial = fillMat;
+
 		this.importMaterialsJSON( jObj.materials );
 	};
 
diff --git a/js/models/color-model.js b/js/models/color-model.js
index 4189fbef..764feeb5 100755
--- a/js/models/color-model.js
+++ b/js/models/color-model.js
@@ -589,18 +589,54 @@ exports.ColorModel = Montage.create(Component, {
         }
     },
     ////////////////////////////////////////////////////////////////////
-    //Returns CSS string given a WebGL color array in [r, g, b, a] format where the values are [0,1]
-    webGlToCss: {
+    //Returns a color object given a WebGL color array/object with gradient stops
+    webGlToColor: {
         enumerable: true,
-        value: function (color) {
-            if(color && (color.length === 4))
-            {
-                return 'rgba(' + color[0]*255 + ', ' + color[1]*255 + ', ' + color[2]*255 + ', ' + color[3] +')';
-            }
-            else
-            {
-                return null;
+        value: function (c) {
+            if(c) {
+                if(c.gradientMode) {
+                    // Gradient
+                    var i = 0,
+                        len,
+                        css,
+                        stops = c.color,
+                        gradient;
+
+                    // Create the CSS string
+                    if (c.gradientMode === 'radial') {
+                        css = '-webkit-radial-gradient(center, ellipse cover';
+                    } else {
+                        css = '-webkit-gradient(linear, left top, right top';
+                    }
+
+                    //Sorting array (must be sorted for radial gradients, at least in Chrome
+                    stops.sort(function(a,b){return a.position - b.position});
+                    //Looping through stops in gradient to create CSS
+
+                    len = stops.length;
+                    for (i=0; i < len; i++) {
+                        //Adding to CSS String
+                        if (c.gradientMode === 'radial' && stops[i].value) {
+                            css += ', '+stops[i].value.css+' '+stops[i].position+'% ';
+                        } else if (stops[i].value){
+                            css += ', color-stop('+stops[i].position+'%,'+stops[i].value.css+')';
+                        }
+                    }
+                    //Closing the CSS strings
+                    css += ')';
+
+                    gradient = {stops: c.color, mode: c.gradientMode, gradientMode: c.gradientMode, css: css};
+                    return {mode: 'gradient', value: gradient, color: gradient};
+                } else if(c.length === 4) {
+                    // CSS
+                    return this.application.ninja.colorController.getColorObjFromCss('rgba(' + c[0]*255 + ', '
+                                                                                             + c[1]*255 + ', '
+                                                                                             + c[2]*255 + ', '
+                                                                                             + c[3] +')');
+                }
             }
+
+            return null;
         }
     }
 	////////////////////////////////////////////////////////////////////
diff --git a/js/models/shape-model.js b/js/models/shape-model.js
index ea8c2cfc..ff69ae3c 100755
--- a/js/models/shape-model.js
+++ b/js/models/shape-model.js
@@ -17,15 +17,8 @@ exports.ShapeModel = Montage.create(Component, {
     GLGeomObj:              { value: null },
 
     strokeSize:             { value: null },
-    stroke:                 { value: null },
-    strokeMaterial:         { value: null },
     strokeStyle:            { value: null },
     strokeStyleIndex:       { value: null },
-    border:                 { value: null },    // Store css value for ColorController
-
-    fill:                   { value: null },
-    fillMaterial:           { value: null },
-    background:             { value: null },    // Store css value for ColorController
 
     // Line-specific
     slope:                  { value: null },
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index a61f8f79..dd5a7c72 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -234,13 +234,6 @@ exports.LineTool = Montage.create(ShapeTool, {
                 canvas.elementModel.selection = "Line";
                 canvas.elementModel.pi = "LinePi";
                 canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units;
-                canvas.elementModel.shapeModel.stroke = strokeColor;
-                if(strokeColor)
-                {
-                    canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke;
-                }
-
-                canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial;
 
                 canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex;
                 canvas.elementModel.shapeModel.strokeStyle = strokeStyle;
diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js
index a10e0bb5..0ad74aa4 100755
--- a/js/tools/OvalTool.js
+++ b/js/tools/OvalTool.js
@@ -78,22 +78,9 @@ exports.OvalTool = Montage.create(ShapeTool, {
                 canvas.elementModel.selection = "Oval";
                 canvas.elementModel.pi = "OvalPi";
                 canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units;
-                canvas.elementModel.shapeModel.stroke = strokeColor;
-                canvas.elementModel.shapeModel.fill = fillColor;
-                if(strokeColor)
-                {
-                    canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke;
-                }
-                if(fillColor)
-                {
-                    canvas.elementModel.shapeModel.background = this.application.ninja.colorController.colorToolbar.fill;
-                }
 
                 canvas.elementModel.shapeModel.innerRadius = this.options.innerRadius.value  + " " + this.options.innerRadius.units;
 
-                canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial;
-                canvas.elementModel.shapeModel.fillMaterial = fillMaterial;
-
                 canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex;
                 canvas.elementModel.shapeModel.strokeStyle = strokeStyle;
 
diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js
index 957afea9..c56e4424 100755
--- a/js/tools/RectTool.js
+++ b/js/tools/RectTool.js
@@ -98,25 +98,12 @@ exports.RectTool = Montage.create(ShapeTool, {
                 canvas.elementModel.selection = "Rectangle";
                 canvas.elementModel.pi = "RectanglePi";
                 canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units;
-                canvas.elementModel.shapeModel.stroke = strokeColor;
-                canvas.elementModel.shapeModel.fill = fillColor;
-                if(strokeColor)
-                {
-                    canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke;
-                }
-                if(fillColor)
-                {
-                    canvas.elementModel.shapeModel.background = this.application.ninja.colorController.colorToolbar.fill;
-                }
 
                 canvas.elementModel.shapeModel.tlRadius = this.options.TLRadiusControl.value + " " + this.options.TLRadiusControl.units;
                 canvas.elementModel.shapeModel.trRadius = this.options.TRRadiusControl.value + " " + this.options.TRRadiusControl.units;
                 canvas.elementModel.shapeModel.blRadius = this.options.BLRadiusControl.value + " " + this.options.BLRadiusControl.units;
                 canvas.elementModel.shapeModel.brRadius = this.options.BRRadiusControl.value + " " + this.options.BRRadiusControl.units;
 
-                canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial;
-                canvas.elementModel.shapeModel.fillMaterial = fillMaterial;
-
                 canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex;
                 canvas.elementModel.shapeModel.strokeStyle = strokeStyle;
 
-- 
cgit v1.2.3