Vue SDK
@open-pencil/vue permette di utilizzare 4B Pen non solo come applicazione di design autonoma.
Puoi integrare 4B Pen in altri prodotti, strumenti interni o editor specializzati senza adottare l'interfaccia predefinita dell'applicazione.
L’app 4B Pen è soltanto una delle interfacce realizzate con questo insieme di strumenti. L’SDK permette di crearne una personalizzata.
L'SDK fornisce:
- il contesto dell'editor tramite la dependency injection di Vue;
- il rendering dell'area di lavoro con CanvasKit;
- composable per selezione, comandi, menu, pannelli delle proprietà e variabili;
- componenti strutturali senza stile come
PageListRoot,PropertyListRooteToolbarRoot; - la localizzazione di menu, pannelli e finestre di dialogo, oltre ai componenti per selezionare la lingua.
Da dove iniziare
A cosa serve l'SDK
Prodotti e team diversi richiedono esperienze di editing diverse.
Può trattarsi di un editor di design completo, di un'area di lavoro integrata in un'altra applicazione, di uno strumento interno, di un editor di template o di un'interfaccia specializzata con funzionalità di AI.
Principi di progettazione
- Senza stile per scelta: l’SDK fornisce logica e struttura senza imporre l’aspetto dell’applicazione.
- Un composable invece di un wrapper superfluo: se non occorre coordinare una struttura dell'interfaccia, è sufficiente un composable.
- Un'API pubblica progettata con cura: le funzionalità stabili vengono esportate da
packages/vue/src/index.ts. - Una stretta integrazione con Vue: l'SDK collega Vue alle funzionalità di
@open-pencil/core.
Due livelli di API
L'SDK è composto da due livelli principali:
- I composable forniscono lo stato dell'editor e le relative operazioni.
- I componenti definiscono una struttura significativa dell'interfaccia.
Se ti servono soltanto lo stato e le operazioni dell'editor, inizia dai composable. Se stai creando parti riutilizzabili dell'interfaccia, inizia dai componenti.