114 lines
9.6 KiB
Markdown
114 lines
9.6 KiB
Markdown
# Архитектура
|
||
|
||
## Обзор системы
|
||
|
||
`mermaid
|
||
graph TB
|
||
subgraph Tauri["Tauri v2 Shell"]
|
||
subgraph Editor["Editor (Web)"]
|
||
UI["Vue 3 UI<br/>Toolbar · Panels · Properties<br/>Layers · Color Picker"]
|
||
Skia["Skia CanvasKit (WASM, 7MB)<br/>Vector rendering · Text shaping<br/>Effects · Export"]
|
||
subgraph Core["Core Engine (TS)"]
|
||
SG[SceneGraph] --- Layout[Layout - Yoga]
|
||
SG --- Selection
|
||
Undo[Undo/Redo] --- Constraints
|
||
Constraints --- HitTest[Hit Testing]
|
||
end
|
||
subgraph FileFormat["File Format Layer"]
|
||
FigIO[".fig import/export"] --- Kiwi[Kiwi codec]
|
||
Kiwi --- SVG[SVG export]
|
||
end
|
||
end
|
||
MCP["MCP Server (90 tools, stdio+HTTP)"]
|
||
Collab["P2P Collab (Trystero + Yjs)"]
|
||
end
|
||
`
|
||
|
||
## Макет редактора
|
||
|
||
Интерфейс следует макету Figma UI3 — панель инструментов внизу, навигация слева, свойства справа:
|
||
|
||
- **Панель навигации (слева)** — Дерево слоёв, панель страниц
|
||
- **Канвас (центр)** — Бесконечный холст с рендерингом CanvasKit, масштабирование/панорамирование
|
||
- **Панель свойств (справа)** — Контекстно-зависимые секции: Внешний вид, Заливка, Обводка, Типографика, Макет, Позиция
|
||
- **Панель инструментов (внизу)** — Выбор инструмента: Выделение, Фрейм, Секция, Прямоугольник, Эллипс, Линия, Текст, Перо, Рука
|
||
|
||
## Компоненты
|
||
|
||
### Рендеринг (CanvasKit WASM)
|
||
|
||
Тот же движок рендеринга, что и у Figma. CanvasKit обеспечивает GPU-ускоренную 2D-отрисовку с векторными фигурами, формирование текста через Paragraph API, эффекты (тени, размытия, режимы наложения) и экспорт (PNG, SVG). WASM-бинарник размером 7 МБ загружается при запуске и создаёт GPU-поверхность на HTML-канвасе.
|
||
|
||
Рендерер разбит на специализированные модули в `packages/core/src/renderer/`: обход сцены, оверлеи, заливки, обводки, фигуры, эффекты, линейки, подписи и удалённые курсоры.
|
||
|
||
### Граф сцены
|
||
|
||
Плоская `Map<string, Node>` с ключами в виде строк GUID. Древовидная структура через ссылки `parentIndex`. Обеспечивает O(1) поиск, эффективный обход, проверку попадания и запросы по прямоугольным областям для выделения рамкой.
|
||
|
||
Граф порождает типизированные события через nanoevents: `node:created`, `node:updated`, `node:deleted`, `node:reparented`, `node:reordered`. Подсистемы подписываются на них вместо ручной привязки — редактор использует их для инвалидации рендера и синхронизации экземпляров компонентов с группировкой через microtask, система совместной работы — для распространения через Yjs.
|
||
|
||
См. [справочник графа сцены](/reference/scene-graph) для подробностей.
|
||
|
||
### Движок макетов (Yoga WASM)
|
||
|
||
Yoga от Meta обеспечивает вычисление макета CSS flexbox и grid через [форк](https://github.com/open-pencil/yoga/tree/grid) с поддержкой CSS Grid. Тонкий адаптер сопоставляет имена свойств Figma с эквивалентами Yoga:
|
||
|
||
| Свойство Figma | Эквивалент Yoga |
|
||
|---|---|
|
||
| `stackMode: HORIZONTAL` | `flexDirection: row` |
|
||
| `stackMode: VERTICAL` | `flexDirection: column` |
|
||
| `stackSpacing` | `gap` |
|
||
| `stackPadding` | `padding` |
|
||
| `stackJustify` | `justifyContent` |
|
||
| `stackChildPrimaryGrow` | `flexGrow` |
|
||
|
||
### Формат файлов (Kiwi Binary)
|
||
|
||
Использует бинарный кодек Kiwi от Figma с 194 определениями message/enum/struct. Импорт: разбор заголовка → декомпрессия Zstd → декодирование Kiwi → `NodeChange`[] → граф сцены. Экспорт выполняет обратный процесс с генерацией миниатюры.
|
||
|
||
См. [справочник формата файлов](/reference/file-format) для подробностей.
|
||
|
||
### ИИ и инструменты
|
||
|
||
Инструменты определяются один раз в `packages/core/src/tools/`, разделённые по доменам: read, create, modify, structure, variables, vector, analyze. У каждого инструмента типизированные параметры и функция `execute(figma, args)`. Адаптеры конвертируют их для:
|
||
|
||
- **ИИ-чат** — схемы valibot, мультипровайдер (Anthropic, OpenAI, Google AI, OpenRouter, совместимые эндпоинты)
|
||
- **MCP-сервер** — схемы zod, транспорты stdio + HTTP
|
||
- **CLI** — доступно через команду `eval`
|
||
|
||
90+ основных инструментов + 3 инструмента управления файлами MCP. Включает XPath-запросы (`query_nodes`), инспекцию JSX (`get_jsx`, `diff_jsx`), семантическое описание (`describe`) и визуальную проверку (`export_image` возвращает изображения модели).
|
||
|
||
### Отмена/Повтор
|
||
|
||
Паттерн обратных команд. Перед применением любого изменения затронутые поля сохраняются в снимок. Снимок становится обратной операцией. Группировка объединяет быстрые изменения (например, перетаскивание) в одну запись отмены.
|
||
|
||
### Буфер обмена
|
||
|
||
Двусторонний буфер обмена, совместимый с Figma. Кодирует/декодирует бинарный формат Kiwi (тот же, что и файлы .fig) через нативные события copy/paste браузера. Обрабатывает масштабирование векторных путей, дочерние элементы экземпляров, определение наборов компонентов и применение переопределений.
|
||
|
||
### P2P-совместная работа
|
||
|
||
Совместная работа в реальном времени через Trystero (WebRTC) + Yjs CRDT. Без серверного реле — сигнализация через публичные MQTT-брокеры, STUN/TURN для обхода NAT. Протокол Awareness обеспечивает живые курсоры, выделения и присутствие. Локальное сохранение через y-indexeddb.
|
||
|
||
### RPC-мост CLI—приложение
|
||
|
||
Когда запущено десктоп-приложение, команды CLI подключаются к нему по WebSocket вместо загрузки файла .fig. Сервер автоматизации работает на `127.0.0.1:7600` (HTTP) и `127.0.0.1:7601` (WebSocket). Команды выполняются относительно состояния живого редактора, позволяя скриптам автоматизации и ИИ-агентам взаимодействовать с запущенным приложением.
|
||
|
||
## Что дальше
|
||
|
||
### Полный набор инструментов figma-use
|
||
|
||
MCP-сервер сейчас предоставляет 90 инструментов. Референсная реализация в [figma-use](https://github.com/dannote/figma-use) содержит 118. Оставшиеся инструменты охватывают продвинутые ограничения макета, прототипные связи, расширенное редактирование свойств компонентов и массовые операции с документами.
|
||
|
||
### CI-инструменты для дизайна
|
||
|
||
Headless CLI уже поддерживает `analyze colors/typography/spacing/clusters`. Далее: интеграция с GitHub Actions для автоматического линтинга дизайна и визуальной регрессии в пулл-реквестах.
|
||
|
||
### Прототипирование
|
||
|
||
Переходы между фреймами, триггеры взаимодействия (клик, наведение, перетаскивание), управление оверлеями и полноэкранный режим предпросмотра.
|
||
|
||
### Подпись кода для Windows
|
||
|
||
Бинарные файлы macOS подписаны и нотаризованы с версии v0.6.0. Подпись Windows Authenticode через Azure Code Signing планируется для устранения предупреждения SmartScreen.
|