46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
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);
|
|
});
|
|
}
|