summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'index.html')
-rw-r--r--index.html18
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>