Implement Style#selectedColor and Item#selectedColor as a way to control appearance of selections.

Closes #219.
This commit is contained in:
Jürg Lehni 2013-06-12 14:17:34 -07:00
parent 9977ec5c28
commit b581f8b33e
3 changed files with 29 additions and 2 deletions

View file

@ -2013,6 +2013,17 @@ var Item = Base.extend(Callback, /** @lends Item# */{
* circle.fillColor = new Color(1, 0, 0);
*/
/**
* {@grouptitle Selection Style}
*
* The color the item is highlighted with when selected. If the item does
* not specify its own color, the color defined by its layer is used instead.
*
* @name Style#selectedColor
* @property
* @type Color
*/
// DOCS: Document the different arguments that this function can receive.
/**
* {@grouptitle Transform Functions}

View file

@ -315,12 +315,16 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
if (this._selectedItemCount > 0) {
ctx.save();
ctx.strokeWidth = 1;
// TODO: use Layer#color
ctx.strokeStyle = ctx.fillStyle = '#009dec';
for (var id in this._selectedItems) {
var item = this._selectedItems[id];
if (item._drawCount === this._drawCount
&& (item._drawSelected || item._boundsSelected)) {
// Allow definition of selected color on a per item and per
// layer level, with a fallback to #009dec
var color = item.getSelectedColor()
|| item.getLayer().getSelectedColor();
ctx.strokeStyle = ctx.fillStyle = color
? color.toCanvasStyle(ctx) : '#009dec';
var mx = item._globalMatrix;
if (item._drawSelected)
item._drawSelected(ctx, mx);

View file

@ -72,6 +72,7 @@ var Style = Base.extend(new function() {
// path styles
fillColor: undefined,
strokeColor: undefined,
selectedColor: undefined,
strokeWidth: 1,
strokeCap: 'butt',
strokeJoin: 'miter',
@ -408,6 +409,17 @@ var Style = Base.extend(new function() {
* circle.fillColor = new Color(1, 0, 0);
*/
/**
* {@grouptitle Selection Style}
*
* The color the item is highlighted with when selected. If the item does
* not specify its own color, the color defined by its layer is used instead.
*
* @name Style#selectedColor
* @property
* @type Color
*/
/**
* {@grouptitle Character Style}
*