Add beginning of ObservedRectangle support and test it in animatedStar example.

examples/Animated/animatedStar.html

@@ -31,6 +31,7 @@
 			path.smooth();
 			var placedSymbol = new PlacedSymbol(path);
 			placedSymbol.position = center;
+			//placedSymbol.bounds.center = center;
 			layer.appendBottom(placedSymbol);
 		}
 

src/basic/Rectangle.js

@@ -266,3 +266,80 @@ var Rectangle = this.Rectangle = Base.extend({
 			};
 		}, { beans: true });
 });
+
+var ObservedRectangle = Rectangle.extend({
+	beans: true,
+
+	set: function(x, y, width, height) {
+		this._x = x;
+		this._y = y;
+		this._width = width;
+		this._height = height;
+		if (this._observer)
+			this._observer[this._set](this);
+		return this;
+	},
+
+	// TODO: Use loop to create these?
+	getX: function() {
+		return this._x;
+	},
+
+	setX: function(x) {
+		this._x = x;
+		this._observer[this._set](this);
+	},
+
+	getY: function() {
+		return this._y;
+	},
+
+	setY: function(y) {
+		this._y = y;
+		this._observer[this._set](this);
+	},
+
+	getWidth: function() {
+		return this._width;
+	},
+
+	setWidth: function(width) {
+		this._width = width;
+		this._observer[this._set](this);
+	},
+
+	getHeight: function() {
+		return this._height;
+	},
+
+	setHeight: function(height) {
+		this._height = height;
+		this._observer[this._set](this);
+	},
+
+	// TODO: Implement for all properties on ObservedRectangle using loop
+	setCenter: function(center) {
+		Rectangle.prototype.setCenter.apply(this, center);
+		this._observer[this._set](this);
+		return this;
+	},
+
+	statics: {
+		/**
+		 * Provide a faster creator for Points out of two coordinates that
+		 * does not rely on Point#initialize at all. This speeds up all math
+		 * operations a lot.
+		 */
+		create: function(observer, set, x, y, width, height) {
+			// Don't use the shorter form as we want absolute maximum
+			// performance here:
+			// return new Point(Point.dont).set(x, y);
+			// TODO: Benchmark and decide
+			var rect = new ObservedRectangle(ObservedRectangle.dont).set(x, y,
+					width, height);
+			rect._observer = observer;
+			rect._set = set;
+			return rect;
+		}
+	}
+});

src/item/Group.js

@@ -43,7 +43,8 @@ var Group = this.Group = Item.extend({
 				y2 = Math.max(rect2.y + rect2.height, y1 + y2 - y1);
 			}
 		}
-		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
+		return ObservedRectangle.create(this, 'setBounds',
+				x1, y1, x2 - x1, y2 - y1);
 	},
 
 	/**

src/item/PlacedSymbol.js

@@ -43,7 +43,9 @@ var PlacedSymbol = this.PlacedSymbol = Item.extend({
 	},
 
 	getBounds: function() {
-		return this.symbol._definition.getStrokeBounds(this.matrix);
+		var bounds = this.symbol._definition.getStrokeBounds(this.matrix, true);
+		return ObservedRectangle.create(this, 'setBounds',
+				bounds.x, bounds.y, bounds.width, bounds.height);
 	},
 
 	getStrokeBounds: function() {

src/path/CompoundPath.js

@@ -42,7 +42,8 @@ var CompoundPath = this.CompoundPath = PathItem.extend({
 				y2 = Math.max(rect2.y + rect2.height, y1 + y2 - y1);
 			}
 		}
-		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
+		return ObservedRectangle.create(this, 'setBounds',
+				x1, y1, x2 - x1, y2 - y1);
 	},
 
 	/**

src/path/Path.js

@@ -650,7 +650,8 @@ var Path = this.Path = PathItem.extend({
 			processSegment(segments[i]);
 		if (that.closed)
 			processSegment(first);
-	    return new Rectangle(min[0], min[1], max[0] - min[0], max[1] - min[1]);
+		return Rectangle.create(min[0], min[1],
+					max[0] - min[0], max[1] - min[1]);
 	}
 
 	function getPenPadding(radius, matrix) {
@@ -703,7 +704,9 @@ var Path = this.Path = PathItem.extend({
 		getBounds: function(/* matrix */) {
 			// Pass the matrix hidden from Bootstrap, so it still inject 
 			// getBounds as bean too.
-			return getBounds(this, arguments[0]);
+			var bounds = getBounds(this, arguments[0]);
+			return ObservedRectangle.create(this, 'setBounds',
+					bounds.x, bounds.y, bounds.width, bounds.height);
 		},
 
 		/**