Introducción

En una de las materias que estoy cursando (o que cursé, dependiendo del momento en el que esto se publique) tuve que presentar todas esas cosas aburridas que conlleva el desarrollo de software.

Me refiero a los diagramas, casos de uso, clases, interfaces y todas esas cosas que al final (desde mi punto de vista) no sirven para nada y solamente hacen perder tiempo.

Los diagramas de clases UML

Pero bueno, centrémonos en la creación de los diagramas de clases que son más o menos como la imagen de abajo, representan una clase con sus propiedades y métodos.

No sé si son así pero espero que den una idea de lo que hablo. Pues bien, esa imagen que se ve ahí fue creada con el generador de diagramas de clases que hoy vengo a presentar.

La motivación

Como el programador perezoso que soy, decidí hacer algo rápido que me permitiera crear mis diagramas y modificarlos a mi gusto y todo ello sin tener que usar un programa como DIA o esos programas que son justamente para eso.

Sé que hay software especializado, pero hay que dar muchos clicks y todas esas cosas aburridas. ¿Y qué pasa si vas a modificar uno? además, hay que presionar como 3 botones para agregar un dato.

Así que decidí usar JavaScript con Canvas, usando Bulma CSS para el estilo y localStorage para que mis diagramas se quedaran guardados de manera local; usando al simple pero poderoso Vue.js.

El resultado fue este:

Sé que todavía faltan muchas cosas por agregar y pulir, pero para ser la primera versión no está mal.

Código fuente y demostración de la app

Es una aplicación web, la cual puedes probar en mi sección de apps. El código fuente puede ser visto en GitHub y está liberado bajo la licencia MIT o como se diga.

La parte técnica

Calculando longitud de la imagen

Todo el código que genera la imagen está en el script. Ahí defino unas constantes para el grosor de las líneas. Dependiendo de las palabras introducidas se calcula cuál es la más larga y se multiplica por la longitud de los pixeles para sacar el ancho del rectángulo.

Este método no es el más preciso, porque no todas las letras miden lo mismo; pero funciona en la mayoría de casos.

Los ids

Para generar el id de cada diagrama utilicé una función que encontré por ahí; la cual devuelve un id único. Esto es para asignar un nuevo id a cada diagrama.

Persistencia de datos

Cada diagrama en realidad es un objeto de JavaScript que se convierte a imagen; pero para guardarlo lo codifico de manera que se represente como  JSON debido a las limitaciones de localStorage.

Como necesitaba obtener todos los diagramas, utilicé Object.keys para saber cuáles objetos de localStorage estaban almacenados.

Mapeo el arreglo y pongo únicamente el id y título en un arreglo; cuando se hace click entonces se carga el diagrama.

Cuándo actualizar la imagen

Se actualiza la imagen en el evento blur de los controles de entrada de datos. Así se da la impresión de que los datos aparecen cada que el usuario hace un cambio.

También se podría hacer que se generase en el evento keyup pero afectaría el rendimiento.

Descargar imagen del diagrama de clase generado

Para descargar el canvas se crea un enlace invisible y se hace click sobre él, de esta manera se obliga a descargar la imagen. El título de la imagen depende del diagrama.

El prefijo

Cuando ya había subido la app surgieron errores y es que nunca contemplé que no solamente mi app almacenaba datos en localStorage; también otras cosas como Google.

Esto es debido a que los datos se comparten en todo el dominio, así que la solución fue agregar un prefijo a todas las entradas y luego filtrar los datos de localStorage al recuperarlos.

Lo que estoy diciendo se ve claramente en este commit.

Conclusión

Con JavaScript, pereza y un poco de tiempo se pueden crear cosas maravillosas. Cuando digo pereza me refiero a pereza futura de hacer las cosas manuales; no a pereza de no querer hacer nada.

Espero darle seguimiento más tarde, depende de su uso y del tiempo libre que tenga.

Ya que estamos en esto, te invito a ver un generador de código de CodeIgniter hecho con PHP.