MindMap Application

Десктопное приложение для создания и редактирования Mind Maps с использованием Vue 3, Pinia, SVG.js и Tauri.

Возможности

• 🌳 Древовидная структура - управление нодами через иерархическое дерево
• 🎨 Кастомизация - создание и редактирование стилей нодов
• 🖱️ Drag & Drop - перетаскивание нодов на канвасе
• 🔄 Авто-раскладка - три алгоритма: дерево, радиальный, иерархический
• 💾 Работа с файлами - открытие, сохранение, создание новых файлов (.mm, .json)
• ⌨️ Горячие клавиши - быстрый доступ к основным функциям
• ↩️ Undo/Redo - отмена и повтор действий
• 🔍 Зум и панорамирование - навигация по большой карте
• 💾 Автосохранение - автоматическое сохранение изменений

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

Windows

• Windows 10 или новее
• Webview2 (обычно предустановлен)
• Visual Studio C++ Build Tools (при компиляции)

Linux

• libwebkit2gtk-4.0-dev
• build-essential
• curl
• wget
• file
• xz-utils
• libssl-dev

macOS

• macOS 10.13 (High Sierra) или новее
• Xcode Command Line Tools

Установка и разработка

1. Установка Rust

Сначала установите Rust:

Windows:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Linux/macOS:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

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

source $HOME/.cargo/env

2. Установка зависимостей проекта

npm install

3. Разработка

# Запуск веб-версии (в браузере)
npm run dev

# Запуск Tauri приложения (десктоп)
npm run tauri:dev

4. Сборка для продакшна

# Сборка веб-версии
npm run build

# Сборка Tauri приложения
npm run tauri:build

Результаты сборки Tauri находятся в src-tauri/target/release/bundle/:

• Windows: .msi файлы в bundle/msi/ и .exe в bundle/nsis/
• Linux: .deb файлы в bundle/deb/
• macOS: .dmg файлы в bundle/dmg/

Горячие клавиши

Клавиша	Действие
Ctrl + S	Сохранить файл
Ctrl + O	Открыть файл
Ctrl + N	Новый файл
Ctrl + Z	Отменить
Ctrl + Y	Повторить
Enter	Добавить дочернюю ноду
Delete	Удалить выбранную ноду
Esc	Отменить выбор
↑ ↓ ← →	Навигация по нодам

Структура данных

Нода

{
  id: string,           // Уникальный идентификатор
  text: string,         // Текстовое содержимое
  attributes: {},       // Произвольные атрибуты
  class: string,        // ID CSS класса для стилизации
  children_ids: [],     // Массив ID дочерних нодов
  comment: string,      // Комментарий к ноде
  x: number,            // Координата X
  y: number             // Координата Y
}

Класс

{
  id: string,
  name: string,
  styles: {
    fill: string,           // Цвет заливки
    stroke: string,         // Цвет границы
    strokeWidth: number,    // Толщина границы
    fontSize: number,       // Размер шрифта
    fontFamily: string      // Шрифт
  }
}

Архитектура проекта

src/
  stores/              # Pinia stores для управления состоянием
  components/          # Vue компоненты
    TreeModule/        # Компоненты дерева
    GraphicsModule/    # SVG графика
    ClassesModule/     # Управление классами
    Shared/            # Общие компоненты
  composables/         # Vue composables
  utils/              # Утилиты
  styles/             # SCSS стили
src-tauri/            # Tauri (Rust backend)
  src/
    lib.rs           # Tauri commands
  Cargo.toml         # Rust зависимости
  tauri.conf.json    # Конфигурация приложения

Технологический стек

• Vue 3 - Composition API
• Pinia - State management
• SVG.js - Отрисовка графики
• Vite - Build tool
• Tauri - Десктоп приложение
• Rust - Backend logic

Работа с файлами

Приложение поддерживает два формата файлов:

• .mm - специальный формат MindMap
• .json - универсальный формат для обмена данными

Основные файловые операции:

1. Новый файл (Ctrl+N) - создает новый пустой документ
2. Открыть (Ctrl+O) - открывает существующий файл
3. Сохранить (Ctrl+S) - сохраняет текущий документ
4. Сохранить как - сохраняет документ в новый файл
5. Экспорт - экспортирует в JSON формат
6. Импорт - импортирует из JSON файла

Автосохранение:

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

Линтер и форматирование

# Запуск ESLint
npm run lint

# Форматирование кода с Prettier
npm run format

Лицензия

MIT