Fix examples to use view.bounds/size/center instead of document.bounds/size.

examples/Animated/AnimatedStar.html

@@ -8,13 +8,12 @@
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
 		var layer = document.activeLayer;
-	
+
 		var values = {
 			count: 34,
 			points: 32
 		};
 	
-		var center = new Point(document.size) / 2;
 		for (var i = 0; i < values.count; i++) {
 			var offset = new Point(20 + 10 * i, 0);
 			var path = new Path();
@@ -29,7 +28,7 @@
 			}
 			path.smooth();
 			var placedSymbol = new PlacedSymbol(path);
-			placedSymbol.position = center;
+			placedSymbol.position = view.center;
 			layer.appendBottom(placedSymbol);
 		}
 
@@ -43,7 +42,7 @@
 		
 		// Reposition the paths whenever the window is resized:
 		function onResize(event) {
-			document.activeLayer.position = event.size / 2;
+			document.activeLayer.position = view.center;
 		}
 	</script>
 </head>

examples/Animated/Extruded.html

@@ -35,13 +35,13 @@
 		var path1 = new Path();
 		path1.segments = segments;
 		path1.closed = true;
-		path1.position = document.bounds.center;
+		path1.position = view.center;
 		path1.scale(1.5);
 
 		var path2 = new Path();
 		path2.segments = segments;
 		path2.closed = true;
-		path2.position = document.bounds.center;
+		path2.position = view.center;
 		path2.scale(2);
 
 		var length1 = path1.length;
@@ -52,10 +52,10 @@
 				length: 100
 			});
 			path1.rotate(-0.5);
-			path1.position = document.bounds.center - vector;
+			path1.position = view.center - vector;
 
 			path2.rotate(-0.5);
-			path2.position = document.bounds.center + vector.normalize(50);
+			path2.position = view.center + vector.normalize(50);
 
 			for (var i = 0; i < lineCount; i++) {
 				var path = lineGroup.children[i];

examples/Animated/Flock.html

@@ -10,14 +10,6 @@
 		// Adapted from Flocking Processing example by Daniel Schiffman:
 		// http://processing.org/learning/topics/flocking.html
 		
-		// Reposition the heart path whenever the window is resized:
-		DomEvent.add(window, {
-			resize: function(event) {
-				size = document.size;
-				heartPath.position = document.bounds.center;
-			}
-		});
-		
 		document.currentStyle = {
 			strokeColor: 'white',
 			strokeWidth: 2,
@@ -28,9 +20,9 @@
 		head.fillColor = 'white';
 		head.strokeColor = null;
 		var headSymbol = new Symbol(head);
-		
+
-		var size = document.size;
+		var size = view.size;
-		
+	
 		var Boid = Base.extend({
 			initialize: function(position, maxSpeed, maxForce) {
 				var strength = Math.random() * 0.5;
@@ -254,7 +246,7 @@
 			[[545.6171875, 549.1171875], [17.1787109375, -30.458984375], [-13.517578125, 24.0498046875]]
 		]);
 		heartPath.closed = true;
-		heartPath.position = document.bounds.center;
+		heartPath.position = view.center;
 		heartPath.strokeColor = null;
 		heartPath.scale(1.5);
 		
@@ -265,9 +257,9 @@
 
 		// Add the boids:
 		for (var i = 0; i < 30; i++) {
-			var position = Point.random() * document.size;
+			var position = Point.random() * size;
 			boids.push(new Boid(position, 10, 0.05));
-		}		
+		}
 
 		function onFrame(event) {
 			for (var i = 0, l = boids.length; i < l; i++) {
@@ -279,6 +271,12 @@
 			}
 		}
 
+		// Reposition the heart path whenever the window is resized:
+		function onResize(event) {
+			size = view.size;
+			heartPath.position = view.center;
+		}
+
 		function onMouseDown(event) {
 			groupTogether = !groupTogether;
 		}

examples/Animated/Lines.html

@@ -15,7 +15,7 @@
 			path.closed = true;
 		}
 
-		var position = document.bounds.center;
+		var position = view.center;
 		var mousePos = position;
 		var children = document.activeLayer.children;
 		var count = 0;

examples/Animated/RadialRainbows.html

@@ -7,7 +7,7 @@
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		var point = new Point(document.size) / 2;
+		var point = view.center;
 		
 		var colors = [];
 		for (var i = 0, l = 60; i < l; i++) {
@@ -17,9 +17,9 @@
 			colors.push(color);
 		}
 
-		var path = new Path.Rectangle(document.bounds);
+		var path = new Path.Rectangle(view.bounds);
 		var gradient = new Gradient(colors, 'radial');
-		var radius = Math.max(document.size.height, document.size.width) * 0.75;
+		var radius = Math.max(view.size.width, view.size.height) * 0.75;
 		var gradientColor = new GradientColor(gradient, point, point + [radius, 0]);
 		path.fillColor = gradientColor;
 		
@@ -64,17 +64,14 @@
 			gradientColor.hilite = mouseDown ? point : point + vector;
 		}
 		
-		DomEvent.add(window, {
+		function onResize(event) {
-			resize: function(event) {
+			point = view.center;
-				point = new Point(document.size) / 2;
+			path.bounds = view.bounds;
-				path.bounds = document.bounds;
+			var gradientColor = path.fillColor;
-				var radius = Math.max(document.size.height, document.size.width) * 0.75;
+			gradientColor.origin = point;
-				var gradientColor = path.fillColor;
+			var radius = Math.max(view.size.width, view.size.height) * 0.75;
-				gradientColor.origin = point;
+			gradientColor.destination = point + [radius, 0];
-				var radius = Math.max(document.size.height, document.size.width) * 0.75;
+		}
-				gradientColor.destination = point + [radius, 0];
-			}
-		});
 	</script>
 </head>
 <body>

examples/Animated/Raster.html

@@ -10,7 +10,7 @@
 		// http://en.wikipedia.org/wiki/Lenna
 		var raster = new Raster('lenna');
 		var lastScale = 1;
-		var center = document.bounds.center;
+		var center = view.center;
 		function onFrame(event) {
 			var scale = (Math.sin(event.time * 2) + 1) / 2;
 			raster.scale(scale / lastScale);

examples/Animated/RoundedRectangles.html

@@ -7,7 +7,7 @@
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		var mousePoint = document.bounds.center;
+		var mousePoint = view.center;
 		var amount = 25;
 		var colors = ['red', 'white', 'blue', 'white'];
 

examples/Animated/Smoothing.html

@@ -11,22 +11,22 @@
 		var points = 10;
 		var smooth = true;
 		var path = new Path();
-		var mousePos = document.bounds.center / 2;
+		var mousePos = view.center / 2;
 		var pathHeight = mousePos.y;
 		path.fillColor = 'black';
 		initializePath();
 
 		function initializePath() {
-			center = document.bounds.center;
+			center = view.center;
-			width = document.bounds.width;
+			width = view.size.width;
-			height = document.bounds.height / 2;
+			height = view.size.height / 2;
 			path.segments = [];
-			path.add(document.bounds.bottomLeft);
+			path.add(view.bounds.bottomLeft);
 			for (var i = 1; i < points; i++) {
 				var point = new Point(width / points * i, center.y);
 				path.add(point);
 			}
-			path.add(document.bounds.bottomRight);
+			path.add(view.bounds.bottomRight);
 			path.selected = true;
 		}
 
@@ -59,13 +59,9 @@
 		}
 
 		// Reposition the path whenever the window is resized:
-		DomEvent.add(window, {
+		function onResize(event) {
-			resize: function(event) {
+			initializePath();
-				initializePath();
+		}
-				onFrame();
-				document.redraw();
-			}
-		});
 	</script>
 </head>
 <body>

examples/Scripts/Arcs.html

@@ -7,7 +7,7 @@
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		var point = document.bounds.center;
+		var point = view.center;
 		for (var i = 0; i < 30; i++) {
 			var vector = new Point(10 + 20 * i, 0).rotate(i);
 			var l = vector.length;

examples/Scripts/BouncingBalls.html

@@ -31,7 +31,7 @@
 			},
 
 			iterate: function() {
-				var size = document.size;
+				var size = view.size;
 				this.vector.y += this.gravity;
 				this.vector.x *= 0.99;
 				var pre = this.point + this.vector;
@@ -50,7 +50,7 @@
 		});
 
 		for (var i = 0; i < 10; i++) {
-			var position = Point.random() * document.size;
+			var position = Point.random() * view.size;
 			var vector = (Point.random() - [0.5, 0]) * [50, 100];
 			var ball = new Ball(position, vector);
 			balls.push(ball);

examples/Scripts/Chain.html

@@ -16,7 +16,7 @@
 		path.strokeCap = 'round';
 		var size = 20;
 		var segments = path.segments;
-		var center = document.bounds.center;
+		var center = view.center;
 		for (var i = 0; i < size; i++)
 			path.add(center + new Point(i * 100, 0));
 

examples/Scripts/Circle.html

@@ -7,7 +7,7 @@
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		var center = document.bounds.center;
+		var center = view.center;
 		for (var i = 0; i < 70; i++) {
 			var path = new Path.Circle(center, i * 5);
 			path.strokeColor = 'black';

examples/Scripts/RotationRaster.html

@@ -28,14 +28,12 @@
 				}
 			}
 		}
-		document.activeLayer.position = document.bounds.center;
+		document.activeLayer.position = view.center;
 
 		// Reposition the paths whenever the window is resized:
-		DomEvent.add(window, {
+		function onResize(event) {
-			resize: function(event) {
+			document.activeLayer.position = view.center;
-				document.activeLayer.position = document.bounds.center;
+		}
-			}
-		});
 	</script>
 </head>
 <body>

examples/Scripts/RoundRectangle.html

@@ -16,7 +16,7 @@
 				path.remove();
 			var size = Math.abs(Math.sin(event.count / 40)) * 150 + 10;
 			path = new Path.RoundRectangle(rect, size);
-			path.position = document.bounds.center;
+			path.position = view.center;
 		}
 	</script>
 </head>

examples/Tools/MetaBalls.html

@@ -17,7 +17,7 @@
 		var circlePaths = [];
 		var circlePath;
 		var radius = 50;
-		circlePaths.push(new Path.Circle(document.bounds.center, 100));
+		circlePaths.push(new Path.Circle(view.center, 100));
 		function onMouseDown(event) {
 			circlePath = null;
 			for (var i = 0, l = circlePaths.length; i < l; i++) {