Undo/Redo

Історія змінПлагін

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

bash
npm i rete-history-plugin

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

ts
import { HistoryPlugin, HistoryActions } from "rete-history-plugin";

const history = new HistoryPlugin<Schemes, HistoryActions<Schemes>>();

area.use(history);

Класичний пресет

Як і більшість плагінів, для повноцінної роботи він потребує підключення пресету.

ts
import { Presets } from "rete-history-plugin";

history.addPreset(Presets.classic.setup())

Він відповідає за трекінг історії додавання, видалення або переміщення вузлів, а також за трекунг додавання та видалення з'єднань.

Використання

Плагін за замовчуванням не відстежує дії користувача, наприклад комбінації клавіш. Щоб увімкнути взаємодію з користувачем, ви можете реалізувати використання методів undo/redo самостійно

ts
await history.undo()
await history.redo()

Крім того, ви можете використовувати розширення за замовчуванням, яке відстежує комбінації клавіш Ctrl+Z/Ctrl+Y

ts
import { HistoryExtensions } from "rete-history-plugin";

HistoryExtensions.keyboard(history);

Керування історією

Якщо вам потрібно щось більше, ніж відслідковування вузлів та з'єднань, ви можете створити власні екшени та додати їх до історії

ts
class MyAction implements HistoryAction {
  undo(): void | Promise<void> {
    // скасування дії
  }
  redo(): void | Promise<void> {
    // повторення дія
  }
}

const history = new HistoryPlugin<Schemes, HistoryActions<Schemes> | MyAction>();

const myAction = new MyAction()

history.add(myAction)

Щоб отримати список істрії, використовуйте метод getHistorySnapshot або getRecent (майте на увазі, що напряму ви не можете змінити історію)

ts
const list = history.getHistorySnapshot()
const recentFor1s = history.getRecent(1000)

Як ви бачите, в останньому методі ми отримуємо список дій за останню секунду. Оскільки дії залежні від часу, плагін може групувати їх, щоб користувачу не довелось багато разів натискати Ctrl + Z, якщо в короткий проміжок часу виникало багато дій. Наприклад, це буває, коли користувач видаляє вузол, а разом з ним автоматично видаляються з'єднання.

До речі, таймінг можна налаштувати наступним чином, де 200 це дефолтна кількість мілісекунд, за якими плагін буде вважати, що сусідні дії відносяться до однієї групи, якщо час між ними складає менше ніж вказаний час.

ts
const history = new HistoryPlugin<Schemes>({ timing: 200 });

Якщо ви хочете щоб відміна або повернення між діями не залежала від часі, можете зробити це так:

ts
// дія 1
// дія 2
history.separate() // або myAction.separated = true
// дія 3

Таким чином при першому виклику undo буде відмінена тільки третя дія, давіть якщо між нею та попередньою менше 200 мілісекунд.

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