// iframe.js

socket.on('new_iframe', (data) => {
    const iframe = createIframeElement(data);
    document.getElementById('board').appendChild(iframe);
});

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

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

// Event listener for 'add-iframe' button
document.getElementById('add-iframe').addEventListener('click', () => {
    const formHtml = `<div id="iframe-form" style="position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.1); z-index: 1000;">
        <label for="iframe-url" style="display:block; margin-bottom:8px;">Iframe URL:</label>
        <input type="text" id="iframe-url" placeholder="Enter iframe URL" style="width: calc(100% - 22px); padding:10px; margin-bottom:12px; border:1px solid #ccc; border-radius:4px;"><br>
        <button id="add-iframe-submit" style="padding:10px 20px; background-color:#007bff; color:white; border:none; border-radius:4px; cursor:pointer; margin-right:8px;">Add Iframe</button>
        <button id="cancel-iframe" style="padding:10px 20px; background-color:#ccc; color:white; border:none; border-radius:4px; cursor:pointer;">Cancel</button>
    </div>`;

    document.body.insertAdjacentHTML('beforeend', formHtml);

    document.getElementById('add-iframe-submit').addEventListener('click', () => {
        const url = document.getElementById('iframe-url').value;
        if (url) {
            addIframeToCenter({ url });
            closeModal();
        }
    });

    document.getElementById('cancel-iframe').addEventListener('click', closeModal);

    function closeModal() {
        const form = document.getElementById('iframe-form');
        if (form) {
            form.remove();
        }
    }
});

function addIframeToCenter(iframeData) {
    const width = 800; // default width
    const height = 925; // default height

    // Get visible area dimensions
    const rect = boardWrapper.getBoundingClientRect();

    // Calculate center coordinates considering current scale and translation
    const centerX = ((rect.width / 2 - translateX) / scale) - width / 2;
    const centerY = ((rect.height / 2 - translateY) / scale) - height / 2;

    socket.emit('create_iframe', {
        name: 'Iframe',
        url: iframeData.url,
        x: centerX,
        y: centerY,
        width,
        height,
        board_id: currentBoardId
    });
}

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

    const iframe = document.createElement('iframe');
    iframe.src = data.url;
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.border = 'none';
    iframe.style.pointerEvents = 'none'

    iframeContainer.appendChild(iframe);

    addIframeEventListeners(iframeContainer, data.id);

    return iframeContainer;
}

function addIframeEventListeners(iframeContainer, id) {
    let isTouchDragEnabled = false;

    iframeContainer.addEventListener('mousedown', (e) => {
        if (e.button !== 0) return; // Only respond to left mouse button
        e.preventDefault();
        e.stopPropagation();

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

        function moveIframe(e) {
            const deltaX = (e.clientX - startX) / scale;
            const deltaY = (e.clientY - startY) / scale;
            iframeContainer.style.left = `${startLeft + deltaX}px`;
            iframeContainer.style.top = `${startTop + deltaY}px`;

            const x = parseFloat(iframeContainer.style.left) || 0;
            const y = parseFloat(iframeContainer.style.top) || 0;
            const width = iframeContainer.offsetWidth;
            const height = iframeContainer.offsetHeight;

            socket.emit('update_iframe', { id, x, y, width, height });
        }

        document.addEventListener('mousemove', moveIframe);

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

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

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

        function moveTouch(e) {
            const deltaX = (e.touches[0].clientX - startX) / scale;
            const deltaY = (e.touches[0].clientY - startY) / scale;
            iframeContainer.style.left = `${startLeft + deltaX}px`;
            iframeContainer.style.top = `${startTop + deltaY}px`;

            const x = parseFloat(iframeContainer.style.left) || 0;
            const y = parseFloat(iframeContainer.style.top) || 0;
            const width = iframeContainer.offsetWidth;
            const height = iframeContainer.offsetHeight;

            socket.emit('update_iframe', { id, x, y, width, height });
        }

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

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

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

        // Toggle touch drag
        isTouchDragEnabled = !isTouchDragEnabled;

        if (isTouchDragEnabled) {
            iframeContainer.addEventListener('touchstart', startTouchDrag);
            document.addEventListener('mousedown', checkClickOutside);
        } else {
            iframeContainer.removeEventListener('touchstart', startTouchDrag);
            document.removeEventListener('mousedown', checkClickOutside);
        }
    });

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

    addResizeListeners(iframeContainer, id, 'iframe');
}

function handleExistingIframes() {
    document.querySelectorAll('.iframe').forEach(iframeContainer => {
        const id = iframeContainer.dataset.id;
        addIframeEventListeners(iframeContainer, id);
    });
}

/* iframe.css */
.iframe {
    position: absolute;
}

{% extends "base.html" %}
{% block title %}Board View{% endblock %}
{% block content %}
<!--<h2>{{ board.name }}</h2>-->

<script type="text/javascript">
    // Определяем currentBoardId, чтобы он был доступен в JavaScript
    const currentBoardId = {{ board.id }};
</script>

<div id="board-wrapper">
    <div id="board">
        {% for note in notes %}
        <div class="note" data-id="{{ note.id }}"
            style="left: {{ note.x }}px; top: {{ note.y }}px; width: {{ note.width }}px; height: {{ note.height }}px;">
            <textarea>{{ note.text }}</textarea>
        </div>
        {% endfor %}
        {% for image in images %}
        <div class="image hidden" data-id="{{ image.id }}"
            style="left: {{ image.x }}px; top: {{ image.y }}px; width: {{ image.width }}px; height: {{ image.height }}px;">
            <img src="{{ image.url }}" style="width: 100%; height: 100%; object-fit: contain;">
        </div>
        {% endfor %}
        {% for audio in audios %}
        <div class="audio" data-id="{{ audio.id }}"
            style="left: {{ audio.x }}px; top: {{ audio.y }}px; width: {{ audio.width }}px; height: {{ audio.height }}px;">
            <div class="audio-file-name">{{ audio.file_name }}</div>
            <audio src="{{ audio.url }}"></audio>
            <div class="controls">
                <button class="play-pause">▶️</button>
                <button class="stop">⏹️</button>
                <input class="progress-bar" type="range" min="0" step="0.1" max="32.078333">
            </div>
        </div>
        {% endfor %}
        {% for link in links %}
        <div class="link" data-id="{{ link.id }}" data-url="{{ link.url }}"
            style="left: {{ link.x }}px; top: {{ link.y }}px; width: {{ link.width }}px; height: {{ link.height }}px;">
            <div class="link-icon">🔗</div>
            <div class="link-text">{{ link.name }}</div>
        </div>
        {% endfor %}
        {% for iframe in iframes %}
        <div class="iframe" data-id="{{ iframe.id }}" style="left:{{ iframe.x }}px; top:{{ iframe.y }}px; width:{{ iframe.width }}px; height:{{ iframe.height }}px;">
            <iframe src="{{ iframe.url }}" style="width:100%; height:100%; border:none;"></iframe>
        </div>
        {% endfor %}
    </div>
</div>

<div id="menu-container">
    <button id="menu-button">Menu</button>
    <div id="dropdown-menu" class="hidden">
        <button id="add-note">Add Comment</button>
        <button id="add-image">Add Image</button>
        <button id="add-audio">Add Audio</button>
        <button id="add-link">Add Link</button>
        <button id="add-iframe">Add Iframe</button>
        <button id="toggle-fullscreen">Toggle Fullscreen</button>
        <button id="toggle-vr">Toggle VR</button>
    </div>
</div>

<!-- Подключение Socket.io -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>

<!-- Инициализация Socket -->
<script src="{{ url_for('static', filename='js/socket.js') }}"></script>

<!-- Другие JavaScript файлы -->
<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
<script src="{{ url_for('static', filename='js/contextMenu.js') }}"></script>
<script src="{{ url_for('static', filename='js/resize.js') }}"></script>
<script src="{{ url_for('static', filename='js/notes.js') }}"></script>
<script src="{{ url_for('static', filename='js/images.js') }}"></script>
<script src="{{ url_for('static', filename='js/audio.js') }}"></script>
<script src="{{ url_for('static', filename='js/link.js') }}"></script>
<script src="{{ url_for('static', filename='js/iframe.js') }}"></script>
<script src="{{ url_for('static', filename='js/board.js') }}"></script>
<script src="{{ url_for('static', filename='js/vr.js') }}"></script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>

{% endblock %}

Приделай к моему элементу iframe ручку для перетаскивания элемента