Ivan Fontosh
8f8eef53c9
- Optimize imported scene preview images (smart WebP/JPEG/PNG, preserve alpha, keep pixel size) - Update converter to re-encode existing image assets with same algorithm - Improve import/export progress overlay and reduce presentation slide stutter Made-with: Cursor
91 lines
5.5 KiB
Markdown
91 lines
5.5 KiB
Markdown
## План оптимизации редактора (агент)
|
|
|
|
Цель: убрать лаги визуального редактора на проектах 20+ сцен (пан/зум графа, drag, создание связей) и снизить влияние тяжёлых ассетов (изображения/видео) на редактор.
|
|
|
|
### Этап 0 — Замер и воспроизведение
|
|
|
|
- **Сценарии**: пан/зум графа, drag узлов, создание/удаление связей, работа со списком сцен, редактирование свойств сцены.
|
|
- **Сбор данных**: DevTools Performance (CPU/Rendering), наблюдение нагрузки (GPU/Video Decode), фиксация “где именно тормозит”.
|
|
|
|
**Результат**: подтверждены основные “горячие места” (граф/рендер/медиа/IPC).
|
|
|
|
---
|
|
|
|
### Этап 1 — Быстрый выигрыш без изменения формата проекта (минимально и безопасно)
|
|
|
|
#### 1.1 Lazy/async для изображений в карточках
|
|
|
|
- Для `<img>` в карточках графа и списка сцен применить:
|
|
- `loading="lazy"`
|
|
- `decoding="async"`
|
|
- Убедиться, что контейнеры превью не провоцируют лишние перерасчёты размеров/перерисовки.
|
|
|
|
#### 1.2 Снижение перерисовок графа (минимально и безопасно)
|
|
|
|
- **Стабилизировать входные данные** графа:
|
|
- вместо передачи “всего `project.scenes`” подготовить “лёгкое” представление сцен, содержащее только поля, нужные для карточек (title, preview refs, флаги).
|
|
- Цель: изменения в инспекторе (описание/аудио/и т.п.) не должны заставлять ReactFlow пересобирать все `nodes/edges`.
|
|
|
|
#### 1.3 Ограничить частоту тяжёлых обновлений при действиях в графе
|
|
|
|
- Проверить, чтобы обновления позиций/связей не вызывали лишних “полных” пересборок и не инициировали дорогие операции чаще, чем нужно.
|
|
|
|
**Критерий готовности**: на проекте с 22 сценами взаимодействие с графом заметно плавнее, задержка при создании связей снижается.
|
|
|
|
---
|
|
|
|
### Этап 2 — Самое эффективное: thumbnails вместо оригиналов
|
|
|
|
#### 2.1 Модель данных для миниатюр
|
|
|
|
- Для превью/медиа хранить:
|
|
- **original asset** (как сейчас) — для просмотра/презентации
|
|
- **thumbnail asset** — для графа и списков
|
|
- Миниатюра — отдельный asset в `project.assets`, связанный с оригиналом (через поле в сцене или метаданные asset).
|
|
|
|
#### 2.2 Генерация thumbnail при импорте изображений
|
|
|
|
- При импорте превью/изображений:
|
|
- ресайз до ~**320px по длинной стороне**
|
|
- кодек: **WebP** (или JPEG)
|
|
- Сохранять thumbnail как отдельный файл/asset.
|
|
|
|
#### 2.3 Генерация thumbnail для видео по первому кадру
|
|
|
|
- При импорте видео:
|
|
- извлечь кадр (0.5–1s если на 0s чёрный)
|
|
- сохранить как **image/webp/jpeg** thumbnail
|
|
- В UI использовать thumbnail как постер для карточек.
|
|
|
|
#### 2.4 Использование thumbnails в UI
|
|
|
|
- **Граф сцен**: показывает только thumbnail.
|
|
- **Список сцен**: показывает только thumbnail.
|
|
- **Инспектор**: по желанию — только thumbnail.
|
|
- **Презентация/просмотр**: оригинал.
|
|
|
|
#### 2.5 Обратная совместимость
|
|
|
|
- Старые проекты без thumbnails:
|
|
- “ленивая” догенерация в фоне при первом отображении,
|
|
- или отдельная команда “Оптимизировать проект (создать миниатюры)”.
|
|
|
|
**Критерий готовности**: тяжёлые исходники почти не влияют на редактор; масштабируемость по сценам растёт.
|
|
|
|
---
|
|
|
|
### Этап 3 — Дополнительные ускорения (по ситуации)
|
|
|
|
- **3.1 Виртуализация списка сцен** (если список остаётся тяжёлым при 50+ сценах).
|
|
- **3.2 Дифф‑обновление `nodes/edges`** в ReactFlow вместо “пересборки целиком” (для 100+ сцен).
|
|
- **3.3 LOD‑поведение**: при сильном зуме карточки упрощаются (только заголовок/иконки), thumbnails отключаются.
|
|
|
|
---
|
|
|
|
### Приоритизация
|
|
|
|
- **Сразу**: Этап 1.
|
|
- **Максимальный эффект**: Этап 2.
|
|
- **Для больших проектов**: Этап 3.
|
|
|