Use delta angle from the very beginning

This solves the synchronization issue and gives the machine a bit of
peculiar state. Mouse movement can get out of sync, but this does not
seem to be big deal.

1 files changed, 16 insertions, 10 deletions

diff --git a/index.html b/index.html
index c33ded8..9399f0c 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,13 @@
 <meta charset="utf-8">
 <title>Wadsworth/Wheatstone</title>
 <style>
+svg {
+	display: block;
+	margin: 1em auto;
+	border: 1px solid black;
+	height: 32em;
+	max-height: 80vh;
+}
 .pointer {
 	transform: none;
 	transform-origin: 50% 50%;
@@ -20,25 +27,24 @@ let dragging = null;
 let svg = null;
 function start(element) { dragging = element; }
 function stop() { dragging = null; }
-function update(element, angle) {
-	element.dataset.angle = angle;
-	element.style.transform = `rotate(${Math.floor(angle)}deg)`;
+function update(element, diff) {
+	element.dataset.angle = Number(element.dataset.angle) + diff;
+	element.style.transform = `rotate(${Math.floor(element.dataset.angle)}deg)`;
 }
 function onmove(event) {
 	if (dragging) {
 		const rect = svg.getBoundingClientRect();
 		const x = event.clientX - (rect.left + rect.width / 2);
 		const y = event.clientY - (rect.top + rect.height / 2);
-		let theta = Math.atan2(y, x);
-		theta = theta > 0 ? theta : theta + Math.PI * 2;
-		let angle = theta * 180.0 / Math.PI;
-		const current = Number(dragging.dataset.angle);
-		const diff = (angle - current) % 360.0;
-		update(dragging, current + diff);
+		const theta = Math.atan2(y, x) - Math.atan2(y - event.movementY, x - event.movementX);
+		let diff = theta * 180.0 / Math.PI;
+		if (diff > 180) { diff -= 360.0; }  // We jump back full circle to keep the diff values meaningful in context.
+		if (diff < -180) { diff += 360.0; }
+		update(dragging, diff);
 		svg.querySelectorAll(".pointer").forEach((x) => {
 			if (x != dragging) {
 				const ratio = Number(dragging.dataset.ratio) / Number(x.dataset.ratio);
-				update(x, Number(x.dataset.angle) + diff * ratio);
+				update(x, diff * ratio);
 			}
 		});
 	}