diff options
| -rw-r--r-- | index.html | 18 |
1 files changed, 16 insertions, 2 deletions
@@ -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> |