gpui-element
Pełna kontrola nad renderowaniem UI w GPUI — dla zaawansowanych komponentów, które wymagają precyzji
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do implementacji niestandardowych elementów interfejsu przy użyciu niskopoziomowego API Element w GPUI. Daje Ci bezpośrednią kontrolę nad trzema fazami renderowania: kalkulacją layoutu, przygotowaniem do malowania i rysowaniem. Użyj go, gdy wysokopoziomowe API Render i RenderOnce nie wystarczą — na przykład przy budowaniu złożonych komponentów o krytycznym znaczeniu dla wydajności, implementacji niestandardowych algorytmów layoutu (masonry, układy kołowe) lub gdy potrzebujesz precyzyjnej kontroli nad hitboxami i fazą prepaint.
Jak używać
Zainstaluj skill gpui-element z repozytorium longbridge — dodaj go do katalogu skills w swoim projekcie GPUI.
Oceń, czy naprawdę potrzebujesz niskopoziomowego API Element. Jeśli budujesz prosty komponent ze standardowym layoutem, preferuj wysokopoziomowe API Render lub RenderOnce — są łatwiejsze i wystarczające.
Zdefiniuj strukturę swojego elementu i zaimplementuj trait Element. Musisz określić dwa typy stanu: RequestLayoutState (dane przekazane do kolejnych faz) i PrepaintState (dane do malowania).
Implementuj metodę request_layout — pierwsza faza, w której obliczasz rozmiary i pozycje elementu. Użyj window.request_layout() z odpowiednim Style i zwróć LayoutId oraz swój RequestLayoutState.
Implementuj metodę prepaint — druga faza, gdzie tworzysz hitboxy i przygotowujesz dane do rysowania. Użyj window.insert_hitbox() z bounds i HitboxBehavior, zwróć PrepaintState.
Implementuj metodę paint — trzecia faza, w której faktycznie rysujesz element na ekranie, korzystając z danych przygotowanych w poprzednich fazach.