Implement change-notification in a proper way, using ChangeFlags that tell it what exactly has changed, and clearing caches accordingly.

src/item/ChangeFlags.js

@@ -0,0 +1,21 @@
+/*
+ * Paper.js
+ *
+ * This file is part of Paper.js, a JavaScript Vector Graphics Library,
+ * based on Scriptographer.org and designed to be largely API compatible.
+ * http://paperjs.org/
+ * http://scriptographer.org/
+ *
+ * Distributed under the MIT license. See LICENSE file for details.
+ *
+ * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+ * http://lehni.org/ & http://jonathanpuckey.com/
+ *
+ * All rights reserved.
+ */
+
+var ChangeFlags = {
+	PATH: 1, // Path geometry
+	STROKE: 2, // Stroke geometry
+	STYLE: 4 // Fille style or stroke color / dash
+};

src/item/Item.js

@@ -22,6 +22,12 @@ var Item = this.Item = Base.extend({
 		this.setStyle(this._document.getCurrentStyle());
 	},
 
+	_changed: function(flags) {
+		if (flags & ChangeFlags.PATH) {
+			delete this._position;
+		}
+	},
+
 	/**
 	 * When passed a document, copies the item to the document,
 	 * or duplicates it within the same document. When passed an item,

src/item/PathStyle.js

@@ -17,7 +17,13 @@
 var PathStyle = this.PathStyle = Base.extend(new function() {
 	var keys = ['windingRule', 'resolution', 'strokeColor', 'strokeWidth',
 			'strokeCap', 'strokeJoin', 'dashOffset','dashArray', 'miterLimit',
-			'strokeOverprint', 'fillColor', 'fillOverprint'];
+			'strokeOverprint', 'fillColor', 'fillOverprint'],
+		strokeFlags = {
+			strokeWidth: true,
+			strokeCap: true,
+			strokeJoin: true,
+			miterLimit: true
+		};
 
 	var fields = {
 		beans: true,
@@ -63,10 +69,10 @@ var PathStyle = this.PathStyle = Base.extend(new function() {
 				var old = this['_' + key];
 				if (old != value && !(old && old.equals && old.equals(value))) {
 					this['_' + key] = value;
-					// TODO: Tell _item what exactly has changed. Maybe introduce
-					// ChangeFlags, e.g. STROKE, COLOR, FILL, GEOMETRY, etc?
-					if (this._item && this._item._changed)
-						this._item._changed();
+					if (this._item) {
+						this._item._changed(ChangeFlags.STYLE
+							| (strokeFlags[key] ? ChangeFlags.STROKE : 0));
+					}
 				}
 			}
 			return this;

src/load.js

@@ -36,6 +36,7 @@ var sources = [
 	'src/document/Document.js',
 	'src/document/Symbol.js',
 
+	'src/item/ChangeFlags.js',
 	'src/item/Item.js',
 	'src/item/Group.js',
 	'src/item/Layer.js',

src/paper.js

@@ -100,6 +100,7 @@ Base.inject({
 //#include "document/Document.js"
 //#include "document/Symbol.js"
 
+//#include "item/ChangeFlags.js"
 //#include "item/Item.js"
 //#include "item/Group.js"
 //#include "item/Layer.js"

src/path/Path.js

@@ -28,13 +28,15 @@ var Path = this.Path = PathItem.extend({
 				|| typeof segments[0] !== 'object' ? arguments : segments);
 	},
 
-	_changed: function() {
-		// TODO: Implement ChangeFlags, e.g. STROKE, COLOR, FILL, GEOMETRY,
-		// and only clear caches if affected by change.
-		delete this._length;
-		delete this._bounds;
-		delete this._strokeBounds;
-		delete this._position;
+	_changed: function(flags) {
+		if (flags & ChangeFlags.PATH) {
+			delete this._length;
+			delete this._bounds;
+			delete this._position;
+			delete this._strokeBounds;
+		} else if (flags & ChangeFlags.STROKE) {
+			delete this._strokeBounds;
+		}
 	},
 
 	/**
@@ -114,7 +116,7 @@ var Path = this.Path = PathItem.extend({
 					this._curves[i = length - 1] = Curve.create(this,
 						this._segments[i], this._segments[0]);
 			}
-			this._changed();
+			this._changed(ChangeFlags.PATH);
 		}
 	},
 
@@ -129,7 +131,7 @@ var Path = this.Path = PathItem.extend({
 				this._segments[i]._transformCoordinates(matrix, coords, true);
 			}
 		}
-		this._changed();
+		this._changed(ChangeFlags.PATH);
 	},
 
 	/**
@@ -177,7 +179,7 @@ var Path = this.Path = PathItem.extend({
 			if (curve)
 				curve._segment1 = segments[index + amount];
 		}
-		this._changed();
+		this._changed(ChangeFlags.PATH);
 		return segs;
 	},
 
@@ -261,7 +263,7 @@ var Path = this.Path = PathItem.extend({
 			if (last && this._closed && (curve = curves[curves.length - 1]))
 				curve._segment2 = segments[0];
 		}
-		this._changed();
+		this._changed(ChangeFlags.PATH);
 		return removed;
 	},
 	
@@ -306,7 +308,6 @@ var Path = this.Path = PathItem.extend({
 			segment._handleIn = segment._handleOut;
 			segment._handleOut = handleIn;
 		}
-		this._changed();
 	},
 
 	join: function(path) {
@@ -341,7 +342,7 @@ var Path = this.Path = PathItem.extend({
 				last1.remove();
 				this.setClosed(true);
 			}
-			this._changed();
+			this._changed(ChangeFlags.PATH);
 			return true;
 		}
 		return false;

src/path/Segment.js

@@ -69,7 +69,7 @@ var Segment = this.Segment = Base.extend({
 					}
 				}
 			}
-			this._path._changed();
+			this._path._changed(ChangeFlags.PATH);
 		}
 	},