From 7e5cb1cc8191e3b6ac4e7eb9bece88069c0941df Mon Sep 17 00:00:00 2001
From: Jonathan Puckey <me@jonathanpuckey.com>
Date: Wed, 16 Feb 2011 22:35:17 +0100
Subject: [PATCH] Examples: clean up scripts list and add PathStyle.js.

---
 examples/Animated/RoundedRectangles.html | 15 ++++++++-------
 examples/Animated/animatedStar.html      | 17 ++++++++++++-----
 examples/Scripts/arcTo.html              | 13 +++++++++----
 examples/Scripts/circle.html             | 13 +++++++++----
 examples/Scripts/letter.html             | 13 +++++++++----
 examples/Scripts/lines.html              | 13 +++++++++----
 examples/Scripts/rectangle.html          | 13 +++++++++----
 examples/Scripts/roundRectangle.html     | 13 +++++++++----
 examples/Scripts/star.html               | 13 +++++++++----
 examples/Scripts/strokeJoin.html         | 13 +++++++++----
 examples/Tools/Circles.html              | 22 ++++++++++++----------
 examples/Tools/Clouds.html               | 22 ++++++++++++----------
 examples/Tools/Dripping Brush.html       | 22 ++++++++++++----------
 examples/Tools/Fancy Brush.html          | 22 ++++++++++++----------
 examples/Tools/Grid.html                 | 22 ++++++++++++----------
 examples/Tools/MultiLines.html           | 22 ++++++++++++----------
 examples/Tools/Wave.html                 | 22 ++++++++++++----------
 examples/Tools/Worm Farm.html            | 22 ++++++++++++----------
 18 files changed, 188 insertions(+), 124 deletions(-)

diff --git a/examples/Animated/RoundedRectangles.html b/examples/Animated/RoundedRectangles.html
index d8e00df0..e5ae11c0 100644
--- a/examples/Animated/RoundedRectangles.html
+++ b/examples/Animated/RoundedRectangles.html
@@ -6,20 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
 	<script type="text/javascript" src="../../src/basic/Point.js"></script>
 	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
-	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
-	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
-	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
 	<script>
 		var doc, mousePoint, amount = 25;
 		var count = 0, paths = [];
diff --git a/examples/Animated/animatedStar.html b/examples/Animated/animatedStar.html
index 50cdf862..b8c26d29 100644
--- a/examples/Animated/animatedStar.html
+++ b/examples/Animated/animatedStar.html
@@ -6,22 +6,29 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
 	<script type="text/javascript" src="../../src/basic/Point.js"></script>
 	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script>
 		var canvas, doc;
 		var count = 0;
 		window.onload = function() {
 			canvas = document.getElementById('canvas');
 			doc = new Doc(canvas);
+			console.log(doc.currentStyle);
+			doc.currentStyle.fillColor = 'black';
 			setInterval(draw, 60);
 		}
 
@@ -34,7 +41,7 @@
 				var l = vector.length;
 				var path = new Path();
 				// path.strokeColor = '#000000';
-				path.fillColor = i % 2 ? 'red' : 'black';
+				//path.fillColor = i % 2 ? 'red' : 'black';
 				path.closed = true;
 				for (var j = 0; j < 32; j++) {
 					vector = vector.rotate(45 / 4);
diff --git a/examples/Scripts/arcTo.html b/examples/Scripts/arcTo.html
index fb20a41c..6659c8b7 100644
--- a/examples/Scripts/arcTo.html
+++ b/examples/Scripts/arcTo.html
@@ -6,16 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
 	<script type="text/javascript" src="../../src/basic/Point.js"></script>
 	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Scripts/circle.html b/examples/Scripts/circle.html
index 95a7c036..0e147ca3 100644
--- a/examples/Scripts/circle.html
+++ b/examples/Scripts/circle.html
@@ -6,16 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
 	<script type="text/javascript" src="../../src/basic/Point.js"></script>
 	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script>
 		var count = 0;
 		var doc;
diff --git a/examples/Scripts/letter.html b/examples/Scripts/letter.html
index 58476616..07377f18 100644
--- a/examples/Scripts/letter.html
+++ b/examples/Scripts/letter.html
@@ -6,16 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
 	<script type="text/javascript" src="../../src/basic/Point.js"></script>
 	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Scripts/lines.html b/examples/Scripts/lines.html
index f4bfd48b..7c6ac780 100644
--- a/examples/Scripts/lines.html
+++ b/examples/Scripts/lines.html
@@ -6,16 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
 	<script type="text/javascript" src="../../src/basic/Point.js"></script>
 	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script>
 		var count = 0;
 		var doc;
diff --git a/examples/Scripts/rectangle.html b/examples/Scripts/rectangle.html
index f982a4c0..3b037211 100644
--- a/examples/Scripts/rectangle.html
+++ b/examples/Scripts/rectangle.html
@@ -6,16 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
 	<script type="text/javascript" src="../../src/basic/Point.js"></script>
 	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script>
 		var count = 0;
 		var doc;
diff --git a/examples/Scripts/roundRectangle.html b/examples/Scripts/roundRectangle.html
index c3191463..7b727001 100644
--- a/examples/Scripts/roundRectangle.html
+++ b/examples/Scripts/roundRectangle.html
@@ -6,16 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
 	<script type="text/javascript" src="../../src/basic/Point.js"></script>
 	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script>
 		var count = 0;
 		var doc;
diff --git a/examples/Scripts/star.html b/examples/Scripts/star.html
index 9a4ff390..63ab8731 100644
--- a/examples/Scripts/star.html
+++ b/examples/Scripts/star.html
@@ -6,16 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
 	<script type="text/javascript" src="../../src/basic/Point.js"></script>
 	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Scripts/strokeJoin.html b/examples/Scripts/strokeJoin.html
index 5e8fc2de..a0cf2cac 100644
--- a/examples/Scripts/strokeJoin.html
+++ b/examples/Scripts/strokeJoin.html
@@ -6,16 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
 	<script type="text/javascript" src="../../src/basic/Point.js"></script>
 	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Tools/Circles.html b/examples/Tools/Circles.html
index 714df285..1be869c3 100644
--- a/examples/Tools/Circles.html
+++ b/examples/Tools/Circles.html
@@ -6,19 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
-	<script type="text/javascript" src="../../src/basic/Point.js"></script>
-	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
-	<script type="text/javascript" src="../../src/basic/Size.js"></script>
-	<script type="text/javascript" src="../../src/path/Segment.js"></script>
-	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
-	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
+	<script type="text/javascript" src="../../src/basic/Point.js"></script>
+	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
+	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
+	<script type="text/javascript" src="../../src/path/Segment.js"></script>
+	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/path/Path.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Tools/Clouds.html b/examples/Tools/Clouds.html
index 8a734fda..dccd906e 100644
--- a/examples/Tools/Clouds.html
+++ b/examples/Tools/Clouds.html
@@ -6,19 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
-	<script type="text/javascript" src="../../src/basic/Point.js"></script>
-	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
-	<script type="text/javascript" src="../../src/basic/Size.js"></script>
-	<script type="text/javascript" src="../../src/path/Segment.js"></script>
-	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
-	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
+	<script type="text/javascript" src="../../src/basic/Point.js"></script>
+	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
+	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
+	<script type="text/javascript" src="../../src/path/Segment.js"></script>
+	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/path/Path.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Tools/Dripping Brush.html b/examples/Tools/Dripping Brush.html
index 733344e7..8fbf5fdc 100644
--- a/examples/Tools/Dripping Brush.html	
+++ b/examples/Tools/Dripping Brush.html	
@@ -6,19 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
-	<script type="text/javascript" src="../../src/basic/Point.js"></script>
-	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
-	<script type="text/javascript" src="../../src/basic/Size.js"></script>
-	<script type="text/javascript" src="../../src/path/Segment.js"></script>
-	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
-	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
+	<script type="text/javascript" src="../../src/basic/Point.js"></script>
+	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
+	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
+	<script type="text/javascript" src="../../src/path/Segment.js"></script>
+	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/path/Path.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Tools/Fancy Brush.html b/examples/Tools/Fancy Brush.html
index e37f2d43..6de7f47e 100644
--- a/examples/Tools/Fancy Brush.html	
+++ b/examples/Tools/Fancy Brush.html	
@@ -6,19 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
-	<script type="text/javascript" src="../../src/basic/Point.js"></script>
-	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
-	<script type="text/javascript" src="../../src/basic/Size.js"></script>
-	<script type="text/javascript" src="../../src/path/Segment.js"></script>
-	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
-	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
+	<script type="text/javascript" src="../../src/basic/Point.js"></script>
+	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
+	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
+	<script type="text/javascript" src="../../src/path/Segment.js"></script>
+	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/path/Path.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Tools/Grid.html b/examples/Tools/Grid.html
index 5491c473..d16b1ba4 100644
--- a/examples/Tools/Grid.html
+++ b/examples/Tools/Grid.html
@@ -6,19 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
-	<script type="text/javascript" src="../../src/basic/Point.js"></script>
-	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
-	<script type="text/javascript" src="../../src/basic/Size.js"></script>
-	<script type="text/javascript" src="../../src/path/Segment.js"></script>
-	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
-	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
+	<script type="text/javascript" src="../../src/basic/Point.js"></script>
+	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
+	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
+	<script type="text/javascript" src="../../src/path/Segment.js"></script>
+	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/path/Path.js"></script>
 	<script>
 		window.onload = function() {
 			
diff --git a/examples/Tools/MultiLines.html b/examples/Tools/MultiLines.html
index e081866c..501bfbd4 100644
--- a/examples/Tools/MultiLines.html
+++ b/examples/Tools/MultiLines.html
@@ -6,19 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
-	<script type="text/javascript" src="../../src/basic/Point.js"></script>
-	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
-	<script type="text/javascript" src="../../src/basic/Size.js"></script>
-	<script type="text/javascript" src="../../src/path/Segment.js"></script>
-	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
-	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
+	<script type="text/javascript" src="../../src/basic/Point.js"></script>
+	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
+	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
+	<script type="text/javascript" src="../../src/path/Segment.js"></script>
+	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/path/Path.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Tools/Wave.html b/examples/Tools/Wave.html
index 471ed0fa..41a69381 100644
--- a/examples/Tools/Wave.html
+++ b/examples/Tools/Wave.html
@@ -6,19 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
-	<script type="text/javascript" src="../../src/basic/Point.js"></script>
-	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
-	<script type="text/javascript" src="../../src/basic/Size.js"></script>
-	<script type="text/javascript" src="../../src/path/Segment.js"></script>
-	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
-	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
+	<script type="text/javascript" src="../../src/basic/Point.js"></script>
+	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
+	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
+	<script type="text/javascript" src="../../src/path/Segment.js"></script>
+	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/path/Path.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Tools/Worm Farm.html b/examples/Tools/Worm Farm.html
index 937292a9..5ec1d68b 100644
--- a/examples/Tools/Worm Farm.html	
+++ b/examples/Tools/Worm Farm.html	
@@ -6,19 +6,21 @@
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
-	<script type="text/javascript" src="../../src/item/Item.js"></script>
-	<script type="text/javascript" src="../../src/basic/Point.js"></script>
-	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
-	<script type="text/javascript" src="../../src/basic/Size.js"></script>
-	<script type="text/javascript" src="../../src/path/Segment.js"></script>
-	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
-	<script type="text/javascript" src="../../src/path/Path.js"></script>
-	<script type="text/javascript" src="../../src/document/Doc.js"></script>
-	<script type="text/javascript" src="../../src/item/Layer.js"></script>
-	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/tool/Tool.js"></script>
+	<script type="text/javascript" src="../../src/basic/Point.js"></script>
+	<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
+	<script type="text/javascript" src="../../src/basic/Size.js"></script>
+	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
+	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/Group.js"></script>
+	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
+	<script type="text/javascript" src="../../src/path/Segment.js"></script>
+	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/path/Path.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');