Support import/export of gradient materials. This fixes the eyedropper not being able to sample gradient colors from WebGL shapes.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

4 files changed, 123 insertions, 11 deletions

diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 8f9f54d1..05501ec3 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -606,8 +606,20 @@ var Circle = function GLCircle() {
                 rtnStr += "strokeWidth: "       + this._strokeWidth     + "\n";
                 rtnStr += "innerRadius: "       + this._innerRadius     + "\n";
                 rtnStr += "strokeStyle: "       + this._strokeStyle     + "\n";
-                rtnStr += "strokeColor: "       + String(this._strokeColor)  + "\n";
-                rtnStr += "fillColor: "         + String(this._fillColor)        + "\n";
+
+        if(this._strokeColor.gradientMode) {
+            rtnStr += "strokeGradientMode: "    + this._strokeColor.gradientMode        + "\n";
+            rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n";
+        } else {
+            rtnStr += "strokeColor: "   + String(this._strokeColor)  + "\n";
+        }
+
+        if(this._fillColor.gradientMode) {
+            rtnStr += "fillGradientMode: "      + this._fillColor.gradientMode  + "\n";
+            rtnStr += "fillColor: " + this.gradientToString(this._fillColor.color) + "\n";
+        } else {
+            rtnStr += "fillColor: "     + String(this._fillColor)  + "\n";
+        }
 
                 rtnStr += "strokeMat: ";
                 if (this._strokeMaterial) {
@@ -640,8 +652,22 @@ var Circle = function GLCircle() {
                 this._strokeStyle               = this.getPropertyFromString( "strokeStyle: ",  importStr );
                 var strokeMaterialName  = this.getPropertyFromString( "strokeMat: ",    importStr );
                 var fillMaterialName    = this.getPropertyFromString( "fillMat: ",              importStr );
-                this._fillColor                 =  eval( "[" + this.getPropertyFromString( "fillColor: ",       importStr ) + "]" );
-                this._strokeColor               =  eval( "[" + this.getPropertyFromString( "strokeColor: ",     importStr ) + "]" );
+        if(importStr.indexOf("fillGradientMode: ") < 0) {
+            this._fillColor             =  eval( "[" + this.getPropertyFromString( "fillColor: ",       importStr ) + "]" );
+        } else {
+            this._fillColor = {};
+            this._fillColor.gradientMode = this.getPropertyFromString( "fillGradientMode: ",    importStr );
+            this._fillColor.color = this.stringToGradient(this.getPropertyFromString( "fillColor: ",    importStr ));
+        }
+
+        if(importStr.indexOf("strokeGradientMode: ") < 0)
+        {
+            this._strokeColor           =  eval( "[" + this.getPropertyFromString( "strokeColor: ",     importStr ) + "]" );
+        } else {
+            this._strokeColor = {};
+            this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ",        importStr );
+            this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ",        importStr ));
+        }
 
                 var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
                 if (!strokeMat) {
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js
index 1ea74475..fb1cb246 100755
--- a/js/lib/geom/geom-obj.js
+++ b/js/lib/geom/geom-obj.js
@@ -305,6 +305,49 @@ var GeomObj = function GLGeomObj() {
                 return rtnStr;
         };
 
+    // Gradient stops for rgba(255,0,0,1) at 0%; rgba(0,255,0,1) at 33%; rgba(0,0,255,1) at 100% will return
+    // 255,0,0,1@0;0,255,0,1@33;0,0,255,1@100
+    this.gradientToString = function(colors) {
+        var rtnStr = "";
+        if(colors && colors.length) {
+                var c = colors[0],
+                len = colors.length;
+
+            rtnStr += String(c.value.r + "," + c.value.g + "," + c.value.b + "," + c.value.a + "@" + c.position);
+            for(var i=1; i<len; i++) {
+                c = colors[i];
+                rtnStr += ";" + String(c.value.r + "," + c.value.g + "," + c.value.b + "," + c.value.a + "@" + c.position);
+            }
+        }
+        return rtnStr;
+    };
+
+    // Given a gradientStr "255,0,0,1@0;0,255,0,1@33;0,0,255,1@100" will return:
+    // colors array [{position:0, value:{r:255, g:0, b:0, a:1}},
+    //               {position:33, value:{r:0, g:255, b:0, a:1}},
+    //               {position:100, value:{r:0, g:0, b:255, a:1}}
+    //             ]
+    this.stringToGradient = function(gradientStr) {
+        var rtnArr = [];
+
+        var i,
+            len,
+            stops,
+            stop,
+            c;
+
+        stops = gradientStr.split(";");
+        len = stops.length;
+        for(i=0; i<len; i++)
+        {
+            stop = stops[i].split("@");
+            c = stop[0].split(",");
+            rtnArr.push({ position: Number(stop[1]), value:{r:Number(c[0]), g:Number(c[1]), b:Number(c[2]), a:Number(c[3])} });
+        }
+
+        return rtnArr;
+    };
+
     /*
     this.export = function() {
                 var rtnStr;
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index 51a6fa98..4a935de8 100755
--- a/js/lib/geom/line.js
+++ b/js/lib/geom/line.js
@@ -112,7 +112,14 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
                 rtnStr += "xAdj: "                  + this._xAdj                + "\n";
                 rtnStr += "yAdj: "                  + this._yAdj                + "\n";
                 rtnStr += "strokeWidth: "       + this._strokeWidth     + "\n";
-                rtnStr += "strokeColor: "       + String(this._strokeColor)  + "\n";
+
+        if(this._strokeColor.gradientMode) {
+            rtnStr += "strokeGradientMode: "    + this._strokeColor.gradientMode        + "\n";
+            rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n";
+        } else {
+            rtnStr += "strokeColor: "   + String(this._strokeColor)  + "\n";
+        }
+
                 rtnStr += "strokeStyle: "       + this._strokeStyle     + "\n";
                 rtnStr += "slope: "             + String(this._slope)   + "\n";
 
@@ -145,7 +152,15 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
 
                 var strokeMaterialName  = this.getPropertyFromString( "strokeMat: ",    importStr );
                 this._strokeStyle               = this.getPropertyFromString( "strokeStyle: ",  importStr );
-                this._strokeColor               = eval( "[" + this.getPropertyFromString( "strokeColor: ",      importStr ) + "]" );
+
+        if(importStr.indexOf("strokeGradientMode: ") < 0)
+        {
+            this._strokeColor           =  eval( "[" + this.getPropertyFromString( "strokeColor: ",     importStr ) + "]" );
+        } else {
+            this._strokeColor = {};
+            this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ",        importStr );
+            this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ",        importStr ));
+        }
 
                 var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
                 if (!strokeMat) {
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 81201a79..6abaef2f 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -203,8 +203,20 @@ var Rectangle = function GLRectangle() {
                 rtnStr += "width: "                     + this._width           + "\n";
                 rtnStr += "height: "            + this._height          + "\n";
                 rtnStr += "strokeWidth: "       + this._strokeWidth     + "\n";
-                rtnStr += "strokeColor: "       + String(this._strokeColor)  + "\n";
-                rtnStr += "fillColor: "         + String(this._fillColor)        + "\n";
+
+        if(this._strokeColor.gradientMode) {
+            rtnStr += "strokeGradientMode: "    + this._strokeColor.gradientMode        + "\n";
+            rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n";
+        } else {
+            rtnStr += "strokeColor: "   + String(this._strokeColor)  + "\n";
+        }
+
+        if(this._fillColor.gradientMode) {
+            rtnStr += "fillGradientMode: "      + this._fillColor.gradientMode  + "\n";
+            rtnStr += "fillColor: " + this.gradientToString(this._fillColor.color) + "\n";
+        } else {
+            rtnStr += "fillColor: "     + String(this._fillColor)  + "\n";
+        }
                 rtnStr += "tlRadius: "          + this._tlRadius        + "\n";
                 rtnStr += "trRadius: "          + this._trRadius        + "\n";
                 rtnStr += "blRadius: "          + this._blRadius        + "\n";
@@ -244,9 +256,25 @@ var Rectangle = function GLRectangle() {
                 var strokeMaterialName  = this.getPropertyFromString( "strokeMat: ",    importStr );
                 var fillMaterialName    = this.getPropertyFromString( "fillMat: ",              importStr );
                 this._strokeStyle               =  this.getPropertyFromString( "strokeStyle: ", importStr );
-                this._fillColor                 =  eval( "[" + this.getPropertyFromString( "fillColor: ",       importStr ) + "]" );
-                this._strokeColor               =  eval( "[" + this.getPropertyFromString( "strokeColor: ",     importStr ) + "]" );
-                this._tlRadius                  =  Number( this.getPropertyFromString( "tlRadius: ",    importStr )  );
+
+        if(importStr.indexOf("fillGradientMode: ") < 0) {
+            this._fillColor             =  eval( "[" + this.getPropertyFromString( "fillColor: ",       importStr ) + "]" );
+        } else {
+            this._fillColor = {};
+            this._fillColor.gradientMode = this.getPropertyFromString( "fillGradientMode: ",    importStr );
+            this._fillColor.color = this.stringToGradient(this.getPropertyFromString( "fillColor: ",    importStr ));
+        }
+
+        if(importStr.indexOf("strokeGradientMode: ") < 0)
+        {
+            this._strokeColor           =  eval( "[" + this.getPropertyFromString( "strokeColor: ",     importStr ) + "]" );
+        } else {
+            this._strokeColor = {};
+            this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ",        importStr );
+            this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ",        importStr ));
+        }
+
+        this._tlRadius                  =  Number( this.getPropertyFromString( "tlRadius: ",    importStr )  );
                 this._trRadius                  =  Number( this.getPropertyFromString( "trRadius: ",    importStr )  );
                 this._blRadius                  =  Number( this.getPropertyFromString( "blRadius: ",    importStr )  );
                 this._brRadius                  =  Number( this.getPropertyFromString( "brRadius: ",    importStr )  );