diff --git a/examples/Tools/Vektor.html b/examples/Tools/Vektor.html
index 82f6f959..ea43f71f 100644
--- a/examples/Tools/Vektor.html
+++ b/examples/Tools/Vektor.html
@@ -178,7 +178,6 @@
vectorItem = null;
}
processVector(event, true);
- // document.redraw();
}
function onMouseDrag(event) {
diff --git a/src/item/PathStyle.js b/src/item/PathStyle.js
index e783218d..95b071ae 100644
--- a/src/item/PathStyle.js
+++ b/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}
*
diff --git a/src/item/Style.js b/src/item/Style.js
index 687140f6..7eedcb80 100644
--- a/src/item/Style.js
+++ b/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);
}
}
});
diff --git a/src/load.js b/src/load.js
index 18ce62f8..541931ae 100644
--- a/src/load.js
+++ b/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',
diff --git a/src/paper.js b/src/paper.js
index 2a4ec1c2..9d91f58c 100644
--- a/src/paper.js
+++ b/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"
diff --git a/src/path/CompoundPath.js b/src/path/CompoundPath.js
index 6fa23036..481f2cce 100644
--- a/src/path/CompoundPath.js
+++ b/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:
diff --git a/src/project/Project.js b/src/project/Project.js
index 5ce729c5..24ecde44 100644
--- a/src/project/Project.js
+++ b/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
diff --git a/src/text/CharacterStyle.js b/src/text/CharacterStyle.js
index 69a4e41f..84a32aca 100644
--- a/src/text/CharacterStyle.js
+++ b/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
diff --git a/src/text/ParagraphStyle.js b/src/text/ParagraphStyle.js
index 7d38e41c..9f651cfa 100644
--- a/src/text/ParagraphStyle.js
+++ b/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