d91e6a36d9
- Wrap all enum values in backticks (FRAME, SOLID, ROUND, etc.) - Fix single-backtick code blocks → triple backticks in node-types, scene-graph - Replace ASCII diagrams with mermaid in file-format - Delete stale mcp-tools.md and eval-command.md from all locales - Update dead links: /reference/mcp-tools → /programmable/mcp-server, /eval-command → /programmable/cli/scripting
162 lines
16 KiB
Markdown
162 lines
16 KiB
Markdown
# Дорожная карта
|
||
|
||
## Фазы
|
||
|
||
### Фаза 1: Ядро движка ✅
|
||
|
||
`SceneGraph`, отрисовка Skia, базовые фигуры, выделение, масштабирование/панорамирование, отмена/повтор.
|
||
|
||
**Реализовано:**
|
||
- Граф сцены с хранением в плоском Map и древовидной структурой родитель-потомок
|
||
- Отрисовка CanvasKit WASM для всех типов фигур
|
||
- Выделение кликом/shift/рамкой с ручками масштабирования и вращением
|
||
- Масштабирование/панорамирование с сочетаниями клавиш и жестами трекпада
|
||
- Отмена/повтор для всех операций
|
||
- Направляющие привязки к краям и центрам
|
||
|
||
### Фаза 2: Интерфейс редактора + компоновка ✅
|
||
|
||
Панель свойств, панель слоёв, панель инструментов, интеграция Yoga для компоновки, редактирование текста.
|
||
|
||
**Реализовано:**
|
||
- Панели Vue 3 + Reka UI (свойства, слои, панель инструментов)
|
||
- Панель свойств, разделённая на секции (Внешний вид, Заливка, Обводка, Типографика, Компоновка, Позиция)
|
||
- Компонент ScrubInput для всех числовых полей ввода
|
||
- Палитра цветов (HSV, hex, непрозрачность)
|
||
- Панель слоёв с древовидным видом, перетаскиванием для изменения порядка, переключателем видимости
|
||
- Auto-layout с Yoga WASM (направление, gap, padding, justify, align)
|
||
- Встроенное редактирование текста через CanvasKit Paragraph API
|
||
- Загрузка системных шрифтов через Local Font Access API
|
||
- Линейки на холсте с подсветкой выделения
|
||
|
||
### Фаза 3: Файловый ввод/вывод + визуальные возможности ✅
|
||
|
||
Импорт/экспорт .fig, кодек Kiwi, буфер обмена, секции, страницы, продвинутая отрисовка.
|
||
|
||
**Реализовано:**
|
||
- Импорт .fig файлов через бинарный кодек Kiwi
|
||
- Экспорт .fig файлов с Kiwi-кодированием, Zstd-сжатием, генерацией миниатюры
|
||
- Сохранение (<kbd>⌘</kbd><kbd>S</kbd>) и Сохранить как (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd>) с нативными диалогами ОС
|
||
- Zstd-сжатие через Tauri Rust-команду (fallback на deflate в браузере)
|
||
- Вендорённый kiwi-schema с патчами для ESM + разреженных ID полей
|
||
- Figma-совместимый буфер обмена (двусторонний бинарный Kiwi)
|
||
- Инструмент «Перо» с моделью векторных сетей
|
||
- Бинарное кодирование/декодирование vectorNetworkBlob
|
||
- Группировка/разгруппировка (<kbd>⌘</kbd><kbd>G</kbd>/<kbd>⇧</kbd><kbd>⌘</kbd><kbd>G</kbd>)
|
||
- Десктопное приложение Tauri v2 с нативной строкой меню (macOS/Windows/Linux)
|
||
- Секции (клавиша S) с плашками заголовков, авто-захватом, адаптивным цветом текста
|
||
- Многостраничные документы с панелью страниц, отдельной областью просмотра для каждой страницы
|
||
- Подсветка при наведении с контурами, повторяющими форму объекта
|
||
- Отрисовка 1-го уровня: градиенты, заливки изображениями, эффекты, обводки (cap/join/dash), дуги
|
||
- Выбор типа заливки с вкладками solid/gradient/image и редактированием точек градиента
|
||
- Цвет фона холста для каждой страницы
|
||
- Юнит-тесты fig-import, юнит-тесты компоновки, E2E-тесты панели слоёв
|
||
|
||
### Фаза 4: Компоненты + переменные ✅
|
||
|
||
Компоненты, экземпляры, переопределения, переменные, коллекции, режимы, экспорт изображений.
|
||
|
||
**Реализовано:**
|
||
- Создание компонентов из фрейма/группы или мульти-выделения (<kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd>)
|
||
- Наборы компонентов из нескольких компонентов (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd>) с пунктирной фиолетовой рамкой
|
||
- Создание экземпляров из компонентов с клонированием потомков и маппингом componentId
|
||
- Синхронизация компонент-экземпляр в реальном времени с сохранением переопределений
|
||
- Открепление экземпляра обратно во фрейм (<kbd>⌥</kbd><kbd>⌘</kbd><kbd>B</kbd>)
|
||
- Переход к основному компоненту (навигация между страницами)
|
||
- Постоянно видимые фиолетовые метки компонентов/экземпляров с иконкой ромба
|
||
- Проверка попадания в непрозрачный контейнер (клик выделяет компонент, двойной клик — входит внутрь)
|
||
- Контекстное меню по правому клику с действиями: буфер обмена, z-порядок, группировка, компонент, видимость, блокировка, перемещение на другую страницу
|
||
- Управление z-порядком (] на передний план, [ на задний план)
|
||
- Переключение видимости (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>H</kbd>) и блокировки (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>L</kbd>)
|
||
- Перемещение узлов между страницами через контекстное меню
|
||
- Culling области просмотра, повторное использование Paint, объединение RAF-отрисовок
|
||
- UI панели эффектов (тень, внутренняя тень, размытие слоя/фона/переднего плана)
|
||
- Независимые радиусы углов (переключатель для каждого угла в секции «Внешний вид»)
|
||
- CI/CD через GitHub Actions для сборок Windows (x64, arm64) и macOS (x64, arm64)
|
||
- Инструменты рисования многоугольников и звёзд с pointCount и starInnerRadius
|
||
- Изменяемые размеры левой/правой панелей через reka-ui Splitter (сохраняемый макет)
|
||
- Алиас импорта @/, модуль общих типов (src/types.ts, src/global.d.ts)
|
||
- Чистый код: 0 предупреждений oxlint, 0 ошибок типов tsgo
|
||
- Переменные: тип `COLOR` с коллекциями, режимами, привязками, выбор переменных в FillSection, импорт из .fig
|
||
- Диалог переменных: TanStack Table с изменяемой шириной столбцов, столбцы режимов, вкладки коллекций с переименованием, поиск, демо-коллекции (Primitives/Semantic/Spacing), отмена/повтор для всех операций с переменными
|
||
- Экспорт изображений: PNG/JPG/WEBP с ExportSection (масштаб, формат, предпросмотр), сочетание <kbd>⇧</kbd><kbd>⌘</kbd><kbd>E</kbd>, контекстное меню
|
||
- Нативное редактирование текста на холсте: класс TextEditor в core, phantom textarea, курсор/выделение/границы слов на холсте, мерцание каретки, подсветка выделения
|
||
- Перечисление системных шрифтов через Rust-крейт font-kit, кеш OnceLock, предзагрузка при старте
|
||
- Выбор шрифтов: виртуальный скролл (reka-ui ListboxVirtualizer), поисковый фильтр, CSS-предпросмотр шрифта
|
||
- Извлечение компонента ColorInput, исправление шахматного фона ползунка прозрачности ColorPicker
|
||
- Идентичность приложения: иконка-карандаш, Cargo crate open_pencil, macOS Dock «OpenPencil»
|
||
- Заставка во время инициализации WASM
|
||
- Стилевые серии в тексте: <kbd>⌘</kbd><kbd>B</kbd>/I/U для выделения, модель StyleRun, ParagraphBuilder pushStyle/pop, roundtrip .fig
|
||
- Кнопки B/I/U/S в секции типографики
|
||
- Выделение текста двойным кликом (слово), тройным кликом (всё)
|
||
|
||
**Оставшееся (перенесено в Фазу 6):**
|
||
- Переключение вариантов
|
||
- UI для типов переменных: `FLOAT`, `STRING`, `BOOLEAN`
|
||
- Тематизация на основе переменных
|
||
|
||
### Фаза 5: AI-интеграция и инструментарий ✅
|
||
|
||
Извлечение core, CLI, MCP-сервер, AI-инструменты, команда eval.
|
||
|
||
**Реализовано:**
|
||
- @open-pencil/core извлечён в packages/core/ (без DOM-зависимостей, Bun workspace)
|
||
- @open-pencil/cli с headless-операциями над .fig (info, tree, find, export, analyze, node, pages, variables, eval), CPU-растеризация CanvasKit, вывод --json
|
||
- Команда `eval` с Figma-совместимым Plugin API для headless-скриптинга
|
||
- JSX-рендерер: билдеры TreeNode (Frame, Text, Rectangle и др.), renderTreeNode/renderJsx, Tailwind-подобные shorthand-пропсы, 27 тестов
|
||
- Обнаружение копипасты jscpd (15.6% → 0.62%), консолидация kiwi-serialize.ts
|
||
- Тесты roundtrip .fig с LFS-фикстурами (material3.fig 87K узлов, nuxtui.fig 314K узлов)
|
||
- Исправление O(n²) → O(n) в импорте .fig (37с → 535мс на 87K узлов), оптимизация ByteBuffer
|
||
- AI-чат: OpenRouter напрямую (без бэкенда), хранение ключей в Stronghold, 87 инструментов, разделённых по доменным файлам в `tools/`, селектор моделей, <kbd>⌘</kbd><kbd>J</kbd>, потоковый markdown, тесты Playwright с mock-транспортом
|
||
- 49 дополнительных AI/MCP инструментов, портированных из figma-use (87 всего): гранулярные set-инструменты, операции с узлами, CRUD переменных, булевы операции, инструменты векторных путей, управление областью просмотра
|
||
- MCP-сервер (@open-pencil/mcp): stdio + HTTP (Hono + Streamable HTTP с сессиями), 87 core-инструментов + 3 инструмента управления файлами (90 всего), работает на Bun и Node.js
|
||
- Унифицированные определения инструментов: определяются один раз в `packages/core/src/tools/` (по доменам), адаптируются для AI-чата (valibot), MCP (zod), CLI (eval)
|
||
- Панель кода: экспорт sceneNodeToJsx(), подсветка Prism.js, нумерация строк, кнопка копирования, 14 тестов
|
||
- Панель свойств реструктурирована: вкладки Design | Code | AI
|
||
- Строка меню приложения для браузерного режима (File, Edit, View, Object, Text, Arrange)
|
||
- Автосохранение: дебаунс 3с записи после последнего изменения сцены
|
||
- Панель свойств мульти-выделения с обработкой общих/смешанных значений
|
||
- Публикация в npm с provenance для core, cli и mcp
|
||
|
||
**Планируется:**
|
||
- Attached-режим: WebSocket к запущенному редактору для eval, create, export, screenshot
|
||
- Система дизайн-гайдлайнов
|
||
- Цикл верификации скриншотов
|
||
|
||
### Фаза 6: Коллаборация + распространение 🟡
|
||
|
||
Совместная работа в реальном времени, прототипирование, комментарии, распространение десктопного приложения.
|
||
|
||
**Реализовано:**
|
||
- P2P-коллаборация через Trystero (WebRTC) + Yjs CRDT — без серверного реле
|
||
- Протокол Awareness: живые курсоры, выделения, присутствие с цветными стрелками курсоров
|
||
- Режим следования: клик по аватару участника для отслеживания его области просмотра
|
||
- Локальное хранение через y-indexeddb
|
||
- Ссылка для совместного доступа по адресу `/share/<room-id>` с безопасными ID комнат
|
||
- Отрисовка эффектов: тень, внутренняя тень, разброс тени, размытие слоя, размытие фона, размытие переднего плана
|
||
- Кеш SkPicture для каждого узла для эффектов (нулевой пересчёт для статических эффектов)
|
||
- Мульти-файловые вкладки: <kbd>⌘</kbd><kbd>N</kbd>/<kbd>⌘</kbd><kbd>T</kbd> новая вкладка, <kbd>⌘</kbd><kbd>W</kbd> закрыть, <kbd>⌘</kbd><kbd>O</kbd> открыть в новой вкладке
|
||
- Подписание кода Apple и нотаризация для сборок macOS
|
||
- Сборки Linux (x64) добавлены в CI
|
||
- Git LFS перемещён на Cloudflare R2
|
||
- Сайт документации VitePress на openpencil.dev с i18n (6 языков)
|
||
- CI/PR-шаблоны, CONTRIBUTING.md, SECURITY.md
|
||
|
||
**Планируется:**
|
||
- Прототипирование (связи фреймов, переходы, анимации)
|
||
- Комментарии (закрепление, треды, разрешение)
|
||
- Поддержка PWA
|
||
- Переключение вариантов, UI для `FLOAT`/STRING/BOOLEAN переменных, тематизация на основе переменных
|
||
- Полный набор тестов совместимости с Figma
|
||
|
||
## Сроки
|
||
|
||
| Фаза | Оценочная длительность | Статус |
|
||
|------|------------------------|--------|
|
||
| Фаза 1: Ядро движка | 3 месяца | ✅ Завершена |
|
||
| Фаза 2: Интерфейс редактора + компоновка | 3 месяца | ✅ Завершена |
|
||
| Фаза 3: Файловый ввод/вывод + визуальные возможности | 2 месяца | ✅ Завершена |
|
||
| Фаза 4: Компоненты + переменные | 2 месяца | ✅ Завершена |
|
||
| Фаза 5: AI-интеграция и инструментарий | 2 месяца | ✅ Завершена |
|
||
| Фаза 6: Коллаборация + распространение | 2 месяца | 🟡 В процессе |
|