refactor: separate scripts

js/inputs.js

@@ -0,0 +1,46 @@
+const LABELS = ['TL', 'TR', 'BR', 'BL'];
+
+function $(id) { return document.getElementById(id); }
+
+export function buildCornerInputs(state) {
+  const container = $('cornerInputs');
+  container.innerHTML = '';
+  LABELS.forEach((label, i) => {
+    const row = document.createElement('div');
+    row.className = 'corner-input-row';
+    row.innerHTML = `
+      <span class="label">${label}</span>
+      <label><span>x</span><input id="c${i}x" type="number" value="${state.corners[i].x}"></label>
+      <label><span>y</span><input id="c${i}y" type="number" value="${state.corners[i].y}"></label>
+    `;
+    container.appendChild(row);
+  });
+}
+
+export function syncCornerInputs(state) {
+  state.corners.forEach((c, i) => {
+    const xi = $(`c${i}x`);
+    const yi = $(`c${i}y`);
+    if (document.activeElement !== xi) xi.value = c.x;
+    if (document.activeElement !== yi) yi.value = c.y;
+  });
+}
+
+export function readCornerInputs(state) {
+  state.corners.forEach((c, i) => {
+    const x = parseInt($(`c${i}x`).value);
+    const y = parseInt($(`c${i}y`).value);
+    if (!isNaN(x)) c.x = x;
+    if (!isNaN(y)) c.y = y;
+  });
+}
+
+export function syncFieldInputs(state, fieldW, fieldH) {
+  $('inpFieldW').value = fieldW;
+  $('inpFieldH').value = fieldH;
+}
+
+export function syncWidgetInputs(state) {
+  $('inpWidgetW').value = state.widgetW;
+  $('inpWidgetH').value = state.widgetH;
+}