События и подписки

Mind.js предоставляет удобный механизм для работы с событиями, который позволяет объектам библиотеки реагировать на изменения состояния, выполнение операций или получение данных. Этот механизм основан на концепции подписки на события и последующего их отслеживания, что делает архитектуру приложений гибкой и модульной.

Основы работы с событиями

Каждый объект Mind.js может генерировать события при изменении своего состояния. Для подписки на событие используется метод on, а для удаления подписки — метод off. Структура работы с событиями выглядит следующим образом:

object.on('eventName', callback);
object.off('eventName', callback);
  • eventName — имя события, на которое происходит подписка.
  • callback — функция, вызываемая при возникновении события. Она получает объект события с подробной информацией.

Пример:

const node = new Mind.Node({ text: 'Начальная точка' });

node.on('update', (event) => {
    console.log('Узел обновлён:', event);
});

node.text = 'Обновлённая точка';

В данном примере изменение текста узла вызывает событие update, на которое подписан обработчик. Объект события содержит данные о том, какие свойства были изменены.

Типы событий

Mind.js использует несколько категорий событий, которые позволяют детально отслеживать изменения:

  1. Изменение данных (update) Возникает при изменении свойств объектов, таких как текст узла, цвет, позиция.

  2. Добавление и удаление элементов (add, remove) События фиксируют структуру карты разума: добавление новых узлов, удаление ветвей или элементов графа.

  3. Навигационные события (focus, blur) Позволяют отслеживать активные элементы и реагировать на изменения контекста.

Подписка на глобальные события

Mind.js позволяет подписываться не только на события конкретного объекта, но и на глобальные события всей карты. Для этого используется объект карты (Mind.Map):

const mindMap = new Mind.Map();

mindMap.on('node:add', (event) => {
    console.log('Добавлен новый узел:', event.node.text);
});

mindMap.on('node:remove', (event) => {
    console.log('Удалён узел:', event.node.text);
});

В этом случае события node:add и node:remove происходят для любого узла карты. Такой подход удобен для ведения истории изменений, синхронизации состояния или логирования.

Передача данных через событие

Каждое событие может содержать полезные данные. Объект события обычно включает следующие поля:

  • target — объект, инициировавший событие.
  • type — имя события.
  • data — дополнительные данные, переданные при вызове события.

Пример передачи данных:

node.on('custom:event', (event) => {
    console.log('Пользовательское событие:', event.data);
});

node.trigger('custom:event', { info: 'Дополнительная информация' });

Метод trigger позволяет программно инициировать события с любыми параметрами.

Управление подписками

Для корректного управления подписками важно уметь их удалять. Mind.js поддерживает как удаление конкретного обработчика, так и всех обработчиков события:

node.off('update', specificCallback); // удаляет один обработчик
node.off('update'); // удаляет все обработчики события update

Удаление подписок предотвращает утечки памяти и обеспечивает стабильность работы приложений с большим количеством динамических объектов.

Важные практики

  • Использовать off для очистки обработчиков при удалении узлов.
  • Группировать события по категориям (data, structure, navigation) для упрощения отладки.
  • При генерации собственных событий применять trigger, передавая структурированные данные, чтобы подписчики могли легко их обрабатывать.
  • Избегать тяжелых операций в обработчиках событий, чтобы не блокировать интерфейс.

Цепочки событий

Mind.js поддерживает последовательное реагирование на события через цепочки подписок. Можно подписаться на событие одного объекта и в обработчике инициировать событие другого объекта, создавая реактивные сценарии:

nodeA.on('update', (event) => {
    nodeB.trigger('update', { source: nodeA });
});

Такой подход позволяет строить сложные взаимодействия между элементами карты без прямой зависимости между ними.

Практическая структура событий

Рекомендуется придерживаться структурированного подхода к именованию событий:

  • object:action — стандартная схема (node:add, node:update, node:remove).
  • custom:description — пользовательские события (custom:highlight, custom:sync).

Это облегчает управление обработчиками и минимизирует вероятность конфликтов имен.

Оглавление