From fd0f4f09299da7c8b48f69d45b8503b47ae096da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Tue, 9 Apr 2013 08:23:20 -0700
Subject: [PATCH] Remove GradientColor and move all documentation to Color.

---
 src/color/Color.js         | 166 +++++++++++++++++++++
 src/color/GradientColor.js | 297 -------------------------------------
 2 files changed, 166 insertions(+), 297 deletions(-)
 delete mode 100644 src/color/GradientColor.js

diff --git a/src/color/Color.js b/src/color/Color.js
index 732ceeee..abd03094 100644
--- a/src/color/Color.js
+++ b/src/color/Color.js
@@ -272,6 +272,71 @@ var Color = this.Color = Base.extend(new function() {
 		// Tell Base.read that the Point constructor supporst reading with index
 		_readIndex: true,
 
+		/**
+		 * Creates a gradient color object.
+		 *
+		 * @name Color#initialize
+		 * @param {Gradient} gradient
+		 * @param {Point} origin
+		 * @param {Point} destination
+		 * @param {Point} [hilite]
+		 *
+		 * @example {@paperscript height=200}
+		 * // Applying a linear gradient color containing evenly distributed
+		 * // color stops:
+		 *
+		 * // Define two points which we will be using to construct
+		 * // the path and to position the gradient color:
+		 * var topLeft = view.center - [80, 80];
+		 * var bottomRight = view.center + [80, 80];
+		 *
+		 * // Create a rectangle shaped path between
+		 * // the topLeft and bottomRight points:
+		 * var path = new Path.Rectangle(topLeft, bottomRight);
+		 *
+		 * // Create the gradient, passing it an array of colors to be converted
+		 * // to evenly distributed color stops:
+		 * var gradient = new Gradient(['yellow', 'red', 'blue']);
+		 *
+		 * // Have the gradient color run between the topLeft and
+		 * // bottomRight points we defined earlier:
+		 * var gradientColor = new Color(gradient, topLeft, bottomRight);
+		 *
+		 * // Set the fill color of the path to the gradient color:
+		 * path.fillColor = gradientColor;
+		 *
+		 * @example {@paperscript height=200}
+		 * // Applying a radial gradient color containing unevenly distributed
+		 * // color stops:
+		 *
+		 * // Create a circle shaped path at the center of the view
+		 * // with a radius of 80:
+		 * var path = new Path.Circle({
+		 * 	center: view.center,
+		 * 	radius: 80
+		 * });
+		 *
+		 * // The stops array: yellow mixes with red between 0 and 15%,
+		 * // 15% to 30% is pure red, red mixes with black between 30% to 100%:
+		 * 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, true);
+		 *
+		 * // We will use the center point of the circle shaped path as
+		 * // the origin point for our gradient color
+		 * var from = path.position;
+		 *
+		 * // The destination point of the gradient color will be the
+		 * // center point of the path + 80pt in horizontal direction:
+		 * var to = path.position + [80, 0];
+		 *
+		 * // Create the gradient color:
+		 * var gradientColor = new Color(gradient, from, to);
+		 *
+		 * // Set the fill color of the path to the gradient color:
+		 * path.fillColor = gradientColor;
+		 */
 		initialize: function(arg) {
 			// We are storing color internally as an array of components
 			var slice = Array.prototype.slice,
@@ -718,6 +783,107 @@ var Color = this.Color = Base.extend(new function() {
 		 * @type Number
 		 */
 
+		/**
+		 * {@grouptitle Gradient Components}
+		 *
+		 * The gradient object describing the type of gradient and the stops.
+		 *
+		 * @name Color#gradient
+		 * @property
+		 * @type Gradient
+		 */
+
+		/* The origin point of the gradient.
+		 *
+		 * @name Color#origin
+		 * @property
+		 * @type Point
+		 *
+		 * @example {@paperscript height=200}
+		 * // Move the origin point of the gradient, by moving your mouse over
+		 * // the view below:
+		 *
+		 * // 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']);
+		 *
+		 * // Have the gradient color run from the top left point of the view,
+		 * // to the bottom right point of the view:
+		 * var from = view.bounds.topLeft;
+		 * var to = view.bounds.bottomRight;
+		 * var gradientColor = new Color(gradient, from, to);
+		 * path.fillColor = gradientColor;
+		 *
+		 * function onMouseMove(event) {
+		 * 	// Set the origin point of the path's gradient color
+		 * 	// to the position of the mouse:
+		 * 	path.fillColor.origin = event.point;
+		 * }
+		 */
+
+		/*
+		 * The destination point of the gradient.
+		 *
+		 * @name Color#destination
+		 * @property
+		 * @type Point
+		 *
+		 * @example {@paperscript height=300}
+		 * // Move the destination point of the gradient, by moving your mouse over
+		 * // the view below:
+		 *
+		 * // Create a circle shaped path at the center of the view,
+		 * // using 40% of the height of the view as its radius
+		 * // and fill it with a radial gradient color:
+		 * var path = new Path.Circle({
+		 * 	center: view.center,
+		 * 	radius: view.bounds.height * 0.4
+		 * });
+		 *
+		 * var gradient = new Gradient(['yellow', 'red', 'black'], true);
+		 * var from = view.center;
+		 * var to = view.bounds.bottomRight;
+		 * var gradientColor = new Color(gradient, from, to);
+		 * path.fillColor = gradientColor;
+		 *
+		 * function onMouseMove(event) {
+		 * 	// Set the origin point of the path's gradient color
+		 * 	// to the position of the mouse:
+		 * 	path.fillColor.destination = event.point;
+		 * }
+		 */
+
+		/**
+		 * The hilite point of the gradient.
+		 *
+		 * @name Color#hilite
+		 * @property
+		 * @type Point
+		 *
+		 * @example {@paperscript height=300}
+		 * // Create a circle shaped path at the center of the view,
+		 * // using 40% of the height of the view as its radius
+		 * // and fill it with a radial gradient color:
+		 * var path = new Path.Circle({
+		 * 	center: view.center,
+		 * 	radius: view.bounds.height * 0.4
+		 * });
+		 * 
+		 * var gradient = new Gradient(['yellow', 'red', 'black'], true);
+		 * var from = path.position;
+		 * var to = path.bounds.rightCenter;
+		 * var gradientColor = new Color(gradient, from, to);
+		 * 
+		 * path.fillColor = gradientColor;
+		 * 
+		 * function onMouseMove(event) {
+		 * 	// Set the origin hilite of the path's gradient color
+		 * 	// to the position of the mouse:
+		 * 	path.fillColor.hilite = event.point;
+		 * }
+		 */
+
 		statics: /** @lends Color */{
 			// Export for backward compatibility code below.
 			_types: types,
diff --git a/src/color/GradientColor.js b/src/color/GradientColor.js
deleted file mode 100644
index 4572670a..00000000
--- a/src/color/GradientColor.js
+++ /dev/null
@@ -1,297 +0,0 @@
-/*
- * Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
- * http://paperjs.org/
- *
- * Copyright (c) 2011 - 2013, Juerg Lehni & Jonathan Puckey
- * http://lehni.org/ & http://jonathanpuckey.com/
- *
- * Distributed under the MIT license. See LICENSE file for details.
- *
- * All rights reserved.
- */
-
-/**
- * @name GradientColor
- *
- * @class The GradientColor object.
- */
-var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor# */{
-
-	/**
-	 * Creates a gradient color object.
-	 *
-	 * @param {Gradient} gradient
-	 * @param {Point} origin
-	 * @param {Point} destination
-	 * @param {Point} [hilite]
-	 *
-	 * @example {@paperscript height=200}
-	 * // Applying a linear gradient color containing evenly distributed
-	 * // color stops:
-	 *
-	 * // Define two points which we will be using to construct
-	 * // the path and to position the gradient color:
-	 * var topLeft = view.center - [80, 80];
-	 * var bottomRight = view.center + [80, 80];
-	 *
-	 * // Create a rectangle shaped path between
-	 * // the topLeft and bottomRight points:
-	 * var path = new Path.Rectangle(topLeft, bottomRight);
-	 *
-	 * // Create the gradient, passing it an array of colors to be converted
-	 * // to evenly distributed color stops:
-	 * var gradient = new Gradient(['yellow', 'red', 'blue']);
-	 *
-	 * // Have the gradient color run between the topLeft and
-	 * // bottomRight points we defined earlier:
-	 * var gradientColor = new Color(gradient, topLeft, bottomRight);
-	 *
-	 * // Set the fill color of the path to the gradient color:
-	 * path.fillColor = gradientColor;
-	 *
-	 * @example {@paperscript height=200}
-	 * // Applying a radial gradient color containing unevenly distributed
-	 * // color stops:
-	 *
-	 * // Create a circle shaped path at the center of the view
-	 * // with a radius of 80:
-	 * var path = new Path.Circle({
-	 * 	center: view.center,
-	 * 	radius: 80
-	 * });
-	 *
-	 * // The stops array: yellow mixes with red between 0 and 15%,
-	 * // 15% to 30% is pure red, red mixes with black between 30% to 100%:
-	 * 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, true);
-	 *
-	 * // We will use the center point of the circle shaped path as
-	 * // the origin point for our gradient color
-	 * var from = path.position;
-	 *
-	 * // The destination point of the gradient color will be the
-	 * // center point of the path + 80pt in horizontal direction:
-	 * var to = path.position + [80, 0];
-	 *
-	 * // Create the gradient color:
-	 * var gradientColor = new Color(gradient, from, to);
-	 *
-	 * // Set the fill color of the path to the gradient color:
-	 * path.fillColor = gradientColor;
-	 */
-	initialize: function(gradient, origin, destination, hilite) {
-		// Define this GradientColor's unique id.
-		this._id = ++Base._uid;
-		// Try object literal constructor first
-		if (!this._set(gradient)) {
-			this.setGradient(gradient || new Gradient());
-			this.setOrigin(origin);
-			this.setDestination(destination);
-			if (hilite)
-				this.setHilite(hilite);
-		}
-	},
-
-	/**
-	 * @return {GradientColor} a copy of the gradient color
-	 */
-	clone: function() {
-		return new GradientColor(this._gradient, this._origin,
-				this._destination, this._hilite);
-	},
-
-	_serialize: function(options, dictionary) {
-		var values = [ this._gradient, this._origin, this._destination ];
-		if (this._hilite)
-			values.push(this._hilite);
-		return Base.serialize(values, options, true, dictionary);
-	},
-
-	/**
-	 * The gradient object describing the type of gradient and the stops.
-	 *
-	 * @type Gradient
-	 * @bean
-	 */
-	getGradient: function() {
-		return this._gradient;
-	},
-
-	setGradient: function(gradient) {
-		this._gradient = gradient;
-		gradient._addOwner(this);
-		this._changed();
-	},
-
-	/**
-	 * The origin point of the gradient.
-	 *
-	 * @type Point
-	 * @bean
-	 *
-	 * @example {@paperscript height=200}
-	 * // Move the origin point of the gradient, by moving your mouse over
-	 * // the view below:
-	 *
-	 * // 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']);
-	 *
-	 * // Have the gradient color run from the top left point of the view,
-	 * // to the bottom right point of the view:
-	 * var from = view.bounds.topLeft;
-	 * var to = view.bounds.bottomRight;
-	 * var gradientColor = new Color(gradient, from, to);
-	 * path.fillColor = gradientColor;
-	 *
-	 * function onMouseMove(event) {
-	 * 	// Set the origin point of the path's gradient color
-	 * 	// to the position of the mouse:
-	 * 	path.fillColor.origin = event.point;
-	 * }
-	 *
-	 */
-	getOrigin: function() {
-		return this._origin;
-	},
-
-	setOrigin: function(origin) {
-		this._origin = Point.read(arguments, 0, 0, true); // clone
-		this._changed();
-	},
-
-	/**
-	 * The destination point of the gradient.
-	 *
-	 * @type Point
-	 * @bean
-	 *
-	 * @example {@paperscript height=300}
-	 * // Move the destination point of the gradient, by moving your mouse over
-	 * // the view below:
-	 *
-	 * // Create a circle shaped path at the center of the view,
-	 * // using 40% of the height of the view as its radius
-	 * // and fill it with a radial gradient color:
-	 * var path = new Path.Circle({
-	 * 	center: view.center,
-	 * 	radius: view.bounds.height * 0.4
-	 * });
-	 *
-	 * var gradient = new Gradient(['yellow', 'red', 'black'], true);
-	 * var from = view.center;
-	 * var to = view.bounds.bottomRight;
-	 * var gradientColor = new Color(gradient, from, to);
-	 * path.fillColor = gradientColor;
-	 *
-	 * function onMouseMove(event) {
-	 * 	// Set the origin point of the path's gradient color
-	 * 	// to the position of the mouse:
-	 * 	path.fillColor.destination = event.point;
-	 * }
-	 */
-	getDestination: function() {
-		return this._destination;
-	},
-
-	setDestination: function(destination) {
-		this._destination = Point.read(arguments, 0, 0, true); // clone
-		this._changed();
-	},
-
-	/**
-	 * The hilite point of the gradient.
-	 *
-	 * @type Point
-	 * @bean
-	 *
-	 * @example {@paperscript height=300}
-	 * // Create a circle shaped path at the center of the view,
-	 * // using 40% of the height of the view as its radius
-	 * // and fill it with a radial gradient color:
-	 * var path = new Path.Circle({
-	 * 	center: view.center,
-	 * 	radius: view.bounds.height * 0.4
-	 * });
-	 * 
-	 * var gradient = new Gradient(['yellow', 'red', 'black'], true);
-	 * var from = path.position;
-	 * var to = path.bounds.rightCenter;
-	 * var gradientColor = new Color(gradient, from, to);
-	 * 
-	 * path.fillColor = gradientColor;
-	 * 
-	 * function onMouseMove(event) {
-	 * 	// Set the origin hilite of the path's gradient color
-	 * 	// to the position of the mouse:
-	 * 	path.fillColor.hilite = event.point;
-	 * }
-	 */
-	getHilite: function() {
-		return this._hilite;
-	},
-
-	setHilite: function(hilite) {
-		this._hilite = Point.read(arguments, 0, 0, true); // clone
-		this._changed();
-	},
-
-	toCanvasStyle: function(ctx) {
-		if (this._canvasGradient)
-			return this._canvasGradient;
-		var stops = this._gradient._stops,
-			origin = this._origin,
-			destination = this._destination,
-			gradient;
-		if (this._gradient._radial) {
-			var radius = destination.getDistance(origin),
-				hilite = this._hilite;
-			if (hilite) {
-				var vector = hilite.subtract(origin);
-				if (vector.getLength() > radius)
-					hilite = origin.add(vector.normalize(radius - 0.1));
-			}
-			var start = hilite || origin;
-			gradient = ctx.createRadialGradient(start.x, start.y,
-					0, origin.x, origin.y, radius);
-		} else {
-			gradient = ctx.createLinearGradient(origin.x, origin.y,
-					destination.x, destination.y);
-		}
-		for (var i = 0, l = stops.length; i < l; i++) {
-			var stop = stops[i];
-			gradient.addColorStop(stop._rampPoint, stop._color.toCss());
-		}
-		return this._canvasGradient = gradient;
-	},
-
-	/**
-	 * Checks if the gradient color has the same properties as that of the
-	 * supplied one.
-	 *
-	 * @param {GradientColor} color
-	 * @return {@true the GradientColor is the same}
-	 */
-	equals: function(color) {
-		return color === this || color && color._type === this._type
-				&& this._gradient.equals(color._gradient)
-				&& this._origin.equals(color._origin)
-				&& this._destination.equals(color._destination);
-	},
-
-	/**
-	 * Transform the gradient color by the specified matrix.
-	 *
-	 * @param {Matrix} matrix the matrix to transform the gradient color by
-	 */
-	transform: function(matrix) {
-		matrix._transformPoint(this._origin, this._origin, true);
-		matrix._transformPoint(this._destination, this._destination, true);
-		if (this._hilite)
-			matrix._transformPoint(this._hilite, this._hilite, true);
-	}
-});
-