4B Pen

Appearance

Архитектура SDK ​

@open-pencil/vue связывает @open-pencil/core с Vue.

Модель редактора по-прежнему находится в основном пакете. Этот пакет добавляет:

  • внедрение зависимостей средствами Vue;
  • реактивные composables;
  • структурные компоненты без встроенного оформления;
  • подключение холста и обработку ввода.

Структура пакета ​

Код сгруппирован по предметным областям.

Семейства компонентов ​

  • Canvas/
  • ColorPicker/
  • FillPicker/
  • FontPicker/
  • GradientEditor/
  • LayerTree/
  • PageList/
  • PropertyList/
  • PropertySection/
  • SegmentedControl/
  • NumberField/
  • Toolbar/

В этих каталогах находятся структурные компоненты без встроенного оформления и вспомогательные функции соответствующей области.

Элементы управления ​

В controls/ находятся composables для панели свойств и элементов управления редактором:

  • usePosition
  • useLayout
  • useAppearance
  • useColorModel
  • useTypography
  • useExport
  • useFillControls
  • useStrokeControls
  • useEffectsControls
  • useNodeProps
  • usePropScrub
  • useEditorPropertyList

Переменные ​

В VariablesEditor/ находятся composables и код, связывающий состояние редактора переменных с Vue.

Выделение ​

В selection/ находятся вычисляемое состояние выделения и сведения о доступных для него действиях.

Контекст ​

В context/ находятся функции и ключ для передачи редактора через механизм внедрения зависимостей Vue:

  • EDITOR_KEY
  • provideEditor
  • useEditor

Служебный код ​

В internal/ находятся общие служебные функции. Они не входят в число основных компонентов пакета.

Принципы публичного API ​

Используйте composables для логики и состояния ​

Если код в основном вычисляет состояние, управляет им или вызывает действия редактора, предоставьте его в виде composable.

Создавайте компоненты без оформления только там, где важна структура ​

Корневой компонент нужен, если он управляет структурой, дочерними элементами, слотами или контекстом.

Примеры:

  • PageListRoot
  • PropertyListRoot
  • PropertySectionRoot
  • SegmentedControlRoot
  • ToolbarRoot

Не передавайте весь контекст через один слот ​

Передавайте через слот только необходимые свойства или используйте composable напрямую. Управляемые компоненты, например PropertyListRoot, сообщают о действиях семантическими событиями. Связь с выделением и историей отмены должна находиться в адаптере или управляющем composable, а не внутри такого компонента.

За что отвечают приложение и SDK ​

SDK ​

  • интеграция с редактором;
  • переиспользуемая логика без привязки к оформлению;
  • переиспользуемая структура интерфейса, не зависящая от оформления;
  • интеграция с отрисовкой холста.

Приложение ​

  • оформление;
  • общая компоновка страниц;
  • маршрутизация;
  • открытие, сохранение и другие операции с файлами;
  • уведомления, меню и поведение, характерное только для конкретного приложения.

Простое правило ​

Если код можно без оформления приложения использовать в другом редакторе на базе 4B Pen, скорее всего, ему место в @open-pencil/vue.

См. также ​

Released under the MIT License.