New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit

git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f

1 files changed, 1567 insertions, 0 deletions

diff --git a/includes/js/dojox/gfx/demos/data/transform.json b/includes/js/dojox/gfx/demos/data/transform.json
new file mode 100644
index 0000000..60bd466
--- /dev/null
+++ b/includes/js/dojox/gfx/demos/data/transform.json
@@ -0,0 +1,1567 @@
+[
+	{
+		"children": [
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 0, 
+					"y1": 0, 
+					"x2": 500, 
+					"y2": 0
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 0, 
+					"y1": 0, 
+					"x2": 0, 
+					"y2": 500
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 0, 
+					"y1": 50, 
+					"x2": 500, 
+					"y2": 50
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 50, 
+					"y1": 0, 
+					"x2": 50, 
+					"y2": 500
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 0, 
+					"y1": 100, 
+					"x2": 500, 
+					"y2": 100
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 100, 
+					"y1": 0, 
+					"x2": 100, 
+					"y2": 500
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 0, 
+					"y1": 150, 
+					"x2": 500, 
+					"y2": 150
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 150, 
+					"y1": 0, 
+					"x2": 150, 
+					"y2": 500
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 0, 
+					"y1": 200, 
+					"x2": 500, 
+					"y2": 200
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 200, 
+					"y1": 0, 
+					"x2": 200, 
+					"y2": 500
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 0, 
+					"y1": 250, 
+					"x2": 500, 
+					"y2": 250
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 250, 
+					"y1": 0, 
+					"x2": 250, 
+					"y2": 500
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 0, 
+					"y1": 300, 
+					"x2": 500, 
+					"y2": 300
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 300, 
+					"y1": 0, 
+					"x2": 300, 
+					"y2": 500
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 0, 
+					"y1": 350, 
+					"x2": 500, 
+					"y2": 350
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 350, 
+					"y1": 0, 
+					"x2": 350, 
+					"y2": 500
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 0, 
+					"y1": 400, 
+					"x2": 500, 
+					"y2": 400
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 400, 
+					"y1": 0, 
+					"x2": 400, 
+					"y2": 500
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 0, 
+					"y1": 450, 
+					"x2": 500, 
+					"y2": 450
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 450, 
+					"y1": 0, 
+					"x2": 450, 
+					"y2": 500
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 0, 
+					"y1": 500, 
+					"x2": 500, 
+					"y2": 500
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}, 
+			{
+				"shape": {
+					"type": "line", 
+					"x1": 500, 
+					"y1": 0, 
+					"x2": 500, 
+					"y2": 500
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}
+			}
+		], 
+		"name": "grid"
+	}, 
+	{
+		"children": [
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 0, 
+					"y": 0, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 0, 
+					"y": 100, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 0, 
+					"y": 200, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 0, 
+					"y": 300, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 0, 
+					"y": 400, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 50, 
+					"y": 50, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 50, 
+					"y": 150, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 50, 
+					"y": 250, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 50, 
+					"y": 350, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 50, 
+					"y": 450, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 100, 
+					"y": 0, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 100, 
+					"y": 100, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 100, 
+					"y": 200, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 100, 
+					"y": 300, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 100, 
+					"y": 400, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 150, 
+					"y": 50, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 150, 
+					"y": 150, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 150, 
+					"y": 250, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 150, 
+					"y": 350, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 150, 
+					"y": 450, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 200, 
+					"y": 0, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 200, 
+					"y": 100, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 200, 
+					"y": 200, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 200, 
+					"y": 300, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 200, 
+					"y": 400, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 250, 
+					"y": 50, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 250, 
+					"y": 150, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 250, 
+					"y": 250, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 250, 
+					"y": 350, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 250, 
+					"y": 450, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 300, 
+					"y": 0, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 300, 
+					"y": 100, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 300, 
+					"y": 200, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 300, 
+					"y": 300, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 300, 
+					"y": 400, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 350, 
+					"y": 50, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 350, 
+					"y": 150, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 350, 
+					"y": 250, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 350, 
+					"y": 350, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 350, 
+					"y": 450, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 400, 
+					"y": 0, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 400, 
+					"y": 100, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 400, 
+					"y": 200, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 400, 
+					"y": 300, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 400, 
+					"y": 400, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 450, 
+					"y": 50, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 450, 
+					"y": 150, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 450, 
+					"y": 250, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 450, 
+					"y": 350, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 450, 
+					"y": 450, 
+					"width": 50, 
+					"height": 50, 
+					"r": 0
+				}, 
+				"fill": {
+					"g": 0, 
+					"b": 0, 
+					"a": 0.1, 
+					"r": 255
+				}
+			}
+		], 
+		"name": "checkerboard"
+	}, 
+	{
+		"shape": {
+			"type": "rect", 
+			"x": 0, 
+			"y": 0, 
+			"width": 100, 
+			"height": 100, 
+			"r": 0
+		}, 
+		"transform": {
+			"dx": 100, 
+			"dy": 100, 
+			"xx": 1, 
+			"xy": 0, 
+			"yx": 0, 
+			"yy": 1
+		}, 
+		"stroke": {
+			"type": "stroke", 
+			"color": {
+				"r": 0, 
+				"g": 0, 
+				"b": 0, 
+				"a": 1
+			}, 
+			"style": "solid", 
+			"width": 1, 
+			"cap": "butt", 
+			"join": 4
+		}, 
+		"fill": {
+			"type": "linear", 
+			"x1": 0, 
+			"y1": 0, 
+			"x2": 100, 
+			"y2": 100, 
+			"colors": [
+				{
+					"offset": 0, 
+					"color": {
+						"r": 0, 
+						"g": 128, 
+						"b": 0, 
+						"a": 1
+					}
+				}, 
+				{
+					"offset": 0.5, 
+					"color": {
+						"g": 0, 
+						"b": 0, 
+						"r": 255, 
+						"a": 1
+					}
+				}, 
+				{
+					"offset": 1, 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 255, 
+						"a": 1
+					}
+				}
+			]
+		}, 
+		"name": "rect with color gradient"
+	}, 
+	{
+		"shape": {
+			"type": "rect", 
+			"x": 0, 
+			"y": 0, 
+			"width": 100, 
+			"height": 100, 
+			"r": 0
+		}, 
+		"stroke": {
+			"type": "stroke", 
+			"color": {
+				"r": 0, 
+				"g": 0, 
+				"b": 0, 
+				"a": 1
+			}, 
+			"style": "solid", 
+			"width": 1, 
+			"cap": "butt", 
+			"join": 4
+		}, 
+		"fill": {
+			"type": "linear", 
+			"x1": 0, 
+			"y1": 0, 
+			"x2": 100, 
+			"y2": 100, 
+			"colors": [
+				{
+					"offset": 0, 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}
+				}, 
+				{
+					"offset": 1, 
+					"color": {
+						"r": 255, 
+						"g": 255, 
+						"b": 255, 
+						"a": 1
+					}
+				}
+			]
+		}, 
+		"name": "rect with gray gradient"
+	}, 
+	{
+		"children": [
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 200, 
+					"y": 200, 
+					"width": 100, 
+					"height": 100, 
+					"r": 0
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				}, 
+				"fill": {
+					"r": 0, 
+					"g": 128, 
+					"b": 0, 
+					"a": 1
+				},
+				name: "green rect"
+			}, 
+			{
+				"shape": {
+					"type": "rect", 
+					"x": 0, 
+					"y": 0, 
+					"width": 100, 
+					"height": 100, 
+					"r": 0
+				}, 
+				"transform": {
+					"xx": 0.8660254037844387, 
+					"xy": 0.49999999999999994, 
+					"yx": -0.49999999999999994, 
+					"yy": 0.8660254037844387, 
+					"dx": 281.69872981077805, 
+					"dy": 231.69872981077808
+				}, 
+				"fill": {
+					"r": 0, 
+					"g": 0, 
+					"b": 255, 
+					"a": 1
+				},
+				name: "blue rect"
+			}, 
+			{
+				"shape": {
+					"type": "path", 
+					"path": "M 300 100L 400 200L 400 300L 300 400C 400 300 400 200 300 100"
+				}, 
+				"transform": {
+					"xx": 1, 
+					"xy": 0, 
+					"yx": 0, 
+					"yy": 1, 
+					"dx": 0, 
+					"dy": 0
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 0, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 1, 
+					"cap": "butt", 
+					"join": 4
+				},
+				name: "black path"
+			}, 
+			{
+				"shape": {
+					"type": "path", 
+					"path": "M 300 100L 400 200L 400 300L 300 400C 400 300 400 200 300 100"
+				}, 
+				"transform": {
+					"dx": 100, 
+					"xx": 1, 
+					"xy": 0, 
+					"yx": 0, 
+					"yy": 1, 
+					"dy": 0
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"g": 0, 
+						"b": 0, 
+						"r": 255, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 2, 
+					"cap": "butt", 
+					"join": 4
+				},
+				name: "red path"
+			}, 
+			{
+				"shape": {
+					"type": "path", 
+					"path": "M 300 100l 100 100l 0 100l-100 100c 100-100 100-200 0-300"
+				}, 
+				"transform": {
+					"xx": -1, 
+					"xy": -1.2246063538223773e-16, 
+					"yx": 1.2246063538223773e-16, 
+					"yy": -1, 
+					"dx": 500, 
+					"dy": 500
+				}, 
+				"stroke": {
+					"type": "stroke", 
+					"color": {
+						"r": 0, 
+						"g": 0, 
+						"b": 255, 
+						"a": 1
+					}, 
+					"style": "solid", 
+					"width": 2, 
+					"cap": "butt", 
+					"join": 4
+				},
+				name: "blue path"
+			}
+		], 
+		"transform": {
+			"xx": 0.9659258262890683, 
+			"xy": 0.25881904510252074, 
+			"yx": -0.25881904510252074, 
+			"yy": 0.9659258262890683, 
+			"dx": -56.1862178478973, 
+			"dy": 73.22330470336311
+		}, 
+		"name": "rotated group"
+	}
+]