mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-07 13:22:07 -05:00
Move more getter / setter injection functionality from PathStyle to Style, to be shared among all Style classes.
This commit is contained in:
parent
a7e57ada88
commit
456bf7f2a9
3 changed files with 260 additions and 271 deletions
|
@ -38,7 +38,7 @@ var ChangeFlag = {
|
|||
var Change = {
|
||||
HIERARCHY: ChangeFlag.HIERARCHY | ChangeFlag.APPEARANCE,
|
||||
GEOMETRY: ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
|
||||
STROKE: ChangeFlag.STROKE | ChangeFlag.APPEARANCE,
|
||||
STROKE: ChangeFlag.STROKE | ChangeFlag.STYLE | ChangeFlag.APPEARANCE,
|
||||
STYLE: ChangeFlag.STYLE | ChangeFlag.APPEARANCE,
|
||||
ATTRIBUTE: ChangeFlag.ATTRIBUTE | ChangeFlag.APPEARANCE,
|
||||
CONTENT: ChangeFlag.CONTENT | ChangeFlag.APPEARANCE
|
||||
|
|
|
@ -14,13 +14,12 @@
|
|||
* All rights reserved.
|
||||
*/
|
||||
|
||||
var PathStyle = this.PathStyle = Style.extend(new function() {
|
||||
var PathStyle = this.PathStyle = Style.extend({
|
||||
/** @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 defaults = {
|
||||
// not supported.
|
||||
_defaults: {
|
||||
fillColor: undefined,
|
||||
strokeColor: undefined,
|
||||
strokeWidth: 1,
|
||||
|
@ -29,80 +28,18 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
|
|||
miterLimit: 10,
|
||||
dashOffset: 0,
|
||||
dashArray: []
|
||||
};
|
||||
|
||||
var strokeFlags = {
|
||||
strokeWidth: true,
|
||||
strokeCap: true,
|
||||
strokeJoin: true,
|
||||
miterLimit: true
|
||||
};
|
||||
|
||||
return Base.each(defaults, function(value, key) {
|
||||
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,
|
||||
},
|
||||
_flags: {
|
||||
strokeWidth: Change.STROKE,
|
||||
strokeCap: Change.STROKE,
|
||||
strokeJoin: Change.STROKE,
|
||||
miterLimit: Change.STROKE
|
||||
},
|
||||
_owner: Item,
|
||||
_style: '_style'
|
||||
});
|
||||
});
|
||||
|
||||
// TODO: See if these still show up?
|
||||
// DOCS: why isn't the example code showing 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.
|
||||
|
@ -131,7 +68,7 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
|
|||
* var path = new Path.Circle(new Point(80, 50), 30);
|
||||
* path.style = circleStyle;
|
||||
*/
|
||||
/**
|
||||
/**
|
||||
* {@grouptitle Stroke Style}
|
||||
*
|
||||
* The color of the stroke.
|
||||
|
@ -151,7 +88,7 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
|
|||
* circle.strokeColor = new RGBColor(1, 0, 0);
|
||||
*/
|
||||
|
||||
/**
|
||||
/**
|
||||
* The width of the stroke.
|
||||
*
|
||||
* @property
|
||||
|
@ -173,7 +110,7 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
|
|||
* circle.strokeWidth = 10;
|
||||
*/
|
||||
|
||||
/**
|
||||
/**
|
||||
* The shape to be used at the end of open {@link Path} items, when they
|
||||
* have a stroke.
|
||||
*
|
||||
|
@ -206,7 +143,7 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
|
|||
* line2.strokeCap = 'butt';
|
||||
*/
|
||||
|
||||
/**
|
||||
/**
|
||||
* The shape to be used at the corners of paths when they have a stroke.
|
||||
*
|
||||
* @property
|
||||
|
@ -235,7 +172,7 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
|
|||
* path3.strokeJoin = 'bevel';
|
||||
*/
|
||||
|
||||
/**
|
||||
/**
|
||||
* The dash offset of the stroke.
|
||||
*
|
||||
* @property
|
||||
|
@ -244,7 +181,7 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
|
|||
* @type Number
|
||||
*/
|
||||
|
||||
/**
|
||||
/**
|
||||
* Specifies an array containing the dash and gap lengths of the stroke.
|
||||
*
|
||||
* @example {@paperscript}
|
||||
|
@ -261,7 +198,7 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
|
|||
* @type Array
|
||||
*/
|
||||
|
||||
/**
|
||||
/**
|
||||
* The miter limit of the stroke.
|
||||
* When two line segments meet at a sharp angle and miter joins have been
|
||||
* specified for {@link #strokeJoin}, it is possible for the miter to extend
|
||||
|
@ -274,7 +211,7 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
|
|||
* @type Number
|
||||
*/
|
||||
|
||||
/**
|
||||
/**
|
||||
* {@grouptitle Fill Style}
|
||||
*
|
||||
* The fill color.
|
||||
|
@ -293,3 +230,4 @@ var PathStyle = this.PathStyle = Style.extend(new function() {
|
|||
* // Set the fill color of the circle to RGB red:
|
||||
* circle.fillColor = new RGBColor(1, 0, 0);
|
||||
*/
|
||||
});
|
||||
|
|
|
@ -19,7 +19,6 @@
|
|||
* PargraphStyle.
|
||||
*/
|
||||
var Style = Item.extend({
|
||||
|
||||
initialize: function(style) {
|
||||
// If the passed style object is also a Style, clone its clonable
|
||||
// fields rather than simply copying them.
|
||||
|
@ -44,17 +43,69 @@ var Style = Item.extend({
|
|||
// 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;
|
||||
var styleKey = src._style,
|
||||
flags = src._flags || {};
|
||||
src._owner.inject(Base.each(src._defaults, function(value, key) {
|
||||
var part = Base.capitalize(key),
|
||||
var isColor = !!key.match(/Color$/),
|
||||
part = Base.capitalize(key),
|
||||
set = 'set' + part,
|
||||
get = 'get' + part;
|
||||
// Simply extend src with these getters and setters, to be
|
||||
// injected into this class using this.base() further down.
|
||||
src[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][styleKey][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(flags[key] || Change.STYLE);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
};
|
||||
src[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)
|
||||
return this['_' + key];
|
||||
for (var i = 0, l = children.length; i < l; i++) {
|
||||
var childStyle = children[i][styleKey][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;
|
||||
};
|
||||
// Style-getters and setters for owner class:
|
||||
// 'this' = the Base.each() side-car = the object that is
|
||||
// returned from Base.each and injected into _owner above:
|
||||
this[set] = function(value) {
|
||||
this[style][set](value);
|
||||
this[styleKey][set](value);
|
||||
return this;
|
||||
};
|
||||
this[get] = function() {
|
||||
return this[style][get]();
|
||||
return this[styleKey][get]();
|
||||
};
|
||||
}, {}));
|
||||
return this.base(src);
|
||||
|
|
Loading…
Reference in a new issue