c3412a44fc
* docs: polish localized documentation - Rewrite Russian documentation for natural terminology and current source parity\n- Continue the Polish editorial pass across guides and SDK references\n- Refresh shared localized SDK API data imports * docs(pl): complete editorial pass - Rewrite the remaining advanced Vue SDK references\n- Refresh the Figma compatibility matrix against the canonical source\n- Align terminology and behavior across every Polish documentation page * docs(de): complete editorial pass - Rewrite German guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs(es): complete editorial pass - Rewrite Spanish guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs(fr): complete editorial pass - Rewrite French guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs: correct localized terminology - Replace unnecessary English prose with natural localized terminology\n- Derive documentation aliases from named directory roots\n- Preserve English only for identifiers, APIs, and exact product terms * docs(it): continue editorial pass - Rewrite Italian user guides and automation documentation\n- Update Vue SDK composables and component references\n- Restore current AI, export, component, and variable behavior * docs(it): complete editorial pass - Finish Italian advanced SDK and reference documentation\n- Refresh the Penpot comparison and Figma compatibility matrix\n- Replace literal machine translations with natural technical prose * docs(pl): refine property panel terminology * docs: refine remaining localized prose - Replace overfitted English prose in Polish feature documentation\n- Rewrite the Russian property-list reference in natural terminology * docs(ru): rewrite Penpot comparison naturally - Replace remaining English prose with natural Russian\n- Preserve code identifiers and library names only where required * docs: rewrite localized feature overviews naturally - Replace avoidable English prose in German, Spanish, and French\n- Keep identifiers and product names unchanged * docs(de): refine property panel terminology * docs: refine Spanish and French SDK terminology * docs(ru): continue full prose audit - Rewrite homepage, setup, navigation, and guide index naturally\n- Restore missing zoom shortcuts * docs(ru): audit user and automation guides - Rewrite selection, collaboration, and automation prose naturally\n- Preserve API identifiers while localizing ordinary terminology * docs(ru): audit CLI inspection and analysis * docs(ru): audit Vue SDK overview and guides * docs(ru): audit Vue SDK API prose - Localize ordinary component and composable terminology\n- Preserve API symbols and code identifiers * docs(ru): audit advanced and gradient API references * docs(ru): finish advanced API prose audit * docs(ru): audit JSX renderer guide * docs(ru): audit CLI export and scripting guides * docs(pl): audit Penpot comparison prose * docs(pl): audit selection and automation guides * docs(pl): audit homepage and variable guides * docs(pl): audit vector, layers, and Pen guides * docs(pl): audit Auto layout and shape guides * docs(pl): audit context menu and export guides * docs(pl): audit JSX and analysis guides * docs(pl): audit AI Chat guide * docs(pl): audit components and CLI inspection * docs(pl): audit scripting and SDK overview prose * docs(pl): audit SDK API indexes * docs(pl): audit SDK component references * docs(pl): audit SDK composable references * docs(ru): refine usePosition terminology * docs(pl): audit advanced SDK references * docs(pl): audit Figma compatibility matrix * docs(pl): finish residual SDK terminology audit * docs(pl): finish component terminology audit * docs(pl): finish SDK guide terminology audit * docs(de): begin full user guide prose audit * docs(de): audit navigation, Pen, and layers guides * docs(de): audit Auto Layout, shapes, menu, and export * docs(de): audit components, text, and vector guides * docs(de): audit variables and automation overview * docs(de): audit AI Chat and collaboration guides * docs(de): audit CLI inspection, analysis, and export * docs(de): audit scripting and JSX guides * docs(de): audit Vue SDK overview and guides * docs(de): audit SDK API indexes * docs(de): audit SDK component references * docs(de): audit SDK composable references * docs(de): audit advanced SDK references * docs(de): audit Penpot comparison prose * docs(de): audit Figma compatibility reference * docs(es): begin full user guide prose audit * docs(es): audit document organization guides * docs(es): audit editing workflow guides * docs(es): audit automation and collaboration prose * docs(es): audit CLI inspection and export guides * docs(es): audit CLI scripting guide * docs(es): audit JSX and feature overview prose * docs(es): audit Penpot comparison prose * docs(es): audit SDK overview and guides * docs(es): begin SDK component reference audit * docs(es): audit SDK navigation component references * docs(es): audit SDK color and layout components * docs(es): begin SDK composable reference audit * docs(es): audit SDK property composable references * docs(es): audit SDK editor composable references * docs(es): begin advanced SDK reference audit * docs(es): audit advanced SDK state references * docs(es): complete advanced SDK reference audit * docs(es): audit Figma compatibility reference * docs(es): complete residual terminology sweep * docs(fr): begin full prose second audit * docs(fr): audit AI and variables prose * docs(fr): audit core user guide prose * docs(fr): audit editing workflow guides * docs(fr): audit CLI and JSX prose * docs(fr): audit Penpot comparison prose * docs(fr): audit SDK overview and guides * docs(fr): begin SDK API reference audit * docs(fr): audit SDK navigation component references * docs(fr): audit SDK color and layout components * docs(fr): begin SDK composable reference audit * docs(fr): audit SDK property composable references * docs(fr): audit editor composables and advanced APIs * docs(fr): audit advanced SDK state references * docs(fr): complete advanced SDK reference audit * docs(fr): audit Figma compatibility reference * docs(fr): complete residual terminology sweep * docs(it): begin full prose second audit * docs(it): audit document workflow guides * docs(it): audit editing and automation prose * docs(it): audit CLI and JSX prose * docs(it): audit Penpot comparison and SDK guides * docs(it): begin SDK API reference audit * docs(it): audit SDK component and state references * docs(it): audit residual SDK references * docs(it): audit Figma compatibility reference * docs(it): complete residual terminology sweep * docs(i18n): verify residual locale terminology
122 lines
3.3 KiB
Markdown
122 lines
3.3 KiB
Markdown
---
|
||
title: Architettura dell'SDK
|
||
description: Struttura del pacchetto, confini dell'API pubblica e principi di progettazione di @open-pencil/vue.
|
||
---
|
||
|
||
# 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:
|
||
|
||
- `usePosition`
|
||
- `useLayout`
|
||
- `useAppearance`
|
||
- `useColorModel`
|
||
- `useTypography`
|
||
- `useExport`
|
||
- `useFillControls`
|
||
- `useStrokeControls`
|
||
- `useEffectsControls`
|
||
- `useNodeProps`
|
||
- `usePropScrub`
|
||
- `useEditorPropertyList`
|
||
|
||
### 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_KEY`
|
||
- `provideEditor`
|
||
- `useEditor`
|
||
|
||
### 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:
|
||
|
||
- `PageListRoot`
|
||
- `PropertyListRoot`
|
||
- `PropertySectionRoot`
|
||
- `SegmentedControlRoot`
|
||
- `ToolbarRoot`
|
||
|
||
### 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`.
|
||
|
||
## Vedi anche
|
||
|
||
- [Primi passi con l'SDK](./getting-started)
|
||
- [Riferimento API](./api/)
|