Danila Poyarkov c3412a44fc

* docs: polish localized documentation

- Rewrite Russian documentation for natural terminology and current source parity\n- Continue the Polish editorial pass across guides and SDK references\n- Refresh shared localized SDK API data imports

* docs(pl): complete editorial pass

- Rewrite the remaining advanced Vue SDK references\n- Refresh the Figma compatibility matrix against the canonical source\n- Align terminology and behavior across every Polish documentation page

* docs(de): complete editorial pass

- Rewrite German guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix

* docs(es): complete editorial pass

- Rewrite Spanish guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix

* docs(fr): complete editorial pass

- Rewrite French guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix

* docs: correct localized terminology

- Replace unnecessary English prose with natural localized terminology\n- Derive documentation aliases from named directory roots\n- Preserve English only for identifiers, APIs, and exact product terms

* docs(it): continue editorial pass

- Rewrite Italian user guides and automation documentation\n- Update Vue SDK composables and component references\n- Restore current AI, export, component, and variable behavior

* docs(it): complete editorial pass

- Finish Italian advanced SDK and reference documentation\n- Refresh the Penpot comparison and Figma compatibility matrix\n- Replace literal machine translations with natural technical prose

* docs(pl): refine property panel terminology

* docs: refine remaining localized prose

- Replace overfitted English prose in Polish feature documentation\n- Rewrite the Russian property-list reference in natural terminology

* docs(ru): rewrite Penpot comparison naturally

- Replace remaining English prose with natural Russian\n- Preserve code identifiers and library names only where required

* docs: rewrite localized feature overviews naturally

- Replace avoidable English prose in German, Spanish, and French\n- Keep identifiers and product names unchanged

* docs(de): refine property panel terminology

* docs: refine Spanish and French SDK terminology

* docs(ru): continue full prose audit

- Rewrite homepage, setup, navigation, and guide index naturally\n- Restore missing zoom shortcuts

* docs(ru): audit user and automation guides

- Rewrite selection, collaboration, and automation prose naturally\n- Preserve API identifiers while localizing ordinary terminology

* docs(ru): audit CLI inspection and analysis

* docs(ru): audit Vue SDK overview and guides

* docs(ru): audit Vue SDK API prose

- Localize ordinary component and composable terminology\n- Preserve API symbols and code identifiers

* docs(ru): audit advanced and gradient API references

* docs(ru): finish advanced API prose audit

* docs(ru): audit JSX renderer guide

* docs(ru): audit CLI export and scripting guides

* docs(pl): audit Penpot comparison prose

* docs(pl): audit selection and automation guides

* docs(pl): audit homepage and variable guides

* docs(pl): audit vector, layers, and Pen guides

* docs(pl): audit Auto layout and shape guides

* docs(pl): audit context menu and export guides

* docs(pl): audit JSX and analysis guides

* docs(pl): audit AI Chat guide

* docs(pl): audit components and CLI inspection

* docs(pl): audit scripting and SDK overview prose

* docs(pl): audit SDK API indexes

* docs(pl): audit SDK component references

* docs(pl): audit SDK composable references

* docs(ru): refine usePosition terminology

* docs(pl): audit advanced SDK references

* docs(pl): audit Figma compatibility matrix

* docs(pl): finish residual SDK terminology audit

* docs(pl): finish component terminology audit

* docs(pl): finish SDK guide terminology audit

* docs(de): begin full user guide prose audit

* docs(de): audit navigation, Pen, and layers guides

* docs(de): audit Auto Layout, shapes, menu, and export

* docs(de): audit components, text, and vector guides

* docs(de): audit variables and automation overview

* docs(de): audit AI Chat and collaboration guides

* docs(de): audit CLI inspection, analysis, and export

* docs(de): audit scripting and JSX guides

* docs(de): audit Vue SDK overview and guides

* docs(de): audit SDK API indexes

* docs(de): audit SDK component references

* docs(de): audit SDK composable references

* docs(de): audit advanced SDK references

* docs(de): audit Penpot comparison prose

* docs(de): audit Figma compatibility reference

* docs(es): begin full user guide prose audit

* docs(es): audit document organization guides

* docs(es): audit editing workflow guides

* docs(es): audit automation and collaboration prose

* docs(es): audit CLI inspection and export guides

* docs(es): audit CLI scripting guide

* docs(es): audit JSX and feature overview prose

* docs(es): audit Penpot comparison prose

* docs(es): audit SDK overview and guides

* docs(es): begin SDK component reference audit

* docs(es): audit SDK navigation component references

* docs(es): audit SDK color and layout components

* docs(es): begin SDK composable reference audit

* docs(es): audit SDK property composable references

* docs(es): audit SDK editor composable references

* docs(es): begin advanced SDK reference audit

* docs(es): audit advanced SDK state references

* docs(es): complete advanced SDK reference audit

* docs(es): audit Figma compatibility reference

* docs(es): complete residual terminology sweep

* docs(fr): begin full prose second audit

* docs(fr): audit AI and variables prose

* docs(fr): audit core user guide prose

* docs(fr): audit editing workflow guides

* docs(fr): audit CLI and JSX prose

* docs(fr): audit Penpot comparison prose

* docs(fr): audit SDK overview and guides

* docs(fr): begin SDK API reference audit

* docs(fr): audit SDK navigation component references

* docs(fr): audit SDK color and layout components

* docs(fr): begin SDK composable reference audit

* docs(fr): audit SDK property composable references

* docs(fr): audit editor composables and advanced APIs

* docs(fr): audit advanced SDK state references

* docs(fr): complete advanced SDK reference audit

* docs(fr): audit Figma compatibility reference

* docs(fr): complete residual terminology sweep

* docs(it): begin full prose second audit

* docs(it): audit document workflow guides

* docs(it): audit editing and automation prose

* docs(it): audit CLI and JSX prose

* docs(it): audit Penpot comparison and SDK guides

* docs(it): begin SDK API reference audit

* docs(it): audit SDK component and state references

* docs(it): audit residual SDK references

* docs(it): audit Figma compatibility reference

* docs(it): complete residual terminology sweep

* docs(i18n): verify residual locale terminology

2026-08-20 18:36:50 +03:00

5 KiB

Raw Blame History

title	description
Архитектура SDK	Структура пакета, границы публичного API и принципы построения @open-pencil/vue.

Архитектура 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

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

Приложение

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

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

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

5 KiB Raw Blame History Unescape Escape