From 2ac9a855724cc4ccf147ce4130a733a84cc647c3 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 12 Mar 2012 16:19:44 -0700
Subject: 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>
---
 js/lib/geom/circle.js    | 34 ++++++++++++++++++++++++++++++----
 js/lib/geom/geom-obj.js  | 43 +++++++++++++++++++++++++++++++++++++++++++
 js/lib/geom/line.js      | 19 +++++++++++++++++--
 js/lib/geom/rectangle.js | 38 +++++++++++++++++++++++++++++++++-----
 4 files changed, 123 insertions(+), 11 deletions(-)

(limited to 'js/lib')

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 )  );
-- 
cgit v1.2.3