React y Vue

GraphoJS tiene wrappers para React (@graphojs/react) y Vue (@graphojs/vue). Ambos montan el mismo núcleo y exponen los callbacks que el core ya ofrece.

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

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).