Introduce Paper object that keeps track of documents and which documenti is active. Newly created items are automatically appended to the children list of the active document's activeLayer.

examples/Animated/animatedStar.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -42,7 +43,6 @@
 					path.add(newPoint);
 				}
 				path.smooth();
-				doc.activeLayer.appendTop(path);
 			}
 			doc.activeLayer.children.reverse();
 			doc.redraw();

examples/Scripts/arcTo.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -36,10 +37,8 @@
 						path.arcTo(point.add(vector), true);
 					}
 				}
-				doc.activeLayer.appendTop(path);
+				doc.activeLayer.appendBottom(path);
 			}
-			doc.activeLayer.children.reverse();
-
 			doc.redraw();
 		}
 	</script>

examples/Scripts/circle.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -26,7 +27,6 @@
 			for(var i = 0; i < 70; i++) {
 				var path = new Path.Circle(center, i * 5);
 				path.strokeColor = 'black';
-				doc.activeLayer.appendTop(path);
 			}
 			doc.redraw();
 		}

examples/Scripts/letter.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -38,7 +39,6 @@
 				new Segment(new Point(56.984375, 286.0546875), new Point(10.03076171875, 6.6875))
 			);
 			letterPath.fillColor = 'black';
-			doc.activeLayer.appendTop(letterPath);
 			doc.redraw();
 		}
 	</script>

examples/Scripts/lines.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -33,7 +34,6 @@
 			for(var i = 0; i < 180; i++) {
 				var path = new Path.Line(point.add(vector.rotate(i * 2).normalize(30)), point.add(vector.rotate(i * 2).normalize(30 + Math.abs(Math.sin((i + count / 20)) * 300))));
 				path.strokeColor = i % 4 ? 'black' : 'red';
-				doc.activeLayer.appendTop(path);
 			}
 			doc.redraw();
 		}

examples/Scripts/rectangle.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -24,8 +25,6 @@
 			doc = new Doc(canvas);
 			var path = new Path.Rectangle([50, 50], [100, 100]);
 			path.strokeColor = 'black';
-			console.log(path);
-			doc.activeLayer.appendTop(path);
 			doc.redraw();
 		}
 	</script>

examples/Scripts/roundRectangle.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -31,7 +32,6 @@
 			var size = Math.abs(Math.sin(count / 40)) * 150 + 10;
 			var path = new Path.RoundRectangle(rect, size);
 			path.fillColor = 'black';
-			doc.activeLayer.appendTop(path);
 			doc.redraw();
 		}
 	</script>

examples/Scripts/star.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -35,9 +36,8 @@
 					path.add(newPoint);
 				}
 				path.smooth();
-				doc.activeLayer.appendTop(path);
+				doc.activeLayer.appendBottom(path);
 			}
-			doc.activeLayer.children.reverse();
 			doc.redraw();
 		}
 	</script>

examples/Scripts/strokeJoin.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -25,8 +26,36 @@
 			var path = new Path([100, 150], [150, 200], [200, 150]);
 			path.strokeColor = 'black';
 			path.strokeWidth = 30;
+			path.strokeJoin = 'round';
+			
+			var path = new Path([240, 150], [290, 200], [340, 150]);
+			path.strokeColor = 'black';
+			path.strokeWidth = 30;
 			path.strokeJoin = 'bevel';
-			doc.activeLayer.appendTop(path);
+			
+			var path = new Path([380, 150], [430, 200], [480, 150]);
+			path.strokeColor = 'black';
+			path.strokeWidth = 30;
+			path.strokeJoin = 'miter';
+			
+			var path = new Path([100, 250], [150, 300], [200, 250]);
+			path.strokeColor = 'black';
+			path.strokeWidth = 30;
+			path.strokeJoin = 'round';
+			path.strokeCap = 'round';
+			
+			var path = new Path([240, 250], [290, 300], [340, 250]);
+			path.strokeColor = 'black';
+			path.strokeWidth = 30;
+			path.strokeJoin = 'bevel';
+			path.strokeCap = 'square';
+			
+			var path = new Path([380, 250], [430, 300], [480, 250]);
+			path.strokeColor = 'black';
+			path.strokeWidth = 30;
+			path.strokeJoin = 'miter';
+			path.strokeCap = 'butt';
+			
 			doc.redraw();
 		}
 	</script>

examples/Tools/Circles.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -23,16 +24,14 @@
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
 			var doc = new Doc(canvas);
-
+			var path;
 			var tool = new Tool({
 				onMouseDrag: function(event) {
-					if(event.count != 1)
+					if(path) path.remove();
-						doc.activeLayer.children.pop();
 					var distance = event.downPoint.subtract(event.point).length;
-					var path = new Path.Circle(event.downPoint, distance);
+					path = new Path.Circle(event.downPoint, distance);
 					path.strokeColor = 'black';
 					path.fillColor = 'white';
-					doc.activeLayer.appendTop(path);
 				}
 			});
 			tool.document = doc;

examples/Tools/Clouds.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -32,7 +33,6 @@
 					path.strokeJoin = 'round';
 					path.strokeCap = 'round';
 					path.add(event.point);
-					doc.activeLayer.appendTop(path);
 				},
 				onMouseDrag: function(event) {
 					path.arcTo(event.point, true);

examples/Tools/Dripping Brush.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -28,10 +29,6 @@
 			var minSize = 5;
 			
 			var tool = new Tool({
-				onMouseDown: function(event) {
-					
-				},
-
 				onMouseDrag: function(event) {
 					// If the user dragged more then minSize:
 					if (event.delta.length > minSize) {
@@ -40,7 +37,6 @@
 							path = new Path();
 							path.fillColor = 'black';
 							path.add(event.lastPoint);
-							doc.activeLayer.appendTop(path);
 						}
 
 						var step = event.delta.divide(2);

examples/Tools/Fancy Brush.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -36,7 +37,6 @@
 				onMouseDown: function(event) {
 					path = new Path();
 					path.fillColor = event.count % 2 ? 'red' : 'black';
-					doc.activeLayer.appendTop(path);
 				},
 
 				onMouseDrag: function(event) {

examples/Tools/Grid.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -39,7 +40,6 @@
 					path = new Path();
 					path.strokeColor = 'black';
 					path.add(point);
-					doc.activeLayer.appendTop(path);
 				},
 				onMouseDrag: function(event) {
 					var p = getPos(event.point);

examples/Tools/MultiLines.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -37,7 +38,6 @@
 					for (var i = 0; i < values.lines; i++) {
 						var path = new Path();
 						path.strokeColor = '#000000';
-						doc.activeLayer.appendTop(path);
 						paths.push(path);
 					}
 				},
@@ -50,7 +50,6 @@
 						var path = paths[values.lines - 1 - i];
 						offset.length = lineSize * i + lineSize / 2;
 						path.add(event.middlePoint.add(offset));
-						//path.insert(0, event.middlePoint.subtract(offset));
 						path.smooth();
 					}
 				}

examples/Tools/Wave.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -23,7 +24,6 @@
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
 			var doc = new Doc(canvas);
-			
 			var values = {
 				curviness: 0.5,
 				distance: 10,
@@ -37,12 +37,10 @@
 				onMouseDown: function(event) {
 					path = new Path();
 					path.strokeColor = 'black';
-					doc.activeLayer.appendTop(path);
 				},
 
 				onMouseDrag: function(event) {
 					var step = event.delta.rotate(90 * mul);
-					
 					if (!values.mouseOffset)
 						step.length = values.offset;
 					var segment = new Segment(event.point.add(step));

examples/Tools/Worm Farm.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/Item.js"></script>
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Point.js"></script>
@@ -40,7 +41,6 @@
 					worm.fillColor = '#ffffff';
 					worm.strokeColor = '#000000';
 					worm.add(event.point);
-					doc.activeLayer.appendTop(worm);
 				},
 
 				onMouseDrag: function(event) {
@@ -77,7 +77,6 @@
 					// make a new line path from top to bottom
 					var line = new Path.Line(top, bottom);
 					line.strokeColor = '#000000';
-					doc.activeLayer.appendTop(line);
 
 					// smooth the segments of the path
 					worm.smooth();

src/Doc.js

@@ -5,9 +5,16 @@ Doc = Base.extend({
 			this.ctx = this.canvas.getContext('2d');
 			this.size = new Size(canvas.offsetWidth, canvas.offsetHeight);
 		}
+		Paper.documents.push(this);
+		this.activate();
+		this.layers = [];
 		this.activeLayer = new Layer();
-		this.layers = [this.activeLayer];
 	},
+	
+	activate: function() {
+		Paper.activateDocument(this);
+	},
+	
 	redraw: function() {
 		if(this.canvas) {
 			this.ctx.clearRect(0, 0, this.size.width, this.size.height);

src/Item.js

@@ -1,7 +1,8 @@
 Item = Base.extend({
 	beans: true,
 	initialize: function() {
-		
+		this.parent = Paper.document.activeLayer;
+		this.parent.children.push(this);
 	},
 	
 	/**
@@ -154,6 +155,13 @@ Item = Base.extend({
 			this.parent.children.splice(this.index, 1);
 	},
 	
+	/**
+	* Removes the item.
+	*/	
+	remove: function() {
+		this.removeFromParent();
+	},
+	
 	/**
 	 * {@grouptitle Hierarchy Operations}
 	 * 
@@ -172,8 +180,10 @@ Item = Base.extend({
 	 * @param item The item that will be appended as a child
 	 */
 	appendTop: function(item) {
+		item.removeFromParent();
 		this.children.push(item);
 		item.parent = this;
+		item.document = this.document;
 	},
 	
 	/**
@@ -192,8 +202,10 @@ Item = Base.extend({
 	 * @param item The item that will be appended as a child
 	 */
 	appendBottom: function(item) {
+		item.removeFromParent();
 		this.children.splice(0, 0, item);
 		item.parent = this;
+		item.document = this.document;
 	},
 	
 	/**
@@ -225,6 +237,7 @@ Item = Base.extend({
 		this.removeFromParent();
 		item.parent.children.splice(item.index + 1, 0, this);
 		this.parent = item.parent;
+		this.document = item.document;
 		return true;
 	},
 	
@@ -248,6 +261,7 @@ Item = Base.extend({
 		this.removeFromParent();
 		item.parent.children.splice(item.index - 1, 0, this);
 		this.parent = item.parent;
+		this.document = item.document;
 		return true;
 	},
 	

src/Layer.js

@@ -1,7 +1,13 @@
 Layer = Item.extend({
 	initialize: function() {
-		this.base();
 		this.children = [];
+		this.document = this.parent = Paper.document;
+		this.document.layers.push(this);
+		this.activate();
+	},
+	
+	activate: function() {
+		this.document.activeLayer = this;
 	},
 	
 	draw: function(ctx) {

src/Paper.js

@@ -0,0 +1,10 @@
+Paper = Base.extend({
+	statics: {
+		documents: [],
+		activateDocument: function(doc) {
+			var index = this.documents.indexOf(doc);
+			if(index != -1)
+				this.document = this.documents[index];
+		}
+	}
+});

test/index.html

@@ -5,6 +5,7 @@
 	<link rel="stylesheet" href="qunit/qunit.css" type="text/css" media="screen">
 	<!-- Libraries -->
 	<script type="text/javascript" src="../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../src/Paper.js"></script>
 	<script type="text/javascript" src="../src/Item.js"></script>
 	<script type="text/javascript" src="../src/PathItem.js"></script>
 	<script type="text/javascript" src="../src/Point.js"></script>

test/tests_item.js

@@ -3,8 +3,8 @@ module('Item');
 test('appendChild(item)', function() {
 	var doc = new Doc();
 	var path = new Path();
-	// doc.activeLayer.appendChild(path);
+	doc.activeLayer.appendChild(path);
-	// equals(doc.activeLayer.children.length, 1);
+	equals(doc.activeLayer.children.length, 1);
 });
 
 test('item.parent / item.isChild', function() {
@@ -16,7 +16,7 @@ test('item.parent / item.isChild', function() {
 	secondDoc.activeLayer.appendTop(path);
 	equals(doc.activeLayer.isChild(path), false);
 	equals(secondDoc.activeLayer.isChild(path), true);
-	equals(doc.activeLayer.children.indexOf(path) != -1, true);
+	equals(doc.activeLayer.children.indexOf(path) == -1, true);
 	equals(secondDoc.activeLayer.children.indexOf(path) == 0, true);
 });
 
@@ -24,8 +24,6 @@ test('item.lastChild / item.firstChild', function() {
 	var doc = new Doc();
 	var path = new Path();
 	var secondPath = new Path();
-	doc.activeLayer.appendTop(path);
-	doc.activeLayer.appendTop(secondPath);
 	equals(doc.activeLayer.firstChild == path, true);
 	equals(doc.activeLayer.lastChild == secondPath, true);
 });
@@ -34,7 +32,6 @@ test('appendBottom(item)', function() {
 	var doc = new Doc();
 	var path = new Path();
 	var secondPath = new Path();
-	doc.activeLayer.appendChild(path);
 	doc.activeLayer.appendBottom(secondPath);
 	equals(secondPath.index < path.index, true);
 });
@@ -43,8 +40,6 @@ test('moveAbove(item)', function() {
 	var doc = new Doc();
 	var path = new Path();
 	var secondPath = new Path();
-	doc.activeLayer.appendChild(path);
-	doc.activeLayer.appendChild(secondPath);
 	path.moveAbove(secondPath);
 	equals(doc.activeLayer.lastChild == path, true);
 });
@@ -53,8 +48,6 @@ test('moveBelow(item)', function() {
 	var doc = new Doc();
 	var firstPath = new Path();
 	var secondPath = new Path();
-	doc.activeLayer.appendChild(firstPath);
-	doc.activeLayer.appendChild(secondPath);
 	equals(secondPath.index > firstPath.index, true);
 	secondPath.moveBelow(firstPath);
 	equals(secondPath.index < firstPath.index, true);
@@ -63,7 +56,6 @@ test('moveBelow(item)', function() {
 test('isDescendant(item)', function() {
 	var doc = new Doc();
 	var path = new Path();
-	doc.activeLayer.appendChild(firstPath);
 	equals(path.isDescendant(doc.activeLayer), true);
 	equals(doc.activeLayer.isDescendant(path), false);
 });
@@ -72,8 +64,6 @@ test('getPreviousSibling() / getNextSibling()', function() {
 	var doc = new Doc();
 	var firstPath = new Path();
 	var secondPath = new Path();
-	doc.activeLayer.appendTop(firstPath);
-	doc.activeLayer.appendTop(secondPath);
 	equals(firstPath.nextSibling == secondPath, true);
 	equals(secondPath.previousSibling == firstPath, true);
 	equals(secondPath.nextSibling == null, true);
@@ -82,7 +72,6 @@ test('getPreviousSibling() / getNextSibling()', function() {
 test('hidden', function() {
 	var doc = new Doc();
 	var firstPath = new Path();
-	doc.activeLayer.appendTop(firstPath);
 	firstPath.visible = false;
 	equals(firstPath.hidden, true);
 });