Add change tracking to Gradient & GradientStop.

src/color/Gradient.js

@@ -33,6 +33,39 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
 		this.type = type || 'linear';
 	},
 
+	/**
+	 * Called by various setters whenever a gradient value changes
+	 */
+	_changed: function() {
+		// Loop through the gradient-colors that use this gradient and notify
+		// them, so they can notify the items they belong to.
+		for (var i = 0, l = this._owners && this._owners.length; i < l; i++)
+			this._owners[i]._changed();
+	},
+
+	/**
+	 * Called by GradientColor#initialize
+	 * This is required to pass on _changed() notifications to the _owners.
+	 */
+	_addOwner: function(color) {
+		if (!this._owners)
+			this._owners = [];
+		this._owners.push(color);
+	},
+
+	// TODO: Where and when should this be called:
+	/**
+	 * Called by GradientColor whenever this gradient stops being used.
+	 */
+	_removeOwner: function(color) {
+		var index = this._owners ? this._owners.indexOf(color) : -1;
+		if (index != -1) {
+			this._owners.splice(index, 1);
+			if (this._owners.length == 0)
+				delete this._owners;
+		}
+	},
+
 	/**
 	 * @return {Gradient} a copy of the gradient
 	 */
@@ -54,6 +87,13 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
 	},
 
 	setStops: function(stops) {
+		// If this gradient already contains stops, first remove
+		// this gradient as their owner.
+		if (this.stops) {
+			for (var i = 0, l = this._stops.length; i < l; i++) {
+				this._stops[i]._removeOwner(this);
+			}
+		}
 		if (stops.length < 2)
 			throw new Error(
 					'Gradient stop list needs to contain at least two stops.');
@@ -61,9 +101,11 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
 		// Now reassign ramp points if they were not specified.
 		for (var i = 0, l = this._stops.length; i < l; i++) {
 			var stop = this._stops[i];
+			stop._addOwner(this);
 			if (stop._defaultRamp)
 				stop.setRampPoint(i / (l - 1));
 		}
+		this._changed();
 	},
 
 	/**

src/color/GradientColor.js

@@ -84,6 +84,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
 	 */
 	initialize: function(gradient, origin, destination, hilite) {
 		this.gradient = gradient || new Gradient();
+		this.gradient._addOwner(this);
 		this.setOrigin(origin);
 		this.setDestination(destination);
 		if (hilite)

src/color/GradientStop.js

@@ -44,6 +44,7 @@ var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
 		}
 	},
 
+	// TODO: Do we really need to also clone the color here?
 	/**
 	 * @return {GradientColor} a copy of the gradient-stop
 	 */
@@ -51,6 +52,40 @@ var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
 		return new GradientStop(this._color.clone(), this._rampPoint);
 	},
 
+	/**
+	 * Called by various setters whenever a value changes
+	 */
+	_changed: function() {
+		// Loop through the gradients that use this stop and notify them about
+		// the change, so they can notify their gradient colors, which in turn
+		// will notify the items they are used in:
+		for (var i = 0, l = this._owners && this._owners.length; i < l; i++)
+			this._owners[i]._changed(Change.STYLE);
+	},
+
+	/**
+	 * Called by Gradient whenever this stop is used. This is required to pass 
+	 * on _changed() notifications to the _owners.
+	 */
+	_addOwner: function(gradient) {
+		if (!this._owners)
+			this._owners = [];
+		this._owners.push(gradient);
+	},
+
+	/**
+	 * Called by Gradient whenever this GradientStop is no longer used by it.
+	 */
+	_removeOwner: function(gradient) {
+		var index = this._owners ? this._owners.indexOf(gradient) : -1;
+		if (index != -1) {
+			this._owners.splice(index, 1);
+			if (this._owners.length == 0)
+				delete this._owners;
+		}
+	},
+
+
 	/**
 	 * The ramp-point of the gradient stop as a value between {@code 0} and
 	 * {@code 1}.
@@ -92,6 +127,7 @@ var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
 	setRampPoint: function(rampPoint) {
 		this._defaultRamp = rampPoint == null;
 		this._rampPoint = rampPoint || 0;
+		this._changed();
 	},
 
 	/**
@@ -129,7 +165,13 @@ var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
 	},
 
 	setColor: function(color) {
+		// If the stop already contained a color,
+		// remove it as an owner:
+		if (this._color)
+			this._color._removeOwner(this);
 		this._color = Color.read(arguments);
+		this._color._addOwner(this);
+		this._changed();
 	},
 
 	equals: function(stop) {