With the code below, I can select areas on an image. However, there is an issue when trying to remove a selected area. Let’s say I’ve created 4 areas, and I want to remove the second one. When I right-click on the second area and select “remove,” it actually removes the most recently added area, and the “remove” action only works once. When I try to remove it again, it doesn’t work.
How can I modify this code so that it only removes the area that was clicked on, and works correctly for each area individually?
Here’s the code:
const imageContainer = document.getElementById('image-container');
const image = document.getElementById('image');
const selectedAreasList = document.getElementById('selected-areas');
let isDragging = false;
let startX, startY, endX, endY;
let currentSelection;
let selections = []; // Seçilmiş alanları saklamak için bir dizi
imageContainer.addEventListener('mousedown', (e) => {
if (e.button !== 0) return; // Sadece sol tıklama olayını ele al
if (e.target.classList.contains('selection-box')) {
e.preventDefault();
return;
}
isDragging = true;
startX = e.clientX - imageContainer.getBoundingClientRect().left;
startY = e.clientY - imageContainer.getBoundingClientRect().top;
currentSelection = document.createElement('div');
currentSelection.className = 'selection-box';
currentSelection.style.left = startX + 'px';
currentSelection.style.top = startY + 'px';
imageContainer.appendChild(currentSelection);
selections.push(currentSelection); // Yeni seçili alanı diziye ekleyin
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
endX = e.clientX - imageContainer.getBoundingClientRect().left;
endY = e.clientY - imageContainer.getBoundingClientRect().top;
let width = endX - startX;
let height = endY - startY;
// Genişlik ve yükseklik en az 10 piksel olacak şekilde sınırla
width = Math.max(width, 10);
height = Math.max(height, 10);
currentSelection.style.left = startX + 'px';
currentSelection.style.top = startY + 'px';
currentSelection.style.width = width + 'px';
currentSelection.style.height = height + 'px';
currentSelection.style.display = 'block';
});
document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
offsetX = currentSelection.getBoundingClientRect().left - imageContainer.getBoundingClientRect().left;
offsetY = currentSelection.getBoundingClientRect().top - imageContainer.getBoundingClientRect().top;
currentSelection.style.cursor = 'grab';
// Sağ tıklama menüsünü seçilen alana ekleyin
currentSelection.addEventListener('contextmenu', (e) => {
e.preventDefault();
const contextMenu = document.createElement('div');
contextMenu.className = 'context-menu';
contextMenu.innerHTML = '<div class="context-menu-item">Kaldır</div>';
contextMenu.style.left = e.clientX + 'px'; // Mouseun X konumu
contextMenu.style.top = e.clientY + 'px'; // Mouseun Y konumu
document.body.appendChild(contextMenu);
// Kaldır seçeneğine tıklandığında seçimi kaldırın
const removeItem = contextMenu.querySelector('.context-menu-item');
removeItem.addEventListener('click', () => {
imageContainer.removeChild(currentSelection); // Seçim kutusunu kaldır
const index = selections.indexOf(currentSelection);
if (index !== -1) {
selections.splice(index, 1); // Seçim kutusunu diziden kaldır
}
document.body.removeChild(contextMenu); // Sağ tık menüsünü kaldır
});
// Sağ tık menüsünü kaybolmasını sağlamak için belgeye bir tıklama olayı ekleyin
document.addEventListener('click', () => {
document.body.removeChild(contextMenu);
});
});
selectedAreasList.innerHTML += `<li>(${startX}, ${startY}) - (${endX}, ${endY})</li>`;
}
});