chaining SVG Shape creation lib
by khrome
HTML
<svg id="container" width="800" height="600" ></svg>
JavaScript
function convenience(object, property){
object[property] = function(value){
var args = Array.prototype.slice.apply(arguments, [0]);
args.unshift(property);
return this.attr.apply(this, args);
}
}
function copy(ob){
var dupe = {};
var prop;
for ( prop in ob ) dupe[prop] = ob[prop];
return dupe;
}
function Shape(type, options){
this.element = document.createElement(type);
}
Shape.prototype.attr = function(name, value){
//todo: cache value to reduce DOM interaction
console.log(name, value);
if(value === undefined){
return this.element.getAttribute(name);
}
this.element.setAttribute(name, value);
return this;
}
//attr convenience functions
convenience(Shape.prototype, 'fill');
convenience(Shape.prototype, 'stroke');
Shape.prototype.strokeWidth = function(color){ return this.attr('stroke-width', color); }
Shape.prototype.draw = function(canvas){
canvas.appendChild(this.element);
return this;
}
var Centered = {
center : function(x, y){
this.attr('x', x - Math.floor(this.attr('width')/2));
this.attr('y', y - Math.floor(this.attr('height')/2));
this.centered = {
x : x,
y : y
};
return this;
},
recenter : function(){
if(this.centered) return this.center(this.centered.x, this.centered.y);
return this;
}
};
var parent = Shape;
function Line(){
var args = Array.prototype.slice.apply(arguments, [0]);
args.unshift('line');
parent.apply(this, args);
}
Line.prototype = copy(Shape.prototype);
Line.prototype.constructor = Line;
convenience(Line.prototype, 'x1');
convenience(Line.prototype, 'y1');
convenience(Line.prototype, 'x2');
convenience(Line.prototype, 'y2');
function Square(){
var args = Array.prototype.slice.apply(arguments, [0])
args.unshift('rect');
parent.apply(this, args);
}
Square.prototype = copy(Shape.prototype);
Square.prototype.constructor =...