refactor: separate scripts

js/drag.js

@@ -0,0 +1,45 @@
+let dragIndex = -1;
+
+function svgPoint(svg, clientX, clientY) {
+  const pt = svg.createSVGPoint();
+  pt.x = clientX;
+  pt.y = clientY;
+  return pt.matrixTransform(svg.getScreenCTM().inverse());
+}
+
+export function initDrag(svg, state, onDragEnd) {
+  function updateDragPosition(e) {
+    if (dragIndex < 0) return;
+    e.preventDefault();
+    const pt = svgPoint(svg, e.clientX, e.clientY);
+    state.corners[dragIndex].x = Math.round(Math.max(0, Math.min(state.fieldW, pt.x)));
+    state.corners[dragIndex].y = Math.round(Math.max(0, Math.min(state.fieldH, pt.y)));
+
+    const circles = svg.querySelectorAll('.corner-circle');
+    const c = state.corners[dragIndex];
+    circles[dragIndex].setAttribute('cx', c.x);
+    circles[dragIndex].setAttribute('cy', c.y);
+
+    const poly = svg.querySelector('polygon');
+    const pts = state.corners.map(p => `${p.x},${p.y}`).join(' ');
+    poly.setAttribute('points', pts);
+  }
+
+  function endDrag() {
+    dragIndex = -1;
+    svg.classList.remove('dragging');
+    document.removeEventListener('pointermove', updateDragPosition);
+    document.removeEventListener('pointerup', endDrag);
+    onDragEnd();
+  }
+
+  svg.addEventListener('pointerdown', (e) => {
+    const target = e.target.closest('.corner-circle');
+    if (!target) return;
+    e.preventDefault();
+    dragIndex = parseInt(target.dataset.index);
+    svg.classList.add('dragging');
+    document.addEventListener('pointermove', updateDragPosition);
+    document.addEventListener('pointerup', endDrag);
+  });
+}