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
Top comments (0)