Comments - Rete.js

Comments

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

КоментаріПлагін

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

bash
npm i rete-comment-plugin

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

ts
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>>;

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

ts
import { CommentPlugin } from "rete-comment-plugin"; const comment = new CommentPlugin<Schemes, AreaExtra>(); area.use(comment);

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

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

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

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

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

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

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

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

ts
import { CommentExtensions } from "rete-comment-plugin"; const selector = AreaExtensions.selector(); const accumulating = AreaExtensions.accumulateOnCtrl(); CommentExtensions.selectable(comment, selector, accumulating);

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

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

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

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

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