gojs for dummies (para mi :D) #Español
Tags: webdev, javascript, react, beginners
Published: 2023-04-10 21:24:27

# 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jff68a6qkx17eplkeigx.jpg)

## 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`
 
El siguiente paso seria crear el componente del elemento, primero debemos importar ReactDiagram de gojs-react

```js

import { ReactDiagram } from 'gojs-react';
```
y lo llamamos con los siguientes argumentos
```js
<ReactDiagram
        initDiagram={ }
        divClassName='diagram-component'
        nodeDataArray={ }
        linkDataArray={ }
        onModelChange={ }
      />
 
```
El siguiente paso sera asignarle un unos estilos al elemento div para que el canvas sea visible

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

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

```js
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;
}
```

Vamos a crear un array de objetos para ser mostrados en nuestro diagrama
``` js
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' }
	]
```

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
```js
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 }
        ]
```

Por ultimo vamos a crear una funcion que meneje eventos 
```js
function handleModelChange(changes) {
  console.log('GoJS model changed!', changes);
}
```
vamos a integrar lo anterior a nuestro diagrama 
```js
<ReactDiagram
        initDiagram={ initDiagram }
        divClassName='diagram-component'
        nodeDataArray={ DataArray }
        linkDataArray={ LinkDataArray }
        onModelChange={ handleModelChange }
      />
 
```

Este este ejemplo lo puedes encontrar en [react-gojs basic](https://gojs.net/latest/intro/react.html#stateful)