Vue SDK
@open-pencil/vue permite utilizar 4B Pen más allá de la aplicación de diseño independiente.
Puedes integrar 4B Pen en otros productos, herramientas internas o editores especializados sin depender de la interfaz predeterminada de la aplicación.
La aplicación 4B Pen es solo una de las interfaces creadas con este conjunto de herramientas. El SDK te permite construir la tuya.
El SDK proporciona:
- el contexto del editor mediante dependency injection de Vue;
- renderizado del lienzo con CanvasKit;
- composables para la selección, los comandos, los menús, los paneles de propiedades y las variables;
- componentes estructurales sin estilos como
PageListRoot,PropertyListRootyToolbarRoot; - localización para menús, paneles y diálogos, además de componentes para seleccionar el idioma.
Por dónde empezar
Para qué sirve el SDK
Cada producto y cada equipo necesita una experiencia de edición diferente.
Puede tratarse de un editor de diseño completo, un lienzo integrado en otra aplicación, una herramienta interna, un editor de plantillas o una interfaz especializada con funciones de IA.
Principios de diseño
- Sin estilos por diseño: el SDK proporciona lógica y estructura, pero no impone el aspecto de la aplicación.
- Composable en lugar de un wrapper innecesario: si no hay que coordinar la estructura de la interfaz, basta con un composable.
- API pública deliberada: las funciones estables se exportan desde
packages/vue/src/index.ts. - Integración estrecha con Vue: el SDK conecta Vue con las funciones de
@open-pencil/core.
Dos niveles de API
El SDK consta de dos niveles principales:
- Los composables proporcionan el estado del editor y las operaciones relacionadas.
- Los componentes definen una estructura de interfaz significativa.
Si solo necesitas el estado y las operaciones del editor, empieza por los composables. Si estás creando partes reutilizables de la interfaz, empieza por los componentes.