Архитектура 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
• Справочник API