Added simple controls for ratio customization

1 files changed, 16 insertions, 2 deletions

diff --git a/index.html b/index.html
index 4e951be..b845c31 100644
--- a/index.html
+++ b/index.html
@@ -31,6 +31,14 @@ function update(element, diff) {
 	element.dataset.angle = Number(element.dataset.angle) + diff;
 	element.style.transform = `rotate(${Math.floor(element.dataset.angle)}deg)`;
 }
+function reset() {
+	if (svg) {
+		svg.querySelectorAll(".pointer").forEach((x) => {
+			x.dataset.angle = 0;
+			update(x, 0);
+		});
+	}
+}
 function onmove(event) {
 	if (dragging) {
 		const rect = svg.getBoundingClientRect();
@@ -49,14 +57,20 @@ function onmove(event) {
 		});
 	}
 }
+function change(query, ratio) {
+	svg.querySelector(query).dataset.ratio = ratio;
+}
 </script>
 <svg onload="svg = this" onmousemove="onmove(event)" onmouseleave="stop()" onmouseup="stop()" viewBox="0 0 100 100">
-<g data-angle="0" data-ratio="27" class="pointer">
+<g id="outer" data-angle="0" data-ratio="27" class="pointer">
 	<path d="M49 50 L80 50 Z"/>
 	<circle onmousedown="start(this.parentNode)" cx="85" cy="50" r="5"/>
 </g>
-<g data-angle="0" data-ratio="26" class="pointer">
+<g id="inner" data-angle="0" data-ratio="26" class="pointer">
 	<path d="M49 50 L70 50 Z"/>
 	<circle onmousedown="start(this.parentNode)" cx="75" cy="50" r="5"/>
 </g>
 </svg>
+<input onchange='change("#outer", this.value)' type="number" value="27" autocomplete="off">
+<input onchange='change("#inner", this.value)' type="number" value="26" autocomplete="off">
+<button onclick="reset()">Reset Position</button>