<!-- HAWAIIAN-COMPASS · part 7 -->
ventListener("input", () => setBearing(Number(dial.value)));
field.addEventListener("change", () => {
  const n = Number(field.value);
  if (Number.isFinite(n)) setBearing(n);
  else paint(bearing);
});

document.getElementById("nudge").addEventListener("click", (event) => {
  const button = event.target.closest("button");
  if (!button) return;
  setBearing(bearing + Number(button.dataset.step));
});

function bearingFromEvent(event) {
  const rect = svg.getBoundingClientRect();
  const x = event.clientX - rect.left - rect.width / 2;
  const y = event.clientY - rect.top - rect.height / 2;
  return (Math.atan2(x, -y) * 180) / Math.PI;
}

let dragging = false;
svg.addEventListener("pointerdown", (event) => {
  dragging = true;
  svg.setPointerCapture(event.pointerId);
  setBearing(bearingFromEvent(event));
});
svg.addEventListener("pointermove", (event) => {
  if (!dragging) return;
  setBearing(bearingFromEvent(event));
});
svg.addEventListener("pointerup", () => {
  dragging = false;
});
svg.addEventListener("pointercancel", () => {
  dragging = false;
});

window.addEventListener("keydown", (event) => {
  if (event.target === field) return;
  const step = event.altKey ? 0.1 : event.shiftKey ? 10 : 1;
  if (event.key === "ArrowRight" || event.key === "ArrowUp") {
    event.preventDefault();
    setBearing(bearing + step);
  } else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
    event.preventDefault();
    setBearing(bearing - step);
  }
});

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uanMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZGVzY3JpYmUsIGZvcm1hdERlZywgZm9ybWF0U2lnbmVkLCBQT0lOVFMgfSBmcm9tIFwiL3NyYy9iZWFyaW5nLmpzXCI7XG5cbmNvbnN0IENYID0gNTAwO1xuY29uc3QgQ1kgPSA1MDA7XG5jb25zdCBSID0gNDU4O1xuXG5jb25zdCBzdmcgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcImNhcmRcIik7XG5jb25zdCBuZWVkbGUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcIm5lZWRsZVwiKTtcbmNvbnN0IHJlYWRvdXRzID0ge1xuICBiZWFyaW5nOiBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcImJlYXJpbmdcIiksXG4gIHNwb2tlbjogZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJzcG9rZW5cIiksXG4gIG1hcms6IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwibWFya1wiKSxcbiAgb2Zmc2V0OiBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcIm9mZnNldFwiKSxcbiAgcXVhZHJhbnQ6IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwicXVhZHJhbnRcIiksXG4gIHJlY2lwcm9jYWw6IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwicmVjaXByb2NhbFwiKSxcbiAgcmVjaXByb2NhbE5hbWU6IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwicmVjaXByb2NhbC1uYW1lXCIpLFxuICBub3J0aGluZzogZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJub3J0aGluZ1wiKSxcbiAgZWFzdGluZzogZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJlYXN0aW5nXCIpLFxuICByYWRpYW5zOiBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcInJhZGlhbnNcIiksXG4gIHBvaW50QmVhcmluZzogZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJwb2ludC1iZWFyaW5nXCIpLFxufTtcbmNvbnN0IGRpYWwgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcImRpYWxcIik7XG5jb25zdCBmaWVsZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwiYmVhcmluZy1maWVsZFwiKTtcblxuZnVuY3Rpb24gcG9sYXIoYmVhcmluZywgcmFkaXVzKSB7XG4gIGNvbnN0IHJhZCA9IChiZWFyaW5nICogTWF0aC5QSSkgLyAxODA7XG4gIHJldHVybiBbQ1ggKyByYWRpdXMgKiBNYXRoLnNpbihyYWQpLCBDWSAtIHJhZGl1cyAqIE1hdGguY29zKHJhZCldO1xufVxuXG5mdW5jdGlvbiBlbChuYW1lLCBhdHRycyA9IHt9LCBwYXJlbnQgPSBzdmcpIHtcbiAgY29uc3Qgbm9kZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnROUyhcImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIsIG5hbWUpO1xuICBmb3IgKGNvbnN0IFtrZXksIHZhbHVlXSBvZiBPYmplY3QuZW50cmllcyhhdHRycykpIG5vZGUuc2V0QXR0cmlidXRlKGtleSwgdmFsdWUpO1xuICBwYXJlbnQuYXBwZW5kQ2hpbGQobm9kZSk7XG4gIHJldHVybiBub2RlO1xufVxuXG5mdW5jdGlvbiBsaW5lKGEsIHIwLCByMSwgYXR0cnMpIHtcbiAgY29uc3QgW3gxLCB5MV0gPSBwb2xhcihhLCByMCk7XG4gIGNvbnN0IFt4MiwgeTJdID0gcG9sYXIoYSwgcjEpO1xuICBlbChcImxpbmVcIiwgeyB4MSwgeTEsIHgyLCB5MiwgLi4uYXR0cnMgfSk7XG59XG5cbmZ1bmN0aW9uIHJpbmcocmFkaXVzLCBhdHRycykge1xuICBlbChcImNpcmNsZVwiLCB7IGN4OiBDWCwgY3k6IENZLCByOiByYWRpdXMsIGZpbGw6IFwibm9uZVwiLCAuLi5hdHRycyB9KTtcbn1cblxuZnVuY3Rpb24gZGlhbW9uZChiZWFyaW5nLCBpbm5lciwgb3V0ZXIsIGhhbGZBbmdsZSkge1xuICBjb25zdCBtaWQgPSAoaW5uZXIgKyBvdXRlcikgLyAyO1xuICBjb25zdCBwdHMgPSBbXG4gICAgcG9sYXIoYmVhcmluZywgb3V0ZXIpLFxuICAgIHBvbGFyKGJlYXJpbmcgKyBoYWxmQW5nbGUsIG1pZCksXG4gICAgcG9sYXIoYmVhcmluZywgaW5uZXIpLFxuICAgIHBvbGFyKGJlYXJpbmcgLSBoYWxmQW5nbGUsIG1pZCksXG4gIF07XG4gIGVsKFwicG9seWdvblwiLCB7XG4gICAgcG9pbnRzOiBwdHMubWFwKChbeCwgeV0pID0+IGAke3gudG9GaXhlZCgzKX0sJHt5LnRvRml4ZWQoMyl9YCkuam9pbihcIiBcIiksXG4gICAgY2xhc3M6IFwiZGlhbW9uZFwiLFxuICB9KTtcbn1cblxuZnVuY3Rpb24gc3RhcihiZWFyaW5nLCByYWRpdXMsIHNpemUpIHtcbiAgY29uc3QgW2N4LCBjeV0gPSBwb2xhcihiZWFyaW5nLCByYWRpdXMpO1xuICBjb25zdCBwdHMgPSBbXTtcbiAgZm9yIChsZXQgaSA9IDA7IGkgPCAxMDsgaSArPSAxKSB7XG4gICAgY29uc3QgYW5nID0gKC05MCArIGkgKiAzNikgKiAoTWF0aC5QSSAvIDE4MCk7XG4gICAgY29uc3QgciA9IGkgJSAyID09PSAwID8gc2l6ZSA6IHNpemUgKiAwLjQ7XG4gICAgcHRzLnB1c2goW2N4ICsgciAqIE1hdGguY29zKGFuZyksIGN5ICsgciAqIE1hdGguc2luKGFuZyldKTtcbiAgfVxuICBlbChcInBvbHlnb25cIiwge1xuICAgIHBvaW50czogcHRzLm1hcCgoW3gsIHldKSA9PiBgJHt4LnRvRml4ZWQoMyl9LCR7eS50b0ZpeGVkKDMpfWApLmpvaW4oXCIgXCIpLFxuICAgIGNsYXNzOiBcInN0YXJcIixcbiAgfSk7XG59XG5cbmZ1bmN0aW9uIGRyYXdDYXJkKCkge1xuICByaW5nKFIsIHsgY2xhc3M6IFwicmluZyByaW1cIiB9KTtcbi