§@gravity-ui/graph ·

Renderizador de gráficos de alto rendimiento con detalle sensible a la escala

Libro de cuentos

§Instalación y configuración

npm install @gravity-ui/graph

§Ejemplos

• Ejemplo de libro de cuentos básico
• Ejemplo de libro de cuentos de Large Basic
• Vista de bloques personalizados
• Conexión Bézier
• Conexión de personalización

import {GraphCanvas, GraphState, TRenderBlockFn, GraphBlock, useGraph} from '@gravity-ui/graph';
import React from 'react';

const config = {};

export function GraphEditor() {
  const {graph, setEntities, start} = useGraph(config);

  useEffect(() => {
    setEntities({
      blocks: [
        {
          is: 'block-action',
          id: 'action_1',
          x: -100,
          y: -450,
          width: 126,
          height: 126,
          selected: true,
          name: 'Block #1',
          anchors: [],
        },
        {
          id: 'action_2',
          is: 'block-action',
          x: 253,
          y: 176,
          width: 126,
          height: 126,
          selected: false,
          name: 'Block #2',
          anchors: [],
        },
      ],
      connections: [
        {
          sourceBlockId: 'action_1',
          targetBlockId: 'action_2',
        },
      ],
    });
  });

  const renderBlockFn = (graph, block) => {
    return (
      <GraphBlock graph={graph} block={block}>
        {block.id}
      </GraphBlock>
    );
  };

  return (
    <GraphCanvas
      graph={graph}
      renderBlock={renderBlockFn}
      onStateChanged={({state}) => {
        if (state === GraphState.ATTACHED) {
          start();
          graph.zoomTo('center', {padding: 300});
        }
      }}
    />
  );
}

§Documentos

• API pública
• Graficar eventos
• Capas
• Grupos