Comments

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

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

bash

npm i rete-comment-plugin

Підготовка вузлів

class Node extends ClassicPreset.Node {
  width = 180;
  height = 140;
}
class Connection<N extends Node> extends ClassicPreset.Connection<N, N> {}

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

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

import { CommentPlugin } from "rete-comment-plugin";

const comment = new CommentPlugin<Schemes, AreaExtra>();

area.use(comment);

Додайте коментарі програмно

Додавання інлайн коментаря

comment.addInline("Текст інлайн коментаря", [360, -20], node.dd);

де [360, -20] - це позиція коментаря, який може бути вільно розміщений по відношенню до node, до якого він приєднаний.

Додавання фрейм коментаря

comment.addFrame("Текст фрейм коментаря", [node.id]);

де [node.id] посилається на вузли, які охоплені цим коментарем

Вибір коментарів

import { CommentExtensions } from "rete-comment-plugin";

const selector = AreaExtensions.selector();
const accumulating = AreaExtensions.accumulateOnCtrl();

CommentExtensions.selectable(comment, selector, accumulating);

Редагування тексту коментаря

Текст коментаря можна редагувати ПКМ. За замовчуванням відображатиметься підказка з полем введення, але ви можете кастомізувати це.

const comment = new CommentPlugin<Schemes, AreaExtra>({
  edit: async (comment) => {
    return prompt('Edit comment', comment.text)
  }
});

де поле edit має приймати асинхронну функцію, яка повертає текст для коментаря.

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

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