Интерактивность визуальных элементов

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

Работа с событиями

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

node.on('click', (event) => {
    console.log('Узел был нажат:', node.id);
});

Основные события для узлов и связей:

  • click — нажатие на элемент.
  • dblclick — двойное нажатие.
  • mouseover / mouseout — наведение и уход курсора.
  • dragstart / dragend — начало и завершение перетаскивания.
  • update — изменение состояния элемента.

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

Динамическое изменение свойств узлов

Узлы и связи обладают набором атрибутов, которые можно изменять в процессе работы приложения. Ключевые свойства узла:

  • label — текстовая метка.
  • color — цвет узла.
  • size — размер, влияющий на радиус круга.
  • position — координаты x и y для ручного управления положением.

Пример динамического изменения:

node.setLabel('Новый текст');
node.setColor('#ff0000');
node.setSize(50);
node.setPosition({ x: 200, y: 150 });

Изменение свойств автоматически обновляет визуальное отображение на холсте.

Перетаскивание и привязка к координатам

Mind.js поддерживает интерактивное перемещение узлов мышью. Для реализации этого можно использовать события dragstart и dragend:

node.on('dragstart', () => {
    node.setColor('#00ff00'); // подсветка во время перетаскивания
});

node.on('dragend', () => {
    node.setColor('#0000ff'); // возвращение к исходному цвету
});

Кроме того, можно фиксировать узел на определённых координатах с помощью метода lockPosition, предотвращая его перемещение физическим движком:

node.lockPosition({ x: 100, y: 100 });

Связь событий между узлами и графом

Mind.js позволяет создавать реакции на изменения всего графа, а не только отдельных элементов. События уровня графа включают:

  • nodeAdded — добавление нового узла.
  • nodeRemoved — удаление узла.
  • edgeAdded — добавление связи.
  • edgeRemoved — удаление связи.

Пример использования:

graph.on('nodeAdded', (node) => {
    node.setColor('#ffa500'); // подсветка нового узла
});

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

Интерактивные стили и анимация

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

node.animate({ size: 80, color: '#ff00ff' }, 500);

Анимации можно комбинировать с событиями:

node.on('mouseover', () => {
    node.animate({ size: 70, color: '#00ffff' }, 300);
});

node.on('mouseout', () => {
    node.animate({ size: 50, color: '#0000ff' }, 300);
});

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

Связывание данных с визуальными элементами

Каждый узел и связь могут хранить произвольные данные в свойстве data. Эти данные могут использоваться для динамического изменения визуализации в зависимости от состояния приложения:

node.data = { type: 'task', status: 'pending' };

if (node.data.status === 'pending') {
    node.setColor('#ffcc00');
}

Такое связывание облегчает реализацию интерактивных панелей управления, фильтров и пользовательских алгоритмов визуализации.

Практические шаблоны интерактивности

  1. Подсветка активного узла: использовать события mouseover и mouseout для изменения цвета или размера.
  2. Динамическое добавление узлов: подписка на событие nodeAdded с настройкой стилей по умолчанию.
  3. Фильтрация элементов: проход по всем узлам и изменение их видимости в зависимости от данных.
  4. Анимация при обновлении данных: применение animate после изменения свойств узла, чтобы изменения были плавными.

Использование этих шаблонов позволяет строить сложные интерактивные интерфейсы, где визуализация и данные остаются синхронизированными, а взаимодействие с пользователем — максимально плавным и интуитивным.

Оглавление