Док-меню - Rete.js

Док-меню

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

Док-менюПлагін

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

bash
npm i rete-dock-plugin

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

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

ts
import { DockPlugin, DockPresets } from "rete-dock-plugin";

const dock = new DockPlugin<Schemes>();

dock.addPreset(DockPresets.classic.setup({ area, size: 100, scale: 0.6 }));

area.use(dock);

Додавання вузлів

Щоб відобразити превью вузла, вам потрібно вказати функцію, яка повертає екземпляр вузла. Ця функція викликається, коли вузол додається до Док-меню або коли перетягується в область редактора.

ts
dock.add(() => new NodeA());
dock.add(() => new NodeB());

Додавання на певну позицію

Вставлення вузла на 3 позицію (2 індекс)

ts
dock.add(() => new NodeA(), 2);

Видалення вузлів

Щоб видалити доданий вузол, скористайтеся тією самою функцією, яку передано до add

ts
const createNodeA = () => new NodeA()


dock.add(createNodeA);
dock.remove(createNodeA);

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