From a5f05c90f56083604f6605c06820e6b338896639 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Thu, 24 Dec 2015 16:32:08 +0100 Subject: [PATCH] Rename #windingRule to #fillRule. ...keeping deprecated aliases on Style and Item around for now. Closes #858 --- src/item/Item.js | 63 +++++++++++++++++++++++++++++++++------- src/item/Shape.js | 2 +- src/path/CompoundPath.js | 2 +- src/path/Path.js | 2 +- src/path/PathItem.js | 4 +-- src/style/Style.js | 57 +++++++++++++++++++++++++----------- 6 files changed, 98 insertions(+), 32 deletions(-) diff --git a/src/item/Item.js b/src/item/Item.js index 5ee1054c..3aea710b 100644 --- a/src/item/Item.js +++ b/src/item/Item.js @@ -2815,16 +2815,6 @@ var Item = Base.extend(Emitter, /** @lends Item# */{ * @type Number */ - /** - * The winding-rule with which the shape gets filled. Please note that only - * modern browsers support winding-rules other than {@code 'nonzero'}. - * - * @name Item#windingRule - * @property - * @default 'nonzero' - * @type String('nonzero', 'evenodd') - */ - /** * {@grouptitle Fill Style} * @@ -2848,6 +2838,59 @@ var Item = Base.extend(Emitter, /** @lends Item# */{ * circle.fillColor = new Color(1, 0, 0); */ + /** + * The fill-rule with which the shape gets filled. Please note that only + * modern browsers support fill-rules other than {@code 'nonzero'}. + * + * @name Item#fillRule + * @property + * @default 'nonzero' + * @type String('nonzero', 'evenodd') + */ + + /** + * {@grouptitle Shadow Style} + * + * The shadow color. + * + * @property + * @name Style#shadowColor + * @type Color + * + * @example {@paperscript} + * // Creating a circle with a black shadow: + * + * var circle = new Path.Circle({ + * center: [80, 50], + * radius: 35, + * fillColor: 'white', + * // Set the shadow color of the circle to RGB black: + * shadowColor: new Color(0, 0, 0), + * // Set the shadow blur radius to 12: + * shadowBlur: 12, + * // Offset the shadow by { x: 5, y: 5 } + * shadowOffset: new Point(5, 5) + * }); + */ + + /** + * The shadow's blur radius. + * + * @property + * @default 0 + * @name Style#shadowBlur + * @type Number + */ + + /** + * The shadow's offset. + * + * @property + * @default 0 + * @name Style#shadowOffset + * @type Point + */ + // TODO: Find a better name than selectedColor. It should also be used for // guides, etc. /** diff --git a/src/item/Shape.js b/src/item/Shape.js index fd01c523..af19a001 100644 --- a/src/item/Shape.js +++ b/src/item/Shape.js @@ -255,7 +255,7 @@ var Shape = Item.extend(/** @lends Shape# */{ if (!dontPaint && (hasFill || hasStroke)) { this._setStyles(ctx); if (hasFill) { - ctx.fill(style.getWindingRule()); + ctx.fill(style.getFillRule()); ctx.shadowColor = 'rgba(0,0,0,0)'; } if (hasStroke) diff --git a/src/path/CompoundPath.js b/src/path/CompoundPath.js index e8eea33b..cfb8e7ce 100644 --- a/src/path/CompoundPath.js +++ b/src/path/CompoundPath.js @@ -297,7 +297,7 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{ this._setStyles(ctx); var style = this._style; if (style.hasFill()) { - ctx.fill(style.getWindingRule()); + ctx.fill(style.getFillRule()); ctx.shadowColor = 'rgba(0,0,0,0)'; } if (style.hasStroke()) diff --git a/src/path/Path.js b/src/path/Path.js index 572655c8..c059b3d5 100644 --- a/src/path/Path.js +++ b/src/path/Path.js @@ -2198,7 +2198,7 @@ new function() { // Scope for drawing // or stroke, there is no need to continue. this._setStyles(ctx); if (hasFill) { - ctx.fill(style.getWindingRule()); + ctx.fill(style.getFillRule()); // If shadowColor is defined, clear it after fill, so it // won't be applied to both fill and stroke. If the path is // only stroked, we don't have to clear it. diff --git a/src/path/PathItem.js b/src/path/PathItem.js index 79dd244c..0bd2c199 100644 --- a/src/path/PathItem.js +++ b/src/path/PathItem.js @@ -298,12 +298,12 @@ var PathItem = Item.extend(/** @lends PathItem# */{ var ctx = CanvasProvider.getContext(1, 1); // Use dontFinish to tell _draw to only produce geometries for hit-test. this._draw(ctx, new Base({ dontFinish: true })); - var res = ctx.isPointInPath(point.x, point.y, this.getWindingRule()); + var res = ctx.isPointInPath(point.x, point.y, this.getFillRule()); CanvasProvider.release(ctx); return res; /*#*/ } else { // !__options.nativeContains && __options.booleanOperations var winding = this._getWinding(point, false, true); - return !!(this.getWindingRule() === 'evenodd' ? winding & 1 : winding); + return !!(this.getFillRule() === 'evenodd' ? winding & 1 : winding); /*#*/ } // !__options.nativeContains && __options.booleanOperations } diff --git a/src/style/Style.js b/src/style/Style.js index d4d0db31..b6dba87a 100644 --- a/src/style/Style.js +++ b/src/style/Style.js @@ -68,11 +68,12 @@ * */ var Style = Base.extend(new function() { - // windingRule / resolution / fillOverprint / strokeOverprint are currently + // fillRule / resolution / fillOverprint / strokeOverprint are currently // not supported. var defaults = { // Paths fillColor: undefined, + fillRule: 'nonzero', strokeColor: undefined, strokeWidth: 1, strokeCap: 'butt', @@ -81,7 +82,6 @@ var Style = Base.extend(new function() { miterLimit: 10, dashOffset: 0, dashArray: [], - windingRule: 'nonzero', // Shadows shadowColor: undefined, shadowBlur: 0, @@ -96,9 +96,8 @@ var Style = Base.extend(new function() { leading: null, // Paragraphs justification: 'left' - }; - - var flags = { + }, + flags = { strokeWidth: /*#=*/Change.STROKE, strokeCap: /*#=*/Change.STROKE, strokeJoin: /*#=*/Change.STROKE, @@ -111,20 +110,21 @@ var Style = Base.extend(new function() { font: /*#=*/Change.GEOMETRY, // deprecated, links to fontFamily leading: /*#=*/Change.GEOMETRY, justification: /*#=*/Change.GEOMETRY + }, + item = { + // Enforce creation of beans, as bean getters have hidden parameters, + // see _dontMerge argument below. + beans: true + }, + fields = { + _defaults: defaults, + // Override default fillColor for text items + _textDefaults: new Base(defaults, { + fillColor: new Color() // black + }), + beans: true }; - // Enforce creation of beans, as bean getters have hidden parameters, - // see _dontMerge argument below. - var item = { beans: true }, - fields = { - _defaults: defaults, - // Override default fillColor for text items - _textDefaults: new Base(defaults, { - fillColor: new Color() // black - }), - beans: true - }; - Base.each(defaults, function(value, key) { var isColor = /Color$/.test(key), isPoint = key === 'shadowOffset', @@ -227,6 +227,19 @@ var Style = Base.extend(new function() { }; }); + // Create aliases for deprecated properties. The lookup table contains the + // part after 'get' / 'set': + // TODO: Remove once deprecated long enough, after December 2016. + Base.each({ + Font: 'FontFamily', + WindingRule: 'FillRule' + }, function(value, key) { + var get = 'get' + key, + set = 'set' + key + fields[get] = item[get] = '#get' + value; + fields[set] = item[set] = '#set' + value; + }); + Item.inject(item); return fields; }, /** @lends Style# */{ @@ -508,6 +521,16 @@ var Style = Base.extend(new function() { * circle.fillColor = new Color(1, 0, 0); */ + /** + * The fill-rule with which the shape gets filled. Please note that only + * modern browsers support fill-rules other than {@code 'nonzero'}. + * + * @name Style#fillRule + * @property + * @default 'nonzero' + * @type String('nonzero', 'evenodd') + */ + /** * {@grouptitle Shadow Style} *