gpui-element

name	gpui-element
description	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.

When to Use

Use the low-level Element trait when:

• Need fine-grained control over layout calculation
• Building complex, performance-critical components
• Implementing custom layout algorithms (masonry, circular, etc.)
• High-level Render/RenderOnce APIs are insufficient

Prefer Render/RenderOnce for: Simple components, standard layouts, declarative UI

Quick Start

The Element trait provides direct control over three rendering phases:

impl Element for MyElement {
    type RequestLayoutState = MyLayoutState;  // Data passed to later phases
    type PrepaintState = MyPaintState;        // Data for painting

    fn id(&self) -> Option<ElementId> {
        Some(self.id.clone())
    }

     (&)  <& std::panic::Location<>> {
        
    }

    
     (& , .., window: & Window, cx: & App)
         (LayoutId, ::RequestLayoutState)
    {
          = window.(
            Style { size: ((.), (.)), ..() },
            [],
            cx
        );
        (layout_id, MyLayoutState {  })
    }

    
     (& , .., bounds: Bounds<Pixels>, layout: & ::RequestLayoutState,
                window: & Window, cx: & App)  ::PrepaintState
    {
          = window.(bounds, HitboxBehavior::Normal);
        MyPaintState { hitbox }
    }

    
     (& , .., bounds: Bounds<Pixels>, layout: & ::RequestLayoutState,
             paint_state: & ::PrepaintState, window: & Window, cx: & App)
    {
        window.((bounds, Corners::((.)), cx.().background));

        window.({
              = paint_state.hitbox.();
             |event: &MouseDownEvent, phase, window, cx| {
                 hitbox.(window) && phase.() {
                    
                    cx.();
                }
            }
        });
    }
}


    {
      = ;
     ()  ::Element {  }
}