DEV Community

Cover image for gojs for dummies (para mi :D) #Español
Julio Santacruz
Julio Santacruz

Posted on

gojs for dummies (para mi :D) #Español

#webdev #javascript #react #beginners

Que es GoJS?

Partamos dede el principio GoJS es una biblioteca de JavaScript que te permite crear diagramas o elementos interactivos 100% del lado del cliente. GoJS admite templates para todos los elementos gráficos y uniónes de datos con propiedades de objetos gráficos para modelar datos. Solo necesita guardar y restaurar el modelo. El modelo de gojs consta de objetos simples de JavaScript, y tienen integracion con todos los frameworks de Frontend (React - Angular -Vue). Tiene muchas herramientas y comandos predefinidos, que implementan los comportamientos estándar que necesitan la mayoría de los diagramas.
La personalización de la apariencia y el comportamiento es principalmente una cuestión de establecer propiedades.

yo mirando gojs

Tu primer diagrama con GoJS - React

Para crear tu primer diagrama con React y GoJs debes iniciar un projecto de react e instalar :

`npm install gojs gojs-react`
Enter fullscreen mode Exit fullscreen mode

El siguiente paso seria crear el componente del elemento, primero debemos importar ReactDiagram de gojs-react

 import { ReactDiagram } from 'gojs-react';
Enter fullscreen mode Exit fullscreen mode

y lo llamamos con los siguientes argumentos

<ReactDiagram initDiagram={ } divClassName='diagram-component' nodeDataArray={ } linkDataArray={ } onModelChange={ } />
Enter fullscreen mode Exit fullscreen mode

El siguiente paso sera asignarle un unos estilos al elemento div para que el canvas sea visible

/* App.css */ .diagram-component { width: 400px; height: 400px; border: solid 1px black; background-color: white; }
Enter fullscreen mode Exit fullscreen mode

Ahora vamos escribir una funcion que que inicia el diagrama ( initDiagram )

function initDiagram() { const $ = go.GraphObject.make; // Para establecer la licencia declaramos go.Diagram.licenseKey = "..."; (no es necesaria una licencia durante el desarrollo) const diagram = $(go.Diagram, { 'undoManager.isEnabled': true, // Esta propiedad nos permite interactuar con el modelo 'undoManager.maxHistoryLength': 0, // si comentas esta propiedad deshabilitas el historial (undo / redo)  'clickCreatingTool.archetypeNodeData': { text: 'new node', color: 'lightblue' }, model: new go.GraphLinksModel( { linkKeyProperty: 'key' // IMPORTANTE -> Esta propiedad nos permite vincular los datos con GraphLinksModel }) }); // Aqui definimos el Template para los nodos  diagram.nodeTemplate = $(go.Node, 'Auto', // Declaramos un nodo  new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), // creamos un vinculo llamado "loc" para asignar "location" desde nuestro modelo $(go.Shape, 'RoundedRectangle', // dentro del nodo creamos una figura "RoundedRectangle"  { name: 'SHAPE', fill: 'white', strokeWidth: 0 }, new go.Binding('fill', 'color')), // vinculamos el parametro fill a la propiedad color dentro del modelo  $(go.TextBlock, // Creamos un texto dentro de la figura que declaramos antes { margin: 8, editable: true }, // le asignamos un margin de 8 y lo hacemos editable new go.Binding('text').makeTwoWay() // Vinculamos la variable text para asignar el texto desde el modelo ) ); return diagram; }
Enter fullscreen mode Exit fullscreen mode

Vamos a crear un array de objetos para ser mostrados en nuestro diagrama

const DataArray = [ { key: 0, text: 'Alpha', color: 'lightblue', loc: '0 0' }, { key: 1, text: 'Beta', color: 'orange', loc: '150 0' }, { key: 2, text: 'Gamma', color: 'lightgreen', loc: '0 150' }, { key: 3, text: 'Delta', color: 'pink', loc: '150 150' } ]
Enter fullscreen mode Exit fullscreen mode

Esto podria ser suficiente par visualizar los datos e interactuar con ellos... pero nosotros queremos hacer de diagrama, entonces debemos de crear un array de datos para unir los datos del DataArray

const LinkDataArray= [ { key: -1, from: 0, to: 1 }, { key: -2, from: 0, to: 2 }, { key: -3, from: 1, to: 1 }, { key: -4, from: 2, to: 3 }, { key: -5, from: 3, to: 0 } ]
Enter fullscreen mode Exit fullscreen mode

Por ultimo vamos a crear una funcion que meneje eventos

function handleModelChange(changes) { console.log('GoJS model changed!', changes); }
Enter fullscreen mode Exit fullscreen mode

vamos a integrar lo anterior a nuestro diagrama

<ReactDiagram initDiagram={ initDiagram } divClassName='diagram-component' nodeDataArray={ DataArray } linkDataArray={ LinkDataArray } onModelChange={ handleModelChange } />
Enter fullscreen mode Exit fullscreen mode

Este este ejemplo lo puedes encontrar en react-gojs basic

Top comments (0)