// images.js

// Assumes uploadFile, showContextMenu, addResizeListeners are available globally

socket.on('new_image', (data) => {
    const image = createImageElement(data);
    document.getElementById('board').appendChild(image);
});

socket.on('updated_image', (data) => {
    const image = document.querySelector(`.image[data-id="${data.id}"]`);
    if (image) {
        image.style.left = `${data.x}px`;
        image.style.top = `${data.y}px`;
        image.style.width = `${data.width}px`;
        image.style.height = `${data.height}px`;
        image.querySelector('img').src = data.url;
    }
});

socket.on('element_deleted', (data) => {
    if (data.type === 'image') {
        const element = document.querySelector(`.image[data-id="${data.id}"]`);
        if (element) {
            element.remove();
        }
    }
});

function createImageElement(data) {
    const image = document.createElement('div');
    image.className = 'image';
    image.dataset.id = data.id;
    image.style.left = `${data.x}px`;
    image.style.top = `${data.y}px`;
    image.style.width = `${data.width}px`;
    image.style.height = `${data.height}px`;

    const img = document.createElement('img');
    img.src = data.url;
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.objectFit = 'contain'; // Maintains aspect ratio

    image.appendChild(img);

    addImageEventListeners(image, data.id);

    return image;
}

function addImageEventListeners(image, id) {
    let isTouchDragEnabled = false; // Флаг для контроля активности сенсорных обработчиков

    image.addEventListener('mousedown', (e) => {
        if (e.button !== 0) return; // Только для левой кнопки мыши
        e.preventDefault();
        e.stopPropagation();

        const startX = e.clientX;
        const startY = e.clientY;
        const startLeft = parseFloat(image.style.left) || 0;
        const startTop = parseFloat(image.style.top) || 0;

        function moveImage(e) {
            const deltaX = (e.clientX - startX) / scale;
            const deltaY = (e.clientY - startY) / scale;
            image.style.left = `${startLeft + deltaX}px`;
            image.style.top = `${startTop + deltaY}px`;
            const x = parseFloat(image.style.left) || 0;
            const y = parseFloat(image.style.top) || 0;
            const width = image.offsetWidth;
            const height = image.offsetHeight;
            socket.emit('update_image', { id, url: image.querySelector('img').src, x, y, width, height });
        }

        document.addEventListener('mousemove', moveImage);

        document.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', moveImage);
        }, { once: true });
    });

    function startTouchDrag(e) {
        e.preventDefault();
        e.stopPropagation();

        hideContextMenu(); // Скрыть контекстное меню при начале сенсорного перетаскивания

        const startX = e.touches[0].clientX;
        const startY = e.touches[0].clientY;
        const startLeft = parseFloat(image.style.left) || 0;
        const startTop = parseFloat(image.style.top) || 0;

        function moveTouch(e) {
            const deltaX = (e.touches[0].clientX - startX) / scale;
            const deltaY = (e.touches[0].clientY - startY) / scale;
            image.style.left = `${startLeft + deltaX}px`;
            image.style.top = `${startTop + deltaY}px`;
            const x = parseFloat(image.style.left) || 0;
            const y = parseFloat(image.style.top) || 0;
            const width = image.offsetWidth;
            const height = image.offsetHeight;
            socket.emit('update_image', { id, url: image.querySelector('img').src, x, y, width, height });
        }

        function endTouchDrag() {
            document.removeEventListener('touchmove', moveTouch);
            document.removeEventListener('touchend', endTouchDrag);
        }

        document.addEventListener('touchmove', moveTouch);
        document.addEventListener('touchend', endTouchDrag);
    }

    image.addEventListener('dblclick', (e) => {
        e.preventDefault();
        e.stopPropagation();
        showContextMenu(image, id, e.clientX, e.clientY);

        // Переключаем состояние перемещения
        isTouchDragEnabled = !isTouchDragEnabled;

        if (isTouchDragEnabled) {
            image.addEventListener('touchstart', startTouchDrag);

            // Добавляем слушатель, чтобы отключить перемещение при клике вне изображения
            document.addEventListener('mousedown', checkClickOutside);
        } else {
            image.removeEventListener('touchstart', startTouchDrag);
            document.removeEventListener('mousedown', checkClickOutside);
        }
    });

    function checkClickOutside(e) {
        if (!image.contains(e.target)) {
            image.removeEventListener('touchstart', startTouchDrag);
            isTouchDragEnabled = false;
            document.removeEventListener('mousedown', checkClickOutside);
        }
    }

    addResizeListeners(image, id, 'image');
}

function handleExistingImages() {
    document.querySelectorAll('.image').forEach(image => {
        const id = image.dataset.id;
        addImageEventListeners(image, id);
    });
}

Расскажи как работает код