Упорядкування вузлів

Цей гайд базується на гайді Базовий редактор. Рекомендується переглянути його для повного розуміння цього гайду.

Упорядкування Області видимості Плагін Elk.js

Встановити залежності

Перед використанням цього плагіна необхідно окремо встановити однорангову залежність elkjs.

bash

npm i rete-auto-arrange-plugin elkjs

Крім того, може знадобитися встановити web-worker, якщо ваш бандлер не розпізнає цю залежність за замовчуванням

bash

npm i web-worker

Створіть основу вузла

Необхідно вказати ширину та висоту вузла, оскільки elkjs вимагає ці значення, особливо якщо розміри вузла відрізняються.

class Node extends ClassicPreset.Node {
  width = 180;
  height = 120;
}

class Connection<N extends Node> extends ClassicPreset.Connection<N, N> {}

type Schemes = GetSchemes<Node, Connection<Node>>;

Підключення плагіна

import { AutoArrangePlugin, Presets as ArrangePresets } from "rete-auto-arrange-plugin";

const arrange = new AutoArrangePlugin<Schemes>();

arrange.addPreset(ArrangePresets.classic.setup());

area.use(arrange);

Упорядкування доданих вузлів

await arrange.layout();

Будь-який вузол, який має властивість parent, вважається вкладеним вузлом у своєму відповідному батьківському вузлі, як зазначено ідентифікатором, указаним у цьому полі. Додаткові налаштування не потрібні. Гайд Області видимості містить приклад того, як використовувати його на практиці.

Анімоване упорядкування

Якщо ви віддаєте перевагу плавному переходу позиції вузлів, ви можете застосувати анімований TransitionApplier із настроюваною тривалістю анімації та функцією часу

import { ArrangeAppliers } from "rete-auto-arrange-plugin";

const applier = new ArrangeAppliers.TransitionApplier<Schemes, AreaExtra>({
  duration: 500,
  timingFunction: (t) => t,
  async onTick() {
    // викликається під час кожного оновлення кадру
  }
});

await arrange.layout({ applier })

Опції упорядкування

Крім того, ви можете використовувати глобальні параметри для elk.js. Наприклад, це дає вам змогу змінювати відстань між вузлами

await arrange.layout({
  options: {
    'elk.spacing.nodeNode': 100,
    'elk.layered.spacing.nodeNodeBetweenLayers': 100
  }
});

Перегляньте повний результат на сторінці прикладу Упорядкування.

Документація