React y Vue

GraphoJS tiene wrappers para React (graphojs/react) y Vue (graphojs/vue) como subpaths del paquete graphojs. React y Vue son dependencias opcionales: instálalas solo si usas el subpath correspondiente.

Edita el código y pulsa Run▶ Run↺ Reset

Instalación

npm install graphojs react          # para graphojs/react
npm install graphojs vue            # para graphojs/vue

React

import { Diagram, Palette, Overview } from 'graphojs/react';
import { GraphLinksModel, GraphObject } from 'graphojs';

<Diagram
  model={model}
  nodeTemplate={template}
  initDiagram={(d) => d.zoomToFit()}
  onSelectionChanged={() => {}}
/>

Vue

<script setup>
import { Diagram } from 'graphojs/vue';
</script>

<template>
  <Diagram :model="model" :node-template="template" />
</template>

Callbacks

Ambos wrappers exponen initDiagram, onModelChange, onDiagramEvent y onSelectionChanged (y en Vue los emits equivalentes).

Svelte / Angular

Fuera de alcance para la 1.0.0 — decisión explícita, no un olvido. GraphoJS es agnóstico de framework en su núcleo (el Diagram real es una clase normal sobre un <canvas>), así que un wrapper de Svelte o Angular seguiría el mismo patrón fino que graphojs/react/graphojs/vue si se decide añadirlo más adelante — pero no antes de 1.0.0.