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.

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


import { ReactDiagram } from 'gojs-react';

y lo llamamos con los siguientes argumentos

<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

/* 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 )

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

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

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

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

vamos a integrar lo anterior a nuestro diagrama

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

Este este ejemplo lo puedes encontrar en react-gojs basic

Blog

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

Julio Santacruz

Que es GoJS?

Tu primer diagrama con GoJS - React

Join Our Newsletter. No Spam, Only the good stuff.

Related