1. connections.js
Este archivo es el que le da vida a la UX, aquí los nodos adquieren la funcionalidad de movimiento y conexiones.
1.1. Variables Globales
window.tabConnections: Es un objeto global que almacena las conexiones de cada pestaña. La clave es el ID de la pestaña y el valor es un array de conexiones dentro de esa pestaña.
canvases: Un objeto que guarda el contexto (CanvasRenderingContext2D) de cada canvas por pestaña. Esto facilita el dibujo de líneas de conexión en el canvas correspondiente.
tabStates: Un objeto que almacena el estado actual de cada pestaña, como si se está arrastrando una línea para crear una conexión y el punto de inicio de dicha línea.
1.2. Eventos Iniciales
DOMContentLoaded: Este evento se dispara cuando el documento HTML ha sido completamente cargado y parseado. Dentro de este evento:
Inicialización de Canvases para Pestañas Existentes:
Obtiene el elemento que contiene la lista de pestañas (tabsList). Selecciona todas las pestañas (li con clase tab) dentro de tabsList. Itera sobre cada pestaña y llama a initializeCanvas(tabId) pasando el ID de la pestaña (extraído del ID del elemento DOM, asumiendo que comienza con 'tab'). Listener para Cambios de Pestaña:
Agrega un listener al contenedor de pestañas para manejar clics en las pestañas. Cuando se hace clic en una pestaña (li.tab), extrae el ID de la pestaña y llama a switchTab(tabId) para activar y mostrar el canvas correspondiente.
1.3. switchTab
Propósito: Cambiar la pestaña activa, ocultando los canvases de las pestañas no activas y mostrando el canvas de la pestaña seleccionada.
Parámetros:
tabId: ID numérico de la pestaña que se va a activar. Funcionamiento:
Ocultar Todos los Canvases: Itera sobre todas las claves en canvases (IDs de pestañas) y oculta cada canvas estableciendo su display a "none". Mostrar el Canvas de la Pestaña Actual: Selecciona el canvas correspondiente a tabId. Si el canvas existe, lo muestra estableciendo su display a "block". Llama a initializeCanvas(tabId) para asegurarse de que el canvas esté correctamente inicializado (especialmente importante si el usuario ha cambiado el tamaño de la ventana o si hay actualizaciones dinámicas).
1.4. initializeCanvas
Propósito: Configurar y preparar el canvas para una pestaña específica, estableciendo el contexto de dibujo, ajustando el tamaño, y configurando los manejadores de eventos necesarios para gestionar conexiones entre nodos.
Parámetros:
tabId: ID numérico de la pestaña que se va a inicializar. Funcionamiento:
Selección y Configuración del Canvas: Selecciona el elemento {canvas} correspondiente a tabId. Obtiene el contexto de dibujo 2D (CanvasRenderingContext2D) y lo almacena en canvases[tabId]. Ajusta el tamaño del canvas para que coincida con su tamaño visible (offsetWidth y offsetHeight). Configuración del Contenedor de Nodos: Selecciona el contenedor de nodos (nodeContainer{tabId}). Inicialización del Estado de la Pestaña: Si no existe un estado para tabId en tabStates, lo inicializa con draggingLine como false y startPoint como null. Manejo de Eventos de mousedown en el Contenedor de Nodos: Si ya existe un manejador previo (_mousedownHandler), lo remueve para evitar duplicados. Define un nuevo manejador que verifica si el clic fue sobre un puerto (port). Si es así, inicia una conexión llamando a startConnection(e, tabId). Si el clic fue sobre un nodo (slice_node), deja que otro script (flow_doc.js) maneje el movimiento del nodo. Agrega el nuevo manejador al evento mousedown del contenedor de nodos. Manejo de Eventos Globales de mouseup y mousemove: Remueve cualquier manejador previo para evitar duplicados. Agrega nuevos manejadores para los eventos mouseup y mousemove. onMouseUp: Llama a endConnectionOrDrag(e, tabId) cuando se suelta el botón del mouse. onMouseMove: Si se está arrastrando una línea (draggingLine es true), llama a drawTemporaryLine(e, tabId) para dibujar una línea temporal que sigue el cursor. Inicialización de Conexiones: Si no existen conexiones para tabId en window.tabConnections, las inicializa como un array vacío. Actualización de Conexiones: Llama a updateConnections(tabId) para dibujar todas las conexiones existentes en el canvas.
1.5. startConnection
Propósito: Iniciar la creación de una nueva conexión cuando el usuario hace clic en un puerto de salida (port-out) o de entrada (port-in).
Parámetros:
e: Evento de mousedown que dispara la conexión. tabId: ID numérico de la pestaña donde se está creando la conexión. Funcionamiento:
Actualizar el Estado de la Pestaña: Establece draggingLine como true para indicar que se está arrastrando una línea de conexión. Cálculo de Coordenadas del Punto de Inicio: Selecciona el canvas correspondiente. Obtiene la posición del puerto (port) y del canvas en relación al viewport. Calcula las coordenadas (x, y) del punto central del puerto en relación al canvas. Almacenamiento del Punto de Inicio: Guarda las coordenadas calculadas, referencia al nodo de origen (from), y la clase del puerto (portClass: 'out' o 'in') en tabStates[tabId].startPoint.
1.6. endConnectionOrDrag
Propósito: Finalizar la creación de una conexión cuando el usuario suelta el botón del mouse, ya sea sobre un puerto válido o en otro lugar. Evita crear conexiones duplicadas.
Parámetros:
e: Evento de mouseup que puede finalizar una conexión. tabId: ID numérico de la pestaña donde se está creando la conexión. Funcionamiento:
Verificación de Estado de Arrastre: Comprueba si se está arrastrando una línea (draggingLine es true) y si el objetivo del evento es un puerto (port). Proceso de Finalización de Conexión: Si es Válido: Obtiene el puerto de fin (endPort) y su nodo (endNode). Obtiene el nodo de inicio (startNode) desde startPoint. Verifica si ya existe una conexión entre startNode y endNode utilizando connectionExists(startNode, endNode, tabId). Si no existe: Calcula las coordenadas del puerto de fin en relación al canvas. Crea un objeto endPoint con las coordenadas, referencia al nodo de fin (to), y la clase del puerto (portClass: 'in' o 'out'). Añade la conexión a window.tabConnections[tabId] como un objeto que contiene startPoint y endPoint. Si existe: Registra un mensaje en la consola indicando que la conexión ya existe. Actualizar Estado y Redibujar Conexiones: Establece draggingLine como false para finalizar el arrastre. Llama a updateConnections(tabId) para redibujar todas las conexiones en el canvas. Caso en que No se Clickeó en un Puerto: Si el mouseup no fue sobre un puerto, simplemente finaliza el arrastre (draggingLine a false) y redibuja las conexiones existentes.
1.7. drawTemporaryLine
Propósito: Dibujar una línea temporal que sigue el cursor mientras el usuario está arrastrando una conexión entre nodos.
Parámetros:
e: Evento de mousemove que proporciona la posición actual del cursor. tabId: ID numérico de la pestaña donde se está creando la conexión. Funcionamiento:
Cálculo de Coordenadas Actuales: Obtiene las coordenadas actuales del cursor en relación al canvas (currentX, currentY). Dibujo de la Línea Temporal: Limpia el canvas utilizando clearRect para evitar superposiciones. Llama a updateConnections(tabId) para redibujar las conexiones existentes. Obtiene el punto de inicio (startPoint) desde el estado de la pestaña. Llama a drawLine(startPoint.x, startPoint.y, currentX, currentY, tabId) para dibujar una línea desde el puerto de inicio hasta la posición actual del cursor.
1.8. drawLine
Propósito: Dibujar una línea entre dos puntos en el canvas de una pestaña específica.
Parámetros:
x1, y1: Coordenadas del punto de inicio de la línea. x2, y2: Coordenadas del punto de fin de la línea. tabId: ID numérico de la pestaña donde se dibuja la línea. Funcionamiento:
Verificación del Contexto del Canvas: Si no hay un contexto de canvas para tabId, la función termina. Dibujo de la Línea: Inicia un nuevo camino (beginPath). Mueve el cursor del dibujo al punto de inicio (moveTo). Dibuja una línea hasta el punto de fin (lineTo). Establece el color de la línea a negro (strokeStyle = '#000000') y el grosor a 2 píxeles (lineWidth = 2). Realiza el trazo de la línea (stroke) y cierra el camino (closePath).
1.9. updateConnections
Propósito: Redibujar todas las conexiones existentes en el canvas de una pestaña específica.
Parámetros:
tabId: ID numérico de la pestaña cuya conexiones se van a actualizar. Funcionamiento:
Limpieza del Canvas: Limpia todo el contenido del canvas para prepararse para redibujar las conexiones. Iteración y Dibujo de Conexiones: Itera sobre cada conexión almacenada en window.tabConnections[tabId]. Para cada conexión, llama a drawLine pasando las coordenadas de inicio y fin para dibujar la línea correspondiente.
1.10. connectionExists
Propósito: Verificar si ya existe una conexión entre dos nodos específicos dentro de una pestaña.
Parámetros:
startNode: Elemento DOM del nodo de inicio. endNode: Elemento DOM del nodo de fin. tabId: ID numérico de la pestaña donde se verifica la conexión. Funcionamiento:
Utiliza el método some para comprobar si alguna de las conexiones en window.tabConnections[tabId] cumple con la condición de que el nodo de inicio y fin correspondan a startNode y endNode, o viceversa (para evitar conexiones duplicadas en sentido opuesto). Retorna true si se encuentra una conexión existente, de lo contrario, false.
1.11. updateConnectionPoints
Propósito: Actualizar las coordenadas de los puntos de inicio y fin de cada conexión cuando los nodos han sido movidos o el tamaño del canvas ha cambiado.
Parámetros:
tabId: ID numérico de la pestaña cuyas conexiones se van a actualizar. Funcionamiento:
Iteración sobre Conexiones: Para cada conexión en window.tabConnections[tabId], realiza lo siguiente: Obtención de Puertos de Inicio y Fin: startPort: Selecciona el puerto de inicio (.port-out o .port-in) dependiendo de la clase almacenada en conn.startPoint.portClass. endPort: Selecciona el puerto de fin (.port-in o .port-out) dependiendo de la clase almacenada en conn.endPoint.portClass. Cálculo de Coordenadas Actualizadas: Obtiene las coordenadas del canvas en relación al viewport (canvasRect). Calcula las nuevas coordenadas (x, y) para los puntos de inicio y fin de la conexión, basándose en la posición actual de los puertos en el DOM. Actualización de Coordenadas en la Conexión: Actualiza conn.startPoint.x, conn.startPoint.y, conn.endPoint.x, y conn.endPoint.y con las nuevas coordenadas calculadas.
1.12. Manejo de Redimensionamiento
Propósito: Asegurarse de que las conexiones se ajusten correctamente cuando la ventana del navegador cambia de tamaño, actualizando las coordenadas de las conexiones y redibujándolas.
Funcionamiento:
Agrega un listener al evento global resize. Cuando se dispara el evento resize: Iteración sobre Canvases: Para cada tabId en canvases, realiza lo siguiente: Ajuste de Tamaño del Canvas: Actualiza el ancho y alto del canvas para que coincida con su tamaño visible (offsetWidth y offsetHeight). Actualización de Conexiones: Llama a updateConnectionPoints(tabId) para recalcular las coordenadas de las conexiones. Llama a updateConnections(tabId) para redibujar las conexiones con las nuevas coordenadas.
1.13. Exportación de Funciones
Propósito: Hacer que ciertas funciones sean accesibles globalmente (a través del objeto window) para que puedan ser utilizadas en otros scripts, específicamente en flow_doc.js y tabs.js.
Funcionamiento:
Asigna las funciones definidas localmente (initializeCanvas, updateConnectionPoints, updateConnections, startConnection) como propiedades del objeto global window, permitiendo que otros scripts las llamen directamente.
Table of Contents
- 1. connections.js
- 1.1. Variables Globales
- 1.2. Eventos Iniciales
- 1.3. switchTab
- 1.4. initializeCanvas
- 1.5. startConnection
- 1.6. endConnectionOrDrag
- 1.7. drawTemporaryLine
- 1.8. drawLine
- 1.9. updateConnections
- 1.10. connectionExists
- 1.11. updateConnectionPoints
- 1.12. Manejo de Redimensionamiento
- 1.13. Exportación de Funciones