5d9730ae04
- Remove ScrubInput aliases, app wrappers, test hooks, and translated legacy references - Share a Tailwind NumberField demo between Storybook and VitePress - Generate component API tables from Vue metadata and type-check examples with Twoslash - Upgrade the docs stack to VitePress 2
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/`
|
||
- `NumberField/`
|
||
- `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/)
|