14325280d9
- 78 SDK pages per language (components, composables, advanced API, guides, architecture, getting-started) - vector-edit.md user guide page (5 languages) - Update stale ru/programmable/cli/inspecting.md - Fix YAML frontmatter quoting for colons in descriptions 474 files, 0 missing pages across de/es/fr/it/pl/ru. VitePress build verified — all 546 SDK pages render.
116 lines
2.6 KiB
Markdown
116 lines
2.6 KiB
Markdown
---
|
|
title: Architektura SDK
|
|
description: Struktura katalogów, granice publicznego API i wzorce kompozycji w @open-pencil/vue.
|
|
---
|
|
|
|
# Architektura SDK
|
|
|
|
`@open-pencil/vue` to warstwa Vue nad `@open-pencil/core`.
|
|
|
|
Nie jest właścicielem samego modelu edytora. Adaptuje rdzeń edytora do:
|
|
|
|
- wstrzyknięcia Vue
|
|
- reaktywnych kompozytów
|
|
- bezstanowych prymitywów strukturalnych
|
|
- okablowania kanvasu i wejść
|
|
|
|
## Struktura katalogów
|
|
|
|
Pakiet jest zorganizowany według domeny.
|
|
|
|
### Rodziny komponentów
|
|
|
|
- `Canvas/`
|
|
- `ColorPicker/`
|
|
- `FillPicker/`
|
|
- `FontPicker/`
|
|
- `GradientEditor/`
|
|
- `LayerTree/`
|
|
- `PageList/`
|
|
- `PropertyList/`
|
|
- `ScrubInput/`
|
|
- `Toolbar/`
|
|
|
|
Zawierają prymitywy strukturalne/bezstanowe i lokalne pomocniki.
|
|
|
|
### Kontrolki
|
|
|
|
`controls/` zawiera kompozyty panelu właściwości i kontrolek edytora:
|
|
|
|
- `usePosition`
|
|
- `useLayout`
|
|
- `useAppearance`
|
|
- `useTypography`
|
|
- `useExport`
|
|
- `useFillControls`
|
|
- `useStrokeControls`
|
|
- `useEffectsControls`
|
|
- `useNodeProps`
|
|
- `usePropScrub`
|
|
|
|
### Zmienne
|
|
|
|
`VariablesEditor/` zawiera kompozyty domeny zmiennych i okablowanie stanu.
|
|
|
|
### Selekcja
|
|
|
|
`selection/` zawiera stan edytora pochodny od selekcji i możliwości.
|
|
|
|
### Kontekst
|
|
|
|
`context/` zawiera pomocniki wstrzykiwania edytora:
|
|
|
|
- `EDITOR_KEY`
|
|
- `provideEditor`
|
|
- `useEditor`
|
|
|
|
### Wewnętrzne
|
|
|
|
`internal/` zawiera narzędzia przekrojowe nieprzeznaczone jako główne bezstanowe prymitywy.
|
|
|
|
## Filozofia publicznego API
|
|
|
|
### Preferuj kompozyty
|
|
|
|
Jeśli problem dotyczy głównie logiki sterowania, derywacji stanu lub akcji edytora, udostępnij kompozyt.
|
|
|
|
### Zachowaj bezstanowe prymitywy dla znaczącej struktury
|
|
|
|
Używaj korzeni komponentów, gdy koordynują strukturę, dzieci, sloty lub kontekst.
|
|
|
|
Przykłady:
|
|
|
|
- `PageListRoot`
|
|
- `PropertyListRoot`
|
|
- `ToolbarRoot`
|
|
|
|
### Unikaj slotów z masowym zrzutem kontekstu
|
|
|
|
Preferuj skupione właściwości slotów lub bezpośrednie użycie kompozytu zamiast gigantycznych ładunków `v-slot="ctx"`.
|
|
|
|
## Odpowiedzialność aplikacji vs SDK
|
|
|
|
### SDK odpowiada za
|
|
|
|
- integrację edytora
|
|
- wielokrotnie używalną logikę bezstanową
|
|
- wielokrotnie używalną strukturę UI bez założeń dotyczących stylowania
|
|
- integrację renderowania kanvasu
|
|
|
|
### Aplikacja odpowiada za
|
|
|
|
- stylowanie
|
|
- powłoki layoutu
|
|
- routing
|
|
- przepływy plików produktu
|
|
- powiadomienia, menu i UX specyficzne dla aplikacji
|
|
|
|
## Praktyczna zasada
|
|
|
|
Jeśli logika mogłaby być użyta ponownie w innej aplikacji opartej na OpenPencil bez przenoszenia stylowania aplikacji, prawdopodobnie należy do `@open-pencil/vue`.
|
|
|
|
## Powiązane strony
|
|
|
|
- [Pierwsze kroki z SDK](./getting-started)
|
|
- [Dokumentacja API](./api/)
|