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

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

Основные типы узлов

  1. Корневой узел (Root Node) Корневой узел является начальной точкой карты. Он не имеет родительских узлов и служит отправной точкой для всех связей.

    Ключевые свойства:

    • id: уникальный идентификатор узла.
    • text: текстовое содержимое узла.
    • children: массив дочерних узлов.
    • expanded: логический флаг, определяющий, развёрнут ли узел при визуализации.
    • style: объект, задающий визуальные параметры (цвет, шрифт, размер).

    Пример создания корневого узла:

    const rootNode = new Mind.Node({
    id: 'root',
    text: 'Главная идея',
    children: [],
    expanded: true,
    style: { color: '#0000FF', fontSize: 16 }
});

  2. Дочерний узел (Child Node) Дочерний узел создается внутри другого узла, позволяя формировать иерархию.

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

    • Может содержать свои собственные дочерние узлы, создавая вложенную структуру.
    • Содержит ссылку на родителя через свойство parentId.

    Свойства:

    • id
    • text
    • parentId
    • children
    • style
    • expanded

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

    const childNode = new Mind.Node({
    id: 'child1',
    text: 'Подидея 1',
    parentId: 'root',
    children: [],
    expanded: true,
    style: { color: '#FF0000' }
});

  3. Листовой узел (Leaf Node) Листовой узел не имеет дочерних элементов. Используется для конечных точек дерева знаний или информации.

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

    • Упрощённая структура, без массива children.
    • Можно использовать для добавления примечаний, ссылок или деталей к идее.

    Пример листового узла:

    const leafNode = new Mind.Node({
    id: 'leaf1',
    text: 'Деталь подидеи',
    parentId: 'child1',
    style: { color: '#008000', fontStyle: 'italic' }
});

  4. Связанный узел (Linked Node) Позволяет создавать связи между узлами, которые не находятся в прямой иерархии. Используется для отображения ассоциаций и перекрёстных ссылок.

    Свойства:

    • sourceId: идентификатор исходного узла.
    • targetId: идентификатор целевого узла.
    • relationType: тип связи (например, «ассоциация», «ссылка»).
    • style: визуальные параметры линии связи.

    Пример создания связи:

    const linkNode = new Mind.Link({
    sourceId: 'child1',
    targetId: 'leaf2',
    relationType: 'ассоциация',
    style: { stroke: '#000', strokeWidth: 2 }
});

Общие свойства узлов

Все узлы Mind.js имеют набор общих свойств, которые позволяют управлять визуализацией и функциональностью:

  • id — обязательный уникальный идентификатор.

  • text — текстовое содержимое узла.

  • parentId — идентификатор родителя (для всех, кроме корневого узла).

  • children — массив дочерних узлов (для листового узла может отсутствовать).

  • expanded — отображение узла (развёрнут/свернут).

  • style — объект с CSS-подобными свойствами:

    • color — цвет текста.
    • backgroundColor — фон узла.
    • fontSize — размер шрифта.
    • fontWeight — жирность текста.
    • fontStyle — курсив или обычный стиль.

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

Визуальные и функциональные особенности

  • Узлы можно динамически добавлять и удалять без перезагрузки карты.
  • Свойство expanded позволяет контролировать раскрытие ветвей дерева для улучшения читаемости.
  • Стиль каждого узла может быть индивидуальным, что удобно для выделения ключевых идей.
  • Связанные узлы расширяют возможности аналитики и демонстрации сложных взаимосвязей.

Итоговая структура узла

Стандартная структура объекта узла в Mind.js выглядит следующим образом:

{
    id: 'nodeId',
    text: 'Описание узла',
    parentId: 'parentNodeId', // отсутствует у корневого узла
    children: [], // массив дочерних узлов
    expanded: true,
    style: {
        color: '#000000',
        backgroundColor: '#FFFFFF',
        fontSize: 14,
        fontWeight: 'normal',
        fontStyle: 'normal'
    },
    data: {} // дополнительная информация
}

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

Оглавление