Modifications to web.js, added a paper example

amclark · Jul 12, 2013 · adf3bc2 · adf3bc2
1 parent de32c18
commit adf3bc2
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 10 deletions.
diff --git a/HitTesting.html b/HitTesting.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Hit Testing</title>
+	<link rel="stylesheet" href="css/style.css">
+	<script type="text/javascript" src="js/paper-full.min.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var values = {
+			paths: 50,
+			minPoints: 5,
+			maxPoints: 15,
+			minRadius: 30,
+			maxRadius: 90
+		};
+
+		var hitOptions = {
+			segments: true,
+			stroke: true,
+			fill: true,
+			tolerance: 5
+		};
+
+		createPaths();
+
+		function createPaths() {
+			var radiusDelta = values.maxRadius - values.minRadius;
+			var pointsDelta = values.maxPoints - values.minPoints;
+			for (var i = 0; i < values.paths; i++) {
+				var radius = values.minRadius + Math.random() * radiusDelta;
+				var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
+				var path = createBlob(view.size * Point.random(), radius, points);
+				var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
+				var hue = Math.random() * 360;
+				path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
+				path.strokeColor = 'black';
+			};
+		}
+
+		function createBlob(center, maxRadius, points) {
+			var path = new Path();
+			path.closed = true;
+			for (var i = 0; i < points; i++) {
+				var delta = new Point({
+					length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
+					angle: (360 / points) * i
+				});
+				path.add(center + delta);
+			}
+			path.smooth();
+			return path;
+		}
+
+		var segment, path;
+		var movePath = false;
+		function onMouseDown(event) {
+			segment = path = null;
+			var hitResult = project.hitTest(event.point, hitOptions);
+			if (!hitResult)
+				return;
+
+			if (event.modifiers.shift) {
+				if (hitResult.type == 'segment') {
+					hitResult.segment.remove();
+				};
+				return;
+			}
+
+			if (hitResult) {
+				path = hitResult.item;
+				if (hitResult.type == 'segment') {
+					segment = hitResult.segment;
+				} else if (hitResult.type == 'stroke') {
+					var location = hitResult.location;
+					segment = path.insert(location.index + 1, event.point);
+					path.smooth();
+				}
+			}
+			movePath = hitResult.type == 'fill';
+			if (movePath)
+				project.activeLayer.addChild(hitResult.item);
+		}
+
+		function onMouseMove(event) {
+			project.activeLayer.selected = false;
+			if (event.item)
+				event.item.selected = true;
+		}
+
+		function onMouseDrag(event) {
+			if (segment) {
+				segment.point = event.point;
+				path.smooth();
+			}
+
+			if (movePath)
+				path.position += event.delta;
+		}
+	</script>
+</head>
+<body>
+	<canvas id="canvas" resize style="background:black"></canvas>
+</body>
+</html>
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,4 @@
+body {
+	margin: 0;
+	overflow: hidden;
+}
diff --git a/web.js b/web.js
@@ -1,21 +1,30 @@
 var express = require('express');
 var fs = require('fs');
+var util = require('util');
 
 var app = express.createServer(express.logger());
 
+function send_file(res, file) {
+    if (!file) return res.send('Not found', 404);
+    return fs.exists(file, function(exists) {
+        if (!exists) return res.send('Not found', 404);
+        return fs.readFile(file, function(err, data) {
+            if (err) throw err;
+            return res.send(data.toString('utf8'));
+        });
+    });
+}
+
 app.get('/', function(req, res) {
-  var buf = fs.readFileSync('index.html');
-  res.send(buf.toString('utf8'));
+    return send_file(res, 'index.html');
+});
+
+app.get('/:file', function(req, res) {
+    return send_file(res, req.params.file);
 });
 
-app.get('/js/:file', function(req, res) {
-    var file = 'js/' + req.params.file;
-    if (!req.params.file || !fs.existsSync(file)) {
-        res.send(404, 'Not found');
-    } else {
-        var buf = fs.readFileSync(file);
-        res.send(buf.toString('utf8'));
-    }
+app.get('/:dir/:file', function(req, res) {
+    return send_file(res, req.params.dir + '/' + req.params.file);
 });
 
 var port = process.env.PORT || 5000;