Implement basic drawing

js/main.js

@@ -0,0 +1,95 @@
+let canvas = document.getElementById('drawingCanvas');
+let context = canvas.getContext('2d');
+
+context.lineJoin = 'round';
+
+let eraserToggle = document.getElementById('eraserToggle');
+let clearButton = document.getElementById('clearButton');
+let toolSizeSelect = document.getElementById('toolSizeSelect');
+let colourSelect = document.getElementById('colourSelect');
+
+let drawing = false;
+let points = [];
+let brush = { colour: "#000000", size: 5 };
+let erasing = false;
+
+function addPoint(e, moving)
+{
+	//TODO: Check if within bounds
+
+	let x = e.clientX - 7; //yay, magic number!
+	let y = e.clientY - 8; //^
+
+	let colour = (erasing ? "#FFFFFF" : brush.colour);
+
+	points.push({ x: x, y: y, moving: moving, size: brush.size, colour: colour });
+}
+
+canvas.onmousedown = function(e) {
+	drawing = true;
+
+	addPoint(e, false);
+
+	draw();
+}
+
+canvas.onmousemove = function(e) {
+	if(!drawing)
+	{
+		return;
+	}
+
+	addPoint(e, true);
+
+	draw();
+}
+
+//TODO: Stop drawing on mouseup outside canvas
+canvas.onmouseup = function(e) {
+	drawing = false;
+}
+
+eraserToggle.onclick = function(e) {
+	erasing = !erasing;
+	eraserToggle.innerText = (erasing ? "Eraser" : "Brush");
+}
+
+clearButton.onclick = function(e) {
+	points = [];
+
+	draw();
+}
+
+toolSizeSelect.onchange = function(e) {
+	brush.size = toolSizeSelect.value;
+}
+
+colourSelect.onchange = function(e) {
+	brush.colour = colourSelect.value;
+}
+
+function draw()
+{
+	context.clearRect(0, 0, canvas.width, canvas.height);
+
+	for(let i = 0; i < points.length; i++)
+	{
+		let point = points[i];
+
+		context.strokeStyle = point.colour;
+		context.lineWidth = point.size;
+		context.beginPath();
+		if(point.moving && i > 0)
+		{
+			let lastPoint = points[i - 1];
+			context.moveTo(lastPoint.x, lastPoint.y);
+		}
+		else
+		{
+			context.moveTo(point.x - 1, point.y);
+		}
+		context.lineTo(point.x, point.y);
+		context.closePath();
+		context.stroke();
+	}
+}

source/app.d

@@ -2,15 +2,18 @@ import vibe.vibe;
 
 void main()
 {
+	auto router = new URLRouter;
+	router.get("/js/*", serveStaticFiles("./"));
+	router.get("/", &hello);
+
 	auto settings = new HTTPServerSettings;
 	settings.port = 8080;
-	listenHTTP(settings, &hello);
+	listenHTTP(settings, router);
 
-	logInfo("Please open http://127.0.0.1:8080/ in your browser.");
 	runApplication();
 }
 
-void hello(HTTPServerRequest req, HTTPServerResponse res)
+void hello(HTTPServerRequest request, HTTPServerResponse response)
 {
-	res.writeBody("Hello, World!");
+	response.render!("index.dt");
 }

views/header.dt

@@ -0,0 +1,5 @@
+head
+	meta(charset="utf-8")
+	title #{pageTitle}
+
+	script(async,src="js/main.js")

views/index.dt

@@ -0,0 +1,28 @@
+doctype html
+html
+	- auto pageTitle = "Doodul";
+	include header
+
+	body
+		//TODO: Get our own cursor
+		canvas#drawingCanvas(width="800",height="600",style="cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAApUlEQVRYR+2TwQ2AIBAEoQ6asAYr4GMRVmQRfqjAGmyCPgQjL59zJpe4fOCzl8ncEoPzE53zBQHSDcmgDFIDNK8OyiA1QPPqoAxSAzT/uw4uj7Gdmht5S4NHSumeW2vt12wBaQW4NLi1lDJ1qJzz2SC39sQmfwPYxble8aib609i8SdeM6w6+AlcHypAqlYGZZAaoHl1UAapAZpXB2WQGqB59x28AOjbHClHA3hIAAAAAElFTkSuQmCC') 20 20, default;")
+		br
+		label(for="eraserToggle")!= "Tool: "
+		button#eraserToggle Brush
+		br
+		label(for="toolSizeSelect")!= "Tool size: "
+		select#toolSizeSelect
+			option(value="5") 5
+			option(value="10") 10
+			option(value="20") 20
+			option(value="50") 50
+		br
+		label(for="colourSelect")!= "Brush colour: "
+		select#colourSelect
+			option(value="#000000") Black
+			option(value="#FF0000") Red
+			option(value="#00FF00") Green
+			option(value="#0000FF") Blue
+		br
+		button#clearButton Clear canvas
+