# Test-X6 — Детальная схема связей устройства

Визуализация и редактирование детальных схем связей сетевых устройств на базе AntV X6.

## Стек

- **Frontend:** React 18 + TypeScript + AntD 5 + AntV X6 2.x + Zustand + Vite
- **Backend:** NestJS + TypeORM + PostgreSQL
- **Линтинг:** ESLint + Prettier + tsc strict

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

```
test-x6/
├── frontend/          # React SPA
│   └── src/
│       ├── api/       # HTTP-клиент, типы API
│       ├── components/# Toolbar, SidePanel, ConnectionsPanel, Layout
│       ├── features/
│       │   └── schema/# Ядро: graph/, nodes/, ports/, edges/, layout/, context-menu/, locking/, export/
│       ├── hooks/     # React-хуки
│       ├── store/     # Zustand
│       ├── types/     # Общие TypeScript-типы
│       ├── constants/ # Цвета статусов, размеры нод, маппинг слоёв
│       └── utils/
├── backend/           # NestJS API
│   └── src/
│       ├── modules/   # sites, devices, cards, ports, lines, schema, locks, export
│       ├── common/    # Guards, pipes, filters, interceptors
│       └── database/  # TypeORM config, миграции
└── ARCHITECTURE.md    # Детальная архитектура
```

## Ключевые документы

- `ARCHITECTURE.md` — архитектура, модель данных, API, фазы реализации
- `frontend/src/features/schema/` — ядро графа X6

## Команды

```bash
# Frontend
cd frontend && npm run dev       # dev-сервер
cd frontend && npm run build     # сборка
cd frontend && npm run lint      # линтинг
cd frontend && npm run typecheck # проверка типов

# Backend
cd backend && npm run start:dev  # dev-сервер
cd backend && npm run build      # сборка
cd backend && npm run lint       # линтинг
cd backend && npm run typecheck  # проверка типов
cd backend && npm run migration:run      # применить миграции
cd backend && npm run migration:generate # сгенерировать миграцию
```

## Правила разработки

### Общие
- Язык кода и комментариев — **английский**
- Язык документации и UI — **русский**
- Строгий TypeScript: `strict: true`, никаких `any`
- Все сущности используют UUID как первичный ключ

### Frontend
- Каждый Custom Node X6 — отдельный файл в `features/schema/nodes/`
- Логика портов (распределение по контейнерам, сортировка, drag) — в `features/schema/ports/`
- Стили линий и группировка — в `features/schema/edges/`
- Автолейаут (8 слоёв) — в `features/schema/layout/`
- State management — Zustand (не Redux, не Context)
- Компоненты AntD — для всех UI-элементов (модалки, меню, таблицы, формы)

### Backend
- NestJS модули — по одному на доменную сущность
- Все эндпоинты — REST, префикс `/api`
- Валидация — `class-validator` + `class-transformer`
- Миграции TypeORM — явные, без `synchronize: true` в production

### X6 специфика
- Вложенность: Site → Device → Card → Port (через X6 embedding)
- Порты: двухконтейнерная система (left/right), автопереброс при перемещении устройств
- Линии: два режима роутинга (orth/normal), группировка при >1 линии между устройствами
- Кроссы: пропорция 1:3, асимметричное скругление, L-порты слева, S-порты справа
- Перемычки (self-loops): линия выходит из устройства и входит обратно, не пересекая его

## Цветовая карта статусов

Статусы определяют цвет контура/заливки нод и цвет линий. Константы хранятся в `frontend/src/constants/statusColors.ts`.

## Домен

- **Сайт** — физическая площадка с устройствами, может содержать дочерние сайты
- **Устройство** — сетевое оборудование (активное: роутер, свитч; пассивное: кросс, муфта)
- **Карта** — вложенная плата/модуль внутри устройства
- **Порт** — точка подключения на устройстве или карте
- **Линия** — физическое соединение между портами (простая или сложная — с волокнами)
- **Волокно (Fiber)** — отдельное волокно внутри сложной линии