gpui-element
Implementing custom elements using GPUI's low-level Element API (vs. high-level Render/RenderOnce APIs). Use when you need maximum control over layout, prepaint, and paint phases for complex, performance-critical custom UI components that cannot be achieved with
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Implementing custom elements using GPUI's low-level Element API (vs. high-level Render/RenderOnce APIs). Use when you need maximum control over layout, prepaint, and paint phases for complex, performance-critical custom UI components that cannot be achieved with Render/RenderOnce traits.
How to use
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.