Кастомизация отрисовки узлов

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

Типы узлов и их свойства

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

  • id — уникальный идентификатор узла.
  • topic — текстовое содержимое узла.
  • direction — направление ветви относительно родителя (left или right).
  • data — объект для хранения дополнительных данных, используемых при кастомной отрисовке.
  • style — объект CSS-подобных свойств: цвет фона, границы, шрифт.

Пример определения узла с кастомными стилями:

const node = {
    id: 'node1',
    topic: 'Главная тема',
    direction: 'right',
    style: {
        backgroundColor: '#f0f0f0',
        borderColor: '#333',
        borderWidth: 2,
        color: '#000',
        fontSize: 16
    }
};

Использование кастомных шаблонов узлов

Mind.js позволяет переопределять стандартную отрисовку узлов с помощью пользовательских шаблонов. Для этого используется свойство renderNode, которое принимает функцию, возвращающую HTML или SVG-элемент.

Пример кастомного шаблона:

const mind = new Mind({
    container: document.getElementById('mindmap'),
    theme: 'default',
    renderNode: (node) => {
        const div = document.createElement('div');
        div.style.padding = '10px';
        div.style.borderRadius = '8px';
        div.style.backgroundColor = node.style?.backgroundColor || '#fff';
        div.style.border = `${node.style?.borderWidth || 1}px solid ${node.style?.borderColor || '#000'}`;
        div.innerText = node.topic.toUpperCase();
        return div;
    }
});

Ключевые моменты:

  • renderNode получает объект узла и позволяет полностью контролировать внешний вид.
  • Возвращаемый элемент может быть HTML или SVG, что обеспечивает совместимость с различными способами рендеринга.
  • Динамическая кастомизация возможна через свойства data узла, что позволяет создавать условное форматирование.

Поддержка событий на кастомных узлах

Кастомные узлы могут обрабатывать пользовательские события. Mind.js предоставляет методы onNodeClick, onNodeMouseOver, onNodeMouseOut для привязки функций к узлам.

Пример добавления событий:

mind.on('nodeClick', (node) => {
    console.log('Кликнули на узел:', node.id);
    node.style.backgroundColor = '#ffcc00';
    mind.updateNode(node);
});

mind.on('nodeMouseOver', (node) => {
    node.style.borderColor = '#ff0000';
    mind.updateNode(node);
});

mind.on('nodeMouseOut', (node) => {
    node.style.borderColor = '#333';
    mind.updateNode(node);
});

Особенности:

  • updateNode обновляет отображение узла без полной перерисовки карты.
  • События могут использовать дополнительные данные из node.data для динамической кастомизации.

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

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

Пример динамических стилей:

mind.renderNode = (node) => {
    const div = document.createElement('div');
    const level = node.level || 1;
    div.style.backgroundColor = level === 1 ? '#ffd700' : '#e0e0e0';
    div.style.border = '2px solid ' + (level === 1 ? '#ff8c00' : '#333');
    div.style.padding = `${5 + level * 2}px`;
    div.innerText = node.topic;
    return div;
};

Здесь:

  • Уровень узла (node.level) используется для расчета отступов, цвета и толщины границы.
  • Позволяет визуально различать основные и второстепенные ветви.

Кастомные иконки и мультимедиа

Узлы Mind.js поддерживают добавление изображений, иконок и других элементов внутри HTML-шаблона:

mind.renderNode = (node) => {
    const container = document.createElement('div');
    const icon = document.createElement('img');
    icon.src = node.data.iconUrl || 'default-icon.png';
    icon.style.width = '24px';
    icon.style.height = '24px';
    container.appendChild(icon);

    const text = document.createElement('span');
    text.innerText = node.topic;
    text.style.marginLeft = '8px';
    container.appendChild(text);

    container.style.display = 'flex';
    container.style.alignItems = 'center';
    container.style.padding = '5px';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '6px';
    container.style.backgroundColor = '#f9f9f9';
    
    return container;
};

Такой подход позволяет:

  • Включать визуальные индикаторы состояния узлов.
  • Использовать цветовые иконки для классификации по типу информации.
  • Поддерживать мультимедийные карты с фото, графиками и другими элементами.

Настройка соединений между узлами

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

mind.style.lineColor = '#888';
mind.style.lineWidth = 2;
mind.style.lineType = 'dashed'; // solid, dashed, dotted

Для каждого узла можно переопределять стиль линии к его дочерним узлам:

node.style.lineColor = '#ff0000';
node.style.lineWidth = 3;
mind.updateNode(node);

Производительность при кастомизации

При использовании сложных HTML-шаблонов важно учитывать производительность:

  • Минимизировать количество вложенных элементов.
  • Использовать document.createDocumentFragment() для массовой генерации узлов.
  • Обновлять отдельные узлы через updateNode, избегая полной перерисовки карты.

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

Оглавление