Big refactoring of the way Style objects are linked to their owning classes, implemented in a way that works across all sub classes.

src/item/PathStyle.js

@@ -15,15 +15,21 @@
  */
 
 var PathStyle = this.PathStyle = Style.extend(new function() {
-	/** @lends PathStyle# */
-
 	// windingRule / resolution / fillOverprint / strokeOverprint are currently
 	// not supported. The full list of properties would be:
 	//	['windingRule', 'resolution', 'strokeColor', 'strokeWidth',
 	//		'strokeCap', 'strokeJoin', 'miterLimit', 'dashOffset','dashArray',
 	//		'strokeOverprint', 'fillColor', 'fillOverprint'],
-	var keys = ['strokeColor', 'strokeWidth', 'strokeCap', 'strokeJoin',
-				'miterLimit', 'dashOffset','dashArray', 'fillColor'];
+	var defaults = {
+		fillColor: undefined,
+		strokeColor: undefined,
+		strokeWidth: 1,
+		strokeCap: 'butt',
+		strokeJoin: 'miter',
+		miterLimit: 10,
+		dashOffset: 0,
+		dashArray: []
+	};
 
 	var strokeFlags = {
 		strokeWidth: true,
@@ -32,64 +38,13 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
 		miterLimit: true
 	};
 
-	var fields = {
-		// DOCS: why isn't the example code showing up?
-		/**
-		 * PathStyle objects don't need to be created directly. Just pass an
-		 * object to {@link Item#style} or {@link Project#currentStyle}, it will
-		 * be converted to a PathStyle object internally.
-		 * 
-		 * @constructs PathStyle
-		 * @param {object} style
-		 * 
-		 * @class PathStyle is used for changing the visual styles of items
-		 * contained within a Paper.js project and is returned by
-		 * {@link Item#style} and {@link Project#currentStyle}.
-		 * 
-		 * All properties of PathStyle are also reflected directly in {@link Item},
-		 * i.e.: {@link Item#fillColor}.
-		 * 
-		 * To set multiple style properties in one go, you can pass an object to
-		 * {@link Item#style}. This is a convenient way to define a style once and
-		 * apply it to a series of items:
-		 * 
-		 * @classexample {@paperscript}
-		 * var circleStyle = {
-		 * 	fillColor: new RGBColor(1, 0, 0),
-		 * 	strokeColor: 'black',
-		 * 	strokeWidth: 5
-		 * };
-		 * 
-		 * var path = new Path.Circle(new Point(80, 50), 30);
-		 * path.style = circleStyle;
-		 */
-		initialize: function(style) {
-			// If the passed style object is a PathStyle, clone its clonable
-			// fields rather than simply copying them.
-			var clone = style instanceof PathStyle;
-			// Note: This relies on bean getters and setters that get implicetly
-			// called when getting from style[key] and setting on this[key].
-			for (var i = 0, l = style && keys.length; i < l; i++) {
-				var key = keys[i],
-					value = style[key];
-				if (value !== undefined) {
-					this[key] = value && clone && value.clone
-							? value.clone() : value;
-				}
-			}
-			// Let Style#initialize handle the defaults:
-			if (this._defaults)
-				this.base(style);
-		}
-	};
-
-	Item.inject(Base.each(keys, function(key) {
+	return Base.each(defaults, function(value, key) {
 		var isColor = !!key.match(/Color$/),
 			part = Base.capitalize(key),
 			set = 'set' + part,
 			get = 'get' + part;
 
-		fields[set] = function(value) {
+		this[set] = function(value) {
 			var children = this._item && this._item._children;
 			value = isColor ? Color.read(arguments) : value;
 			if (children) {
@@ -114,7 +69,7 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
 			return this;
 		};
 
-		fields[get] = function() {
+		this[get] = function() {
 			var children = this._item && this._item._children,
 				style;
 			// If this item has children, walk through all of them and see if
@@ -138,23 +93,44 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
 				return this['_' + key];
 			}
 		};
-
-		// Style-getters and setters for Item:
-		// 'this' = the Base.each() side-car = the object that is returned from
-		// Base.each and injected into Item above:
-		this[set] = function(value) {
-			this._style[set](value);
-			return this;
-		};
-
-		this[get] = function() {
-			return this._style[get]();
-		};
-	}, {}));
-
-	return fields;
+	}, {
+		_defaults: defaults,
+		_owner: Item,
+		_style: '_style'
+	});
 });
 
+// TODO: See if these still show up?
+// DOCS: why isn't the example code showing up?
+/**
+ * PathStyle objects don't need to be created directly. Just pass an
+ * object to {@link Item#style} or {@link Project#currentStyle}, it will
+ * be converted to a PathStyle object internally.
+ * 
+ * @constructs PathStyle
+ * @param {object} style
+ * 
+ * @class PathStyle is used for changing the visual styles of items
+ * contained within a Paper.js project and is returned by
+ * {@link Item#style} and {@link Project#currentStyle}.
+ * 
+ * All properties of PathStyle are also reflected directly in {@link Item},
+ * i.e.: {@link Item#fillColor}.
+ * 
+ * To set multiple style properties in one go, you can pass an object to
+ * {@link Item#style}. This is a convenient way to define a style once and
+ * apply it to a series of items:
+ * 
+ * @classexample {@paperscript}
+ * var circleStyle = {
+ * 	fillColor: new RGBColor(1, 0, 0),
+ * 	strokeColor: 'black',
+ * 	strokeWidth: 5
+ * };
+ * 
+ * var path = new Path.Circle(new Point(80, 50), 30);
+ * path.style = circleStyle;
+ */
 /**
  * {@grouptitle Stroke Style}
  * 

src/item/Style.js

@@ -21,8 +21,15 @@
 var Style = Item.extend({
 
 	initialize: function(style) {
-		return Base.each(this._defaults || {}, function(value, key) {
-			this[key] = style && style[key] || value;
+		// If the passed style object is also a Style, clone its clonable
+		// fields rather than simply copying them.
+		var clone = style instanceof Style;
+		// Note: This relies on bean getters and setters that get implicetly
+		// called when getting from style[key] and setting on this[key].
+		return Base.each(this._defaults, function(value, key) {
+			value = style && style[key] || value;
+			this[key] = value && clone && value.clone
+					? value.clone() : value;
 		}, this);
 	},
 
@@ -31,6 +38,26 @@ var Style = Item.extend({
 			var style = new this(this.dont);
 			style._item = item;
 			return style;
+		},
+
+		extend: function(src) {
+			// Inject style getters and setters into the 'owning' class, which
+			// redirect calls to the linked style objects through their internal
+			// property on the instances of that class, as defined by _style.
+			var style = src._style;
+			src._owner.inject(Base.each(src._defaults, function(value, key) {
+				var part = Base.capitalize(key),
+					set = 'set' + part,
+					get = 'get' + part;
+				this[set] = function(value) {
+					this[style][set](value);
+					return this;
+				};
+				this[get] = function() {
+					return this[style][get]();
+				};
+			}, {}));
+			return this.base(src);
 		}
 	}
 });

src/load.js

@@ -59,10 +59,10 @@ var sources = [
 	'src/path/PathFlattener.js',
 	'src/path/PathFitter.js',
 
-	'src/text/ParagraphStyle.js',
-	'src/text/CharacterStyle.js',
 	'src/text/TextItem.js',
 	'src/text/PointText.js',
+	'src/text/ParagraphStyle.js',
+	'src/text/CharacterStyle.js',
 
 	'src/color/Color.js',
 	'src/color/GradientColor.js',

src/paper.js

@@ -79,10 +79,10 @@ var paper = new function() {
 //#include "path/PathFlattener.js"
 //#include "path/PathFitter.js"
 
-//#include "text/ParagraphStyle.js"
-//#include "text/CharacterStyle.js"
 //#include "text/TextItem.js"
 //#include "text/PointText.js"
+//#include "text/ParagraphStyle.js"
+//#include "text/CharacterStyle.js"
 
 //#include "color/Color.js"
 //#include "color/GradientColor.js"

src/project/Project.js

@@ -38,15 +38,7 @@ var Project = this.Project = Base.extend({
 		this._scope = paper;
 		// Push it onto this._scope.projects and set index:
 		this._index = this._scope.projects.push(this) - 1;
-		this._currentStyle = PathStyle.create(null);
-		this.setCurrentStyle({
-			strokeWidth: 1,
-			strokeCap: 'butt',
-			strokeJoin: 'miter',
-			miterLimit: 10,
-			dashOffset: 0,
-			dashArray: []
-		});
+		this._currentStyle = new PathStyle();
 		this._selectedItems = {};
 		this._selectedItemCount = 0;
 		// Activate straight away so paper.project is set, as required by

src/text/CharacterStyle.js

@@ -20,7 +20,9 @@ var CharacterStyle = this.CharacterStyle = PathStyle.extend({
 	_defaults: {
 		fontSize: 10,
 		font: 'sans-serif'
-	}
+	},
+	_owner: TextItem,
+	_style: '_characterStyle'
 
 	/**
 	 * CharacterStyle objects don't need to be created directly. Just pass an

src/text/ParagraphStyle.js

@@ -19,7 +19,9 @@ var ParagraphStyle = this.ParagraphStyle = Style.extend({
 
 	_defaults: {
 		justification: 'left'
-	}
+	},
+	_owner: TextItem,
+	_style: '_paragraphStyle'
 
 	/**
 	 * ParagraphStyle objects don't need to be created directly. Just pass an