CUI Builder

Графический редактор интерфейсов (GUI Builder) для разработки UI на основе Cui для игр на Rust (Oxide).

Возможности

• Визуальный редактор для создания Unity UI элементов
• Поддержка всех основных компонентов Cui (RectTransform, Image, Text, Button)
• Экспорт UI в формат JSON, используемый в Oxide
• Генерация C#-кода для использования в плагинах
• Система Undo/Redo (50 шагов)
• Древовидное представление иерархии элементов

Технический стек

• Frontend: React 19, TypeScript
• Состояние: Zustand
• Canvas: React-Konva
• Стилизация: Tailwind CSS

Структура проекта

src/
  components/      # UI компоненты
    canvas/        # Компоненты для работы с визуальным редактором
    inspector/     # Компоненты для панели свойств
    sidebar/       # Компоненты для боковой панели с иерархией
  lib/
    types/         # TypeScript типы и интерфейсы
  store/           # Хранилище состояния

Основные понятия и структура

• Canvas — верхний уровень, содержит UnityCanvas.
• UnityCanvas (CuiContainer) — контейнер элементов CuiElement.
• CuiElement — базовая единица UI, содержит компоненты и может иметь вложенные UnityCanvas.
• ICuiComponent — интерфейс расширяемых компонентов (RectTransform, Image, Text и т.д.).

Запуск проекта

1. Установка зависимостей:

   npm install

2. Запуск в режиме разработки:

   npm run dev

3. Сборка для production:

   npm run build

Интерфейс редактора

• Центральная часть — визуальный редактор элементов (Canvas).
• Левая панель — иерархия элементов (древовидный вид).
• Правая панель — свойства и компоненты выделенного элемента.

Работа с редактором

1. Создайте контейнер, нажав кнопку "+ Контейнер" в левой панели.
2. Добавьте элементы в контейнер, нажав кнопку "+ Элемент".
3. Выбирайте элементы в иерархии или на канвасе для редактирования.
4. Изменяйте свойства элементов в правой панели инспектора.
5. Используйте меню для доступа к функциям экспорта и импорта.

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

• Ctrl+Z — Отмена последнего действия
• Ctrl+Y — Повтор отмененного действия