From 9cdc4b9372cb02c3ec77b70da82f4dfe0b35ab51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Mon, 8 Apr 2013 20:52:21 -0700
Subject: [PATCH] Switch back to only one Gradient constructor for both linear
 and radial Gradients.

---
 examples/JSON/Gradients.html             |  2 +-
 examples/Paperjs.org/BouncingBalls.html  |  2 +-
 examples/Paperjs.org/RadialRainbows.html |  2 +-
 examples/SVG Export/Gradients.html       |  4 +-
 examples/Scripts/HslColor.html           |  2 +-
 src/color/Gradient.js                    | 56 +++++++-----------------
 src/color/GradientColor.js               | 20 ++++-----
 src/color/GradientStop.js                |  4 +-
 src/svg/SvgExport.js                     |  8 ++--
 src/svg/SvgImport.js                     |  2 +-
 test/tests/Item_Cloning.js               |  2 +-
 test/tests/JSON.js                       |  2 +-
 12 files changed, 41 insertions(+), 65 deletions(-)

diff --git a/examples/JSON/Gradients.html b/examples/JSON/Gradients.html
index f0041892..b7882742 100644
--- a/examples/JSON/Gradients.html
+++ b/examples/JSON/Gradients.html
@@ -7,7 +7,7 @@
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas1">
 		var path = new Path.Circle(view.center, view.bounds.height * 0.4);
-		var gradient = new RadialGradient('yellow', 'red', 'black');
+		var gradient = new Gradient(['yellow', 'red', 'black'], true);
 		var from = path.position;
 		var to = path.bounds.rightCenter;
 		var gradientColor = new GradientColor(gradient, from, to);
diff --git a/examples/Paperjs.org/BouncingBalls.html b/examples/Paperjs.org/BouncingBalls.html
index 947a814e..3d2a69f4 100644
--- a/examples/Paperjs.org/BouncingBalls.html
+++ b/examples/Paperjs.org/BouncingBalls.html
@@ -22,7 +22,7 @@
 				saturation: 1,
 				brightness: 1
 			};
-			var gradient = new RadialGradient(color, 'black');
+			var gradient = new Gradient([color, 'black'], true);
 
 			var radius = this.radius = 50 * Math.random() + 30;
 			this.item = new CompoundPath({
diff --git a/examples/Paperjs.org/RadialRainbows.html b/examples/Paperjs.org/RadialRainbows.html
index 0120e151..51874024 100644
--- a/examples/Paperjs.org/RadialRainbows.html
+++ b/examples/Paperjs.org/RadialRainbows.html
@@ -22,7 +22,7 @@
 		}
 
 		var path = new Path.Rectangle(view.bounds);
-		var gradient = new RadialGradient(colors);
+		var gradient = new Gradient(colors, true);
 		var radius = Math.max(view.size.width, view.size.height) * 0.75;
 		path.fillColor = new GradientColor(gradient, point, point + [radius, 0]);
 		var gradientColor = path.fillColor;
diff --git a/examples/SVG Export/Gradients.html b/examples/SVG Export/Gradients.html
index b7351f2e..85b3dd98 100644
--- a/examples/SVG Export/Gradients.html	
+++ b/examples/SVG Export/Gradients.html	
@@ -6,8 +6,8 @@
 	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		var radial = new RadialGradient(new Color(1, 1, 0, 0), 'red', 'black');
-		var linear = new LinearGradient(new Color(1, 1, 0, 0), 'red', 'black');
+		var radial = new Gradient([new Color(1, 1, 0, 0), 'red', 'black'], true);
+		var linear = new Gradient([new Color(1, 1, 0, 0), 'red', 'black'], false);
 
 		var radius = view.bounds.width * 0.4,
 			from = new Point(view.center.x),
diff --git a/examples/Scripts/HslColor.html b/examples/Scripts/HslColor.html
index 8d88d4d7..38a4a403 100644
--- a/examples/Scripts/HslColor.html
+++ b/examples/Scripts/HslColor.html
@@ -38,7 +38,7 @@
 					var color = { hue: hue, saturation: saturation, lightness: lightness };
 					colors.push(color);
 				}
-				var gradient = new RadialGradient(colors);
+				var gradient = new Gradient(colors, true);
 				var from = center;
 				var to = center + vector;
 				var gradientColor = new GradientColor(gradient, from, to);
diff --git a/src/color/Gradient.js b/src/color/Gradient.js
index 57c27972..07a11646 100644
--- a/src/color/Gradient.js
+++ b/src/color/Gradient.js
@@ -16,16 +16,15 @@
  * @class The Gradient object.
  */
 var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
+	_class: 'Gradient',
 
-	initialize: function(stops, _type) {
-		// Keep supporting the old way of creating gradients for the time being.
-		if (this.constructor === Gradient)
-			return new (_type === 'radial' ? RadialGradient : LinearGradient)(
-					stops);
+	initialize: function(stops, radial) {
 		// Define this Gradient's unique id.
 		this._id = ++Base._uid;
-		this.setStops((arguments.length > 1 ? arguments : stops)
-				|| ['white', 'black']);
+		this.setStops(stops || ['white', 'black']);
+		// Support old version of string type argument and new radial boolean.
+		this.setRadial(typeof radial === 'string' && radial === 'radial'
+				|| radial || false);
 	},
 
 	_serialize: function(options, dictionary) {
@@ -63,7 +62,7 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
 		var index = this._owners ? this._owners.indexOf(color) : -1;
 		if (index != -1) {
 			this._owners.splice(index, 1);
-			if (this._owners.length == 0)
+			if (this._owners.length === 0)
 				delete this._owners;
 		}
 	},
@@ -109,6 +108,15 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
 		this._changed();
 	},
 
+	getRadial: function() {
+		return this._radial;
+	},
+
+	setRadial: function(radial) {
+		this._radial = radial;
+		this._changed();
+	},
+
 	/**
 	 * Checks whether the gradient is equal to the supplied gradient.
 	 *
@@ -127,35 +135,3 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
 		return false;
 	}
 });
-
-/**
- * @name LinearGradient
- *
- * @class The LinearGradient object.
- */
-var LinearGradient = this.LinearGradient = Gradient.extend(/** @lends LinearGradient# */{
-	_type: 'LinearGradient'
-
-	/**
-	 * Creates a linear gradient object
-	 *
-	 * @name LinearGradient#initialize
-	 * @param {GradientStop[]} stops
-	 */
-});
-
-/**
- * @name RadialGradient
- *
- * @class The RadialGradient object.
- */
-var RadialGradient = this.RadialGradient = Gradient.extend(/** @lends RadialGradient# */{
-	_type: 'RadialGradient'
-
-	/**
-	 * Creates a radial gradient object
-	 *
-	 * @name RadialGradient#initialize
-	 * @param {GradientStop[]} stops
-	 */
-});
diff --git a/src/color/GradientColor.js b/src/color/GradientColor.js
index 3b84132f..1e30e2d8 100644
--- a/src/color/GradientColor.js
+++ b/src/color/GradientColor.js
@@ -41,7 +41,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
 	 *
 	 * // Create the gradient, passing it an array of colors to be converted
 	 * // to evenly distributed color stops:
-	 * var gradient = new LinearGradient('yellow', 'red', 'blue');
+	 * var gradient = new Gradient(['yellow', 'red', 'blue']);
 	 *
 	 * // Have the gradient color run between the topLeft and
 	 * // bottomRight points we defined earlier:
@@ -66,7 +66,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
 	 * var stops = [['yellow', 0], ['red', 0.15], ['red', 0.3], ['black', 0.9]];
 	 *
 	 * // Create a radial gradient using the color stops array:
-	 * var gradient = new RadialGradient(stops);
+	 * var gradient = new Gradient(stops, true);
 	 *
 	 * // We will use the center point of the circle shaped path as
 	 * // the origin point for our gradient color
@@ -87,7 +87,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
 		this._id = ++Base._uid;
 		// Try object literal constructor first
 		if (!this._set(gradient)) {
-			this.setGradient(gradient || new LinearGradient());
+			this.setGradient(gradient || new Gradient());
 			this.setOrigin(origin);
 			this.setDestination(destination);
 			if (hilite)
@@ -139,7 +139,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
 	 * // Create a rectangle shaped path with the same dimensions as
 	 * // that of the view and fill it with a gradient color:
 	 * var path = new Path.Rectangle(view.bounds);
-	 * var gradient = new LinearGradient('yellow', 'red', 'blue');
+	 * var gradient = new Gradient(['yellow', 'red', 'blue']);
 	 *
 	 * // Have the gradient color run from the top left point of the view,
 	 * // to the bottom right point of the view:
@@ -185,7 +185,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
 	 * 	radius: view.bounds.height * 0.4
 	 * });
 	 *
-	 * var gradient = new RadialGradient('yellow', 'red', 'black');
+	 * var gradient = new Gradient(['yellow', 'red', 'black'], true);
 	 * var from = view.center;
 	 * var to = view.bounds.bottomRight;
 	 * var gradientColor = new GradientColor(gradient, from, to);
@@ -223,7 +223,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
 	 * 	radius: view.bounds.height * 0.4
 	 * });
 	 * 
-	 * var gradient = new RadialGradient('yellow', 'red', 'black');
+	 * var gradient = new Gradient(['yellow', 'red', 'black'], true);
 	 * var from = path.position;
 	 * var to = path.bounds.rightCenter;
 	 * var gradientColor = new GradientColor(gradient, from, to);
@@ -255,13 +255,13 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
 	toCanvasStyle: function(ctx) {
 		var gradient,
 			stops = this._gradient._stops;
-		if (this._gradient._type === 'LinearGradient') {
-			gradient = ctx.createLinearGradient(this._origin.x, this._origin.y,
-					this._destination.x, this._destination.y);
-		} else {
+		if (this._gradient._radial) {
 			var origin = this._hilite || this._origin;
 			gradient = ctx.createRadialGradient(origin.x, origin.y,
 					0, this._origin.x, this._origin.y, this._radius);
+		} else {
+			gradient = ctx.createLinearGradient(this._origin.x, this._origin.y,
+					this._destination.x, this._destination.y);
 		}
 		for (var i = 0, l = stops.length; i < l; i++) {
 			var stop = stops[i];
diff --git a/src/color/GradientStop.js b/src/color/GradientStop.js
index 5c464b77..a68d0c88 100644
--- a/src/color/GradientStop.js
+++ b/src/color/GradientStop.js
@@ -89,7 +89,7 @@ var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
 	 * 
 	 * // Prepare the gradient color and apply it to the path:
 	 * var colors = [['yellow', 0.05], ['red', 0.2], ['black', 1]];
-	 * var gradient = new RadialGradient(colors);
+	 * var gradient = new Gradient(colors, true);
 	 * var from = path.position;
 	 * var to = path.bounds.rightCenter;
 	 * var gradientColor = new GradientColor(gradient, from, to);
@@ -135,7 +135,7 @@ var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
 	 * });
 	 *
 	 * // Create a radial gradient that mixes red and black evenly:
-	 * var gradient = new RadialGradient('red', 'black');
+	 * var gradient = new Gradient(['red', 'black'], true);
 	 *
 	 * // Fill the path with a gradient color that runs from its center,
 	 * // to the right center of its bounding rectangle:
diff --git a/src/svg/SvgExport.js b/src/svg/SvgExport.js
index f2b7e65b..d92c48a8 100644
--- a/src/svg/SvgExport.js
+++ b/src/svg/SvgExport.js
@@ -342,13 +342,13 @@ new function() {
 		var gradientNode = getDefinition(color);
 		if (!gradientNode) {
 			var gradient = color.gradient,
-				type = gradient._type,
+				radial = gradient._radial,
 				matrix = item._gradientMatrix,
 				origin = color._origin.transform(matrix),
 				destination = color._destination.transform(matrix),
 				highlight = color._hilite && color._hilite.transform(matrix),
 				attrs;
-				if (type == 'RadialGradient') {
+				if (radial) {
 					attrs = {
 						cx: origin.x,
 						cy: origin.y,
@@ -367,8 +367,8 @@ new function() {
 					};
 				}
 			attrs.gradientUnits = 'userSpaceOnUse';
-			gradientNode = createElement(type[0].toLowerCase() + type.slice(1),
-					attrs);
+			gradientNode = createElement(
+					(radial ? 'radial' : 'linear') + 'Gradient', attrs);
 			var stops = gradient._stops;
 			for (var i = 0, l = stops.length; i < l; i++) {
 				var stop = stops[i],
diff --git a/src/svg/SvgImport.js b/src/svg/SvgImport.js
index ce35f7f0..0dc9edcb 100644
--- a/src/svg/SvgImport.js
+++ b/src/svg/SvgImport.js
@@ -143,7 +143,7 @@ new function() {
 				stops.push(applyAttributes(new GradientStop(), child));
 		}
 		var isRadial = type === 'radialGradient',
-			gradient = new (isRadial ? RadialGradient : LinearGradient)(stops),
+			gradient = new Gradient(stops, isRadial),
 			origin, destination, highlight;
 		if (isRadial) {
 			origin = getPoint(node, 'cx', 'cy');
diff --git a/test/tests/Item_Cloning.js b/test/tests/Item_Cloning.js
index d74f87db..7310592b 100644
--- a/test/tests/Item_Cloning.js
+++ b/test/tests/Item_Cloning.js
@@ -53,7 +53,7 @@ test('Path#clone()', function() {
 
 test('Path#clone() with GradientColor', function() {
 	var colors = ['red', 'green', 'black'];
-	var gradient = new RadialGradient(colors);
+	var gradient = new Gradient(colors, true);
 	var color = new GradientColor(gradient, [0, 0], [20, 20], [10, 10]);
 
 	var path = new Path([10, 20], [30, 40]);
diff --git a/test/tests/JSON.js b/test/tests/JSON.js
index 7c6d85a6..ab7d8943 100644
--- a/test/tests/JSON.js
+++ b/test/tests/JSON.js
@@ -58,7 +58,7 @@ test('Empty Path', function() {
 
 test('Gradients', function() {
 	var path = new Path.Circle([100, 100], 40);
-	var gradient = new RadialGradient('yellow', 'red', 'black');
+	var gradient = new Gradient(['yellow', 'red', 'black'], true);
 	var from = path.position;
 	var to = path.bounds.rightCenter;
 	var gradientColor = new GradientColor(gradient, from, to);