¶ Editor CONVIDA
El Editor Convida es un componente del proyecto Convida que permitirá a quien lo utilice describir la estructura teórica de un cierto campo de saberes a través de un lenguaje visual consistente en elementos simbólicos e icónicos. Su objetivo, además de generar una representación gráfica de las estructuras teóricas, es incorporar restricciones provenientes tanto de la lógica y la teoría de conjuntos, como de la filosofía de las ciencias, a fin de fomentar la generación de estructuras con significado y que puedan ser útiles tanto para la enseñanza, como para la reflexión teórica.
Para lograr estos objetivos, el Editor Convida presentará tres distintas vistas:
- Editor gráfico
- Código fuente
- Vista previa
¶ Editor gráfico
Se propone la creación de un programa, alojado en el navegador, que permita al usuario generar diagramas, tales como las representaciones gráficas propuestas, en un entorno visual. Este navegador podrá ser desarrollado en Godot Engine o en alguna otra plataforma.
Se plantea de momento el desarrollo de este programa mediante el uso de React Flow, una biblioteca diseñada para la construcción de aplicaciones basadas en nodos. 1 React Flow es a su vez, un componente modificable de React.js ,otra biblioteca Javascript. Es requerido como base para emplear estas bibliotecas el uso de Node.js, un entorno de ejecución de JavaScript multiplataforma.
Adicionalmente, para el desarrollo de este editor se emplea el editor de código fuente Visual Studio Code y el servidor de desarrollo local Vite.
React Flow, React.js y Node.js son software de código abierto.
¶ Recursos utilizados por el proyecto
- React (librería principal para construir la interfaz)
- TypeScript (superset de JavaScript con tipado estático)
- React Flow (librería para diagramas y flujos interactivos)
- Material-UI (MUI) (sistema de componentes de UI)
- npm (gestor de paquetes de Node.js)
¶ Configuración en Visual Studio Code
Requisitos previos:
- Tener instalado Git
- Tener instalado Node.js (incluye npm)
- Tener instalado Visual Studio Code (VS Code)
Posteriormente, se crea importa el repositorio desde Github usando la terminal integrada de VsCode
git clone https://github.com/CONVIDA/Editor.git
Se navega a la carpeta del proyecto en la terminal con:
cd EditorJSv2
Se instalan las dependecias necesarias con:
npm install
Y se ejecuta la el siguiente comando para ejecutar la aplicación en modo desarrollo y normalmente abrirá tu navegador en un localhost como http://localhost:3000
npm start
Para terminar el poroceso se presiona Crt+C en la terminal y Y
Algunas de las funciones que presenta actualmente el editor gráfico son:
¶ Funcionalidades
Las funcionalidades actuales del editor gráfico son:
- Crear nodos, editar su color y texto
- Crear conexiones entre nodos, editar su aspectyo y añadir etiquetas.
- Exportar los diagramas en archivos json, png y svg
Queda corregir:
- Conexiones con las anclas laterales de los nodos
A implementar:
- Función de importar y leer archivos json
- Aspecto de flecha (direccional) para las conexiones
- Posibles tipos de nodo
- Nodos- imagen
- Banco de iconos, con barra lateral para importarlos.
- (codificar cada imagen con nombre)
¶ Arquitectura
¶ 1.Estructura de Carpetas
src/
Carpeta principal con todo el código fuente:
components/
Componentes React reutilizables, por ejemplo: Toolbar, DiagramCanvas.
utils/
Funciones utilitarias para exportar, generar IDs, etc.
hooks/
Hooks personalizados, por ejemplo, `useDiagram` para manejar el estado y lógica de los diagramas.
theme/
Temas para la aplicación (por defecto, tema oscuro).
index.tsx / App.tsx
Entrada principal y montaje de la app React.
public/
Contiene archivos estáticos (index.html, manifest, favicon, etc.).
¶ 2. Funcionamiento General
React Flow
El núcleo de la aplicación usa la librería [reactflow](https://reactflow.dev/) para renderizar y manipular diagramas de flujo. Los nodos y conexiones (edges) se gestionan con estados internos y hooks personalizados.
Hooks Personalizados (`useDiagram`)
Encapsulan toda la lógica relacionada con los diagramas:
- Gestión de nodos y conexiones.
- Acciones como agregar, borrar, duplicar nodos/edges.
- Manejo de eventos de edición y contexto (menús contextuales).
- Exportación e importación de diagramas.
Componentes UI
Toolbar:
Barra superior con botones para exportar los diagramas en diferentes formatos.
Ejemplo: Exportar JSON utiliza la función `exportToJson` de `utils/export.ts`.
DiagramCanvas:
Área donde se renderizan y manipulan los nodos y conexiones visualmente.
Exportación de Diagramas
JSON: Serializa el estado actual del diagrama y lo descarga como archivo local.
PNG/SVG: Captura la imagen del diagrama y la descarga usando utilidades como `html-to-image`.
¶ 3. **Misceláneo**
- **Estilo y Temas:**
Utiliza Material UI y un tema oscuro personalizado.
- **Gestión de IDs:**
Los nodos y edges tienen IDs generados única y automáticamente con utilidades propias.
- **Extensibilidad:**
El código está modularizado para permitir agregar más temas, tipos de nodos, funcionalidad de exportación, etc.
¶ Para comunicación con Backend:
¶ Función de importación y lectura de los JSON:
Función de importacicon y lectura de los JSON:
Hook personalizado:
- Archivo:
src/hooks/useDiagram.ts - Función:
importFromJson(file: File)
Barra de herramientas (Toolbar):
- Archivo:
src/components/Toolbar/Toolbar.tsx - Prop:
onImportJson - Handler:
handleImportJson
Uso en el canvas:
- Archivo:
src/components/Diagram/DiagramCanvas.tsx - Se pasa la función
importFromJsoncomo prop aToolbar.
¶ Función de exportación de JSON:
Funcion de exportación de JSON: Se llama exportToJson y se encuentra en:
src/utils/export.ts
Funcionamiento general
La función exportToJson recibe dos parámetros:
Una instancia de React Flow (reactFlowInstance), que contiene el estado actual del diagrama.
Un nombre de archivo (opcional, por defecto: 'diagrama.json').
Convierte el diagrama: Utiliza el método .toObject() de la instancia para obtener los datos del diagrama (nodos, conexiones, posiciones, etc.).
Serializa a JSON: Usa JSON.stringify para convertir los datos a texto JSON legible.
Prepara la descarga: Crea un elemento <a> (enlace) temporal, configura su atributo href con el contenido JSON codificado y download con el nombre de archivo.
Dispara la descarga: Añade el enlace al DOM, simula un clic y luego lo elimina, logrando que el navegador descargue el archivo JSON.
En la Interfaz: en el componente de la barra de herramientas (src/components/Toolbar/Toolbar.tsx), hay un botón llamado "Exportar JSON".
Cuando el usuario hace clic en ese botón, se llama a un handler como handleExportJson, que a su vez invoca la función exportToJson pasando la instancia actual del diagrama.
¶ Bibliografía
- Introdución a React Flow https://reactflow.dev/learn/concepts/introduction
¶ Ligas útiles
- Documentación de Godot Engine para Interfaz de Usuario (UI)
- Excalidraw
- Ejemplo de editor de diagramas interactivos basado en React Flow Ameliorate.
- Ejemplo de construcción de un editor de diagramas básico con React Flow
¶ Responsables
- Sonia Pérez