Switch from Gradient#type to separate LinearGradient / RadialGradient classes.

But remain backward compatible through direct calls to Gradient constructor.

examples/Animated/RadialRainbows.html

@@ -18,7 +18,7 @@
 		}
 
 		var path = new Path.Rectangle(view.bounds);
-		var gradient = new Gradient(colors, 'radial');
+		var gradient = new RadialGradient(colors);
 		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;

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 Gradient([ 'yellow', 'red', 'black'], 'radial');
+		var gradient = new RadialGradient([ 'yellow', 'red', 'black']);
 		var from = path.position;
 		var to = path.bounds.rightCenter;
 		var gradientColor = new GradientColor(gradient, from, to);

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 Gradient([ new RgbColor(1, 1, 0, 0), 'red', 'black'], 'radial');
-		var linear = new Gradient([ new RgbColor(1, 1, 0, 0), 'red', 'black'], 'linear');
+		var radial = new RadialGradient([ new RgbColor(1, 1, 0, 0), 'red', 'black']);
+		var linear = new LinearGradient([ new RgbColor(1, 1, 0, 0), 'red', 'black']);
 
 		var radius = view.bounds.width * 0.4,
 			from = new Point(view.center.x),

examples/Scripts/BouncingBalls.html

@@ -32,14 +32,14 @@
 					new Path.Circle(overlayPos, this.radius / 2)
 				]);
 				var color = new HsbColor(Math.random() * 360, 1, 1);
-				var gradient = new Gradient([color, 'black'], 'radial');
+				var gradient = new RadialGradient([color, 'black']);
 				compound.fillColor = new GradientColor(gradient, this.point,
 						this.point + this.radius, overlayPos);
 				var overlay = new Path.Circle(overlayPos, this.radius / 2);
 				var overlayColor = color.clone();
 				var fullOverlay = color.clone();
 				overlayColor.alpha = 0.5;
-				var overlayGradient = new Gradient([new RgbColor(1, 1, 1, 0.5), new RgbColor(1, 1, 1, 1)]);
+				var overlayGradient = new LinearGradient([new RgbColor(1, 1, 1, 0.5), new RgbColor(1, 1, 1, 1)]);
 				overlay.fillColor = new GradientColor(overlayGradient, overlayPos, overlayPos + this.radius / 2);
 				this.item = new Group(compound, overlay);
 			},

examples/Scripts/HslColor.html

@@ -38,7 +38,7 @@
 					var color = new HslColor(hue, saturation, lightness);
 					colors.push(color);
 				}
-				var gradient = new Gradient(colors, 'radial');
+				var gradient = new RadialGradient(colors);
 				var from = center;
 				var to = center + vector;
 				var gradientColor = new GradientColor(gradient, from, to);

src/color/Gradient.js

@@ -16,26 +16,19 @@
  * @class The Gradient object.
  */
 var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
-	_type: 'Gradient',
-
-	// TODO: Should type here be called 'radial' and have it receive a
-	// boolean value?
-	/**
-	 * Creates a gradient object
-	 *
-	 * @param {GradientStop[]} stops
-	 * @param {String} [type='linear'] 'linear' or 'radial'
-	 */
-	initialize: function(stops, type) {
+	initialize: function(stops, _type) {
+		// Support old way of creating gradients.
+		if (this.constructor === Gradient)
+			return new (_type === 'radial' ? RadialGradient : LinearGradient)(
+					stops);
 		// Define this Gradient's unique id.
 		this._id = ++Base._uid;
 		this.setStops(stops || ['white', 'black']);
-		this.type = type || 'linear';
 	},
 
 	_serialize: function(options, dictionary) {
 		return dictionary.add(this, function() {
-			return Base.serialize([this._type, this._stops, this.type],
+			return Base.serialize([this._type, this._stops],
 					options, true, dictionary);
 		});
 	},
@@ -80,7 +73,7 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
 		var stops = [];
 		for (var i = 0, l = this._stops.length; i < l; i++)
 			stops[i] = this._stops[i].clone();
-		return new Gradient(stops, this.type);
+		return new this.constructor(stops);
 	},
 
 	/**
@@ -122,9 +115,8 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
 	 * @return {Boolean} {@true they are equal}
 	 */
 	equals: function(gradient) {
-		if (gradient.type != this.type)
-			return false;
-		if (this._stops.length == gradient._stops.length) {
+		if (gradient && gradient.constructor == this.constructor
+				&& this._stops.length == gradient._stops.length) {
 			for (var i = 0, l = this._stops.length; i < l; i++) {
 				if (!this._stops[i].equals(gradient._stops[i]))
 					return false;
@@ -134,3 +126,25 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
 		return false;
 	}
 });
+
+var LinearGradient = this.LinearGradient = Gradient.extend(/** @lends LinearGradient# */{
+	_type: 'LinearGradient'
+
+	/**
+	 * Creates a linear gradient object
+	 *
+	 * @name LinearGradient#initialize
+	 * @param {GradientStop[]} stops
+	 */
+});
+
+var RadialGradient = this.RadialGradient = Gradient.extend(/** @lends RadialGradient# */{
+	_type: 'RadialGradient'
+
+	/**
+	 * Creates a radial gradient object
+	 *
+	 * @name RadialGradient#initialize
+	 * @param {GradientStop[]} stops
+	 */
+});

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 Gradient(['yellow', 'red', 'blue']);
+	 * var gradient = new LinearGradient(['yellow', 'red', 'blue']);
 	 *
 	 * // Have the gradient color run between the topLeft and
 	 * // bottomRight points we defined earlier:
@@ -63,7 +63,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 Gradient(stops, 'radial');
+	 * var gradient = new RadialGradient(stops);
 	 *
 	 * // We will use the center point of the circle shaped path as
 	 * // the origin point for our gradient color
@@ -82,7 +82,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
 	initialize: function(gradient, origin, destination, hilite) {
 		// Define this GradientColor's unique id.
 		this._id = ++Base._uid;
-		this.gradient = gradient || new Gradient();
+		this.gradient = gradient || new LinearGradient();
 		this.gradient._addOwner(this);
 		this.setOrigin(origin);
 		this.setDestination(destination);
@@ -118,7 +118,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 Gradient(['yellow', 'red', 'blue']);
+	 * var gradient = new LinearGradient(['yellow', 'red', 'blue']);
 	 *
 	 * // Have the gradient color run from the top left point of the view,
 	 * // to the bottom right point of the view:
@@ -162,7 +162,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
 	 * // and fill it with a radial gradient color:
 	 * var path = new Path.Circle(view.center, view.bounds.height * 0.4);
 	 *
-	 * var gradient = new Gradient(['yellow', 'red', 'black'], 'radial');
+	 * var gradient = new RadialGradient(['yellow', 'red', 'black']);
 	 * var from = view.center;
 	 * var to = view.bounds.bottomRight;
 	 * var gradientColor = new GradientColor(gradient, from, to);
@@ -200,7 +200,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
 	 * // using 40% of the height of the view as its radius
 	 * // and fill it with a radial gradient color:
 	 * var path = new Path.Circle(view.center, view.bounds.height * 0.4);
-	 * var gradient = new Gradient(['yellow', 'red', 'black'], 'radial');
+	 * var gradient = new RadialGradient(['yellow', 'red', 'black']);
 	 * var from = path.position;
 	 * var to = path.bounds.rightCenter;
 	 * var gradientColor = new GradientColor(gradient, from, to);
@@ -230,8 +230,9 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
 	},
 
 	getCanvasStyle: function(ctx) {
-		var gradient;
-		if (this.gradient.type === 'linear') {
+		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 {
@@ -239,8 +240,8 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
 			gradient = ctx.createRadialGradient(origin.x, origin.y,
 					0, this._origin.x, this._origin.y, this._radius);
 		}
-		for (var i = 0, l = this.gradient._stops.length; i < l; i++) {
-			var stop = this.gradient._stops[i];
+		for (var i = 0, l = stops.length; i < l; i++) {
+			var stop = stops[i];
 			gradient.addColorStop(stop._rampPoint, stop._color.toCss());
 		}
 		return gradient;

src/color/GradientStop.js

@@ -86,7 +86,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 Gradient(colors, 'radial');
+	 * var gradient = new RadialGradient(colors);
 	 * var from = path.position;
 	 * var to = path.bounds.rightCenter;
 	 * var gradientColor = new GradientColor(gradient, from, to);
@@ -128,7 +128,7 @@ var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
 	 * var path = new Path.Circle(view.center, view.bounds.height * 0.4);
 	 *
 	 * // Create a radial gradient that mixes red and black evenly:
-	 * var gradient = new Gradient(['red', 'black'], 'radial');
+	 * var gradient = new RadialGradient(['red', 'black']);
 	 *
 	 * // Fill the path with a gradient color that runs from its center,
 	 * // to the right center of its bounding rectangle:

src/svg/SvgExport.js

@@ -341,12 +341,13 @@ new function() {
 		var gradientNode = getDefinition(color);
 		if (!gradientNode) {
 			var gradient = color.gradient,
+				type = gradient._type,
 				matrix = item._gradientMatrix,
 				origin = color._origin.transform(matrix),
 				destination = color._destination.transform(matrix),
 				highlight = color._hilite && color._hilite.transform(matrix),
 				attrs;
-				if (gradient.type == 'radial') {
+				if (type == 'RadialGradient') {
 					attrs = {
 						cx: origin.x,
 						cy: origin.y,
@@ -365,7 +366,8 @@ new function() {
 					};
 				}
 			attrs.gradientUnits = 'userSpaceOnUse';
-			gradientNode = createElement(gradient.type + 'Gradient', attrs);
+			gradientNode = createElement(type[0].toLowerCase() + type.slice(1),
+					attrs);
 			var stops = gradient._stops;
 			for (var i = 0, l = stops.length; i < l; i++) {
 				var stop = stops[i],

src/svg/SvgImport.js

@@ -142,11 +142,10 @@ new function() {
 			if (child.nodeType == 1)
 				stops.push(applyAttributes(new GradientStop(), child));
 		}
-		var gradient = new Gradient(stops),
-			isRadial = type === 'radialGradient',
+		var isRadial = type === 'radialGradient',
+			gradient = new (isRadial ? RadialGradient : LinearGradient)(stops),
 			origin, destination, highlight;
 		if (isRadial) {
-			gradient.type = 'radial';
 			origin = getPoint(node, 'cx', 'cy');
 			destination = origin.add(getValue(node, 'r'), 0);
 			highlight = getPoint(node, 'fx', 'fy', true);

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 Gradient(colors, 'radial');
+	var gradient = new RadialGradient(colors);
 	var color = new GradientColor(gradient, [0, 0], [20, 20], [10, 10]);
 
 	var path = new Path([10, 20], [30, 40]);