Перейти к содержимому
Xenolith Graph Xenolith Graph

Установка

Установка

Окно терминала
npm install @xenolithengine/graph-editor @xenolithengine/graph-core @xenolithengine/graph-theme-xen pixi.js

pixi.js — peer-зависимость, держите её в своих deps, чтобы контролировать версию рендерера.

Монтирование

import { XenolithEditor } from '@xenolithengine/graph-editor'


const editor = await XenolithEditor.init('#app')

Этот один вызов:

  1. Грузит bundled Inter (Regular / SemiBold / Bold) из самой темы — никаких Google Fonts.
  2. Поднимает PIXI v8 Application, цепляет canvas к указанному элементу.
  3. Подключает pan, zoom, drag, selection, marquee, и взаимодействие с нодами.
  4. Возвращает editor, в который можно добавлять узлы и связи.

Никакого второго шага настройки нет. Установили — init уже работает.

Добавление узлов и рёбер

import { createNodeId, createPinId } from '@xenolithengine/graph-core'


const a = {
  id: createNodeId(),
  type: 'Source',
  position: { x: 100, y: 100 },
  size: { x: 150, y: 70 },
  state: {},
  pins: [
    { id: createPinId(), kind: 'data', direction: 'out', type: 'float', multiple: true, label: 'Output' },
  ],
}


editor.addNode(a, { category: 'logic', title: 'Source' })

editor.connect(fromNode, fromPinIndex, toNode, toPinIndex, { sourceType }) рисует ребро между двумя пинами. Цвет провода всегда равен цвету типа source-пина — это инвариант темы Xen.