From d60b739ae231d9b2cfd601352568fc263259c364 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Mon, 20 Jun 2011 14:14:08 +0100 Subject: [PATCH 1/6] Remove comas. --- src/text/CharacterStyle.js | 2 +- src/text/ParagraphStyle.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/text/CharacterStyle.js b/src/text/CharacterStyle.js index 69a4e41f..8485550f 100644 --- a/src/text/CharacterStyle.js +++ b/src/text/CharacterStyle.js @@ -20,7 +20,7 @@ var CharacterStyle = this.CharacterStyle = PathStyle.extend({ _defaults: { fontSize: 10, font: 'sans-serif' - }, + } /** * 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..871056c7 100644 --- a/src/text/ParagraphStyle.js +++ b/src/text/ParagraphStyle.js @@ -19,7 +19,7 @@ var ParagraphStyle = this.ParagraphStyle = Style.extend({ _defaults: { justification: 'left' - }, + } /** * ParagraphStyle objects don't need to be created directly. Just pass an From 811f39f30e86914581c153ab9cbcf62fd3cdcd78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Mon, 20 Jun 2011 14:16:59 +0100 Subject: [PATCH 2/6] Remove redraw() command. --- examples/Tools/Vektor.html | 1 - 1 file changed, 1 deletion(-) 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) { From 2c68e7e58f4812e9218411d1bd78d9cb04ab0a8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Mon, 20 Jun 2011 14:25:27 +0100 Subject: [PATCH 3/6] Use faster Function#call() when arguments are clear. --- src/item/Layer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/item/Layer.js b/src/item/Layer.js index 8fcffc46..ee926df2 100644 --- a/src/item/Layer.js +++ b/src/item/Layer.js @@ -43,7 +43,7 @@ var Layer = this.Layer = Group.extend({ this._project = paper.project; // Push it onto project.layers and set index: this._index = this._project.layers.push(this) - 1; - this.base.apply(this, arguments); + this.base.call(this, items); this.activate(); }, From c1fcd6f3bb55112f630261adc0fcd006ffaf61fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Mon, 20 Jun 2011 14:27:54 +0100 Subject: [PATCH 4/6] Documentation: Convert more Array return types to Type[]. --- src/path/CompoundPath.js | 2 +- src/path/Path.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/path/Path.js b/src/path/Path.js index f427c217..4eb3046f 100644 --- a/src/path/Path.js +++ b/src/path/Path.js @@ -500,7 +500,7 @@ var Path = this.Path = PathItem.extend({ * * @name Path#removeSegments * @function - * @return {Array} an array containing the removed segments + * @return {Segment[]} an array containing the removed segments */ /** * Removes the segments from the specified {@code from} index to the From a45340d20f112cfa30c7ab33e099e0069378dae9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Mon, 20 Jun 2011 14:37:09 +0100 Subject: [PATCH 5/6] Revert previous change since arguments.length is wrong when parameters are undefined when using Function#call. --- src/item/Layer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/item/Layer.js b/src/item/Layer.js index bfa913b9..e5cbe39c 100644 --- a/src/item/Layer.js +++ b/src/item/Layer.js @@ -43,7 +43,7 @@ var Layer = this.Layer = Group.extend({ this._project = paper.project; // Push it onto project.layers and set index: this._index = this._project.layers.push(this) - 1; - this.base.call(this, items); + this.base.apply(this, arguments); this.activate(); }, From a7e57ada8875d003a5e44e674544145773f84fa8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Mon, 20 Jun 2011 14:58:48 +0100 Subject: [PATCH 6/6] 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 | 122 +++++++++++++++---------------------- src/item/Style.js | 31 +++++++++- src/load.js | 4 +- src/paper.js | 4 +- src/project/Project.js | 10 +-- src/text/CharacterStyle.js | 4 +- src/text/ParagraphStyle.js | 4 +- 7 files changed, 89 insertions(+), 90 deletions(-) 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/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 8485550f..84a32aca 100644 --- a/src/text/CharacterStyle.js +++ b/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 diff --git a/src/text/ParagraphStyle.js b/src/text/ParagraphStyle.js index 871056c7..9f651cfa 100644 --- a/src/text/ParagraphStyle.js +++ b/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