Architettura dell'SDK
@open-pencil/vue collega @open-pencil/core a Vue.
Il modello dell’editor rimane nel nucleo. Questo pacchetto aggiunge:
- la dependency injection con Vue;
- composable reattivi;
- componenti strutturali senza stile;
- il collegamento dell'area di lavoro e la gestione dell'input.
Struttura del pacchetto
Il codice è organizzato per aree funzionali.
Famiglie di componenti
Canvas/ColorPicker/FillPicker/FontPicker/GradientEditor/LayerTree/PageList/PropertyList/PropertySection/SegmentedControl/NumberField/Toolbar/
Queste cartelle contengono componenti strutturali senza stile e funzioni di supporto specifiche di ciascuna area.
Controls
controls/ contiene i composable per i pannelli delle proprietà e i controlli dell'editor:
usePositionuseLayoutuseAppearanceuseColorModeluseTypographyuseExportuseFillControlsuseStrokeControlsuseEffectsControlsuseNodePropsusePropScrubuseEditorPropertyList
Variables
VariablesEditor/ contiene i composable e il codice che collega lo stato dell'editor delle variabili a Vue.
Selezione
selection/ contiene lo stato calcolato a partire dalla selezione e le informazioni sulle operazioni disponibili.
Contesto
context/ contiene la chiave e le funzioni che forniscono l’editor tramite l’iniezione delle dipendenze di Vue:
EDITOR_KEYprovideEditoruseEditor
Internal
internal/ contiene funzioni di supporto condivise. Non fanno parte dei principali componenti pubblici del pacchetto.
Principi dell'API pubblica
Composable per logica e stato
Se il codice serve principalmente a calcolare o gestire lo stato, oppure a eseguire operazioni dell'editor, esponilo come composable.
Componenti senza stile solo quando la struttura è significativa
Un componente radice è utile quando coordina struttura, elementi figli, spazi o contesto.
Esempi:
PageListRootPropertyListRootPropertySectionRootSegmentedControlRootToolbarRoot
Non passare l’intero contesto attraverso un solo spazio
Passa allo spazio soltanto le proprietà necessarie oppure usa direttamente il composable. I componenti controllati, come PropertyListRoot, emettono eventi semantici. Il collegamento con selezione e cronologia deve risiedere in un adattatore o composable di controllo, non nel componente stesso.
Responsabilità dell'applicazione e dell'SDK
SDK
- integrazione con l'editor;
- logica riutilizzabile senza stile;
- struttura dell'interfaccia riutilizzabile e indipendente dallo stile;
- integrazione con il rendering dell'area di lavoro.
Applicazione
- stile;
- disposizione generale;
- routing;
- apertura, salvataggio e altre operazioni sui file;
- notifiche, menu e comportamento specifico dell'applicazione.
Regola generale
Se del codice può essere riutilizzato in un altro editor basato su OpenPencil senza trascinare con sé lo stile dell'applicazione, probabilmente dovrebbe far parte di @open-pencil/vue.