From 9df7d9d12907d6ec2582269dd5b4f93a397cc6be Mon Sep 17 00:00:00 2001
From: Micho <github@michael-kreil.de>
Date: Wed, 22 May 2013 23:09:52 +0200
Subject: [PATCH] optimizing drawing speed and fixing #16

---
 clients/anim/main.js | 62 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/clients/anim/main.js b/clients/anim/main.js
index f96e1eb..1bd9bda 100644
--- a/clients/anim/main.js
+++ b/clients/anim/main.js
@@ -475,6 +475,66 @@ function updatePosition() {
 function renderCanvas() {
 	context.clearRect(0, 0, width, height);
 
+	var drawLists = [[],[],[],[]];
+	clients.forEach(function (client) {
+		if (client.valid) {
+			var dx = client.x - client.xo;
+			var dy = client.y - client.yo;
+			var r = Math.sqrt(dx*dx + dy*dy);
+
+			var f = (selectedCount > 0) ? (client.selected ? 1.3 : 0.4) : 1;
+
+			if ((r > 1) && (!client.settled)) {
+				if (client.selected) {
+					drawLists[0].push(client);
+				} else {
+					drawLists[1].push(client);
+				}
+			} else {
+				if (client.selected) {
+					drawLists[2].push(client);
+				} else {
+					drawLists[3].push(client);
+				}
+			}
+		}
+	});
+
+	context.strokeStyle = 'rgba(238,80,0,0.3)';
+	context.lineWidth = 2*radius;
+	context.beginPath();
+	drawLists[0].forEach(function (client) {
+		context.moveTo(client.xo, client.yo);
+		context.lineTo(client.x,  client.y );
+	})
+	context.stroke();
+
+	var a = (selectedCount > 0) ? 0.1 : 0.2;
+	context.strokeStyle = 'rgba(0,0,0,'+a+')';
+	context.lineWidth = 2*radius*((selectedCount > 0) ? 0.4 : 1);
+	context.beginPath();
+	drawLists[1].forEach(function (client) {
+		context.moveTo(client.xo, client.yo);
+		context.lineTo(client.x,  client.y );
+	})
+	context.stroke();
+
+	context.fillStyle = 'rgb(238,80,0)';
+	drawLists[2].forEach(function (client) {
+		context.beginPath();
+		context.arc(client.x, client.y, radius*1.3, 0, 2*Math.PI, false);
+		context.fill();
+	});
+
+	var r = (selectedCount > 0) ? 0.4 : 1;
+	context.fillStyle = 'rgb(0,0,0)';
+	drawLists[3].forEach(function (client) {
+		context.beginPath();
+		context.arc(client.x, client.y, radius*r, 0, 2*Math.PI, false);
+		context.fill();
+	})
+
+/*
 	clients.forEach(function (client) {
 		if (client.valid) {
 			var dx = client.x - client.xo;
@@ -488,7 +548,6 @@ function renderCanvas() {
 
 				context.strokeStyle = (client.selected) ? 'rgba(238,80,0,'+a+')' : 'rgba(0,0,0,'+a+')';
 				context.lineWidth = client.r*2*radius*f;
-				context.lineCap = 'round';
 				context.beginPath();
 				context.moveTo(client.xo, client.yo);
 				context.lineTo(client.x,  client.y );
@@ -502,6 +561,7 @@ function renderCanvas() {
 			}
 		}
 	});
+*/
 
 	if (mapDrag) {
 		var x = Math.min(mouseDragX0, mouseDragX);