From 91a9e02bff0397ec9b1f55fdf61cef72eb0d8a0f Mon Sep 17 00:00:00 2001
From: hwc487
Date: Tue, 8 May 2012 15:53:35 -0700
Subject: Radial gradients to match CSS

---
 js/lib/geom/rectangle.js | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

(limited to 'js/lib/geom/rectangle.js')

diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 490a9a6f..296ed024 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -57,13 +57,10 @@ var Rectangle = function GLRectangle() {
 			this._strokeStyle = strokeStyle;
 
 			this._matrix = Matrix.I(4);
-			//this._matrix[12] = xoffset;
-			//this._matrix[13] = yoffset;
 		}
 
 		// the overall radius includes the fill and the stroke.  separate the two based onthe stroke width
 		//  this._fillRad = this._radius - this._strokeWidth;
-		//    var err = 0.05;
 		var err = 0;
 		this._fillWidth = this._width - this._strokeWidth  + err;
 		this._fillHeight = this._height - this._strokeWidth + err;
@@ -116,18 +113,10 @@ var Rectangle = function GLRectangle() {
         return this._strokeColor;
     };
 
-	//this.setStrokeColor = function(c) {
-	// this._strokeColor = c;
-	// };
-
 	this.getFillColor = function() {
         return this._fillColor;
     };
 
-	//this.setFillColor = function(c) {
-	// this._fillColor = c.slice(0);
-	// };
-
 	this.getTLRadius = function() {
         return this._tlRadius;
     };
@@ -324,6 +313,7 @@ var Rectangle = function GLRectangle() {
 		// stroke
 		var strokeMaterial = this.makeStrokeMaterial();
 		var strokePrim = this.createStroke([x,y],  2*xFill,  2*yFill,  strokeSize,  tlRadius, blRadius, brRadius, trRadius, strokeMaterial);
+		strokeMaterial.fitToPrimitive( strokePrim );
         this._primArray.push( strokePrim );
 		this._materialNodeArray.push( strokeMaterial.getMaterialNode() );
 
@@ -337,6 +327,7 @@ var Rectangle = function GLRectangle() {
 		var fillMaterial = this.makeFillMaterial();
 		//console.log( "fillMaterial: " + fillMaterial.getName() );
 		var fillPrim = this.createFill([x,y],  2*xFill,  2*yFill,  tlRadius, blRadius, brRadius, trRadius, fillMaterial);
+		fillMaterial.fitToPrimitive( fillPrim );
         this._primArray.push( fillPrim );
 		this._materialNodeArray.push( fillMaterial.getMaterialNode() );
 
-- 
cgit v1.2.3


From 02e5fbb819f02d26a8a7179cf04021a0f6c6ddf6 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Mon, 14 May 2012 16:41:04 -0700
Subject: base canvas 2d rendering of radial gradient on size of the filled
 region only

---
 js/lib/geom/rectangle.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'js/lib/geom/rectangle.js')

diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index cf0e7fc8..4415af43 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -537,7 +537,8 @@ exports.Rectangle = Object.create(GeomObj, {
 
                 if(this._fillColor.gradientMode) {
                     if(this._fillColor.gradientMode === "radial") {
-                        gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2);
+						var ww = w - 2*lw,  hh = h - 2*lw;
+                        gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2);
                     } else {
                         gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
                     }
-- 
cgit v1.2.3


From cb37bee07085690d72e69a82e76cae9166e5f0f1 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Tue, 15 May 2012 16:02:27 -0700
Subject: Gradient matching between WebGL and Canvas2D

---
 js/lib/geom/rectangle.js | 183 ++++++++++++++++++++++++-----------------------
 1 file changed, 92 insertions(+), 91 deletions(-)

(limited to 'js/lib/geom/rectangle.js')

diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 4415af43..8fc80c60 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -508,98 +508,99 @@ exports.Rectangle = Object.create(GeomObj, {
     },
 
     render: {
-        value: function() {
-            // get the world
-            var world = this.getWorld();
-            if (!world)  throw( "null world in rectangle render" );
-
-             // get the context
-            var ctx = world.get2DContext();
-            if (!ctx)  return;
-
-            // get some dimensions
-            var lw = this._strokeWidth;
-            var	w = world.getViewportWidth(),
-                h = world.getViewportHeight();
-
-            var c,
-                inset,
-                gradient,
-                colors,
-                len,
-                n,
-                position,
-                cs;
-            // render the fill
-            ctx.beginPath();
-            if (this._fillColor) {
-                inset = Math.ceil( lw ) - 0.5;
-
-                if(this._fillColor.gradientMode) {
-                    if(this._fillColor.gradientMode === "radial") {
+		value: function() {
+			// get the world
+			var world = this.getWorld();
+			if (!world)  throw( "null world in rectangle render" );
+
+			 // get the context
+			var ctx = world.get2DContext();
+			if (!ctx)  return;
+
+			// get some dimensions
+			var lw = this._strokeWidth;
+			var	w = world.getViewportWidth(),
+				h = world.getViewportHeight();
+
+			var c,
+				inset,
+				gradient,
+				colors,
+				len,
+				n,
+				position,
+				cs;
+			// render the fill
+			ctx.beginPath();
+			if (this._fillColor) {
+				inset = Math.ceil( lw ) - 0.5;
+
+				if(this._fillColor.gradientMode) {
+					if(this._fillColor.gradientMode === "radial") {
 						var ww = w - 2*lw,  hh = h - 2*lw;
-                        gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2);
-                    } else {
-                        gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
-                    }
-                    colors = this._fillColor.color;
-
-                    len = colors.length;
-
-                    for(n=0; n<len; n++) {
-                        position = colors[n].position/100;
-                        cs = colors[n].value;
-                        gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-                    }
-
-                    ctx.fillStyle = gradient;
-
-                } else {
-                    c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
-                    ctx.fillStyle = c;
-                }
-
-                ctx.lineWidth	= lw;
-                this.renderPath( inset, ctx );
-                ctx.fill();
-                ctx.closePath();
-            }
-
-            // render the stroke
-            ctx.beginPath();
-            if (this._strokeColor) {
-                inset = Math.ceil( 0.5*lw ) - 0.5;
-
-                if(this._strokeColor.gradientMode) {
-                    if(this._strokeColor.gradientMode === "radial") {
-                        gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
-                    } else {
-                        gradient = ctx.createLinearGradient(0, h/2, w, h/2);
-                    }
-                    colors = this._strokeColor.color;
-
-                    len = colors.length;
-
-                    for(n=0; n<len; n++) {
-                        position = colors[n].position/100;
-                        cs = colors[n].value;
-                        gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-                    }
-
-                    ctx.strokeStyle = gradient;
-
-                } else {
-                    c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
-                    ctx.strokeStyle = c;
-                }
-
-                ctx.lineWidth	= lw;
-                this.renderPath( inset, ctx );
-                ctx.stroke();
-                ctx.closePath();
-            }
-        }
-    },
+						//gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2);
+						gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
+					} else {
+						gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
+					}
+					colors = this._fillColor.color;
+
+					len = colors.length;
+
+					for(n=0; n<len; n++) {
+						position = colors[n].position/100;
+						cs = colors[n].value;
+						gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+					}
+
+					ctx.fillStyle = gradient;
+
+				} else {
+					c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
+					ctx.fillStyle = c;
+				}
+
+				ctx.lineWidth	= lw;
+				this.renderPath( inset, ctx );
+				ctx.fill();
+				ctx.closePath();
+			}
+
+			// render the stroke
+			ctx.beginPath();
+			if (this._strokeColor) {
+				inset = Math.ceil( 0.5*lw ) - 0.5;
+
+				if(this._strokeColor.gradientMode) {
+					if(this._strokeColor.gradientMode === "radial") {
+						gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
+					} else {
+						gradient = ctx.createLinearGradient(0, h/2, w, h/2);
+					}
+					colors = this._strokeColor.color;
+
+					len = colors.length;
+
+					for(n=0; n<len; n++) {
+						position = colors[n].position/100;
+						cs = colors[n].value;
+						gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+					}
+
+					ctx.strokeStyle = gradient;
+
+				} else {
+					c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
+					ctx.strokeStyle = c;
+				}
+
+				ctx.lineWidth	= lw;
+				this.renderPath( inset, ctx );
+				ctx.stroke();
+				ctx.closePath();
+			}
+		}
+	},
 
     createStroke: {
         value: function(ctr,  width,  height,  strokeWidth,  tlRad, blRad, brRad, trRad, material) {
-- 
cgit v1.2.3


From 651341341f894c4d0def267ab3250e77f7d0c276 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Thu, 17 May 2012 16:52:38 -0700
Subject: canvas 2d radial gradient render problem.

---
 js/lib/geom/rectangle.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/lib/geom/rectangle.js')

diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 8fc80c60..711245ae 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -541,7 +541,7 @@ exports.Rectangle = Object.create(GeomObj, {
 						//gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2);
 						gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
 					} else {
-						gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
+						gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2);
 					}
 					colors = this._fillColor.color;
 
-- 
cgit v1.2.3


From 6b03f357f45d76733ae7bf5ff52ffe2fb2a84fda Mon Sep 17 00:00:00 2001
From: hwc487
Date: Fri, 18 May 2012 12:35:58 -0700
Subject: Updates for WebGL/Canvas 2D authortime and runtime gradients.

---
 js/lib/geom/rectangle.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

(limited to 'js/lib/geom/rectangle.js')

diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 711245ae..b85433a0 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -507,7 +507,7 @@ exports.Rectangle = Object.create(GeomObj, {
         }
     },
 
-    render: {
+	render: {
 		value: function() {
 			// get the world
 			var world = this.getWorld();
@@ -538,7 +538,6 @@ exports.Rectangle = Object.create(GeomObj, {
 				if(this._fillColor.gradientMode) {
 					if(this._fillColor.gradientMode === "radial") {
 						var ww = w - 2*lw,  hh = h - 2*lw;
-						//gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2);
 						gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
 					} else {
 						gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2);
@@ -572,11 +571,10 @@ exports.Rectangle = Object.create(GeomObj, {
 				inset = Math.ceil( 0.5*lw ) - 0.5;
 
 				if(this._strokeColor.gradientMode) {
-					if(this._strokeColor.gradientMode === "radial") {
-						gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
-					} else {
+					if(this._strokeColor.gradientMode === "radial")
+						gradient = ctx.createRadialGradient(w/2, h/2, 0,  w/2, h/2, Math.max(h, w)/2);
+					else
 						gradient = ctx.createLinearGradient(0, h/2, w, h/2);
-					}
 					colors = this._strokeColor.color;
 
 					len = colors.length;
-- 
cgit v1.2.3