SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
openpencil/packages/docs/ru/programmable/sdk/architecture.md
Danila Poyarkov 14325280d9 docs(i18n): translate all missing pages to 6 languages 
- 78 SDK pages per language (components, composables, advanced API,
  guides, architecture, getting-started)
- vector-edit.md user guide page (5 languages)
- Update stale ru/programmable/cli/inspecting.md
- Fix YAML frontmatter quoting for colons in descriptions

474 files, 0 missing pages across de/es/fr/it/pl/ru.
VitePress build verified — all 546 SDK pages render.
2026-04-22 18:35:22 +03:00

4 KiB
Raw Blame History

title description
Архитектура SDK Структура папок, границы публичного 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.

Связанные страницы