More Docs

Docs/ART/ART.Group.md

@@ -0,0 +1,106 @@
+ART.Group {#ART-Group}
+======================
+
+ART.Group is used to combine shapes or other groups into hierarchies that can be
+transformed as a set.
+
+ART.Group implements [ART.Transform][] as a mixin which means it has all transform
+methods available for moving, scaling and rotating a shape.
+
+ART.Group method: constructor
+-----------------------------
+
+Creates a new group.
+
+### Syntax:
+
+	var group = new ART.Group([width, height]);
+
+### Arguments:
+
+1. width - (*number*, optional) The width of the shape in pixels.
+2. height - (*number*, optional) The height of the shape in pixels.
+
+The size is optional and defines a content box which can be scaled to fit a new
+size using the [resizeTo method](ART.Transform#ART-Transform:resizeTo).
+
+ART.Group method: inject {#ART-Group:inject}
+--------------------------------------------
+
+Injects a group into another group or [ART][] surface instance.
+
+This group is rendered in front of any existing content in the container.
+
+### Syntax:
+
+	group.inject(container);
+
+### Arguments:
+
+1. container - (*mixed*) an [ART][] surface instance or another ART.Group
+
+### Returns:
+
+* The ART.Group instance itself
+
+### Example:
+
+	var art = new ART(500, 500);
+	var group = new ART.Group().inject(art);
+
+ART.Group method: grab {#ART-Group:grab}
+----------------------------------------
+
+Grabs one or more groups or [ART.Shape][] instances and injects them into this group's
+content. The child instances are ejected from their current container.
+
+The new children are rendered in front of any current group content.
+
+### Syntax:
+
+	group.grab(child[, child[, ...]]);
+
+### Arguments:
+
+1. child - (*mixed*) a shape, text or another group instance
+
+### Returns:
+
+* The ART.Group instance itself
+
+### Example:
+
+	var art = new ART(500, 500);
+	var rectangle = new ART.Rectangle(400, 200).fill('black');
+	var circle = new ART.Ellipse(200).fill('red');
+	var group = new ART.Group()
+		.grab(rectangle, circle)
+		.inject(art);
+
+ART.Group method: eject {#ART-Group:eject}
+------------------------------------------
+
+Removes the group from it's current container. Leaving it free to be garbage collected
+or injected somewhere else.
+
+### Syntax:
+
+	group.eject();
+
+### Returns:
+
+* The ART.Group instance itself
+
+### Example:
+
+	var art = new ART(500, 500);
+	var group = new ART.Group().inject(art);
+	var square = new ART.Rectangle(200).fill('black').inject(group);
+	art.subscribe('click', function(){
+		group.eject();
+	});
+
+
+[ART]: ../ART/ART
+[ART.Transform]: ../ART/ART.Transform
+[ART.Shape]: ../ART/ART.Shape

Docs/ART/ART.Path.md

@@ -1,7 +1,15 @@
 ART.Path {#ART-Path}
 ====================
 
-ART.Path lets you draw paths which you could pass into [ART.Shape][].
+ART.Path lets you create and manipulate arbitrary paths which you could draw using [ART.Shape][].
+
+You can also use paths to place objects at various points along a path.
+
+You create a path by issues one or more commands which moves a pointer and draw lines from the
+previous position.
+
+A move command can be used to move the pointer without drawing a line. This effectively creates
+several sub-paths within a path.
 
 ART.Path method: constructor
 ----------------------------
@@ -16,21 +24,10 @@ ART.Path method: constructor
 	- *ART.Path* - If path is already an instance of ART.Path, it will copy the path.
 	- *string* - A SVG path that will be parsed by ART.Path
 
-
-ART.Path method: push {#ART-Path:push}
---------------------------------------
-
-// write me
-
-ART.Path method: reset {#ART-Path:reset}
---------------------------------------
-
-// write me
-
 ART.Path method: move {#ART-Path:move}
 --------------------------------------
 
-Moves the pointer relatively to the last point.
+Moves the pointer relatively to the last point without drawing a line.
 
 ### Syntax:
 
@@ -41,11 +38,15 @@ Moves the pointer relatively to the last point.
 1. x - (*number*) The amount of pixels in horizontal direction.
 2. y - (*number*) The amount of pixels in vertical direction.
 
+### Returns:
+
+* This ART.Path instance
+
 
 ART.Path method: moveTo {#ART-Path:moveTo}
 ------------------------------------------
 
-Moves the pointer to an absolute point.
+Moves the pointer to an absolute point without drawing a line.
 
 ### Syntax:
 
@@ -56,6 +57,10 @@ Moves the pointer to an absolute point.
 1. x - (*number*) The position in horizontal direction.
 2. y - (*number*) The position in vertical direction.
 
+### Returns:
+
+* This ART.Path instance
+
 
 ART.Path method: line {#ART-Path:line}
 --------------------------------------
@@ -71,11 +76,15 @@ Draws a line relatively from the last point.
 1. x - (*number*) The amount of pixels in horizontal direction.
 2. y - (*number*) The amount of pixels in vertical direction.
 
+### Returns:
+
+* This ART.Path instance
+
 
 ART.Path method: lineTo {#ART-Path:lineTo}
 ------------------------------------------
 
-Draws a line to an absolute point.
+Draws a line to an absolute point from the last point.
 
 ### Syntax:
 
@@ -86,6 +95,10 @@ Draws a line to an absolute point.
 1. x - (*number*) The position in horizontal direction.
 2. y - (*number*) The position in vertical direction.
 
+### Returns:
+
+* This ART.Path instance
+
 
 ART.Path method: curve {#ART-Path:curve}
 ----------------------------------------
@@ -114,23 +127,41 @@ ART.Path method: arcTo {#ART-Path:arcTo}
 ART.Path method: counterArc {#ART-Path:counterArc}
 --------------------------------------------------
 
-// write me
+Same as [arc](#ART-Path:arc) but the line is drawn counter-clockwise.
 
 
 ART.Path method: counterArcTo {#ART-Path:counterArcTo}
 ------------------------------------------------------
 
-// write me
+Same as [arcTo](#ART-Path:arcTo) but the line is drawn counter-clockwise.
 
 
 ART.Path method: close {#ART-Path:close}
 ----------------------------------------
 
-// write me
+Draws a line to the first point in the current sub-path and begins a new sub-path.
+
+### Syntax:
+
+	path.close();
+
+### Returns:
+
+* This ART.Path instance
+
+
+ART.Path method: reset {#ART-Path:reset}
+--------------------------------------
+
+Resets the current path to a blank path.
+
+### Syntax:
+
+	path.reset();
+
+### Returns:
 
+* This ART.Path instance, now empty
 
-All other methods
------------------
 
-// add me
-[ART.Shape]: /art/ART.Shape
+[ART.Shape]: /ART.Shape

Docs/ART/ART.Shape.md

@@ -1,8 +1,13 @@
 ART.Shape {#ART-Shape}
 ======================
 
-ART.Shape is usually used to inherit from. For example [ART.Shapes][] inherit from
-ART.Shape so each shape gets all common ART.Shape methods
+ART.Shape is used to draw arbitrary vector shapes from an [ART.Path][].
+
+ART.Shape implements [ART.Transform][] as a mixin which means it has all transform
+methods available for moving, scaling and rotating a shape.
+
+[ART.Shapes][] provides shortcuts to common shapes. These inherit from
+ART.Shape so each shape gets all common ART.Shape methods.
 
 ART.Shape method: constructor
 -----------------------------
@@ -19,6 +24,9 @@ Creates a new shape.
 2. width - (*number*, optional) The width of the shape in pixels.
 3. height - (*number*, optional) The height of the shape in pixels.
 
+The size is optional but should be specified on symbols. It defines
+the surface on which to draw a path. This can be use to scale the
+shape to fit a new size using the [resizeTo method](ART.Transform#ART-Transform:resizeTo).
 
 ART.Shape method: draw {#ART-Shape:draw}
 ----------------------------------------
@@ -27,7 +35,7 @@ Draws the provided path on the canvas.
 
 ### Syntax:
 
-	shape.draw(path, height, width);
+	shape.draw(path[, width, height]);
 
 ### Arguments:
 
@@ -39,11 +47,12 @@ Draws the provided path on the canvas.
 
 * The ART.Shape instance
 
-
 ART.Shape method: inject {#ART-Shape:inject}
 --------------------------------------------
 
-Injects a into another element or [ART][] instance.
+Injects a into a [ART.Group][] or [ART][] instance.
+
+This group is rendered in front of any existing content in the container.
 
 ### Syntax:
 
@@ -63,10 +72,35 @@ Injects a into another element or [ART][] instance.
 	var shape = new ART.Rectangle(400, 200).fill('black').inject(art);
 
 
-// TODO: the other methods
+ART.Shape method: eject {#ART-Shape:eject}
+------------------------------------------
 
-[ART]: /art/ART/ART
-[ART.Shape]: /art/ART/ART.Shape
-[ART.Shapes]: /art/ART/ART.Shapes
-[ART.Path]: /art/ART/ART.Path
+Removes the shape from it's current container. Leaving it free to be garbage collected
+or injected somewhere else.
+
+### Syntax:
+
+	shape.eject();
+
+### Returns:
+
+* The ART.Shape instance itself
+
+### Example:
+
+	var art = new ART(500, 500);
+	var square = new ART.Rectangle(200).fill('black').inject(group);
+	art.subscribe('click', function(){
+		square.eject();
+	});
+
+
+
+// TODO: the other methods
 
+[ART]: ../ART/ART
+[ART.Path]: ../ART/ART.Path
+[ART.Transform]: ../ART/ART.Transform
+[ART.Group]: ../ART/ART.Group
+[ART.Shape]: ../ART/ART.Shape
+[ART.Shapes]: ../Shapes/ART.Shapes