Vue SDK
Pakiet @open-pencil/vue pozwala korzystać z 4B Pen nie tylko jako z samodzielnej aplikacji do projektowania.
4B Pen można osadzić w innym produkcie, narzędziu wewnętrznym albo edytorze przeznaczonym do konkretnego zadania. Nie trzeba przy tym korzystać z domyślnego interfejsu aplikacji.
Aplikacja 4B Pen jest tylko jednym z interfejsów zbudowanych za pomocą tego zestawu narzędzi. SDK umożliwia stworzenie własnego.
SDK udostępnia:
- kontekst edytora przekazywany przez dependency injection w Vue;
- renderowanie obszaru roboczego za pomocą CanvasKit;
- composables do obsługi zaznaczenia, poleceń, menu, paneli właściwości i zmiennych;
- strukturalne komponenty bez narzuconego wyglądu, między innymi
PageListRoot,PropertyListRootiToolbarRoot; - obsługę lokalizacji menu, paneli i okien dialogowych oraz elementy do wyboru języka.
Od czego zacząć
Do czego służy SDK
Różne produkty i zespoły potrzebują różnych interfejsów do edycji.
Może to być pełny edytor graficzny, niewielki obszar roboczy osadzony w innej aplikacji, narzędzie wewnętrzne, edytor szablonów albo wyspecjalizowany interfejs wspomagany przez AI.
Zasady projektowe
- Bez narzuconego wyglądu: SDK zapewnia logikę i strukturę, ale nie określa wyglądu aplikacji.
- Composable zamiast zbędnego wrappera: jeśli nie trzeba koordynować struktury interfejsu, wystarczy composable.
- Przemyślane publiczne API: stabilne funkcje są eksportowane z
packages/vue/src/index.ts. - Pełna integracja z Vue: SDK łączy Vue z możliwościami
@open-pencil/core.
Dwie warstwy API
SDK składa się z dwóch głównych warstw:
- Composables udostępniają stan edytora i operacje na nim.
- Komponenty definiują istotną strukturę interfejsu.
Jeśli potrzebujesz tylko stanu edytora i operacji, zacznij od composables. Jeśli tworzysz elementy interfejsu edytora przeznaczone do ponownego użycia, zacznij od komponentów.