116 lines
2.6 KiB
Markdown
116 lines
2.6 KiB
Markdown
|
---
|
|||
|
|
title: SDK-Architektur
|
|||
|
|
description: Ordnerstruktur, öffentliche API-Grenzen und Kompositionsmuster in @open-pencil/vue.
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# SDK-Architektur
|
|||
|
|
|
|||
|
|
`@open-pencil/vue` ist die Vue-seitige Schicht über `@open-pencil/core`.
|
|||
|
|
|
|||
|
|
Das Paket besitzt das Editor-Modell selbst nicht. Es passt den Kern-Editor an in:
|
|||
|
|
|
|||
|
|
- Vue-Injection
|
|||
|
|
- reaktive Composables
|
|||
|
|
- headless strukturelle Primitive
|
|||
|
|
- Canvas- und Input-Verdrahtung
|
|||
|
|
|
|||
|
|
## Ordnerstruktur
|
|||
|
|
|
|||
|
|
Dieses Paket ist nach Domänen organisiert.
|
|||
|
|
|
|||
|
|
### Komponentenfamilien
|
|||
|
|
|
|||
|
|
- `Canvas/`
|
|||
|
|
- `ColorPicker/`
|
|||
|
|
- `FillPicker/`
|
|||
|
|
- `FontPicker/`
|
|||
|
|
- `GradientEditor/`
|
|||
|
|
- `LayerTree/`
|
|||
|
|
- `PageList/`
|
|||
|
|
- `PropertyList/`
|
|||
|
|
- `ScrubInput/`
|
|||
|
|
- `Toolbar/`
|
|||
|
|
|
|||
|
|
Diese enthalten strukturelle/headless Primitive und lokale Hilfsmittel.
|
|||
|
|
|
|||
|
|
### Steuerelemente
|
|||
|
|
|
|||
|
|
`controls/` enthält Composables für Eigenschafts-Panels und Editor-Steuerelemente:
|
|||
|
|
|
|||
|
|
- `usePosition`
|
|||
|
|
- `useLayout`
|
|||
|
|
- `useAppearance`
|
|||
|
|
- `useTypography`
|
|||
|
|
- `useExport`
|
|||
|
|
- `useFillControls`
|
|||
|
|
- `useStrokeControls`
|
|||
|
|
- `useEffectsControls`
|
|||
|
|
- `useNodeProps`
|
|||
|
|
- `usePropScrub`
|
|||
|
|
|
|||
|
|
### Variablen
|
|||
|
|
|
|||
|
|
`VariablesEditor/` enthält Composables und Zustandsverdrahtung für die Variablen-Domäne.
|
|||
|
|
|
|||
|
|
### Auswahl
|
|||
|
|
|
|||
|
|
`selection/` enthält auswahlabgeleiteten Editor-Zustand und Fähigkeiten.
|
|||
|
|
|
|||
|
|
### Kontext
|
|||
|
|
|
|||
|
|
`context/` enthält Editor-Injektions-Hilfsmittel:
|
|||
|
|
|
|||
|
|
- `EDITOR_KEY`
|
|||
|
|
- `provideEditor`
|
|||
|
|
- `useEditor`
|
|||
|
|
|
|||
|
|
### Intern
|
|||
|
|
|
|||
|
|
`internal/` enthält übergreifende Utilities, die nicht als primäre headless Primitive gedacht sind.
|
|||
|
|
|
|||
|
|
## Philosophie der öffentlichen API
|
|||
|
|
|
|||
|
|
### Composables bevorzugen
|
|||
|
|
|
|||
|
|
Wenn es hauptsächlich um Kontrolllogik, Zustandsableitung oder Editor-Aktionen geht, sollte ein Composable verwendet werden.
|
|||
|
|
|
|||
|
|
### Headless Primitive für bedeutungsvolle Struktur
|
|||
|
|
|
|||
|
|
Komponentenwurzeln verwenden, wenn sie Struktur, Kinder, Slots oder Kontext koordinieren.
|
|||
|
|
|
|||
|
|
Beispiele:
|
|||
|
|
|
|||
|
|
- `PageListRoot`
|
|||
|
|
- `PropertyListRoot`
|
|||
|
|
- `ToolbarRoot`
|
|||
|
|
|
|||
|
|
### Breite Kontext-Dump-Slots vermeiden
|
|||
|
|
|
|||
|
|
Fokussierte Slot-Props oder direkte Composable-Verwendung gegenüber großen `v-slot="ctx"`-Payloads bevorzugen.
|
|||
|
|
|
|||
|
|
## Verantwortlichkeit App vs. SDK
|
|||
|
|
|
|||
|
|
### SDK übernimmt
|
|||
|
|
|
|||
|
|
- Editor-Integration
|
|||
|
|
- wiederverwendbare headless Logik
|
|||
|
|
- wiederverwendbare UI-Struktur ohne Styling-Annahmen
|
|||
|
|
- Canvas-Rendering-Integration
|
|||
|
|
|
|||
|
|
### App übernimmt
|
|||
|
|
|
|||
|
|
- Styling
|
|||
|
|
- Layout-Shells
|
|||
|
|
- Routing
|
|||
|
|
- Produkt-Datei-Flows
|
|||
|
|
- Toasts, Menüs und app-spezifische UX
|
|||
|
|
|
|||
|
|
## Praktische Faustregel
|
|||
|
|
|
|||
|
|
Wenn ein Stück Logik in einer anderen OpenPencil-basierten App wiederverwendet werden könnte, ohne App-Styling mitzubringen, gehört es wahrscheinlich in `@open-pencil/vue`.
|
|||
|
|
|
|||
|
|
## Verwandte Seiten
|
|||
|
|
|
|||
|
|
- [SDK – Erste Schritte](./getting-started)
|
|||
|
|
- [API-Referenz](./api/)
|