SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
openpencil/packages/docs/es/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

2.7 KiB
Raw Blame History

title description
Arquitectura del SDK Estructura de carpetas, límites de API pública y patrones de composición en @open-pencil/vue.

Arquitectura del SDK

@open-pencil/vue es la capa orientada a Vue sobre @open-pencil/core.

No posee el modelo del editor en sí. Adapta el editor central en:

  • inyección de Vue
  • composables reactivos
  • primitivos estructurales headless
  • cableado de canvas e inputs

Estructura de carpetas

Este paquete está organizado por dominio.

Familias de componentes

  • Canvas/
  • ColorPicker/
  • FillPicker/
  • FontPicker/
  • GradientEditor/
  • LayerTree/
  • PageList/
  • PropertyList/
  • ScrubInput/
  • Toolbar/

Contienen primitivos estructurales/headless y helpers locales.

Controles

controls/ contiene composables de controles de paneles de propiedades y del editor:

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

Variables

VariablesEditor/ contiene composables del dominio de variables y el cableado de estado.

Selección

selection/ contiene el estado del editor derivado de la selección y sus capacidades.

Contexto

context/ contiene helpers de inyección del editor:

  • EDITOR_KEY
  • provideEditor
  • useEditor

Interno

internal/ contiene utilidades transversales que no están pensadas como primitivos headless principales.

Filosofía de la API pública

Preferir composables

Si el problema es principalmente lógica de control, derivación de estado o acciones del editor, expón un composable.

Reservar los primitivos headless para estructura significativa

Usa raíces de componentes cuando coordinan estructura, hijos, slots o contexto.

Ejemplos:

  • PageListRoot
  • PropertyListRoot
  • ToolbarRoot

Evitar slots que vuelquen contexto de forma masiva

Prefiere props de slot enfocados o uso directo de composables en lugar de grandes payloads v-slot="ctx".

Responsabilidad de la app vs el SDK

El SDK es responsable de

  • integración con el editor
  • lógica headless reutilizable
  • estructura de UI reutilizable sin suposiciones de estilo
  • integración del renderizado del canvas

La app es responsable de

  • estilos
  • shells de layout
  • enrutamiento
  • flujos de archivos del producto
  • toasts, menús y UX específica de la app

Regla práctica

Si una pieza de lógica podría reutilizarse en una app diferente basada en OpenPencil sin llevar consigo los estilos de la app, probablemente pertenece a @open-pencil/vue.

Páginas relacionadas