Стили и темы оформления

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

Определение стилей элементов

Каждый узел (node) карты может быть представлен с индивидуальными параметрами отображения. Mind.js использует объект style, который содержит свойства CSS-подобного формата:

const nodeStyle = {
    color: "#ffffff",
    backgroundColor: "#007acc",
    borderColor: "#005fa3",
    borderWidth: 2,
    fontSize: 14,
    fontWeight: "bold",
    padding: 8,
    borderRadius: 6
};

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

  • color – цвет текста.
  • backgroundColor – заливка узла.
  • borderColor и borderWidth – параметры обводки, позволяют выделять узлы на фоне других.
  • fontSize и fontWeight – управление типографикой, важное для визуального восприятия и иерархии.
  • padding и borderRadius – влияют на форму и пространство вокруг текста.

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

Темы оформления

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

const theme = {
    node: {
        color: "#333333",
        backgroundColor: "#e0e0e0",
        borderColor: "#999999",
        fontSize: 12,
        borderRadius: 4
    },
    line: {
        color: "#666666",
        width: 2,
        style: "solid"
    },
    background: "#f9f9f9"
};

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

  • node – базовые свойства для всех узлов карты, упрощает поддержку единообразного дизайна.
  • line – стили соединительных линий, включая тип линии (solid, dashed, dotted) и толщину.
  • background – фон всей карты, полезен для выделения контента и улучшения контрастности.

Динамическая смена стиля

Mind.js позволяет изменять тему или отдельные стили в процессе работы карты. Это реализуется через методы updateNodeStyle и applyTheme:

mind.updateNodeStyle("node-1", { backgroundColor: "#ffcc00", fontWeight: "bold" });
mind.applyTheme(customTheme);
  • updateNodeStyle(id, style) – применяет новый стиль к конкретному узлу по его идентификатору.
  • applyTheme(theme) – обновляет внешний вид всей карты мгновенно, сохраняя взаимодействие и структуру.

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

Наследование и каскадность стилей

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

const parentNodeStyle = { backgroundColor: "#a0c4ff", color: "#000000" };
const childNodeStyle = { fontSize: 12 }; // наследует backgroundColor и color от родителя

Интерактивные темы

Помимо статических стилей, Mind.js позволяет использовать темы, зависящие от состояния узлов:

  • hoverStyle – стиль при наведении курсора.
  • selectedStyle – стиль выбранного узла.
  • collapsedStyle – стиль свернутого узла.
const nodeInteractiveStyles = {
    hoverStyle: { backgroundColor: "#ffd700" },
    selectedStyle: { borderColor: "#ff0000", borderWidth: 3 }
};

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

Настройка шрифтов и иконок

Mind.js позволяет интегрировать кастомные шрифты и иконки в узлы:

  • icon – добавляет графический элемент рядом с текстом.
  • fontFamily – настраивает семейство шрифта для улучшения читаемости.
const customNodeStyle = {
    fontFamily: "Arial, sans-serif",
    icon: "⭐"
};

Комбинация иконок и цветовых акцентов помогает визуально разделять категории узлов.

Примеры продвинутого использования

  • Цветовые схемы по глубине узла: верхние уровни карты ярче, нижние — приглушённые, что облегчает восприятие структуры.
  • Темы для разных состояний карты: отдельные визуальные схемы для редактирования и презентации.
  • Анимация изменения темы: плавное переходное изменение цвета и размеров узлов для улучшения UX.

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

Оглавление