Vue SDK
@open-pencil/vue позволяет использовать 4B Pen не только как самостоятельный графический редактор.
4B Pen можно встроить в другой продукт, внутренний инструмент или специализированный редактор, а не ограничиваться готовым интерфейсом приложения.
Само приложение 4B Pen — лишь один из вариантов интерфейса, построенного с помощью этого набора инструментов. SDK позволяет создать собственный вариант.
В SDK входят:
- контекст редактора, передаваемый через механизм внедрения зависимостей Vue;
- отрисовка холста с помощью CanvasKit;
- composables для выделения, команд, меню, панелей свойств и переменных;
- структурные компоненты без встроенного оформления, в том числе
PageListRoot,PropertyListRootиToolbarRoot; - средства локализации меню, панелей и диалогов, а также компоненты для выбора языка.
С чего начать
Для чего нужен SDK
Разным продуктам и командам нужны разные интерфейсы редактирования.
Одним нужен полноценный графический редактор, другим — компактный холст внутри приложения. SDK также подходит для внутренних инструментов, редакторов шаблонов и узкоспециализированных интерфейсов с поддержкой ИИ.
Принципы устройства SDK
- Без навязанного оформления: SDK предоставляет логику и структуру, но не определяет внешний вид приложения.
- Composable вместо лишней обёртки: если компоненту нечем управлять в структуре интерфейса, достаточно composable.
- Продуманный публичный API: стабильные возможности экспортируются из
packages/vue/src/index.ts. - Полноценная интеграция с Vue: SDK связывает Vue с возможностями
@open-pencil/core.
Два уровня API
SDK состоит из двух основных уровней:
- Composables предоставляют состояние редактора и действия над ним.
- Компоненты задают значимую структуру интерфейса.
Если нужны только состояние и действия редактора, начните с composables. Если вы создаёте переиспользуемые части интерфейса, начните с компонентов.