call_flow/flow/static/js/connections.js

// connections.js

// Asegurar que window.tabConnections exista
if (!window.tabConnections) {
    window.tabConnections = {};
}

let canvases = {}; // Almacena los contextos de canvas por pestaña
let tabStates = {}; // Almacena variables de estado por pestaña

document.addEventListener('DOMContentLoaded', () => {
    const tabsList = document.getElementById("tabsList");
    const tabs = tabsList.querySelectorAll("li.tab");
    tabs.forEach(tab => {
        const tabId = tab.id.slice(3); // Crear canvas independiente por cada tab
        initializeCanvas(tabId);
    });

    tabsList.addEventListener("click", (e) => {
        if (e.target && e.target.matches("li.tab")) {
            const tabId = e.target.id.slice(3);
            switchTab(tabId); // Mostrar canvas correcto cuando se cambia de tab
        }
    });
});

function switchTab(tabId) {
    // Ocultar todos los canvases
    Object.keys(canvases).forEach(id => {
        const canvas = document.getElementById(`canvas${id}`);
        if (canvas) {
            canvas.style.display = "none";
        }
    });

    // Mostrar el canvas de la tab actual
    const currentCanvas = document.getElementById(`canvas${tabId}`);
    if (currentCanvas) {
        currentCanvas.style.display = "block";
        initializeCanvas(tabId); // Asegurar que el canvas esté correctamente inicializado
    }
}

function initializeCanvas(tabId) {
    const canvas = document.getElementById(`canvas${tabId}`);
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    canvases[tabId] = ctx;

    // Ajustar el tamaño del canvas
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;

    const nodeContainer = document.getElementById(`nodeContainer${tabId}`);

    // Inicializar estado por pestaña
    if (!tabStates[tabId]) {
        tabStates[tabId] = {
            draggingLine: false,
            startPoint: null,
        };
    }

    // Remover event listeners existentes para evitar duplicados
    if (nodeContainer._mousedownHandler) {
        nodeContainer.removeEventListener('mousedown', nodeContainer._mousedownHandler);
    }

    // Escuchar eventos de movimiento de nodos
    nodeContainer._mousedownHandler = (e) => {
        if (e.target.classList.contains('port')) {
            startConnection(e, tabId);
        } else if (e.target.classList.contains('slice_node')) {
            // El movimiento del nodo se maneja en flow_doc.js
        }
    };
    nodeContainer.addEventListener('mousedown', nodeContainer._mousedownHandler);

    // Remover y agregar eventos globales para mouseup y mousemove
    document.removeEventListener('mouseup', onMouseUp);
    document.removeEventListener('mousemove', onMouseMove);

    document.addEventListener('mouseup', onMouseUp);
    document.addEventListener('mousemove', onMouseMove);

    function onMouseUp(e) {
        endConnectionOrDrag(e, tabId);
    }

    function onMouseMove(e) {
        if (tabStates[tabId].draggingLine) {
            drawTemporaryLine(e, tabId);
        }
    }

    // Inicializar conexiones si aún no lo están
    if (!window.tabConnections[tabId]) {
        window.tabConnections[tabId] = [];
    }

    updateConnections(tabId);
}

function startConnection(e, tabId) {
    tabStates[tabId].draggingLine = true;
    const canvas = document.getElementById(`canvas${tabId}`);
    const port = e.target;
    const portRect = port.getBoundingClientRect();
    const canvasRect = canvas.getBoundingClientRect();

    tabStates[tabId].startPoint = {
        x: portRect.left + port.clientWidth / 2 - canvasRect.left,
        y: portRect.top + port.clientHeight / 2 - canvasRect.top,
        from: port.parentNode,
        portClass: port.classList.contains('port-out') ? 'out' : 'in',
    };
}

function endConnectionOrDrag(e, tabId) {
    const canvas = document.getElementById(`canvas${tabId}`);

    if (tabStates[tabId].draggingLine && e.target.classList.contains('port')) {
        const endPort = e.target;
        const endNode = endPort.parentElement;
        const startNode = tabStates[tabId].startPoint.from;

        // Evitar conexiones duplicadas
        if (!connectionExists(startNode, endNode, tabId)) {
            const endPortRect = endPort.getBoundingClientRect();
            const canvasRect = canvas.getBoundingClientRect();

            const endPoint = {
                x: endPortRect.left + endPort.clientWidth / 2 - canvasRect.left,
                y: endPortRect.top + endPort.clientHeight / 2 - canvasRect.top,
                to: endNode,
                portClass: endPort.classList.contains('port-in') ? 'in' : 'out',
            };
            window.tabConnections[tabId].push({ startPoint: tabStates[tabId].startPoint, endPoint });
        } else {
            console.log('Conexión ya existe entre estos nodos');
        }

        tabStates[tabId].draggingLine = false;
        updateConnections(tabId); // Redibuja todas las conexiones
    } else {
        tabStates[tabId].draggingLine = false;
        updateConnections(tabId); // Redibuja todas las conexiones
    }
}

function drawTemporaryLine(e, tabId) {
    const ctx = canvases[tabId];
    const canvas = document.getElementById(`canvas${tabId}`);
    const currentX = e.clientX - canvas.getBoundingClientRect().left;
    const currentY = e.clientY - canvas.getBoundingClientRect().top;

    ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpiar canvas antes de dibujar
    updateConnections(tabId); // Redibuja las conexiones existentes

    const startPoint = tabStates[tabId].startPoint;
    drawLine(startPoint.x, startPoint.y, currentX, currentY, tabId); // Dibuja la línea temporal
}

function drawLine(x1, y1, x2, y2, tabId) {
    const ctx = canvases[tabId];
    if (!ctx) return;
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
}

function updateConnections(tabId) {
    const ctx = canvases[tabId];
    const canvas = document.getElementById(`canvas${tabId}`);
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpiar canvas antes de redibujar

    window.tabConnections[tabId].forEach(conn => {
        drawLine(conn.startPoint.x, conn.startPoint.y, conn.endPoint.x, conn.endPoint.y, tabId);
    });
}

function connectionExists(startNode, endNode, tabId) {
    return window.tabConnections[tabId].some(conn =>
        (conn.startPoint.from === startNode && conn.endPoint.to === endNode) ||
        (conn.startPoint.from === endNode && conn.endPoint.to === startNode)
    );
}

function updateConnectionPoints(tabId) {
    window.tabConnections[tabId].forEach(conn => {
        const startPort = conn.startPoint.from.querySelector(conn.startPoint.portClass === 'out' ? '.port-out' : '.port-in');
        const endPort = conn.endPoint.to.querySelector(conn.endPoint.portClass === 'in' ? '.port-in' : '.port-out');

        const canvasRect = document.getElementById(`canvas${tabId}`).getBoundingClientRect();

        conn.startPoint.x = startPort.getBoundingClientRect().left + startPort.clientWidth / 2 - canvasRect.left;
        conn.startPoint.y = startPort.getBoundingClientRect().top + startPort.clientHeight / 2 - canvasRect.top;
        conn.endPoint.x = endPort.getBoundingClientRect().left + endPort.clientWidth / 2 - canvasRect.left;
        conn.endPoint.y = endPort.getBoundingClientRect().top + endPort.clientHeight / 2 - canvasRect.top;
    });
}

window.addEventListener('resize', () => {
    Object.keys(canvases).forEach(tabId => {
        const canvas = document.getElementById(`canvas${tabId}`);
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
        updateConnectionPoints(tabId);
        updateConnections(tabId);
    });
});

// Exportar funciones necesarias para flow_doc.js y tabs.js
window.initializeCanvas = initializeCanvas;
window.updateConnectionPoints = updateConnectionPoints;
window.updateConnections = updateConnections;
window.startConnection = startConnection;