feat: recalc coordinates flow

script.js

@@ -286,14 +286,103 @@
     $('cssOutput').value = toMatrix3dCSS(H);
   }
 
-  // ===== Input events =====
-  $('inpFieldW').addEventListener('input', () => {
-    const v = parseInt($('inpFieldW').value);
-    if (v > 0) { state.fieldW = v; updateAll(); }
+  // ===== Field editing =====
+  let fieldEditing = false;
+  let fieldEditW = state.fieldW;
+  let fieldEditH = state.fieldH;
+  let keepAspect = true;
+
+  function updateChainIcon() {
+    const locked = $('chainLink').querySelectorAll('.chain-locked');
+    const unlocked = $('chainLink').querySelectorAll('.chain-unlocked');
+    locked.forEach(el => el.style.display = keepAspect ? '' : 'none');
+    unlocked.forEach(el => el.style.display = keepAspect ? 'none' : '');
+    $('chainLink').classList.toggle('unlocked', !keepAspect);
+  }
+
+  function setFieldEditing(editing) {
+    fieldEditing = editing;
+    const inpW = $('inpFieldW');
+    const inpH = $('inpFieldH');
+    const options = $('fieldEditOptions');
+    const btnEdit = $('btnEditField');
+    const chain = $('chainLink');
+
+    if (editing) {
+      fieldEditW = state.fieldW;
+      fieldEditH = state.fieldH;
+      inpW.disabled = false;
+      inpH.disabled = false;
+      options.classList.add('visible');
+      btnEdit.style.display = 'none';
+      chain.classList.add('visible');
+      updateChainIcon();
+    } else {
+      inpW.value = state.fieldW;
+      inpW.disabled = true;
+      inpH.value = state.fieldH;
+      inpH.disabled = true;
+      options.classList.remove('visible');
+      btnEdit.style.display = '';
+      chain.classList.remove('visible');
+    }
+  }
+
+  $('chainLink').addEventListener('click', () => {
+    keepAspect = !keepAspect;
+    updateChainIcon();
   });
+
+  $('btnEditField').addEventListener('click', () => {
+    setFieldEditing(true);
+    $('inpFieldW').focus();
+  });
+
+  $('btnCancelField').addEventListener('click', () => {
+    setFieldEditing(false);
+  });
+
+  $('inpFieldW').addEventListener('input', () => {
+    if (!fieldEditing) return;
+    const newW = parseInt($('inpFieldW').value);
+    if (newW <= 0) return;
+    if (keepAspect) {
+      fieldEditH = Math.round(newW * state.fieldH / state.fieldW);
+      $('inpFieldH').value = fieldEditH;
+    }
+    fieldEditW = newW;
+  });
+
   $('inpFieldH').addEventListener('input', () => {
-    const v = parseInt($('inpFieldH').value);
-    if (v > 0) { state.fieldH = v; updateAll(); }
+    if (!fieldEditing) return;
+    const newH = parseInt($('inpFieldH').value);
+    if (newH <= 0) return;
+    if (keepAspect) {
+      fieldEditW = Math.round(newH * state.fieldW / state.fieldH);
+      $('inpFieldW').value = fieldEditW;
+    }
+    fieldEditH = newH;
+  });
+
+  $('btnSaveField').addEventListener('click', () => {
+    const newW = parseInt($('inpFieldW').value);
+    const newH = parseInt($('inpFieldH').value);
+    if (newW <= 0 || newH <= 0) return;
+
+    if ($('chkRescaleCoords').checked && (newW !== state.fieldW || newH !== state.fieldH)) {
+      const sx = newW / state.fieldW;
+      const sy = newH / state.fieldH;
+      state.corners.forEach(c => {
+        c.x = Math.round(c.x * sx);
+        c.y = Math.round(c.y * sy);
+      });
+    }
+
+    state.fieldW = newW;
+    state.fieldH = newH;
+    setFieldEditing(false);
+    buildCornerInputs();
+    updateAll();
   });
   $('inpWidgetW').addEventListener('input', () => {
     const v = parseInt($('inpWidgetW').value);
@@ -324,6 +413,7 @@
 
   // ===== Reset =====
   $('resetBtn').addEventListener('click', () => {
+    setFieldEditing(false);
     state.fieldW = defaultState.fieldW;
     state.fieldH = defaultState.fieldH;
     state.widgetW = defaultState.widgetW;