116 lines
4 KiB
Markdown
116 lines
4 KiB
Markdown
|
---
|
|||
|
|
title: Архитектура SDK
|
|||
|
|
description: Структура папок, границы публичного API и паттерны компоновки в @open-pencil/vue.
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Архитектура SDK
|
|||
|
|
|
|||
|
|
`@open-pencil/vue` — Vue-слой поверх `@open-pencil/core`.
|
|||
|
|
|
|||
|
|
Пакет не владеет самой моделью редактора. Он адаптирует движок к Vue через:
|
|||
|
|
|
|||
|
|
- Vue-инъекцию
|
|||
|
|
- реактивные компосаблы
|
|||
|
|
- headless-структурные примитивы
|
|||
|
|
- подключение холста и обработку ввода
|
|||
|
|
|
|||
|
|
## Структура папок
|
|||
|
|
|
|||
|
|
Пакет организован по доменам.
|
|||
|
|
|
|||
|
|
### Семейства компонентов
|
|||
|
|
|
|||
|
|
- `Canvas/`
|
|||
|
|
- `ColorPicker/`
|
|||
|
|
- `FillPicker/`
|
|||
|
|
- `FontPicker/`
|
|||
|
|
- `GradientEditor/`
|
|||
|
|
- `LayerTree/`
|
|||
|
|
- `PageList/`
|
|||
|
|
- `PropertyList/`
|
|||
|
|
- `ScrubInput/`
|
|||
|
|
- `Toolbar/`
|
|||
|
|
|
|||
|
|
Содержат структурные/headless-примитивы и локальные вспомогательные функции.
|
|||
|
|
|
|||
|
|
### Controls
|
|||
|
|
|
|||
|
|
`controls/` содержит компосаблы для панелей свойств и элементов управления редактора:
|
|||
|
|
|
|||
|
|
- `usePosition`
|
|||
|
|
- `useLayout`
|
|||
|
|
- `useAppearance`
|
|||
|
|
- `useTypography`
|
|||
|
|
- `useExport`
|
|||
|
|
- `useFillControls`
|
|||
|
|
- `useStrokeControls`
|
|||
|
|
- `useEffectsControls`
|
|||
|
|
- `useNodeProps`
|
|||
|
|
- `usePropScrub`
|
|||
|
|
|
|||
|
|
### Variables
|
|||
|
|
|
|||
|
|
`VariablesEditor/` содержит компосаблы и подключение состояния для домена переменных.
|
|||
|
|
|
|||
|
|
### Selection
|
|||
|
|
|
|||
|
|
`selection/` содержит производное состояние редактора и возможности, основанные на выделении.
|
|||
|
|
|
|||
|
|
### Context
|
|||
|
|
|
|||
|
|
`context/` содержит хелперы для инъекции редактора:
|
|||
|
|
|
|||
|
|
- `EDITOR_KEY`
|
|||
|
|
- `provideEditor`
|
|||
|
|
- `useEditor`
|
|||
|
|
|
|||
|
|
### Internal
|
|||
|
|
|
|||
|
|
`internal/` содержит сквозные утилиты, не предназначенные как основные headless-примитивы.
|
|||
|
|
|
|||
|
|
## Философия публичного API
|
|||
|
|
|
|||
|
|
### Предпочитайте компосаблы
|
|||
|
|
|
|||
|
|
Если задача — это преимущественно управляющая логика, вывод состояния или действия редактора, оформите её как компосабл.
|
|||
|
|
|
|||
|
|
### Headless-примитивы — только для значимой структуры
|
|||
|
|
|
|||
|
|
Используйте корневые компоненты, когда они координируют структуру, дочерние элементы, слоты или контекст.
|
|||
|
|
|
|||
|
|
Примеры:
|
|||
|
|
|
|||
|
|
- `PageListRoot`
|
|||
|
|
- `PropertyListRoot`
|
|||
|
|
- `ToolbarRoot`
|
|||
|
|
|
|||
|
|
### Избегайте широких слотов с дампом контекста
|
|||
|
|
|
|||
|
|
Предпочитайте целенаправленные пропы слотов или прямое использование компосаблов — вместо гигантских нагрузок `v-slot="ctx"`.
|
|||
|
|
|
|||
|
|
## Ответственность: приложение vs SDK
|
|||
|
|
|
|||
|
|
### SDK отвечает за
|
|||
|
|
|
|||
|
|
- интеграцию с редактором
|
|||
|
|
- переиспользуемую headless-логику
|
|||
|
|
- переиспользуемую структуру UI без предположений о стилях
|
|||
|
|
- интеграцию рендеринга холста
|
|||
|
|
|
|||
|
|
### Приложение отвечает за
|
|||
|
|
|
|||
|
|
- стили
|
|||
|
|
- оболочки макетов
|
|||
|
|
- маршрутизацию
|
|||
|
|
- файловые потоки продукта
|
|||
|
|
- тосты, меню и UX, специфичный для приложения
|
|||
|
|
|
|||
|
|
## Практическое правило
|
|||
|
|
|
|||
|
|
Если кусок логики можно переиспользовать в другом приложении на базе OpenPencil без привнесения стилей — скорее всего, ему место в `@open-pencil/vue`.
|
|||
|
|
|
|||
|
|
## Связанные страницы
|
|||
|
|
|
|||
|
|
- [Начало работы с SDK](./getting-started)
|
|||
|
|
- [Справочник API](./api/)
|