4B Pen

Appearance

Arquitectura del SDK ​

@open-pencil/vue conecta @open-pencil/core con Vue.

El modelo del editor sigue perteneciendo al núcleo. Este paquete añade:

  • dependency injection mediante Vue;
  • composables reactivos;
  • componentes estructurales sin estilos;
  • conexión del lienzo y gestión de la entrada del usuario.

Estructura del paquete ​

El código se organiza por áreas funcionales.

Familias de componentes ​

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

Estos directorios contienen componentes estructurales sin estilos y funciones auxiliares específicas de cada área.

Controls ​

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

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

Variables ​

VariablesEditor/ contiene composables y el código que conecta el estado del editor de variables con Vue.

Selección ​

selection/ contiene el estado calculado a partir de la selección y la información sobre las operaciones disponibles.

Context ​

context/ contiene la clave y las funciones que proporcionan el editor mediante dependency injection de Vue:

  • EDITOR_KEY
  • provideEditor
  • useEditor

Internal ​

internal/ contiene funciones auxiliares compartidas. No forman parte de los componentes públicos principales del paquete.

Principios de la API pública ​

Composables para la lógica y el estado ​

Si el código sirve principalmente para calcular o administrar el estado, o para ejecutar operaciones del editor, proporciónalo como composable.

Componentes sin estilos solo cuando la estructura sea relevante ​

Un componente raíz resulta útil cuando coordina la estructura, los elementos descendientes, los slots o el contexto.

Ejemplos:

  • PageListRoot
  • PropertyListRoot
  • PropertySectionRoot
  • SegmentedControlRoot
  • ToolbarRoot

No pases todo el contexto por una única ranura ​

Pasa a la ranura únicamente las propiedades necesarias o utiliza el composable directamente. Los componentes controlados, como PropertyListRoot, emiten eventos semánticos. La conexión con la selección y el historial de deshacer debe estar en un adaptador o composable de control, no en el propio componente.

Responsabilidades de la aplicación y el SDK ​

SDK ​

  • integración con el editor;
  • lógica reutilizable sin estilos;
  • estructura de interfaz reutilizable y sin requisitos de estilo;
  • integración con el renderizado del lienzo.

Aplicación ​

  • estilos;
  • disposición general de las páginas;
  • routing;
  • apertura, guardado y otras operaciones con archivos;
  • notificaciones, menús y comportamiento específico de la aplicación.

Regla general ​

Si un fragmento de código puede utilizarse en otro editor basado en 4B Pen sin arrastrar los estilos de la aplicación, probablemente debe formar parte de @open-pencil/vue.

Véase también ​

Released under the MIT License.