diff options
| -rw-r--r-- | index.html | 26 |
1 files changed, 16 insertions, 10 deletions
@@ -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); } }); } |