// board.js

let scale = 0.5; // Initial scale
let translateX = 0;
let translateY = 0;

const board = document.getElementById('board');
const boardWrapper = document.getElementById('board-wrapper');

// Constants for zoom
const MIN_SCALE = 0.1; // Minimum scale
const MAX_SCALE = 5;   // Maximum scale
const ZOOM_FACTOR = 0.1; // Zoom speed

// Apply initial scale
board.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
boardWrapper.style.backgroundPosition = `${translateX}px ${translateY}px`;

// Show images after setting scale
document.querySelectorAll('.image').forEach(img => {
    img.classList.remove('hidden');
});

boardWrapper.addEventListener('wheel', (e) => {
    e.preventDefault();

    const previousScale = scale;
    scale += e.deltaY < 0 ? ZOOM_FACTOR : -ZOOM_FACTOR;
    scale = Math.min(Math.max(MIN_SCALE, scale), MAX_SCALE);

    // Calculate cursor position relative to the board
    const rect = board.getBoundingClientRect();
    const offsetX = (e.clientX - rect.left) / previousScale;
    const offsetY = (e.clientY - rect.top) / previousScale;

    // Adjust translate to keep cursor point at the same board position
    translateX -= offsetX * (scale - previousScale);
    translateY -= offsetY * (scale - previousScale);

    board.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
    boardWrapper.style.backgroundPosition = `${translateX}px ${translateY}px`;
});

boardWrapper.addEventListener('touchstart', (e) => {
    if (e.touches.length === 2) {
        e.preventDefault();
        const touch1 = e.touches[0];
        const touch2 = e.touches[1];
        const startDistance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
        const startScale = scale;

        function zoom(e) {
            if (e.touches.length !== 2) return;
            const touch1 = e.touches[0];
            const touch2 = e.touches[1];
            const currentDistance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
            const newScale = startScale * (currentDistance / startDistance);
            scale = Math.min(Math.max(MIN_SCALE, newScale), MAX_SCALE);

            // Calculate midpoint of touches
            const midX = (touch1.clientX + touch2.clientX) / 2;
            const midY = (touch1.clientY + touch2.clientY) / 2;

            // Calculate offset relative to previous scale
            const rect = board.getBoundingClientRect();
            const offsetX = (midX - rect.left) / previousScale;
            const offsetY = (midY - rect.top) / previousScale;

            // Adjust translate to keep midpoint at same board position
            translateX -= offsetX * (scale - startScale);
            translateY -= offsetY * (scale - startScale);

            board.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
            boardWrapper.style.backgroundPosition = `${translateX}px ${translateY}px`;
        }

        document.addEventListener('touchmove', zoom);

        document.addEventListener('touchend', () => {
            document.removeEventListener('touchmove', zoom);
        }, { once: true });
    }
});

let isPanning = false;
let startPanX, startPanY;

boardWrapper.addEventListener('mousedown', (e) => {
    if (e.button === 2) { // Right mouse button
        isPanning = true;
        startPanX = e.clientX - translateX;
        startPanY = e.clientY - translateY;
        boardWrapper.style.cursor = 'grabbing';
    }
});

boardWrapper.addEventListener('mouseup', (e) => {
    if (e.button === 2) { // Right mouse button
        isPanning = false;
        boardWrapper.style.cursor = 'grab';
    }
});

boardWrapper.addEventListener('mousemove', (e) => {
    if (!isPanning) return;
    e.preventDefault();
    translateX = e.clientX - startPanX;
    translateY = e.clientY - startPanY;
    board.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
    boardWrapper.style.backgroundPosition = `${translateX}px ${translateY}px`;
});

// Add touch events for panning
boardWrapper.addEventListener('touchstart', (e) => {
    if (e.touches.length === 1) {
        isPanning = true;
        startPanX = e.touches[0].clientX - translateX;
        startPanY = e.touches[0].clientY - translateY;
        boardWrapper.style.cursor = 'grabbing';
    }
});

boardWrapper.addEventListener('touchend', (e) => {
    isPanning = false;
    boardWrapper.style.cursor = 'grab';
});

boardWrapper.addEventListener('touchmove', (e) => {
    if (!isPanning) return;
    e.preventDefault();
    translateX = e.touches[0].clientX - startPanX;
    translateY = e.touches[0].clientY - startPanY;
    board.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
    boardWrapper.style.backgroundPosition = `${translateX}px ${translateY}px`;
});

// Prevent context menu on board-wrapper
boardWrapper.addEventListener('contextmenu', (e) => {
    e.preventDefault();
});

#images.js
// 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) {
image.addEventListener('mousedown', (e) => {
if (e.button !== 0) return; // Left mouse button
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 });
});

image.addEventListener('touchstart', (e) => {
e.preventDefault();
e.stopPropagation();
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 moveImage(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 });
}

document.addEventListener('touchmove', moveImage);

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

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

image.addEventListener('touchstart', (e) => {
if (e.touches.length === 2) {
e.preventDefault();
e.stopPropagation();
showContextMenu(image, id, e.touches[0].clientX, e.touches[0].clientY);
}
});

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

function handleExistingImages() {
document.querySelectorAll('.image').forEach(image => {
const id = image.dataset.id;
const url = image.querySelector('img').src;
const x = image.offsetLeft;
const y = image.offsetTop;
const width = image.offsetWidth;
const height = image.offsetHeight;

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

addImageEventListeners(image, id);
});
}

#notes.js
// notes.js

// Assumes uploadFile, showContextMenu, addResizeListeners are available globally

socket.on('new_note', (data) => {
const note = createNoteElement(data);
document.getElementById('board').appendChild(note);
});

socket.on('updated_note', (data) => {
const note = document.querySelector(.note[data-id="${data.id}"]);
if (note) {
note.style.left = ${data.x}px;
note.style.top = ${data.y}px;
note.style.width = ${data.width}px;
note.style.height = ${data.height}px;
note.querySelector('textarea').value = data.text;
}
});

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

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

const textarea = document.createElement('textarea');
textarea.value = data.text;
textarea.addEventListener('input', () => {
const x = note.offsetLeft;
const y = note.offsetTop;
const width = note.offsetWidth;
const height = note.offsetHeight;
socket.emit('update_note', { id: data.id, text: textarea.value, x, y, width, height });
});

textarea.addEventListener('mousedown', (e) => {
e.stopPropagation();
});

note.appendChild(textarea);

addNoteEventListeners(note, data.id);

return note;
}

function addNoteEventListeners(note, id) {
note.addEventListener('mousedown', (e) => {
if (e.button !== 0) return; // Left mouse button
e.preventDefault();
e.stopPropagation();
const startX = e.clientX;
const startY = e.clientY;
const startLeft = parseFloat(note.style.left) || 0;
const startTop = parseFloat(note.style.top) || 0;

function moveNote(e) {
const deltaX = (e.clientX - startX) / scale;
const deltaY = (e.clientY - startY) / scale;
note.style.left = ${startLeft + deltaX}px;
note.style.top = ${startTop + deltaY}px;
const x = parseFloat(note.style.left) || 0;
const y = parseFloat(note.style.top) || 0;
const width = note.offsetWidth;
const height = note.offsetHeight;
socket.emit('update_note', { id, text: note.querySelector('textarea').value, x, y, width, height });
}

document.addEventListener('mousemove', moveNote);

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

note.addEventListener('touchstart', (e) => {
e.preventDefault();
e.stopPropagation();
const startX = e.touches[0].clientX;
const startY = e.touches[0].clientY;
const startLeft = parseFloat(note.style.left) || 0;
const startTop = parseFloat(note.style.top) || 0;

function moveNote(e) {
const deltaX = (e.touches[0].clientX - startX) / scale;
const deltaY = (e.touches[0].clientY - startY) / scale;
note.style.left = ${startLeft + deltaX}px;
note.style.top = ${startTop + deltaY}px;
const x = parseFloat(note.style.left) || 0;
const y = parseFloat(note.style.top) || 0;
const width = note.offsetWidth;
const height = note.offsetHeight;
socket.emit('update_note', { id, text: note.querySelector('textarea').value, x, y, width, height });
}

document.addEventListener('touchmove', moveNote);

document.addEventListener('touchend', () => {
document.removeEventListener('touchmove', moveNote);
}, { once: true });
});

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

note.addEventListener('touchstart', (e) => {
if (e.touches.length === 2) {
e.preventDefault();
e.stopPropagation();
showContextMenu(note, id, e.touches[0].clientX, e.touches[0].clientY);
}
});

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

function handleExistingNotes() {
document.querySelectorAll('.note').forEach(note => {
const id = note.dataset.id;
const text = note.querySelector('textarea').value;
const x = note.offsetLeft;
const y = note.offsetTop;
const width = note.offsetWidth;
const height = note.offsetHeight;

note.querySelector('textarea').addEventListener('input', () => {
const x = note.offsetLeft;
const y = note.offsetTop;
const width = note.offsetWidth;
const height = note.offsetHeight;
socket.emit('update_note', { id, text: note.querySelector('textarea').value, x, y, width, height });
});

note.querySelector('textarea').addEventListener('mousedown', (e) => {
e.stopPropagation();
});

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

addNoteEventListeners(note, id);
});
}

Как мне сделать чтобы перемещать элемент с помощью тачпада я мог только при двойном нажатии. Тоесть первое нажатие короткое, а второе зажимаю и перетаскиваю. Управление мышью не должно быть нарушено