support circle's etc..

Makefile

@@ -1,14 +1,15 @@
 
-build: components index.js template.js
-	@component build
+serve: node_modules
+	@node_modules/serve/bin/serve -Sloj
 
-template.js: template.html
-	@component convert $<
+node_modules: component.json package.json
+	@packin install \
+		--meta package.json,component.json,deps.json \
+		--folder node_modules \
+		--executables \
+		--no-retrace
 
-components: component.json
-	@component install --dev
+template.js: template.jade
+	@echo "module.exports = '`jade < $<`'" > $@
 
-clean:
-	rm -fr build components template.js
-
-.PHONY: clean
+.PHONY: serve

Readme.md

@@ -12,24 +12,31 @@
 ```js
 var graph = document.getElementById('graph');
 var svg = require('svg');
-var element = svg(graph);
+var draw = svg(graph);
 
-var box = element('rect')
-  .size(100)
-  .attr('fill', 'black')
+var box = draw.rect()
+  .fill('black')
   .rotate(20)
+  .size(100)
   .move(50);
 ```
 
 ## API
 
 ### SVG(parent)
 
-Initialize an svg document and attach it to `parent`. Returns an `Element`.
+Initialize an svg document and attach it to `parent`. Returns a `Group`.
 
-### Element(type)
+### Group\[element\]()
 
-  Initialize `Element`.
+  All native SVG element types have a corresponding method to create them. They will automatically be added to the current group. The supported element types are listed below with there argument lists. These arguments are optional though and only there to help keep large documents concise. Each method returns an Element.
+
+  - __ellipse(width, height, x, y)__
+  - __rect(width, height, x, y)__
+  - __line(x1, y1, x2, y2)__
+  - __circle(size, x, y)__
+  - __text(content)__
+  - __group()__
 
 ### Element.attr(key:String|Object, val:String)
 
@@ -39,9 +46,15 @@ Initialize an svg document and attach it to `parent`. Returns an `Element`.
 
   Set the width and height
 
-### Element.transform(obj:Object)
+### Element.transform(key:Object|String, [value]:Number)
+
+  Apply a set of transfomations to the element or get `this.transforms[key]`
 
-  Perform a transform on the element. Options include: `rotate`, `scale`, `skewX`, `skewY`, `translate`, `transform`.
+  ```js
+  element.transform({rotate: 20}) // set rotation
+  element.transform('rotate', 20) // set rotation
+  element.transform('rotate')     // get rotation
+  ```
 
 ### Element.move(left:String, top:String)
 
@@ -51,13 +64,33 @@ Initialize an svg document and attach it to `parent`. Returns an `Element`.
 
   Rotate the element
 
+### Element.radius(n:Number)
+
+  Set the elements radius. For rect's it will set the border-radius
+
 ### Element.scale(x:String, y:String)
 
   Scale the element
 
-## TODO
+### Element.fill(color)
+
+  Set the fill color. `color` can be any valid CSS color string
+
+### Element.stroke(color)
+
+  Set the stroke color
+
+### Element.cap(type)
+
+  Set the stroke linecap type to one of:
+
+  - butt
+  - round
+  - square
+
+### Element.dash(on, off)
 
-* move(), size() should also work with circle, ellipsis, etc.
+  Set the dash length
 
 ## License
 

circle.js

@@ -0,0 +1,25 @@
+
+var Element = require('./element')
+
+module.exports = Circle
+
+function Circle(el){
+  Element.call(this, el)
+}
+
+Element.extend(Circle)
+
+Circle.prototype.radius = function(n){
+  this.el.setAttribute('r', n)
+  return this
+}
+
+Circle.prototype.size = function(n){
+  return this.radius(n / 2)
+}
+
+Circle.prototype.move = function(x, y){
+  this.el.setAttribute('cx', x || 0)
+  this.el.setAttribute('cy', y || 0)
+  return this
+}

component.json

@@ -2,15 +2,27 @@
   "name": "svg",
   "repo": "matthewmueller/svg",
   "description": "low-level svg element helper",
-  "version": "0.0.2",
-  "keywords": ["svg"],
+  "keywords": [
+    "svg"
+  ],
   "dependencies": {
-    "component/domify" : "1.0.0"
+    "jkroso/alias-property": "0.1.0",
+    "yields/extensible": "0.1.0",
+    "component/domify": "1.0.1"
+  },
+  "development": {
+    "jkroso/serve": "1.5.1"
   },
-  "development": {},
-  "license": "MIT",
   "scripts": [
     "index.js",
+    "element.js",
+    "group.js",
+    "circle.js",
+    "ellipse.js",
+    "rect.js",
+    "line.js",
+    "text.js",
     "template.js"
-  ]
-}
+  ],
+  "license": "MIT"
+}

element.js

@@ -0,0 +1,197 @@
+
+var extensible = require('extensible')
+
+module.exports = Element
+
+/**
+ * default transformation
+ * @type {Object}
+ */
+
+var transforms = { x: 0, y: 0, scaleX: 1, scaleY: 1, rotate: 0, skewX: 0, skewY: 0 }
+
+/**
+ * Initialize `Element`
+ *
+ * @param {Element} type
+ * @return {Element}
+ * @api public
+ */
+
+function Element(el){
+  // TODO: make lazy property
+  this.transforms = Object.create(transforms)
+  this.el = el
+}
+
+/**
+ * add extend method
+ */
+
+extensible(Element)
+
+/**
+ * Get and set attributes
+ *
+ * @param {String|Object} key
+ * @param {String} val
+ * @api public
+ */
+
+Element.prototype.attr = function(key, val){
+  if (typeof key == 'object') for (val in key) this.attr(val, key[val])
+  else if (val === undefined) return this.el.getAttribute(key)
+  else this.el.setAttribute(key, val)
+  return this
+}
+
+/**
+ * Set the width and height
+ *
+ * @param {String} width
+ * @param {String} [height]
+ * @return {Element}
+ * @api public
+ */
+
+Element.prototype.size = function(width, height){
+  if (height == null) height = width
+  this.el.setAttribute('width', width)
+  this.el.setAttribute('height', height)
+  return this
+}
+
+/**
+ * Move
+ *
+ * @param {String} left
+ * @param {String} top
+ * @return {Element}
+ * @api public
+ */
+
+Element.prototype.move = function(x, y){
+  this.el.setAttribute('x', x || 0)
+  this.el.setAttribute('y', y || 0)
+  return this
+}
+
+/**
+ * Apply `transforms` or get `this.transforms[key]`
+ *
+ * @param {Object|String} key
+ * @param {Number} [value]
+ * @return {this}
+ * @api public
+ */
+
+Element.prototype.transform = function(key, value){
+  if (typeof key == 'object') {
+    for (var k in key) this.transforms[k] = key[k]
+  } else if (value == null) {
+    return this.transforms[key]
+  } else {
+    this.transforms[key] = value
+  }
+  return this.setTransform()
+}
+
+/**
+ * apply transforms to `this.el`
+ *
+ * @return {this}
+ * @api private
+ */
+
+Element.prototype.setTransform = function(){
+  var t = this.transforms
+  var str = ''
+
+  if (t.rotate) {
+    var box = this.bbox()
+    str += 'rotate(' + t.rotate + ','
+      + (t.cx != null ? t.cx : box.cx)  + ','
+      + (t.cy != null ? t.cy : box.cy)  + ') '
+  }
+  if (t.scaleX != 1 || t.scaleY != 1) {
+    str += 'scale(' + t.scaleX + ',' + t.scaleY + ') '
+  }
+  if (t.x || t.y) str += 'translate(' + t.x + ',' + t.y + ') '
+  if (t.skewX) str += 'skewX(' + t.skewX + ') '
+  if (t.skewY) str += 'skewY(' + t.skewY + ') '
+
+  return this.attr('transform', str)
+}
+
+/**
+ * Get the bounding box
+ *
+ * @return {Object}
+ * @api public
+ */
+
+Element.prototype.bbox = function(){
+  var box = this.el.getBBox()
+
+  return {
+    x:      box.x + this.transforms.x,
+    y:      box.y + this.transforms.y,
+    cx:     box.x + this.transforms.x + box.width  / 2,
+    cy:     box.y + this.transforms.y + box.height / 2,
+    width:  box.width,
+    height: box.height
+  }
+}
+
+/**
+ * Rotate the element
+ *
+ * @param {Number} deg
+ * @return {Element}
+ * @api public
+ */
+
+Element.prototype.rotate = function(deg){
+  this.transforms.rotate = deg || 0
+  return this.setTransform()
+}
+
+/**
+ * Scale the element
+ *
+ * @param {String} x
+ * @param {String} y
+ * @return {Element}
+ * @api public
+ */
+
+Element.prototype.scale = function(x, y){
+  this.transforms.scaleX = x
+  this.transforms.scaleY = y != null ? y : x
+  return this.setTransform()
+}
+
+Element.prototype.fill = function(color){
+  this.el.setAttribute('fill', color)
+  return this
+}
+
+Element.prototype.stroke = function(color){
+  this.el.setAttribute('stroke', color)
+  return this
+}
+
+Element.prototype.crisp = function(){
+  this.el.setAttribute('shape-rendering', 'crispEdges')
+  return this
+}
+
+Element.prototype.cap = function(type){
+  this.el.setAttribute('stroke-linecap', type || 'round')
+  return this
+}
+
+Element.prototype.dash = function(on, off){
+  this.el.setAttribute('stroke-dasharray', on + ', ' + off)
+  return this
+}