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 4B Pen senza trascinare con sé lo stile dell'applicazione, probabilmente dovrebbe far parte di @open-pencil/vue.