Merge remote branch 'origin/master'

examples/Tools/Vektor.html

@@ -178,7 +178,6 @@
 			vectorItem = null;
 		}
 		processVector(event, true);
-	//	document.redraw();
 	}
 
 	function onMouseDrag(event) {

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',
+	var defaults = {
-				'miterLimit', 'dashOffset','dashArray', 'fillColor'];
+		fillColor: undefined,
+		strokeColor: undefined,
+		strokeWidth: 1,
+		strokeCap: 'butt',
+		strokeJoin: 'miter',
+		miterLimit: 10,
+		dashOffset: 0,
+		dashArray: []
+	};
 
 	var strokeFlags = {
 		strokeWidth: true,
@@ -32,9 +38,71 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
 		miterLimit: true
 	};
 
-	var fields = {
+	return Base.each(defaults, function(value, key) {
-		// DOCS: why isn't the example code showing up?
+		var isColor = !!key.match(/Color$/),
-		/**
+			part = Base.capitalize(key),
+			set = 'set' + part,
+			get = 'get' + part;
+
+		this[set] = function(value) {
+			var children = this._item && this._item._children;
+			value = isColor ? Color.read(arguments) : value;
+			if (children) {
+				for (var i = 0, l = children.length; i < l; i++)
+					children[i]._style[set](value);
+			} else {
+				var old = this['_' + key];
+				if (old != value && !(old && old.equals && old.equals(value))) {
+					this['_' + key] = value;
+					if (isColor) {
+						if (old)
+							old._removeOwner(this._item);
+						if (value)
+							value._addOwner(this._item);
+					}
+					if (this._item) {
+						this._item._changed(Change.STYLE
+								| (strokeFlags[key] ? Change.STROKE : 0));
+					}
+				}
+			}
+			return this;
+		};
+
+		this[get] = function() {
+			var children = this._item && this._item._children,
+				style;
+			// If this item has children, walk through all of them and see if
+			// they all have the same style.
+			if (children) {
+				for (var i = 0, l = children.length; i < l; i++) {
+					var childStyle = children[i]._style[get]();
+					if (!style) {
+						style = childStyle;
+					} else if (style != childStyle && !(style && style.equals
+							&& style.equals(childStyle))) {
+						// If there is another item with a different style,
+						// the style is not defined:
+						// PORT: Change this in Scriptographer
+						// (currently returns null)
+						return undefined;
+					}
+				}
+				return style;
+			} else {
+				return this['_' + key];
+			}
+		};
+	}, {
+		_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.
@@ -63,98 +131,6 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
  * 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) {
-		var isColor = !!key.match(/Color$/),
-			part = Base.capitalize(key),
-			set = 'set' + part,
-			get = 'get' + part;
-
-		fields[set] = function(value) {
-			var children = this._item && this._item._children;
-			value = isColor ? Color.read(arguments) : value;
-			if (children) {
-				for (var i = 0, l = children.length; i < l; i++)
-					children[i]._style[set](value);
-			} else {
-				var old = this['_' + key];
-				if (old != value && !(old && old.equals && old.equals(value))) {
-					this['_' + key] = value;
-					if (isColor) {
-						if (old)
-							old._removeOwner(this._item);
-						if (value)
-							value._addOwner(this._item);
-					}
-					if (this._item) {
-						this._item._changed(Change.STYLE
-								| (strokeFlags[key] ? Change.STROKE : 0));
-					}
-				}
-			}
-			return this;
-		};
-
-		fields[get] = function() {
-			var children = this._item && this._item._children,
-				style;
-			// If this item has children, walk through all of them and see if
-			// they all have the same style.
-			if (children) {
-				for (var i = 0, l = children.length; i < l; i++) {
-					var childStyle = children[i]._style[get]();
-					if (!style) {
-						style = childStyle;
-					} else if (style != childStyle && !(style && style.equals
-							&& style.equals(childStyle))) {
-						// If there is another item with a different style,
-						// the style is not defined:
-						// PORT: Change this in Scriptographer
-						// (currently returns null)
-						return undefined;
-					}
-				}
-				return style;
-			} else {
-				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;
-});
-
 /**
  * {@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) {
+		// If the passed style object is also a Style, clone its clonable
-			this[key] = style && style[key] || value;
+		// 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/path/CompoundPath.js

@@ -21,7 +21,7 @@ var CompoundPath = this.CompoundPath = PathItem.extend({
 	 * Creates a new compound path item and places it in the active layer.
 	 * 
 	 * @constructs CompoundPath
-	 * @param {Array} [paths] the paths to place within the compound path.
+	 * @param {Path[]} [paths] the paths to place within the compound path.
 	 * 
 	 * @example {@paperscript}
 	 * // Create a circle shaped path with a hole in it:

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._currentStyle = new PathStyle();
-		this.setCurrentStyle({
-			strokeWidth: 1,
-			strokeCap: 'butt',
-			strokeJoin: 'miter',
-			miterLimit: 10,
-			dashOffset: 0,
-			dashArray: []
-		});
 		this._selectedItems = {};
 		this._selectedItemCount = 0;
 		// Activate straight away so paper.project is set, as required by

src/text/CharacterStyle.js

@@ -21,6 +21,8 @@ var CharacterStyle = this.CharacterStyle = PathStyle.extend({
 		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

@@ -20,6 +20,8 @@ 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