/**
Class for styling of SVG DOM nodes
@namespace canvas
@class Paint
@constructor
@param {Object} config
@example
var canvas = new ludo.canvas.Canvas({
renderTo:'myDiv'
});
var paint = new ludo.canvas.Paint({
'stroke-width' : 5,
'stroke-opacity' : .5,
'stroke-color' : '#DEF'
}, { className : 'MyClass' );
canvas.adoptDef(paint); // Appended to <defs> node
// create node and set "class" to paint
// alternative methods:
// paint.applyTo(node); and
// node.addClass(paint.getClassName());
var node = new ludo.canvas.Node('rect', { id:'myId2', 'class' : paint});
canvas.adopt(node);
// Paint object for all <rect> and <circle> tags:
var gradient = new ludo.canvas.Gradient({
id:'myGradient'
});
canvas.adopt(gradient);
gradient.addStop('0%', '#0FF');
gradient.addStop('100%', '#FFF', 0);
// New paint object applied to all <rect> and <circle> tags.
var paint = new ludo.canvas.Paint({
'stroke-width' : 5,
'fill' : gradient,
'stroke-opacity' : .5,
'stroke-color' : '#DEF'
}, { selectors : 'rect, circle' );
*/
ludo.canvas.Paint = new Class({
Extends:ludo.canvas.Node,
tagName:'style',
css:{},
nodes:[],
className:undefined,
tag:undefined,
cssPrefix : undefined,
mappings:{
'color':['stroke-color'],
'background-color':['fill-color'],
'opacity':['fill-opacity', 'stroke-opacity']
},
initialize:function (css, config) {
config = config || {};
this.className = config.className || 'css-' + String.uniqueID();
this.cssPrefix = config.selectors ? config.selectors : '.' + this.className;
if(config.selectors)delete config.selectors;
if(config.className)delete config.className;
this.parent(this.tagName, config);
if (css !== undefined)this.setStyles(css);
},
setStyles:function (styles) {
Object.each(styles, function (value, key) {
this.setStyleProperty(key, value);
}, this);
this.updateCssContent();
},
/**
Update a css style
@method setStyle
@param {String} style
@param {String|Number}value
@example
var paint = new ludo.canvas.Paint({
css:{
'stroke-opacity' : 0.5
}
});
canvas.adopt(paint);
paint.setStyle('stroke-opacity', .2);
*/
setStyle:function (style, value) {
this.setStyleProperty(style, value);
this.updateCssContent();
},
updateCssContent:function () {
var css = JSON.encode(this.css);
css = css.replace(/"/g,"");
css = css.replace(/,/g,";");
this.text(this.cssPrefix + css);
},
setStyleProperty:function (style, value) {
value = this.getRealValue(value);
if (this.mappings[style]) {
this.setMapped(style, value);
} else {
this.css[style] = value;
}
},
setMapped:function (style, value) {
for (var i = 0; i < this.mappings[style].length; i++) {
var m = this.mappings[style][i];
this.css[m] = value;
}
},
/**
* Return value of a css style
* @method getStyle
* @param {String} style
* @return {String|Number} value
*/
getStyle:function (style) {
if (this.mappings[style])style = this.mappings[style][0];
return this.css[style];
},
getRealValue:function (value) {
return value && value.id !== undefined ? 'url(#' + value.id + ')' : value;
},
/**
* Apply css to a SVG node. This is done by adding CSS class to the node
* @method applyTo
* @param {canvas.Node} node
*/
applyTo:function (node) {
ludo.canvasEngine.addClass(node.el ? node.el : node, this.className);
},
/**
* Returns class name of Paint object
* @method getClassName
* @return {String} className
*/
getClassName:function () {
return this.className;
},
getUrl:function(){
return this.className;
}
});