DEV Community

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

Posted on

2

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

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up