Merge remote branch 'origin/master'

examples/Animated/Extruded.html

@@ -44,9 +44,9 @@
 		path2.position = document.bounds.center;
 		path2.scale(2);
 
-		var length1 = path1.length,
-			length2 = path2.length,
-			count = 0;
+		var length1 = path1.length;
+		var length2 = path2.length;
+		var count = 0;
 		function onFrame() {
 			var vector = new Point({
 				angle: -count % 360,
@@ -59,9 +59,9 @@
 			path2.position = document.bounds.center + vector.normalize(50);
 
 			for (var i = 0; i < lineCount; i++) {
-				var path = lineGroup.children[i],
-					l1 = (length1 / lineCount * (i + count / 10)) % length1,
-					l2 = (length2 / lineCount * (i + count / 10)) % length2;
+				var path = lineGroup.children[i];
+				var l1 = (length1 / lineCount * (i + count / 10)) % length1;
+				var l2 = (length2 / lineCount * (i + count / 10)) % length2;
 				path.segments[0].point = path1.getPointAt(l1),
 				path.segments[1].point = path2.getPointAt(l2);
 			}

examples/Animated/Flock.html

@@ -138,11 +138,11 @@
 			},
 			
 			borders: function() {
-				var loc = this.loc,
-					r = this.r,
-					oldLoc = this.loc.clone(),
-					width = size.width,
-					height = size.height;
+				var loc = this.loc;
+				var r = this.r;
+				var oldLoc = this.loc.clone();
+				var width = size.width;
+				var height = size.height;
 				if (loc.x < -r) loc.x = width + r;
 				if (loc.y < -r) loc.y = height + r;
 				if (loc.x > width + r) loc.x = -r;
@@ -153,9 +153,9 @@
 			},
 			
 			separate: function(boids) {
-				var desiredSeperation = 60,
-					steer = new Point(0, 0),
-					count = 0;
+				var desiredSeperation = 60;
+				var steer = new Point(0, 0);
+				var count = 0;
 				// For every boid in the system, check if it's too close
 				for (var i = 0, l = boids.length; i < l; i++) {
 					var other = boids[i];
@@ -182,11 +182,11 @@
 			// Alignment
 			// For every nearby boid in the system, calculate the average velocity
 			align: function(boids) {
-				var neighborDist = 25,
-					steer = new Point(0, 0),
-					count = 0,
-					nearest = 999,
-					closestPoint;
+				var neighborDist = 25;
+				var steer = new Point(0, 0);
+				var count = 0;
+				var nearest = 999;
+				var closestPoint;
 				for (var i = 0, l = boids.length; i < l; i++) {
 					var other = boids[i];
 					var d = this.loc.getDistance(other.loc);
@@ -214,9 +214,9 @@
 			// Cohesion
 			// For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location
 			cohesion: function(boids) {
-				var neighborDist = 100,
-					sum = new Point(0, 0),
-					count = 0;
+				var neighborDist = 100;
+				var sum = new Point(0, 0);
+				var count = 0;
 				for (var i = 0, l = boids.length; i < l; i++) {
 					var other = boids[i];
 					var d = this.loc.getDistance(other.loc);
@@ -258,11 +258,11 @@
 		heartPath.strokeColor = null;
 		heartPath.scale(1.5);
 		
-		var count = 0,
-			groupTogether = false,
-			pathLength = heartPath.length,
-			mouseDown = false,
-			boids = [];
+		var count = 0;
+		var groupTogether = false;
+		var pathLength = heartPath.length;
+		var mouseDown = false;
+		var boids = [];
 
 		// Add the boids:
 		for (var i = 0; i < 30; i++) {

examples/Animated/Lines.html

@@ -15,10 +15,10 @@
 			path.closed = true;
 		}
 
-		var position = document.bounds.center,
-			mousePos = position,
-			children = document.activeLayer.children,
-			count = 0;
+		var position = document.bounds.center;
+		var mousePos = position;
+		var children = document.activeLayer.children;
+		var count = 0;
 		
 		function iterate() {
 			count++;

examples/Animated/Raster.html

@@ -8,10 +8,10 @@
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
 		// http://en.wikipedia.org/wiki/Lenna
-		var raster = new Raster('lenna'),
-			count = 0,
-			lastScale = 1,
-			center = document.bounds.center;
+		var raster = new Raster('lenna');
+		var count = 0;
+		var lastScale = 1;
+		var center = document.bounds.center;
 		function onFrame(event) {
 			count++;
 			var scale = (Math.sin(event.time * 2) + 1) / 2;

examples/Scripts/BouncingBalls.html

@@ -7,8 +7,8 @@
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		var balls = [],
-			group = new Group();
+		var balls = [];
+		var group = new Group();
 
 		var Ball = Base.extend({
 			initialize: function(point, vector) {
@@ -50,9 +50,9 @@
 		});
 
 		for (var i = 0; i < 10; i++) {
-			var position = Point.random() * document.size,
-				vector = (Point.random() - [0.5, 0]) * [50, 100],
-				ball = new Ball(position, vector);
+			var position = Point.random() * document.size;
+			var vector = (Point.random() - [0.5, 0]) * [50, 100];
+			var ball = new Ball(position, vector);
 			balls.push(ball);
 		}
 

examples/Scripts/Chain.html

@@ -14,9 +14,9 @@
 		path.strokeColor = 'purple';
 		path.strokeWidth = 20;
 		path.strokeCap = 'round';
-		var size = 20,
-			segments = path.segments,
-			center = document.bounds.center;
+		var size = 20;
+		var segments = path.segments;
+		var center = document.bounds.center;
 		for (var i = 0; i < size; i++)
 			path.add(center + new Point(i * 100, 0));
 

examples/Scripts/RotationRaster.html

@@ -7,21 +7,21 @@
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		var raster = new Raster('lenna'),
-			size = new Size(50, 50),
-			colSize = raster.size / size * 1.5,
-			fullSize = size * colSize;
+		var raster = new Raster('lenna');
+		var size = new Size(50, 50);
+		var colSize = raster.size / size * 1.5;
+		var fullSize = size * colSize;
 
 		raster.hidden = true;
 		raster.size = size;
 		for (var x = 0; x < size.width; x++) {
 			for (var y = 0; y < size.height; y++) {
-				var color = raster.getPixel(x, y),
-					gray = color.gray * 0.9;
+				var color = raster.getPixel(x, y);
+				var gray = color.gray * 0.9;
 				if (gray > 0.1) {
-					var pos = new Point(x, y) * colSize + colSize / 2,
-						rectSize = gray * colSize.width,
-						path = new Path.Rectangle([0, 0], [rectSize, rectSize]);
+					var pos = new Point(x, y) * colSize + colSize / 2;
+					var rectSize = gray * colSize.width;
+					var path = new Path.Rectangle([0, 0], [rectSize, rectSize]);
 					path.fillColor = color;
 					path.position = pos;
 					path.rotate(gray * 180);

examples/Tools/MetaBalls.html

@@ -13,10 +13,10 @@
 			fillColor: 'black'
 		};
 		
-		var handle_len_rate = 2.4,
-			circlePaths = [],
-			circlePath,
-			radius = 50;
+		var handle_len_rate = 2.4;
+		var circlePaths = [];
+		var circlePath;
+		var radius = 50;
 		circlePaths.push(new Path.Circle(document.bounds.center, 100));
 		function onMouseDown(event) {
 			circlePath = null;
@@ -53,13 +53,13 @@
 
 		// ---------------------------------------------
 		function metaball(ball1, ball2, v, handle_len_rate, maxDistance) {
-			var center1 = ball1.position,
-				center2 = ball2.position,
-				radius1 = ball1.bounds.width / 2,
-				radius2 = ball2.bounds.width / 2,
-				pi2 = Math.PI / 2,
-				d = center1.getDistance(center2),
-				u1, u2;
+			var center1 = ball1.position;
+			var center2 = ball2.position;
+			var radius1 = ball1.bounds.width / 2;
+			var radius2 = ball2.bounds.width / 2;
+			var pi2 = Math.PI / 2;
+			var d = center1.getDistance(center2);
+			var u1, u2;
 
 			if (radius1 == 0 || radius2 == 0)
 				return;
@@ -74,18 +74,18 @@
 				u2 = 0;
 			}
 
-			var angle1 = (center2 - center1).getAngleInRadians(),
-				angle2 = Math.acos((radius1 - radius2) / d),
-				angle1a = angle1 + u1 + (angle2 - u1) * v,
-				angle1b = angle1 - u1 - (angle2 - u1) * v,
-				angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v,
-				angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
-				p1a = center1 + getVector(angle1a, radius1),
-				p1b = center1 + getVector(angle1b, radius1),
-				p2a = center2 + getVector(angle2a, radius2),
-				p2b = center2 + getVector(angle2b, radius2),
-				// define handle length by the distance between both ends of the curve to draw
-				d2 = Math.min(v * handle_len_rate, p1a.getDistance(p2a) / (radius1 + radius2));
+			var angle1 = (center2 - center1).getAngleInRadians();
+			var angle2 = Math.acos((radius1 - radius2) / d);
+			var angle1a = angle1 + u1 + (angle2 - u1) * v;
+			var angle1b = angle1 - u1 - (angle2 - u1) * v;
+			var angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v;
+			var angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
+			var p1a = center1 + getVector(angle1a, radius1);
+			var p1b = center1 + getVector(angle1b, radius1);
+			var p2a = center2 + getVector(angle2a, radius2);
+			var p2b = center2 + getVector(angle2b, radius2);
+			// define handle length by the distance between both ends of the curve to draw
+			var d2 = Math.min(v * handle_len_rate, p1a.getDistance(p2a) / (radius1 + radius2));
 
 			d2 *= Math.min(1, d * 2 / (radius1 + radius2)); // case circles are overlapping
 			radius1 *= d2;

examples/Tools/Stars.html

@@ -13,11 +13,11 @@
 			}
 			
 			function onMouseDrag(event) {
-				var delta = event.point - event.downPoint,
-					radius = delta.length,
-					points = 5 + Math.round(radius / 50),
-					position = event.downPoint,
-					path = new Path.Star(position, points, radius / 2, radius);
+				var delta = event.point - event.downPoint;
+				var radius = delta.length;
+				var points = 5 + Math.round(radius / 50);
+				var position = event.downPoint;
+				var path = new Path.Star(position, points, radius / 2, radius);
 				path.rotate(delta.angle);
 				// Remove the path automatically before the next mouse drag
 				// event:

lib/bootstrap.js

@@ -149,7 +149,7 @@ var Base = this.Base = new function() {
 	}
 
 	function extend(obj) {
-		function ctor(dont) {
+		var ctor = function(dont) {
 			if (fix) define(this, '__proto__', { value: obj });
 			if (this.initialize && dont !== ctor.dont)
 				return this.initialize.apply(this, arguments);

src/core/PaperScope.js

@@ -19,10 +19,11 @@
  * global paper object, which simply is a pointer to the currently active scope.
  */
 var PaperScope = this.PaperScope = Base.extend({
-	initialize: function() {
+	initialize: function(id) {
 		this.document = null;
 		this.documents = [];
 		this.tools = [];
+		this.id = id;
 	},
 
 	/**

src/core/PaperScript.js

@@ -130,8 +130,8 @@ var PaperScript = this.PaperScript = new function() {
 	}
 
 	function run(code, scope) {
-		try { with (scope) { // Safe one indentation by grouping try and with
-			PaperScope.set(scope);
+		with (scope) { // Safe one indentation by grouping try and with
+			paper = scope;
 			var doc = scope.document;
 				// TODO: Add support for multiple tools
 			var tool = scope.tool =
@@ -158,7 +158,7 @@ var PaperScript = this.PaperScript = new function() {
 				var totalTime = 0;
 				function frame(dontSwitch) {
 					if (!dontSwitch)
-						PaperScope.set(scope);
+						paper = scope;
 					// Request next frame already
 					DomEvent.requestAnimationFrame(frame, doc && doc.canvas);
 					var time = Date.now() / 1000;
@@ -174,8 +174,6 @@ var PaperScript = this.PaperScript = new function() {
 					if (doc)
 						doc.redraw();
 					lastTime = time;
-					if (!dontSwitch)
-						PaperScope.restore();
 				};
 				// Call the onFrame handler and redraw the document:
 				frame(true);
@@ -185,8 +183,6 @@ var PaperScript = this.PaperScript = new function() {
 					doc.redraw();
 			}
 			return res;
-		} } finally {
-			PaperScope.restore();
 		}
 	}
 
@@ -211,21 +207,20 @@ var PaperScript = this.PaperScript = new function() {
 		var scripts = document.getElementsByTagName('script');
 		for (var i = 0, l = scripts.length; i < l; i++) {
 			var script = scripts[i];
-			// Only load this cript if it not loaded already.
+			// Only load this script if it not loaded already.
 			if (script.type === 'text/paperscript'
 					&& !script.getAttribute('loaded')) {
 				// Produce a new PaperScope for this script now. Scopes are
 				// cheap so let's not worry about the initial one that was
 				// already created.
-				var scope = new PaperScope();
+				var scope = new PaperScope(script.src || ('script-' + i));
 				// If a canvas id is provided, create a document for it now,
 				// so the active document is defined.
 				var canvas = script.getAttribute('canvas');
 				if (canvas = canvas && document.getElementById(canvas)) {
 					// Create a Document for this canvas, using the right scope
-					PaperScope.set(scope);
+					paper = scope;
 					new Document(canvas);
-					PaperScope.restore();
 				}
 				if (script.src) {
 					request(script.src, scope);

src/document/DocumentView.js

@@ -20,7 +20,7 @@ var DocumentView = this.DocumentView = Base.extend({
 	initialize: function(document) {
 		this.document = document;
 		this._bounds = this.document.bounds.clone();
-		this.matrix = new Matrix();
+		this._matrix = new Matrix();
 		this._zoom = 1;
 		this._center = this._bounds.center;
 	},
@@ -55,13 +55,21 @@ var DocumentView = this.DocumentView = Base.extend({
 	},
 
 	transform: function(matrix, flags) {
-		this.matrix.preConcatenate(matrix);
+		this._matrix.preConcatenate(matrix);
 		this._bounds = null;
+		this._inverse = null;
+	},
+
+	_getInverse: function() {
+		if (!this._inverse) {
+			this._inverse = this._matrix.createInverse();
+		}
+		return this._inverse;
 	},
 
 	getBounds: function() {
 		if (!this._bounds) {
-			this._bounds = this.matrix.transformBounds(this.document.bounds);
+			this._bounds = this._matrix.transformBounds(this.document.bounds);
 		}
 		return this._bounds;
 	},
@@ -78,11 +86,10 @@ var DocumentView = this.DocumentView = Base.extend({
 	// TODO: getMousePoint
 	// TODO: artworkToView(rect)
 	artworkToView: function(point) {
-		return this.matrix._transformPoint(point);
+		return this._matrix._transformPoint(point);
 	},
 
 	viewToArtwork: function(point) {
-		// TODO: cache the inverse matrix:
-		return this.matrix.createInverse()._transformPoint(point);
+		return this._getInverse()._transformPoint(point);
 	}
 });

src/item/Item.js

@@ -34,6 +34,16 @@ var Item = this.Item = Base.extend({
 		}
 	},
 
+	/**
+	 * The unique id of the item.
+	 */
+	getId: function() {
+		if (this._id == null) {
+			this._id = Item._id = (Item._id || 0) + 1;
+		}
+		return this._id;
+	},
+
 	/**
 	 * When passed a document, copies the item to the document,
 	 * or duplicates it within the same document. When passed an item,
@@ -996,18 +1006,4 @@ var Item = this.Item = Base.extend({
 			return this;
 		}
 	});
-}, new function() {
-	var id = 0;
-	return {
-		beans: true,
-		
-		/**
-		 * The unique id of the item.
-		 */
-		getId: function() {
-			if (this._id === undefined)
-				this._id = id++;
-			return this._id;
-		}
-	};
 });

src/path/Path.js

@@ -356,6 +356,31 @@ var Path = this.Path = PathItem.extend({
 		return false;
 	},
 
+	getOrientation: function() {
+		var sum = 0;
+		var xPre, yPre;
+		function edge(x, y) {
+			if (xPre !== undefined) {
+				sum += (xPre - x) * (y + yPre);
+			}
+			xPre = x;
+			yPre = y;
+		}
+		for (var i = 0, l = this._segments.length; i < l; i++) {
+			var seg1 = this._segments[i];
+			var seg2 = this._segments[i + 1 < l ? i + 1 : 0];
+			var point1 = seg1._point;
+			var handle1 = seg1._handleOut;
+			var handle2 = seg2._handleIn;
+			var point2 = seg2._point;
+			edge(point1._x, point1._y);
+			edge(point1._x + handle1._x, point1._y + handle1._y);
+			edge(point2._x + handle2._x, point2._y + handle2._y);
+			edge(point2._x, point2._y);
+		}
+		return sum;
+	},
+
 	getLength: function() {
 		if (this._length == null) {
 			var curves = this.getCurves();

src/tool/ToolHandler.js

@@ -121,7 +121,7 @@ var ToolHandler = this.ToolHandler = Base.extend({
 	},
 
 	onHandleEvent: function(type, pt, event) {
-		PaperScope.set(this._scope);
+		paper = this._scope;
 		switch (type) {
 		case 'mousedown':
 			this.updateEvent(type, pt, null, null, true, false, false);
@@ -178,6 +178,5 @@ var ToolHandler = this.ToolHandler = Base.extend({
 			}
 			break;
 		}
-		PaperScope.restore();
 	}
 });