Sapian
/
callflow_sian
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Page: Documentación código flow_doc.js
Documentación código (tabs.js)
Documentación código connections.js
Documentación código flow_doc.js
Documentación del código (views.py)
2 Documentación código flow_doc.js
johan.ocampo edited this page 7 months ago

1. flow_doc.js

Este archivo es el encargado de crear cada uno de los nodos, además también se encarga de abrir un modal personalizado por cada nodo con diferentes funciones en cada nodo.

1.1. Variables Globales

nodes: Arreglo que almacena referencias a todos los nodos creados en la interfaz. connections: Arreglo que almacena las conexiones entre nodos. body: Referencia al elemento body del documento, utilizada para adjuntar elementos dinámicamente, como el menú contextual.

1.2. getCSRFToken

Propósito: Obtener el token CSRF almacenado en las cookies para incluirlo en las solicitudes POST, previniendo ataques CSRF. Retorno: Devuelve el valor del token CSRF si está presente; de lo contrario, null. extractFileName javascript Copy code function extractFileName(url) { return url.split('/').pop(); } Propósito: Extraer el nombre del archivo desde una URL. Parámetros: url: Cadena de texto que representa la URL completa del archivo. Retorno: Nombre del archivo extraído de la URL.

1.3. createContextMenu

Propósito: Crear y mostrar un menú contextual en la posición especificada. Parámetros: x: Coordenada X donde se posicionará el menú. y: Coordenada Y donde se posicionará el menú. options: Arreglo de objetos que contienen label y action para cada opción del menú. Funcionamiento: Elimina cualquier menú contextual existente. Crea un nuevo elemento div para el menú y lo posiciona en (x, y). Itera sobre las opciones proporcionadas y añade cada una al menú. Añade el menú al body y lo muestra. Añade un listener para cerrar el menú al hacer clic en cualquier parte del documento.

1.4. removeContextMenu

Propósito: Eliminar cualquier menú contextual existente del DOM. Funcionamiento: Busca un elemento con la clase .context-menu. Si existe, lo elimina del DOM. Remueve el listener global para evitar llamadas duplicadas.

1.5. Gestión de Nodos

1.5.1. createNode

Propósito: Crear un nuevo nodo en una pestaña específica. Parámetros: e: Evento que desencadena la creación del nodo (por ejemplo, click). tabId: ID numérico de la pestaña donde se creará el nodo. Funcionamiento: Crea un nuevo elemento div con la clase slice_node y le asigna una posición absoluta. Inicializa propiedades adicionales del nodo como audioFile, textFile, extensionNumber, content, y conditions. Determina el tipo de nodo (node_type) y ajusta su apariencia y puertos según el tipo. Añade eventos para permitir mover el nodo, abrir modales de edición, y manejar clics derechos para mostrar el menú contextual. Añade el nodo al contenedor correspondiente y al arreglo global nodes. Llama a saveTabData(tabId) para guardar el estado actual de la pestaña.

1.5.2. mouseDown

Propósito: Manejar el evento de mousedown para permitir mover un nodo dentro de una pestaña. Parámetros: e: Evento de mousedown. nodeElement: Elemento DOM del nodo que se está moviendo. tabId: ID numérico de la pestaña donde se encuentra el nodo. Funcionamiento: Registra la posición inicial del cursor. Añade un listener para mousemove que actualiza la posición del nodo según el movimiento del cursor. Añade un listener para mouseup que elimina el listener de mousemove una vez finalizado el movimiento. Actualiza las conexiones visuales al mover el nodo llamando a updateConnectionPoints(tabId) y updateConnections(tabId).

1.5.3. openModal

Propósito: Abrir un modal para editar las propiedades de un nodo específico. Parámetros: e: Evento que desencadena la apertura del modal (por ejemplo, dblclick). node: Elemento DOM del nodo que se está editando. Funcionamiento: Determina el tipo de nodo (nodeType2 o nodeType) para cargar el formulario de edición correspondiente. Crea elementos de formulario dinámicamente basados en el tipo de nodo. Maneja la lógica de guardado enviando datos al servidor a través de las vistas de Django correspondientes. Actualiza el DOM y los datos internos tras una operación exitosa. Añade funcionalidades específicas como cargar archivos de audio, gestionar condiciones dinámicas, etc.

1.5.4. getTabIdFromNode

Propósito: Obtener el tabId desde un nodo dado. Parámetros: node: Elemento DOM del nodo. Funcionamiento: Busca el ancestro más cercano con la clase .tabNodes. Extrae el ID numérico de la pestaña eliminando el prefijo tabNodes. Retorna el tabId si se encuentra; de lo contrario, null.

1.5.5. getTabName

Propósito: Obtener el nombre de la pestaña activa. Retorno: Nombre de la pestaña activa si existe; de lo contrario, null.

1.5.6. closeModal

Propósito: Cerrar el modal de edición al presionar la tecla Esc o al hacer clic en el fondo del modal. Parámetros: e: Evento de teclado o clic. Funcionamiento: Verifica si se presionó la tecla Escape o si el clic fue en el elemento con ID modal-overlay. Si es así, intenta eliminar el elemento de fondo que contiene el modal. Maneja silenciosamente el caso en que no hay ningún modal abierto.

1.5.7. deleteNode

Propósito: Eliminar un nodo específico y todas sus conexiones asociadas dentro de una pestaña. Parámetros: node: Elemento DOM del nodo que se desea eliminar. tabId: ID numérico de la pestaña donde se encuentra el nodo. Funcionamiento: Muestra una confirmación al usuario para proceder con la eliminación. Envía una solicitud POST a la vista /delete_node/ con los datos necesarios (tabId, nodeId, nodeType). Si la respuesta es exitosa: Elimina el nodo del DOM. Filtra y elimina las conexiones asociadas en window.tabConnections[tabId]. Actualiza el canvas llamando a updateConnections(tabId). Notifica al usuario sobre el éxito de la operación. Maneja y notifica cualquier error que ocurra durante el proceso.

1.5.8. deleteTab

Propósito: Eliminar una pestaña completa junto con todos sus contenidos y datos asociados. Parámetros: tabElement: Elemento DOM de la pestaña que se desea eliminar. Funcionamiento: Muestra una confirmación al usuario para proceder con la eliminación. Extrae el tabId y tabName de la pestaña. Envía una solicitud POST a la vista /delete_tab/ con los datos necesarios. Si la respuesta es exitosa: Elimina el elemento de la pestaña y su contenido del DOM. Elimina las conexiones y nodos almacenados en variables globales. Notifica al usuario sobre el éxito de la operación. Maneja y notifica cualquier error que ocurra durante el proceso. Interacción con el Servidor

1.6. Exportación de Funciones

Al final del archivo flow_doc.js, se exportan algunas funciones para que puedan ser utilizadas por otros scripts, como connections.js o tabs.js.

window.deleteTab = deleteTab; // Exportar deleteTab para que pueda ser llamado desde el menú contextual initializeCanvas: Inicializa el canvas para dibujar conexiones entre nodos. updateConnectionPoints: Actualiza las coordenadas de las conexiones al mover nodos. updateConnections: Redibuja todas las conexiones en el canvas. startConnection: Inicia la creación de una nueva conexión entre nodos. deleteTab: Permite eliminar una pestaña completa desde otros scripts. Nota: Asegúrate de que estas funciones (initializeCanvas, updateConnectionPoints, etc.) estén definidas antes de exportarlas y que no entren en conflicto con otros scripts.

1.7. Eventos Globales

Propósito: Añadir listeners globales para manejar el cierre del modal. Funcionamiento: Escucha eventos de teclado y clic para cerrar el modal cuando se presiona la tecla Esc o se hace clic fuera del modal.

Table of Contents