УпорядкуванняОбласті видимостіПлагінElk.js
Перед використанням цього плагіна необхідно окремо встановити однорангову залежність elkjs
.
bashnpm i rete-auto-arrange-plugin elkjs
Крім того, може знадобитися встановити web-worker
, якщо ваш бандлер не розпізнає цю залежність за замовчуванням
bashnpm i web-worker
Необхідно вказати ширину та висоту вузла, оскільки elkjs
вимагає ці значення, особливо якщо розміри вузла відрізняються.
tsclass Node extends ClassicPreset.Node { width = 180; height = 120; } class Connection<N extends Node> extends ClassicPreset.Connection<N, N> {} type Schemes = GetSchemes<Node, Connection<Node>>;
tsimport { AutoArrangePlugin, Presets as ArrangePresets } from "rete-auto-arrange-plugin"; const arrange = new AutoArrangePlugin<Schemes>(); arrange.addPreset(ArrangePresets.classic.setup()); area.use(arrange);
tsawait arrange.layout();
Будь-який вузол, який має властивість parent
, вважається вкладеним вузлом у своєму відповідному батьківському вузлі, як зазначено ідентифікатором, указаним у цьому полі. Додаткові налаштування не потрібні. Гайд Області видимості містить приклад того, як використовувати його на практиці.
Якщо ви віддаєте перевагу плавному переходу позиції вузлів, ви можете застосувати анімований TransitionApplier
із настроюваною тривалістю анімації та функцією часу
tsimport { 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. Наприклад, це дає вам змогу змінювати відстань між вузлами
tsawait arrange.layout({ options: { 'elk.spacing.nodeNode': 100, 'elk.layered.spacing.nodeNodeBetweenLayers': 100 } });
Перегляньте повний результат на сторінці прикладу Упорядкування.