div.rs

   1//! Div is the central, reusable element that most GPUI trees will be built from.
   2//! It functions as a container for other elements, and provides a number of
   3//! useful features for laying out and styling its children as well as binding
   4//! mouse events and action handlers. It is meant to be similar to the HTML `<div>`
   5//! element, but for GPUI.
   6//!
   7//! # Build your own div
   8//!
   9//! GPUI does not directly provide APIs for stateful, multi step events like `click`
  10//! and `drag`. We want GPUI users to be able to build their own abstractions for
  11//! their own needs. However, as a UI framework, we're also obliged to provide some
  12//! building blocks to make the process of building your own elements easier.
  13//! For this we have the [`Interactivity`] and the [`StyleRefinement`] structs, as well
  14//! as several associated traits. Together, these provide the full suite of Dom-like events
  15//! and Tailwind-like styling that you can use to build your own custom elements. Div is
  16//! constructed by combining these two systems into an all-in-one element.
  17
  18use crate::{
  19    point, px, size, Action, AnyDrag, AnyElement, AnyTooltip, AnyView, AppContext, Bounds,
  20    ClickEvent, DispatchPhase, Element, ElementId, FocusHandle, Global, GlobalElementId, Hitbox,
  21    HitboxId, IntoElement, IsZero, KeyContext, KeyDownEvent, KeyUpEvent, LayoutId,
  22    ModifiersChangedEvent, MouseButton, MouseDownEvent, MouseMoveEvent, MouseUpEvent,
  23    ParentElement, Pixels, Point, Render, ScrollWheelEvent, SharedString, Size, Style,
  24    StyleRefinement, Styled, Task, TooltipId, View, Visibility, WindowContext,
  25};
  26use collections::HashMap;
  27use refineable::Refineable;
  28use smallvec::SmallVec;
  29use std::{
  30    any::{Any, TypeId},
  31    cell::RefCell,
  32    cmp::Ordering,
  33    fmt::Debug,
  34    marker::PhantomData,
  35    mem,
  36    ops::DerefMut,
  37    rc::Rc,
  38    time::Duration,
  39};
  40use taffy::style::Overflow;
  41use util::ResultExt;
  42
  43const DRAG_THRESHOLD: f64 = 2.;
  44pub(crate) const TOOLTIP_DELAY: Duration = Duration::from_millis(500);
  45
  46/// The styling information for a given group.
  47pub struct GroupStyle {
  48    /// The identifier for this group.
  49    pub group: SharedString,
  50
  51    /// The specific style refinement that this group would apply
  52    /// to its children.
  53    pub style: Box<StyleRefinement>,
  54}
  55
  56/// An event for when a drag is moving over this element, with the given state type.
  57pub struct DragMoveEvent<T> {
  58    /// The mouse move event that triggered this drag move event.
  59    pub event: MouseMoveEvent,
  60
  61    /// The bounds of this element.
  62    pub bounds: Bounds<Pixels>,
  63    drag: PhantomData<T>,
  64}
  65
  66impl<T: 'static> DragMoveEvent<T> {
  67    /// Returns the drag state for this event.
  68    pub fn drag<'b>(&self, cx: &'b AppContext) -> &'b T {
  69        cx.active_drag
  70            .as_ref()
  71            .and_then(|drag| drag.value.downcast_ref::<T>())
  72            .expect("DragMoveEvent is only valid when the stored active drag is of the same type.")
  73    }
  74}
  75
  76impl Interactivity {
  77    /// Bind the given callback to the mouse down event for the given mouse button, during the bubble phase
  78    /// The imperative API equivalent of [`InteractiveElement::on_mouse_down`]
  79    ///
  80    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to the view state from this callback.
  81    pub fn on_mouse_down(
  82        &mut self,
  83        button: MouseButton,
  84        listener: impl Fn(&MouseDownEvent, &mut WindowContext) + 'static,
  85    ) {
  86        self.mouse_down_listeners
  87            .push(Box::new(move |event, phase, hitbox, cx| {
  88                if phase == DispatchPhase::Bubble && event.button == button && hitbox.is_hovered(cx)
  89                {
  90                    (listener)(event, cx)
  91                }
  92            }));
  93    }
  94
  95    /// Bind the given callback to the mouse down event for any button, during the capture phase
  96    /// The imperative API equivalent of [`InteractiveElement::capture_any_mouse_down`]
  97    ///
  98    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
  99    pub fn capture_any_mouse_down(
 100        &mut self,
 101        listener: impl Fn(&MouseDownEvent, &mut WindowContext) + 'static,
 102    ) {
 103        self.mouse_down_listeners
 104            .push(Box::new(move |event, phase, hitbox, cx| {
 105                if phase == DispatchPhase::Capture && hitbox.is_hovered(cx) {
 106                    (listener)(event, cx)
 107                }
 108            }));
 109    }
 110
 111    /// Bind the given callback to the mouse down event for any button, during the bubble phase
 112    /// the imperative API equivalent to [`InteractiveElement::on_any_mouse_down`]
 113    ///
 114    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 115    pub fn on_any_mouse_down(
 116        &mut self,
 117        listener: impl Fn(&MouseDownEvent, &mut WindowContext) + 'static,
 118    ) {
 119        self.mouse_down_listeners
 120            .push(Box::new(move |event, phase, hitbox, cx| {
 121                if phase == DispatchPhase::Bubble && hitbox.is_hovered(cx) {
 122                    (listener)(event, cx)
 123                }
 124            }));
 125    }
 126
 127    /// Bind the given callback to the mouse up event for the given button, during the bubble phase
 128    /// the imperative API equivalent to [`InteractiveElement::on_mouse_up`]
 129    ///
 130    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 131    pub fn on_mouse_up(
 132        &mut self,
 133        button: MouseButton,
 134        listener: impl Fn(&MouseUpEvent, &mut WindowContext) + 'static,
 135    ) {
 136        self.mouse_up_listeners
 137            .push(Box::new(move |event, phase, hitbox, cx| {
 138                if phase == DispatchPhase::Bubble && event.button == button && hitbox.is_hovered(cx)
 139                {
 140                    (listener)(event, cx)
 141                }
 142            }));
 143    }
 144
 145    /// Bind the given callback to the mouse up event for any button, during the capture phase
 146    /// the imperative API equivalent to [`InteractiveElement::capture_any_mouse_up`]
 147    ///
 148    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 149    pub fn capture_any_mouse_up(
 150        &mut self,
 151        listener: impl Fn(&MouseUpEvent, &mut WindowContext) + 'static,
 152    ) {
 153        self.mouse_up_listeners
 154            .push(Box::new(move |event, phase, hitbox, cx| {
 155                if phase == DispatchPhase::Capture && hitbox.is_hovered(cx) {
 156                    (listener)(event, cx)
 157                }
 158            }));
 159    }
 160
 161    /// Bind the given callback to the mouse up event for any button, during the bubble phase
 162    /// the imperative API equivalent to [`Interactivity::on_any_mouse_up`]
 163    ///
 164    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 165    pub fn on_any_mouse_up(
 166        &mut self,
 167        listener: impl Fn(&MouseUpEvent, &mut WindowContext) + 'static,
 168    ) {
 169        self.mouse_up_listeners
 170            .push(Box::new(move |event, phase, hitbox, cx| {
 171                if phase == DispatchPhase::Bubble && hitbox.is_hovered(cx) {
 172                    (listener)(event, cx)
 173                }
 174            }));
 175    }
 176
 177    /// Bind the given callback to the mouse down event, on any button, during the capture phase,
 178    /// when the mouse is outside of the bounds of this element.
 179    /// The imperative API equivalent to [`InteractiveElement::on_mouse_down_out`]
 180    ///
 181    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 182    pub fn on_mouse_down_out(
 183        &mut self,
 184        listener: impl Fn(&MouseDownEvent, &mut WindowContext) + 'static,
 185    ) {
 186        self.mouse_down_listeners
 187            .push(Box::new(move |event, phase, hitbox, cx| {
 188                if phase == DispatchPhase::Capture && !hitbox.contains(&cx.mouse_position()) {
 189                    (listener)(event, cx)
 190                }
 191            }));
 192    }
 193
 194    /// Bind the given callback to the mouse up event, for the given button, during the capture phase,
 195    /// when the mouse is outside of the bounds of this element.
 196    /// The imperative API equivalent to [`InteractiveElement::on_mouse_up_out`]
 197    ///
 198    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 199    pub fn on_mouse_up_out(
 200        &mut self,
 201        button: MouseButton,
 202        listener: impl Fn(&MouseUpEvent, &mut WindowContext) + 'static,
 203    ) {
 204        self.mouse_up_listeners
 205            .push(Box::new(move |event, phase, hitbox, cx| {
 206                if phase == DispatchPhase::Capture
 207                    && event.button == button
 208                    && !hitbox.is_hovered(cx)
 209                {
 210                    (listener)(event, cx);
 211                }
 212            }));
 213    }
 214
 215    /// Bind the given callback to the mouse move event, during the bubble phase
 216    /// The imperative API equivalent to [`InteractiveElement::on_mouse_move`]
 217    ///
 218    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 219    pub fn on_mouse_move(
 220        &mut self,
 221        listener: impl Fn(&MouseMoveEvent, &mut WindowContext) + 'static,
 222    ) {
 223        self.mouse_move_listeners
 224            .push(Box::new(move |event, phase, hitbox, cx| {
 225                if phase == DispatchPhase::Bubble && hitbox.is_hovered(cx) {
 226                    (listener)(event, cx);
 227                }
 228            }));
 229    }
 230
 231    /// Bind the given callback to the mouse drag event of the given type. Note that this
 232    /// will be called for all move events, inside or outside of this element, as long as the
 233    /// drag was started with this element under the mouse. Useful for implementing draggable
 234    /// UIs that don't conform to a drag and drop style interaction, like resizing.
 235    /// The imperative API equivalent to [`InteractiveElement::on_drag_move`]
 236    ///
 237    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 238    pub fn on_drag_move<T>(
 239        &mut self,
 240        listener: impl Fn(&DragMoveEvent<T>, &mut WindowContext) + 'static,
 241    ) where
 242        T: 'static,
 243    {
 244        self.mouse_move_listeners
 245            .push(Box::new(move |event, phase, hitbox, cx| {
 246                if phase == DispatchPhase::Capture
 247                    && cx
 248                        .active_drag
 249                        .as_ref()
 250                        .is_some_and(|drag| drag.value.as_ref().type_id() == TypeId::of::<T>())
 251                {
 252                    (listener)(
 253                        &DragMoveEvent {
 254                            event: event.clone(),
 255                            bounds: hitbox.bounds,
 256                            drag: PhantomData,
 257                        },
 258                        cx,
 259                    );
 260                }
 261            }));
 262    }
 263
 264    /// Bind the given callback to scroll wheel events during the bubble phase
 265    /// The imperative API equivalent to [`InteractiveElement::on_scroll_wheel`]
 266    ///
 267    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 268    pub fn on_scroll_wheel(
 269        &mut self,
 270        listener: impl Fn(&ScrollWheelEvent, &mut WindowContext) + 'static,
 271    ) {
 272        self.scroll_wheel_listeners
 273            .push(Box::new(move |event, phase, hitbox, cx| {
 274                if phase == DispatchPhase::Bubble && hitbox.is_hovered(cx) {
 275                    (listener)(event, cx);
 276                }
 277            }));
 278    }
 279
 280    /// Bind the given callback to an action dispatch during the capture phase
 281    /// The imperative API equivalent to [`InteractiveElement::capture_action`]
 282    ///
 283    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 284    pub fn capture_action<A: Action>(
 285        &mut self,
 286        listener: impl Fn(&A, &mut WindowContext) + 'static,
 287    ) {
 288        self.action_listeners.push((
 289            TypeId::of::<A>(),
 290            Box::new(move |action, phase, cx| {
 291                let action = action.downcast_ref().unwrap();
 292                if phase == DispatchPhase::Capture {
 293                    (listener)(action, cx)
 294                } else {
 295                    cx.propagate();
 296                }
 297            }),
 298        ));
 299    }
 300
 301    /// Bind the given callback to an action dispatch during the bubble phase
 302    /// The imperative API equivalent to [`InteractiveElement::on_action`]
 303    ///
 304    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 305    pub fn on_action<A: Action>(&mut self, listener: impl Fn(&A, &mut WindowContext) + 'static) {
 306        self.action_listeners.push((
 307            TypeId::of::<A>(),
 308            Box::new(move |action, phase, cx| {
 309                let action = action.downcast_ref().unwrap();
 310                if phase == DispatchPhase::Bubble {
 311                    (listener)(action, cx)
 312                }
 313            }),
 314        ));
 315    }
 316
 317    /// Bind the given callback to an action dispatch, based on a dynamic action parameter
 318    /// instead of a type parameter. Useful for component libraries that want to expose
 319    /// action bindings to their users.
 320    /// The imperative API equivalent to [`InteractiveElement::on_boxed_action`]
 321    ///
 322    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 323    pub fn on_boxed_action(
 324        &mut self,
 325        action: &dyn Action,
 326        listener: impl Fn(&dyn Action, &mut WindowContext) + 'static,
 327    ) {
 328        let action = action.boxed_clone();
 329        self.action_listeners.push((
 330            (*action).type_id(),
 331            Box::new(move |_, phase, cx| {
 332                if phase == DispatchPhase::Bubble {
 333                    (listener)(&*action, cx)
 334                }
 335            }),
 336        ));
 337    }
 338
 339    /// Bind the given callback to key down events during the bubble phase
 340    /// The imperative API equivalent to [`InteractiveElement::on_key_down`]
 341    ///
 342    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 343    pub fn on_key_down(&mut self, listener: impl Fn(&KeyDownEvent, &mut WindowContext) + 'static) {
 344        self.key_down_listeners
 345            .push(Box::new(move |event, phase, cx| {
 346                if phase == DispatchPhase::Bubble {
 347                    (listener)(event, cx)
 348                }
 349            }));
 350    }
 351
 352    /// Bind the given callback to key down events during the capture phase
 353    /// The imperative API equivalent to [`InteractiveElement::capture_key_down`]
 354    ///
 355    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 356    pub fn capture_key_down(
 357        &mut self,
 358        listener: impl Fn(&KeyDownEvent, &mut WindowContext) + 'static,
 359    ) {
 360        self.key_down_listeners
 361            .push(Box::new(move |event, phase, cx| {
 362                if phase == DispatchPhase::Capture {
 363                    listener(event, cx)
 364                }
 365            }));
 366    }
 367
 368    /// Bind the given callback to key up events during the bubble phase
 369    /// The imperative API equivalent to [`InteractiveElement::on_key_up`]
 370    ///
 371    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 372    pub fn on_key_up(&mut self, listener: impl Fn(&KeyUpEvent, &mut WindowContext) + 'static) {
 373        self.key_up_listeners
 374            .push(Box::new(move |event, phase, cx| {
 375                if phase == DispatchPhase::Bubble {
 376                    listener(event, cx)
 377                }
 378            }));
 379    }
 380
 381    /// Bind the given callback to key up events during the capture phase
 382    /// The imperative API equivalent to [`InteractiveElement::on_key_up`]
 383    ///
 384    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 385    pub fn capture_key_up(&mut self, listener: impl Fn(&KeyUpEvent, &mut WindowContext) + 'static) {
 386        self.key_up_listeners
 387            .push(Box::new(move |event, phase, cx| {
 388                if phase == DispatchPhase::Capture {
 389                    listener(event, cx)
 390                }
 391            }));
 392    }
 393
 394    /// Bind the given callback to modifiers changing events.
 395    /// The imperative API equivalent to [`InteractiveElement::on_modifiers_changed`]
 396    ///
 397    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 398    pub fn on_modifiers_changed(
 399        &mut self,
 400        listener: impl Fn(&ModifiersChangedEvent, &mut WindowContext) + 'static,
 401    ) {
 402        self.modifiers_changed_listeners
 403            .push(Box::new(move |event, cx| listener(event, cx)));
 404    }
 405
 406    /// Bind the given callback to drop events of the given type, whether or not the drag started on this element
 407    /// The imperative API equivalent to [`InteractiveElement::on_drop`]
 408    ///
 409    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 410    pub fn on_drop<T: 'static>(&mut self, listener: impl Fn(&T, &mut WindowContext) + 'static) {
 411        self.drop_listeners.push((
 412            TypeId::of::<T>(),
 413            Box::new(move |dragged_value, cx| {
 414                listener(dragged_value.downcast_ref().unwrap(), cx);
 415            }),
 416        ));
 417    }
 418
 419    /// Use the given predicate to determine whether or not a drop event should be dispatched to this element
 420    /// The imperative API equivalent to [`InteractiveElement::can_drop`]
 421    pub fn can_drop(&mut self, predicate: impl Fn(&dyn Any, &mut WindowContext) -> bool + 'static) {
 422        self.can_drop_predicate = Some(Box::new(predicate));
 423    }
 424
 425    /// Bind the given callback to click events of this element
 426    /// The imperative API equivalent to [`StatefulInteractiveElement::on_click`]
 427    ///
 428    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 429    pub fn on_click(&mut self, listener: impl Fn(&ClickEvent, &mut WindowContext) + 'static)
 430    where
 431        Self: Sized,
 432    {
 433        self.click_listeners
 434            .push(Box::new(move |event, cx| listener(event, cx)));
 435    }
 436
 437    /// On drag initiation, this callback will be used to create a new view to render the dragged value for a
 438    /// drag and drop operation. This API should also be used as the equivalent of 'on drag start' with
 439    /// the [`Self::on_drag_move`] API
 440    /// The imperative API equivalent to [`StatefulInteractiveElement::on_drag`]
 441    ///
 442    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 443    pub fn on_drag<T, W>(
 444        &mut self,
 445        value: T,
 446        constructor: impl Fn(&T, &mut WindowContext) -> View<W> + 'static,
 447    ) where
 448        Self: Sized,
 449        T: 'static,
 450        W: 'static + Render,
 451    {
 452        debug_assert!(
 453            self.drag_listener.is_none(),
 454            "calling on_drag more than once on the same element is not supported"
 455        );
 456        self.drag_listener = Some((
 457            Box::new(value),
 458            Box::new(move |value, cx| constructor(value.downcast_ref().unwrap(), cx).into()),
 459        ));
 460    }
 461
 462    /// Bind the given callback on the hover start and end events of this element. Note that the boolean
 463    /// passed to the callback is true when the hover starts and false when it ends.
 464    /// The imperative API equivalent to [`StatefulInteractiveElement::on_drag`]
 465    ///
 466    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 467    pub fn on_hover(&mut self, listener: impl Fn(&bool, &mut WindowContext) + 'static)
 468    where
 469        Self: Sized,
 470    {
 471        debug_assert!(
 472            self.hover_listener.is_none(),
 473            "calling on_hover more than once on the same element is not supported"
 474        );
 475        self.hover_listener = Some(Box::new(listener));
 476    }
 477
 478    /// Use the given callback to construct a new tooltip view when the mouse hovers over this element.
 479    /// The imperative API equivalent to [`InteractiveElement::tooltip`]
 480    pub fn tooltip(&mut self, build_tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static)
 481    where
 482        Self: Sized,
 483    {
 484        debug_assert!(
 485            self.tooltip_builder.is_none(),
 486            "calling tooltip more than once on the same element is not supported"
 487        );
 488        self.tooltip_builder = Some(TooltipBuilder {
 489            build: Rc::new(build_tooltip),
 490            hoverable: false,
 491        });
 492    }
 493
 494    /// Use the given callback to construct a new tooltip view when the mouse hovers over this element.
 495    /// The tooltip itself is also hoverable and won't disappear when the user moves the mouse into
 496    /// the tooltip. The imperative API equivalent to [`InteractiveElement::hoverable_tooltip`]
 497    pub fn hoverable_tooltip(
 498        &mut self,
 499        build_tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static,
 500    ) where
 501        Self: Sized,
 502    {
 503        debug_assert!(
 504            self.tooltip_builder.is_none(),
 505            "calling tooltip more than once on the same element is not supported"
 506        );
 507        self.tooltip_builder = Some(TooltipBuilder {
 508            build: Rc::new(build_tooltip),
 509            hoverable: true,
 510        });
 511    }
 512
 513    /// Block the mouse from interacting with this element or any of its children
 514    /// The imperative API equivalent to [`InteractiveElement::block_mouse`]
 515    pub fn occlude_mouse(&mut self) {
 516        self.occlude_mouse = true;
 517    }
 518}
 519
 520/// A trait for elements that want to use the standard GPUI event handlers that don't
 521/// require any state.
 522pub trait InteractiveElement: Sized {
 523    /// Retrieve the interactivity state associated with this element
 524    fn interactivity(&mut self) -> &mut Interactivity;
 525
 526    /// Assign this element to a group of elements that can be styled together
 527    fn group(mut self, group: impl Into<SharedString>) -> Self {
 528        self.interactivity().group = Some(group.into());
 529        self
 530    }
 531
 532    /// Assign this element an ID, so that it can be used with interactivity
 533    fn id(mut self, id: impl Into<ElementId>) -> Stateful<Self> {
 534        self.interactivity().element_id = Some(id.into());
 535
 536        Stateful { element: self }
 537    }
 538
 539    /// Track the focus state of the given focus handle on this element.
 540    /// If the focus handle is focused by the application, this element will
 541    /// apply its focused styles.
 542    fn track_focus(mut self, focus_handle: &FocusHandle) -> Focusable<Self> {
 543        self.interactivity().focusable = true;
 544        self.interactivity().tracked_focus_handle = Some(focus_handle.clone());
 545        Focusable { element: self }
 546    }
 547
 548    /// Set the keymap context for this element. This will be used to determine
 549    /// which action to dispatch from the keymap.
 550    fn key_context<C, E>(mut self, key_context: C) -> Self
 551    where
 552        C: TryInto<KeyContext, Error = E>,
 553        E: Debug,
 554    {
 555        if let Some(key_context) = key_context.try_into().log_err() {
 556            self.interactivity().key_context = Some(key_context);
 557        }
 558        self
 559    }
 560
 561    /// Apply the given style to this element when the mouse hovers over it
 562    fn hover(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self {
 563        debug_assert!(
 564            self.interactivity().hover_style.is_none(),
 565            "hover style already set"
 566        );
 567        self.interactivity().hover_style = Some(Box::new(f(StyleRefinement::default())));
 568        self
 569    }
 570
 571    /// Apply the given style to this element when the mouse hovers over a group member
 572    fn group_hover(
 573        mut self,
 574        group_name: impl Into<SharedString>,
 575        f: impl FnOnce(StyleRefinement) -> StyleRefinement,
 576    ) -> Self {
 577        self.interactivity().group_hover_style = Some(GroupStyle {
 578            group: group_name.into(),
 579            style: Box::new(f(StyleRefinement::default())),
 580        });
 581        self
 582    }
 583
 584    /// Bind the given callback to the mouse down event for the given mouse button,
 585    /// the fluent API equivalent to [`Interactivity::on_mouse_down`]
 586    ///
 587    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to the view state from this callback.
 588    fn on_mouse_down(
 589        mut self,
 590        button: MouseButton,
 591        listener: impl Fn(&MouseDownEvent, &mut WindowContext) + 'static,
 592    ) -> Self {
 593        self.interactivity().on_mouse_down(button, listener);
 594        self
 595    }
 596
 597    #[cfg(any(test, feature = "test-support"))]
 598    /// Set a key that can be used to look up this element's bounds
 599    /// in the [`VisualTestContext::debug_bounds`] map
 600    /// This is a noop in release builds
 601    fn debug_selector(mut self, f: impl FnOnce() -> String) -> Self {
 602        self.interactivity().debug_selector = Some(f());
 603        self
 604    }
 605
 606    #[cfg(not(any(test, feature = "test-support")))]
 607    /// Set a key that can be used to look up this element's bounds
 608    /// in the [`VisualTestContext::debug_bounds`] map
 609    /// This is a noop in release builds
 610    #[inline]
 611    fn debug_selector(self, _: impl FnOnce() -> String) -> Self {
 612        self
 613    }
 614
 615    /// Bind the given callback to the mouse down event for any button, during the capture phase
 616    /// the fluent API equivalent to [`Interactivity::capture_any_mouse_down`]
 617    ///
 618    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 619    fn capture_any_mouse_down(
 620        mut self,
 621        listener: impl Fn(&MouseDownEvent, &mut WindowContext) + 'static,
 622    ) -> Self {
 623        self.interactivity().capture_any_mouse_down(listener);
 624        self
 625    }
 626
 627    /// Bind the given callback to the mouse down event for any button, during the capture phase
 628    /// the fluent API equivalent to [`Interactivity::on_any_mouse_down`]
 629    ///
 630    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 631    fn on_any_mouse_down(
 632        mut self,
 633        listener: impl Fn(&MouseDownEvent, &mut WindowContext) + 'static,
 634    ) -> Self {
 635        self.interactivity().on_any_mouse_down(listener);
 636        self
 637    }
 638
 639    /// Bind the given callback to the mouse up event for the given button, during the bubble phase
 640    /// the fluent API equivalent to [`Interactivity::on_mouse_up`]
 641    ///
 642    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 643    fn on_mouse_up(
 644        mut self,
 645        button: MouseButton,
 646        listener: impl Fn(&MouseUpEvent, &mut WindowContext) + 'static,
 647    ) -> Self {
 648        self.interactivity().on_mouse_up(button, listener);
 649        self
 650    }
 651
 652    /// Bind the given callback to the mouse up event for any button, during the capture phase
 653    /// the fluent API equivalent to [`Interactivity::capture_any_mouse_up`]
 654    ///
 655    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 656    fn capture_any_mouse_up(
 657        mut self,
 658        listener: impl Fn(&MouseUpEvent, &mut WindowContext) + 'static,
 659    ) -> Self {
 660        self.interactivity().capture_any_mouse_up(listener);
 661        self
 662    }
 663
 664    /// Bind the given callback to the mouse down event, on any button, during the capture phase,
 665    /// when the mouse is outside of the bounds of this element.
 666    /// The fluent API equivalent to [`Interactivity::on_mouse_down_out`]
 667    ///
 668    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 669    fn on_mouse_down_out(
 670        mut self,
 671        listener: impl Fn(&MouseDownEvent, &mut WindowContext) + 'static,
 672    ) -> Self {
 673        self.interactivity().on_mouse_down_out(listener);
 674        self
 675    }
 676
 677    /// Bind the given callback to the mouse up event, for the given button, during the capture phase,
 678    /// when the mouse is outside of the bounds of this element.
 679    /// The fluent API equivalent to [`Interactivity::on_mouse_up_out`]
 680    ///
 681    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 682    fn on_mouse_up_out(
 683        mut self,
 684        button: MouseButton,
 685        listener: impl Fn(&MouseUpEvent, &mut WindowContext) + 'static,
 686    ) -> Self {
 687        self.interactivity().on_mouse_up_out(button, listener);
 688        self
 689    }
 690
 691    /// Bind the given callback to the mouse move event, during the bubble phase
 692    /// The fluent API equivalent to [`Interactivity::on_mouse_move`]
 693    ///
 694    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 695    fn on_mouse_move(
 696        mut self,
 697        listener: impl Fn(&MouseMoveEvent, &mut WindowContext) + 'static,
 698    ) -> Self {
 699        self.interactivity().on_mouse_move(listener);
 700        self
 701    }
 702
 703    /// Bind the given callback to the mouse drag event of the given type. Note that this
 704    /// will be called for all move events, inside or outside of this element, as long as the
 705    /// drag was started with this element under the mouse. Useful for implementing draggable
 706    /// UIs that don't conform to a drag and drop style interaction, like resizing.
 707    /// The fluent API equivalent to [`Interactivity::on_drag_move`]
 708    ///
 709    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 710    fn on_drag_move<T: 'static>(
 711        mut self,
 712        listener: impl Fn(&DragMoveEvent<T>, &mut WindowContext) + 'static,
 713    ) -> Self {
 714        self.interactivity().on_drag_move(listener);
 715        self
 716    }
 717
 718    /// Bind the given callback to scroll wheel events during the bubble phase
 719    /// The fluent API equivalent to [`Interactivity::on_scroll_wheel`]
 720    ///
 721    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 722    fn on_scroll_wheel(
 723        mut self,
 724        listener: impl Fn(&ScrollWheelEvent, &mut WindowContext) + 'static,
 725    ) -> Self {
 726        self.interactivity().on_scroll_wheel(listener);
 727        self
 728    }
 729
 730    /// Capture the given action, before normal action dispatch can fire
 731    /// The fluent API equivalent to [`Interactivity::on_scroll_wheel`]
 732    ///
 733    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 734    fn capture_action<A: Action>(
 735        mut self,
 736        listener: impl Fn(&A, &mut WindowContext) + 'static,
 737    ) -> Self {
 738        self.interactivity().capture_action(listener);
 739        self
 740    }
 741
 742    /// Bind the given callback to an action dispatch during the bubble phase
 743    /// The fluent API equivalent to [`Interactivity::on_action`]
 744    ///
 745    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 746    fn on_action<A: Action>(mut self, listener: impl Fn(&A, &mut WindowContext) + 'static) -> Self {
 747        self.interactivity().on_action(listener);
 748        self
 749    }
 750
 751    /// Bind the given callback to an action dispatch, based on a dynamic action parameter
 752    /// instead of a type parameter. Useful for component libraries that want to expose
 753    /// action bindings to their users.
 754    /// The fluent API equivalent to [`Interactivity::on_boxed_action`]
 755    ///
 756    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 757    fn on_boxed_action(
 758        mut self,
 759        action: &dyn Action,
 760        listener: impl Fn(&dyn Action, &mut WindowContext) + 'static,
 761    ) -> Self {
 762        self.interactivity().on_boxed_action(action, listener);
 763        self
 764    }
 765
 766    /// Bind the given callback to key down events during the bubble phase
 767    /// The fluent API equivalent to [`Interactivity::on_key_down`]
 768    ///
 769    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 770    fn on_key_down(
 771        mut self,
 772        listener: impl Fn(&KeyDownEvent, &mut WindowContext) + 'static,
 773    ) -> Self {
 774        self.interactivity().on_key_down(listener);
 775        self
 776    }
 777
 778    /// Bind the given callback to key down events during the capture phase
 779    /// The fluent API equivalent to [`Interactivity::capture_key_down`]
 780    ///
 781    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 782    fn capture_key_down(
 783        mut self,
 784        listener: impl Fn(&KeyDownEvent, &mut WindowContext) + 'static,
 785    ) -> Self {
 786        self.interactivity().capture_key_down(listener);
 787        self
 788    }
 789
 790    /// Bind the given callback to key up events during the bubble phase
 791    /// The fluent API equivalent to [`Interactivity::on_key_up`]
 792    ///
 793    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 794    fn on_key_up(mut self, listener: impl Fn(&KeyUpEvent, &mut WindowContext) + 'static) -> Self {
 795        self.interactivity().on_key_up(listener);
 796        self
 797    }
 798
 799    /// Bind the given callback to key up events during the capture phase
 800    /// The fluent API equivalent to [`Interactivity::capture_key_up`]
 801    ///
 802    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 803    fn capture_key_up(
 804        mut self,
 805        listener: impl Fn(&KeyUpEvent, &mut WindowContext) + 'static,
 806    ) -> Self {
 807        self.interactivity().capture_key_up(listener);
 808        self
 809    }
 810
 811    /// Bind the given callback to modifiers changing events.
 812    /// The fluent API equivalent to [`Interactivity::on_modifiers_changed`]
 813    ///
 814    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 815    fn on_modifiers_changed(
 816        mut self,
 817        listener: impl Fn(&ModifiersChangedEvent, &mut WindowContext) + 'static,
 818    ) -> Self {
 819        self.interactivity().on_modifiers_changed(listener);
 820        self
 821    }
 822
 823    /// Apply the given style when the given data type is dragged over this element
 824    fn drag_over<S: 'static>(
 825        mut self,
 826        f: impl 'static + Fn(StyleRefinement, &S, &WindowContext) -> StyleRefinement,
 827    ) -> Self {
 828        self.interactivity().drag_over_styles.push((
 829            TypeId::of::<S>(),
 830            Box::new(move |currently_dragged: &dyn Any, cx| {
 831                f(
 832                    StyleRefinement::default(),
 833                    currently_dragged.downcast_ref::<S>().unwrap(),
 834                    cx,
 835                )
 836            }),
 837        ));
 838        self
 839    }
 840
 841    /// Apply the given style when the given data type is dragged over this element's group
 842    fn group_drag_over<S: 'static>(
 843        mut self,
 844        group_name: impl Into<SharedString>,
 845        f: impl FnOnce(StyleRefinement) -> StyleRefinement,
 846    ) -> Self {
 847        self.interactivity().group_drag_over_styles.push((
 848            TypeId::of::<S>(),
 849            GroupStyle {
 850                group: group_name.into(),
 851                style: Box::new(f(StyleRefinement::default())),
 852            },
 853        ));
 854        self
 855    }
 856
 857    /// Bind the given callback to drop events of the given type, whether or not the drag started on this element
 858    /// The fluent API equivalent to [`Interactivity::on_drop`]
 859    ///
 860    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 861    fn on_drop<T: 'static>(mut self, listener: impl Fn(&T, &mut WindowContext) + 'static) -> Self {
 862        self.interactivity().on_drop(listener);
 863        self
 864    }
 865
 866    /// Use the given predicate to determine whether or not a drop event should be dispatched to this element
 867    /// The fluent API equivalent to [`Interactivity::can_drop`]
 868    fn can_drop(
 869        mut self,
 870        predicate: impl Fn(&dyn Any, &mut WindowContext) -> bool + 'static,
 871    ) -> Self {
 872        self.interactivity().can_drop(predicate);
 873        self
 874    }
 875
 876    /// Block the mouse from interacting with this element or any of its children
 877    /// The fluent API equivalent to [`Interactivity::block_mouse`]
 878    fn occlude(mut self) -> Self {
 879        self.interactivity().occlude_mouse();
 880        self
 881    }
 882}
 883
 884/// A trait for elements that want to use the standard GPUI interactivity features
 885/// that require state.
 886pub trait StatefulInteractiveElement: InteractiveElement {
 887    /// Set this element to focusable.
 888    fn focusable(mut self) -> Focusable<Self> {
 889        self.interactivity().focusable = true;
 890        Focusable { element: self }
 891    }
 892
 893    /// Set the overflow x and y to scroll.
 894    fn overflow_scroll(mut self) -> Self {
 895        self.interactivity().base_style.overflow.x = Some(Overflow::Scroll);
 896        self.interactivity().base_style.overflow.y = Some(Overflow::Scroll);
 897        self
 898    }
 899
 900    /// Set the overflow x to scroll.
 901    fn overflow_x_scroll(mut self) -> Self {
 902        self.interactivity().base_style.overflow.x = Some(Overflow::Scroll);
 903        self
 904    }
 905
 906    /// Set the overflow y to scroll.
 907    fn overflow_y_scroll(mut self) -> Self {
 908        self.interactivity().base_style.overflow.y = Some(Overflow::Scroll);
 909        self
 910    }
 911
 912    /// Track the scroll state of this element with the given handle.
 913    fn track_scroll(mut self, scroll_handle: &ScrollHandle) -> Self {
 914        self.interactivity().tracked_scroll_handle = Some(scroll_handle.clone());
 915        self
 916    }
 917
 918    /// Track the scroll state of this element with the given handle.
 919    fn anchor_scroll(mut self, scroll_anchor: Option<ScrollAnchor>) -> Self {
 920        self.interactivity().scroll_anchor = scroll_anchor;
 921        self
 922    }
 923
 924    /// Set the given styles to be applied when this element is active.
 925    fn active(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self
 926    where
 927        Self: Sized,
 928    {
 929        self.interactivity().active_style = Some(Box::new(f(StyleRefinement::default())));
 930        self
 931    }
 932
 933    /// Set the given styles to be applied when this element's group is active.
 934    fn group_active(
 935        mut self,
 936        group_name: impl Into<SharedString>,
 937        f: impl FnOnce(StyleRefinement) -> StyleRefinement,
 938    ) -> Self
 939    where
 940        Self: Sized,
 941    {
 942        self.interactivity().group_active_style = Some(GroupStyle {
 943            group: group_name.into(),
 944            style: Box::new(f(StyleRefinement::default())),
 945        });
 946        self
 947    }
 948
 949    /// Bind the given callback to click events of this element
 950    /// The fluent API equivalent to [`Interactivity::on_click`]
 951    ///
 952    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 953    fn on_click(mut self, listener: impl Fn(&ClickEvent, &mut WindowContext) + 'static) -> Self
 954    where
 955        Self: Sized,
 956    {
 957        self.interactivity().on_click(listener);
 958        self
 959    }
 960
 961    /// On drag initiation, this callback will be used to create a new view to render the dragged value for a
 962    /// drag and drop operation. This API should also be used as the equivalent of 'on drag start' with
 963    /// the [`Self::on_drag_move`] API
 964    /// The fluent API equivalent to [`Interactivity::on_drag`]
 965    ///
 966    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 967    fn on_drag<T, W>(
 968        mut self,
 969        value: T,
 970        constructor: impl Fn(&T, &mut WindowContext) -> View<W> + 'static,
 971    ) -> Self
 972    where
 973        Self: Sized,
 974        T: 'static,
 975        W: 'static + Render,
 976    {
 977        self.interactivity().on_drag(value, constructor);
 978        self
 979    }
 980
 981    /// Bind the given callback on the hover start and end events of this element. Note that the boolean
 982    /// passed to the callback is true when the hover starts and false when it ends.
 983    /// The fluent API equivalent to [`Interactivity::on_hover`]
 984    ///
 985    /// See [`ViewContext::listener`](crate::ViewContext::listener) to get access to a view's state from this callback.
 986    fn on_hover(mut self, listener: impl Fn(&bool, &mut WindowContext) + 'static) -> Self
 987    where
 988        Self: Sized,
 989    {
 990        self.interactivity().on_hover(listener);
 991        self
 992    }
 993
 994    /// Use the given callback to construct a new tooltip view when the mouse hovers over this element.
 995    /// The fluent API equivalent to [`Interactivity::tooltip`]
 996    fn tooltip(mut self, build_tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static) -> Self
 997    where
 998        Self: Sized,
 999    {
1000        self.interactivity().tooltip(build_tooltip);
1001        self
1002    }
1003
1004    /// Use the given callback to construct a new tooltip view when the mouse hovers over this element.
1005    /// The tooltip itself is also hoverable and won't disappear when the user moves the mouse into
1006    /// the tooltip. The fluent API equivalent to [`Interactivity::hoverable_tooltip`]
1007    fn hoverable_tooltip(
1008        mut self,
1009        build_tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static,
1010    ) -> Self
1011    where
1012        Self: Sized,
1013    {
1014        self.interactivity().hoverable_tooltip(build_tooltip);
1015        self
1016    }
1017}
1018
1019/// A trait for providing focus related APIs to interactive elements
1020pub trait FocusableElement: InteractiveElement {
1021    /// Set the given styles to be applied when this element, specifically, is focused.
1022    fn focus(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self
1023    where
1024        Self: Sized,
1025    {
1026        self.interactivity().focus_style = Some(Box::new(f(StyleRefinement::default())));
1027        self
1028    }
1029
1030    /// Set the given styles to be applied when this element is inside another element that is focused.
1031    fn in_focus(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self
1032    where
1033        Self: Sized,
1034    {
1035        self.interactivity().in_focus_style = Some(Box::new(f(StyleRefinement::default())));
1036        self
1037    }
1038}
1039
1040pub(crate) type MouseDownListener =
1041    Box<dyn Fn(&MouseDownEvent, DispatchPhase, &Hitbox, &mut WindowContext) + 'static>;
1042pub(crate) type MouseUpListener =
1043    Box<dyn Fn(&MouseUpEvent, DispatchPhase, &Hitbox, &mut WindowContext) + 'static>;
1044
1045pub(crate) type MouseMoveListener =
1046    Box<dyn Fn(&MouseMoveEvent, DispatchPhase, &Hitbox, &mut WindowContext) + 'static>;
1047
1048pub(crate) type ScrollWheelListener =
1049    Box<dyn Fn(&ScrollWheelEvent, DispatchPhase, &Hitbox, &mut WindowContext) + 'static>;
1050
1051pub(crate) type ClickListener = Box<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>;
1052
1053pub(crate) type DragListener = Box<dyn Fn(&dyn Any, &mut WindowContext) -> AnyView + 'static>;
1054
1055type DropListener = Box<dyn Fn(&dyn Any, &mut WindowContext) + 'static>;
1056
1057type CanDropPredicate = Box<dyn Fn(&dyn Any, &mut WindowContext) -> bool + 'static>;
1058
1059pub(crate) struct TooltipBuilder {
1060    build: Rc<dyn Fn(&mut WindowContext) -> AnyView + 'static>,
1061    hoverable: bool,
1062}
1063
1064pub(crate) type KeyDownListener =
1065    Box<dyn Fn(&KeyDownEvent, DispatchPhase, &mut WindowContext) + 'static>;
1066
1067pub(crate) type KeyUpListener =
1068    Box<dyn Fn(&KeyUpEvent, DispatchPhase, &mut WindowContext) + 'static>;
1069
1070pub(crate) type ModifiersChangedListener =
1071    Box<dyn Fn(&ModifiersChangedEvent, &mut WindowContext) + 'static>;
1072
1073pub(crate) type ActionListener = Box<dyn Fn(&dyn Any, DispatchPhase, &mut WindowContext) + 'static>;
1074
1075/// Construct a new [`Div`] element
1076#[track_caller]
1077pub fn div() -> Div {
1078    #[cfg(debug_assertions)]
1079    let interactivity = Interactivity {
1080        location: Some(*core::panic::Location::caller()),
1081        ..Default::default()
1082    };
1083
1084    #[cfg(not(debug_assertions))]
1085    let interactivity = Interactivity::default();
1086
1087    Div {
1088        interactivity,
1089        children: SmallVec::default(),
1090    }
1091}
1092
1093/// A [`Div`] element, the all-in-one element for building complex UIs in GPUI
1094pub struct Div {
1095    interactivity: Interactivity,
1096    children: SmallVec<[AnyElement; 2]>,
1097}
1098
1099/// A frame state for a `Div` element, which contains layout IDs for its children.
1100///
1101/// This struct is used internally by the `Div` element to manage the layout state of its children
1102/// during the UI update cycle. It holds a small vector of `LayoutId` values, each corresponding to
1103/// a child element of the `Div`. These IDs are used to query the layout engine for the computed
1104/// bounds of the children after the layout phase is complete.
1105pub struct DivFrameState {
1106    child_layout_ids: SmallVec<[LayoutId; 2]>,
1107}
1108
1109impl Styled for Div {
1110    fn style(&mut self) -> &mut StyleRefinement {
1111        &mut self.interactivity.base_style
1112    }
1113}
1114
1115impl InteractiveElement for Div {
1116    fn interactivity(&mut self) -> &mut Interactivity {
1117        &mut self.interactivity
1118    }
1119}
1120
1121impl ParentElement for Div {
1122    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
1123        self.children.extend(elements)
1124    }
1125}
1126
1127impl Element for Div {
1128    type RequestLayoutState = DivFrameState;
1129    type PrepaintState = Option<Hitbox>;
1130
1131    fn id(&self) -> Option<ElementId> {
1132        self.interactivity.element_id.clone()
1133    }
1134
1135    fn request_layout(
1136        &mut self,
1137        global_id: Option<&GlobalElementId>,
1138        cx: &mut WindowContext,
1139    ) -> (LayoutId, Self::RequestLayoutState) {
1140        let mut child_layout_ids = SmallVec::new();
1141        let layout_id = self
1142            .interactivity
1143            .request_layout(global_id, cx, |style, cx| {
1144                cx.with_text_style(style.text_style().cloned(), |cx| {
1145                    child_layout_ids = self
1146                        .children
1147                        .iter_mut()
1148                        .map(|child| child.request_layout(cx))
1149                        .collect::<SmallVec<_>>();
1150                    cx.request_layout(style, child_layout_ids.iter().copied())
1151                })
1152            });
1153        (layout_id, DivFrameState { child_layout_ids })
1154    }
1155
1156    fn prepaint(
1157        &mut self,
1158        global_id: Option<&GlobalElementId>,
1159        bounds: Bounds<Pixels>,
1160        request_layout: &mut Self::RequestLayoutState,
1161        cx: &mut WindowContext,
1162    ) -> Option<Hitbox> {
1163        let mut child_min = point(Pixels::MAX, Pixels::MAX);
1164        let mut child_max = Point::default();
1165        if let Some(handle) = self.interactivity.scroll_anchor.as_ref() {
1166            *handle.last_origin.borrow_mut() = bounds.origin - cx.element_offset();
1167        }
1168        let content_size = if request_layout.child_layout_ids.is_empty() {
1169            bounds.size
1170        } else if let Some(scroll_handle) = self.interactivity.tracked_scroll_handle.as_ref() {
1171            let mut state = scroll_handle.0.borrow_mut();
1172            state.child_bounds = Vec::with_capacity(request_layout.child_layout_ids.len());
1173            state.bounds = bounds;
1174            let requested = state.requested_scroll_top.take();
1175
1176            for (ix, child_layout_id) in request_layout.child_layout_ids.iter().enumerate() {
1177                let child_bounds = cx.layout_bounds(*child_layout_id);
1178                child_min = child_min.min(&child_bounds.origin);
1179                child_max = child_max.max(&child_bounds.lower_right());
1180                state.child_bounds.push(child_bounds);
1181
1182                if let Some(requested) = requested.as_ref() {
1183                    if requested.0 == ix {
1184                        *state.offset.borrow_mut() =
1185                            bounds.origin - (child_bounds.origin - point(px(0.), requested.1));
1186                    }
1187                }
1188            }
1189            (child_max - child_min).into()
1190        } else {
1191            for child_layout_id in &request_layout.child_layout_ids {
1192                let child_bounds = cx.layout_bounds(*child_layout_id);
1193                child_min = child_min.min(&child_bounds.origin);
1194                child_max = child_max.max(&child_bounds.lower_right());
1195            }
1196            (child_max - child_min).into()
1197        };
1198
1199        self.interactivity.prepaint(
1200            global_id,
1201            bounds,
1202            content_size,
1203            cx,
1204            |_style, scroll_offset, hitbox, cx| {
1205                cx.with_element_offset(scroll_offset, |cx| {
1206                    for child in &mut self.children {
1207                        child.prepaint(cx);
1208                    }
1209                });
1210                hitbox
1211            },
1212        )
1213    }
1214
1215    fn paint(
1216        &mut self,
1217        global_id: Option<&GlobalElementId>,
1218        bounds: Bounds<Pixels>,
1219        _request_layout: &mut Self::RequestLayoutState,
1220        hitbox: &mut Option<Hitbox>,
1221        cx: &mut WindowContext,
1222    ) {
1223        self.interactivity
1224            .paint(global_id, bounds, hitbox.as_ref(), cx, |_style, cx| {
1225                for child in &mut self.children {
1226                    child.paint(cx);
1227                }
1228            });
1229    }
1230}
1231
1232impl IntoElement for Div {
1233    type Element = Self;
1234
1235    fn into_element(self) -> Self::Element {
1236        self
1237    }
1238}
1239
1240/// The interactivity struct. Powers all of the general-purpose
1241/// interactivity in the `Div` element.
1242#[derive(Default)]
1243pub struct Interactivity {
1244    /// The element ID of the element. In id is required to support a stateful subset of the interactivity such as on_click.
1245    pub element_id: Option<ElementId>,
1246    /// Whether the element was clicked. This will only be present after layout.
1247    pub active: Option<bool>,
1248    /// Whether the element was hovered. This will only be present after paint if an hitbox
1249    /// was created for the interactive element.
1250    pub hovered: Option<bool>,
1251    pub(crate) tooltip_id: Option<TooltipId>,
1252    pub(crate) content_size: Size<Pixels>,
1253    pub(crate) key_context: Option<KeyContext>,
1254    pub(crate) focusable: bool,
1255    pub(crate) tracked_focus_handle: Option<FocusHandle>,
1256    pub(crate) tracked_scroll_handle: Option<ScrollHandle>,
1257    pub(crate) scroll_anchor: Option<ScrollAnchor>,
1258    pub(crate) scroll_offset: Option<Rc<RefCell<Point<Pixels>>>>,
1259    pub(crate) group: Option<SharedString>,
1260    /// The base style of the element, before any modifications are applied
1261    /// by focus, active, etc.
1262    pub base_style: Box<StyleRefinement>,
1263    pub(crate) focus_style: Option<Box<StyleRefinement>>,
1264    pub(crate) in_focus_style: Option<Box<StyleRefinement>>,
1265    pub(crate) hover_style: Option<Box<StyleRefinement>>,
1266    pub(crate) group_hover_style: Option<GroupStyle>,
1267    pub(crate) active_style: Option<Box<StyleRefinement>>,
1268    pub(crate) group_active_style: Option<GroupStyle>,
1269    pub(crate) drag_over_styles: Vec<(
1270        TypeId,
1271        Box<dyn Fn(&dyn Any, &mut WindowContext) -> StyleRefinement>,
1272    )>,
1273    pub(crate) group_drag_over_styles: Vec<(TypeId, GroupStyle)>,
1274    pub(crate) mouse_down_listeners: Vec<MouseDownListener>,
1275    pub(crate) mouse_up_listeners: Vec<MouseUpListener>,
1276    pub(crate) mouse_move_listeners: Vec<MouseMoveListener>,
1277    pub(crate) scroll_wheel_listeners: Vec<ScrollWheelListener>,
1278    pub(crate) key_down_listeners: Vec<KeyDownListener>,
1279    pub(crate) key_up_listeners: Vec<KeyUpListener>,
1280    pub(crate) modifiers_changed_listeners: Vec<ModifiersChangedListener>,
1281    pub(crate) action_listeners: Vec<(TypeId, ActionListener)>,
1282    pub(crate) drop_listeners: Vec<(TypeId, DropListener)>,
1283    pub(crate) can_drop_predicate: Option<CanDropPredicate>,
1284    pub(crate) click_listeners: Vec<ClickListener>,
1285    pub(crate) drag_listener: Option<(Box<dyn Any>, DragListener)>,
1286    pub(crate) hover_listener: Option<Box<dyn Fn(&bool, &mut WindowContext)>>,
1287    pub(crate) tooltip_builder: Option<TooltipBuilder>,
1288    pub(crate) occlude_mouse: bool,
1289
1290    #[cfg(debug_assertions)]
1291    pub(crate) location: Option<core::panic::Location<'static>>,
1292
1293    #[cfg(any(test, feature = "test-support"))]
1294    pub(crate) debug_selector: Option<String>,
1295}
1296
1297impl Interactivity {
1298    /// Layout this element according to this interactivity state's configured styles
1299    pub fn request_layout(
1300        &mut self,
1301        global_id: Option<&GlobalElementId>,
1302        cx: &mut WindowContext,
1303        f: impl FnOnce(Style, &mut WindowContext) -> LayoutId,
1304    ) -> LayoutId {
1305        cx.with_optional_element_state::<InteractiveElementState, _>(
1306            global_id,
1307            |element_state, cx| {
1308                let mut element_state =
1309                    element_state.map(|element_state| element_state.unwrap_or_default());
1310
1311                if let Some(element_state) = element_state.as_ref() {
1312                    if cx.has_active_drag() {
1313                        if let Some(pending_mouse_down) = element_state.pending_mouse_down.as_ref()
1314                        {
1315                            *pending_mouse_down.borrow_mut() = None;
1316                        }
1317                        if let Some(clicked_state) = element_state.clicked_state.as_ref() {
1318                            *clicked_state.borrow_mut() = ElementClickedState::default();
1319                        }
1320                    }
1321                }
1322
1323                // Ensure we store a focus handle in our element state if we're focusable.
1324                // If there's an explicit focus handle we're tracking, use that. Otherwise
1325                // create a new handle and store it in the element state, which lives for as
1326                // as frames contain an element with this id.
1327                if self.focusable && self.tracked_focus_handle.is_none() {
1328                    if let Some(element_state) = element_state.as_mut() {
1329                        self.tracked_focus_handle = Some(
1330                            element_state
1331                                .focus_handle
1332                                .get_or_insert_with(|| cx.focus_handle())
1333                                .clone(),
1334                        );
1335                    }
1336                }
1337
1338                if let Some(scroll_handle) = self.tracked_scroll_handle.as_ref() {
1339                    self.scroll_offset = Some(scroll_handle.0.borrow().offset.clone());
1340                } else if self.base_style.overflow.x == Some(Overflow::Scroll)
1341                    || self.base_style.overflow.y == Some(Overflow::Scroll)
1342                {
1343                    if let Some(element_state) = element_state.as_mut() {
1344                        self.scroll_offset = Some(
1345                            element_state
1346                                .scroll_offset
1347                                .get_or_insert_with(Rc::default)
1348                                .clone(),
1349                        );
1350                    }
1351                }
1352
1353                let style = self.compute_style_internal(None, element_state.as_mut(), cx);
1354                let layout_id = f(style, cx);
1355                (layout_id, element_state)
1356            },
1357        )
1358    }
1359
1360    /// Commit the bounds of this element according to this interactivity state's configured styles.
1361    pub fn prepaint<R>(
1362        &mut self,
1363        global_id: Option<&GlobalElementId>,
1364        bounds: Bounds<Pixels>,
1365        content_size: Size<Pixels>,
1366        cx: &mut WindowContext,
1367        f: impl FnOnce(&Style, Point<Pixels>, Option<Hitbox>, &mut WindowContext) -> R,
1368    ) -> R {
1369        self.content_size = content_size;
1370        if let Some(focus_handle) = self.tracked_focus_handle.as_ref() {
1371            cx.set_focus_handle(focus_handle);
1372        }
1373        cx.with_optional_element_state::<InteractiveElementState, _>(
1374            global_id,
1375            |element_state, cx| {
1376                let mut element_state =
1377                    element_state.map(|element_state| element_state.unwrap_or_default());
1378                let style = self.compute_style_internal(None, element_state.as_mut(), cx);
1379
1380                if let Some(element_state) = element_state.as_ref() {
1381                    if let Some(clicked_state) = element_state.clicked_state.as_ref() {
1382                        let clicked_state = clicked_state.borrow();
1383                        self.active = Some(clicked_state.element);
1384                    }
1385
1386                    if let Some(active_tooltip) = element_state.active_tooltip.as_ref() {
1387                        if let Some(active_tooltip) = active_tooltip.borrow().as_ref() {
1388                            if let Some(tooltip) = active_tooltip.tooltip.clone() {
1389                                self.tooltip_id = Some(cx.set_tooltip(tooltip));
1390                            }
1391                        }
1392                    }
1393                }
1394
1395                cx.with_text_style(style.text_style().cloned(), |cx| {
1396                    cx.with_content_mask(style.overflow_mask(bounds, cx.rem_size()), |cx| {
1397                        let hitbox = if self.should_insert_hitbox(&style) {
1398                            Some(cx.insert_hitbox(bounds, self.occlude_mouse))
1399                        } else {
1400                            None
1401                        };
1402
1403                        let scroll_offset = self.clamp_scroll_position(bounds, &style, cx);
1404                        let result = f(&style, scroll_offset, hitbox, cx);
1405                        (result, element_state)
1406                    })
1407                })
1408            },
1409        )
1410    }
1411
1412    fn should_insert_hitbox(&self, style: &Style) -> bool {
1413        self.occlude_mouse
1414            || style.mouse_cursor.is_some()
1415            || self.group.is_some()
1416            || self.scroll_offset.is_some()
1417            || self.tracked_focus_handle.is_some()
1418            || self.hover_style.is_some()
1419            || self.group_hover_style.is_some()
1420            || !self.mouse_up_listeners.is_empty()
1421            || !self.mouse_down_listeners.is_empty()
1422            || !self.mouse_move_listeners.is_empty()
1423            || !self.click_listeners.is_empty()
1424            || !self.scroll_wheel_listeners.is_empty()
1425            || self.drag_listener.is_some()
1426            || !self.drop_listeners.is_empty()
1427            || self.tooltip_builder.is_some()
1428    }
1429
1430    fn clamp_scroll_position(
1431        &self,
1432        bounds: Bounds<Pixels>,
1433        style: &Style,
1434        cx: &mut WindowContext,
1435    ) -> Point<Pixels> {
1436        if let Some(scroll_offset) = self.scroll_offset.as_ref() {
1437            if let Some(scroll_handle) = &self.tracked_scroll_handle {
1438                scroll_handle.0.borrow_mut().overflow = style.overflow;
1439            }
1440
1441            let rem_size = cx.rem_size();
1442            let padding_size = size(
1443                style
1444                    .padding
1445                    .left
1446                    .to_pixels(bounds.size.width.into(), rem_size)
1447                    + style
1448                        .padding
1449                        .right
1450                        .to_pixels(bounds.size.width.into(), rem_size),
1451                style
1452                    .padding
1453                    .top
1454                    .to_pixels(bounds.size.height.into(), rem_size)
1455                    + style
1456                        .padding
1457                        .bottom
1458                        .to_pixels(bounds.size.height.into(), rem_size),
1459            );
1460            let scroll_max = (self.content_size + padding_size - bounds.size).max(&Size::default());
1461            // Clamp scroll offset in case scroll max is smaller now (e.g., if children
1462            // were removed or the bounds became larger).
1463            let mut scroll_offset = scroll_offset.borrow_mut();
1464            scroll_offset.x = scroll_offset.x.clamp(-scroll_max.width, px(0.));
1465            scroll_offset.y = scroll_offset.y.clamp(-scroll_max.height, px(0.));
1466            *scroll_offset
1467        } else {
1468            Point::default()
1469        }
1470    }
1471
1472    /// Paint this element according to this interactivity state's configured styles
1473    /// and bind the element's mouse and keyboard events.
1474    ///
1475    /// content_size is the size of the content of the element, which may be larger than the
1476    /// element's bounds if the element is scrollable.
1477    ///
1478    /// the final computed style will be passed to the provided function, along
1479    /// with the current scroll offset
1480    pub fn paint(
1481        &mut self,
1482        global_id: Option<&GlobalElementId>,
1483        bounds: Bounds<Pixels>,
1484        hitbox: Option<&Hitbox>,
1485        cx: &mut WindowContext,
1486        f: impl FnOnce(&Style, &mut WindowContext),
1487    ) {
1488        self.hovered = hitbox.map(|hitbox| hitbox.is_hovered(cx));
1489        cx.with_optional_element_state::<InteractiveElementState, _>(
1490            global_id,
1491            |element_state, cx| {
1492                let mut element_state =
1493                    element_state.map(|element_state| element_state.unwrap_or_default());
1494
1495                let style = self.compute_style_internal(hitbox, element_state.as_mut(), cx);
1496
1497                #[cfg(any(feature = "test-support", test))]
1498                if let Some(debug_selector) = &self.debug_selector {
1499                    cx.window
1500                        .next_frame
1501                        .debug_bounds
1502                        .insert(debug_selector.clone(), bounds);
1503                }
1504
1505                self.paint_hover_group_handler(cx);
1506
1507                if style.visibility == Visibility::Hidden {
1508                    return ((), element_state);
1509                }
1510
1511                cx.with_element_opacity(style.opacity, |cx| {
1512                    style.paint(bounds, cx, |cx: &mut WindowContext| {
1513                        cx.with_text_style(style.text_style().cloned(), |cx| {
1514                            cx.with_content_mask(
1515                                style.overflow_mask(bounds, cx.rem_size()),
1516                                |cx| {
1517                                    if let Some(hitbox) = hitbox {
1518                                        #[cfg(debug_assertions)]
1519                                        self.paint_debug_info(global_id, hitbox, &style, cx);
1520
1521                                        if !cx.has_active_drag() {
1522                                            if let Some(mouse_cursor) = style.mouse_cursor {
1523                                                cx.set_cursor_style(mouse_cursor, hitbox);
1524                                            }
1525                                        }
1526
1527                                        if let Some(group) = self.group.clone() {
1528                                            GroupHitboxes::push(group, hitbox.id, cx);
1529                                        }
1530
1531                                        self.paint_mouse_listeners(
1532                                            hitbox,
1533                                            element_state.as_mut(),
1534                                            cx,
1535                                        );
1536                                        self.paint_scroll_listener(hitbox, &style, cx);
1537                                    }
1538
1539                                    self.paint_keyboard_listeners(cx);
1540                                    f(&style, cx);
1541
1542                                    if hitbox.is_some() {
1543                                        if let Some(group) = self.group.as_ref() {
1544                                            GroupHitboxes::pop(group, cx);
1545                                        }
1546                                    }
1547                                },
1548                            );
1549                        });
1550                    });
1551                });
1552
1553                ((), element_state)
1554            },
1555        );
1556    }
1557
1558    #[cfg(debug_assertions)]
1559    fn paint_debug_info(
1560        &self,
1561        global_id: Option<&GlobalElementId>,
1562        hitbox: &Hitbox,
1563        style: &Style,
1564        cx: &mut WindowContext,
1565    ) {
1566        if global_id.is_some()
1567            && (style.debug || style.debug_below || cx.has_global::<crate::DebugBelow>())
1568            && hitbox.is_hovered(cx)
1569        {
1570            const FONT_SIZE: crate::Pixels = crate::Pixels(10.);
1571            let element_id = format!("{:?}", global_id.unwrap());
1572            let str_len = element_id.len();
1573
1574            let render_debug_text = |cx: &mut WindowContext| {
1575                if let Some(text) = cx
1576                    .text_system()
1577                    .shape_text(
1578                        element_id.into(),
1579                        FONT_SIZE,
1580                        &[cx.text_style().to_run(str_len)],
1581                        None,
1582                    )
1583                    .ok()
1584                    .and_then(|mut text| text.pop())
1585                {
1586                    text.paint(hitbox.origin, FONT_SIZE, cx).ok();
1587
1588                    let text_bounds = crate::Bounds {
1589                        origin: hitbox.origin,
1590                        size: text.size(FONT_SIZE),
1591                    };
1592                    if self.location.is_some()
1593                        && text_bounds.contains(&cx.mouse_position())
1594                        && cx.modifiers().secondary()
1595                    {
1596                        let secondary_held = cx.modifiers().secondary();
1597                        cx.on_key_event({
1598                            move |e: &crate::ModifiersChangedEvent, _phase, cx| {
1599                                if e.modifiers.secondary() != secondary_held
1600                                    && text_bounds.contains(&cx.mouse_position())
1601                                {
1602                                    cx.refresh();
1603                                }
1604                            }
1605                        });
1606
1607                        let was_hovered = hitbox.is_hovered(cx);
1608                        cx.on_mouse_event({
1609                            let hitbox = hitbox.clone();
1610                            move |_: &MouseMoveEvent, phase, cx| {
1611                                if phase == DispatchPhase::Capture {
1612                                    let hovered = hitbox.is_hovered(cx);
1613                                    if hovered != was_hovered {
1614                                        cx.refresh();
1615                                    }
1616                                }
1617                            }
1618                        });
1619
1620                        cx.on_mouse_event({
1621                            let hitbox = hitbox.clone();
1622                            let location = self.location.unwrap();
1623                            move |e: &crate::MouseDownEvent, phase, cx| {
1624                                if text_bounds.contains(&e.position)
1625                                    && phase.capture()
1626                                    && hitbox.is_hovered(cx)
1627                                {
1628                                    cx.stop_propagation();
1629                                    let Ok(dir) = std::env::current_dir() else {
1630                                        return;
1631                                    };
1632
1633                                    eprintln!(
1634                                        "This element was created at:\n{}:{}:{}",
1635                                        dir.join(location.file()).to_string_lossy(),
1636                                        location.line(),
1637                                        location.column()
1638                                    );
1639                                }
1640                            }
1641                        });
1642                        cx.paint_quad(crate::outline(
1643                            crate::Bounds {
1644                                origin: hitbox.origin
1645                                    + crate::point(crate::px(0.), FONT_SIZE - px(2.)),
1646                                size: crate::Size {
1647                                    width: text_bounds.size.width,
1648                                    height: crate::px(1.),
1649                                },
1650                            },
1651                            crate::red(),
1652                        ))
1653                    }
1654                }
1655            };
1656
1657            cx.with_text_style(
1658                Some(crate::TextStyleRefinement {
1659                    color: Some(crate::red()),
1660                    line_height: Some(FONT_SIZE.into()),
1661                    background_color: Some(crate::white()),
1662                    ..Default::default()
1663                }),
1664                render_debug_text,
1665            )
1666        }
1667    }
1668
1669    fn paint_mouse_listeners(
1670        &mut self,
1671        hitbox: &Hitbox,
1672        element_state: Option<&mut InteractiveElementState>,
1673        cx: &mut WindowContext,
1674    ) {
1675        // If this element can be focused, register a mouse down listener
1676        // that will automatically transfer focus when hitting the element.
1677        // This behavior can be suppressed by using `cx.prevent_default()`.
1678        if let Some(focus_handle) = self.tracked_focus_handle.clone() {
1679            let hitbox = hitbox.clone();
1680            cx.on_mouse_event(move |_: &MouseDownEvent, phase, cx| {
1681                if phase == DispatchPhase::Bubble
1682                    && hitbox.is_hovered(cx)
1683                    && !cx.default_prevented()
1684                {
1685                    cx.focus(&focus_handle);
1686                    // If there is a parent that is also focusable, prevent it
1687                    // from transferring focus because we already did so.
1688                    cx.prevent_default();
1689                }
1690            });
1691        }
1692
1693        for listener in self.mouse_down_listeners.drain(..) {
1694            let hitbox = hitbox.clone();
1695            cx.on_mouse_event(move |event: &MouseDownEvent, phase, cx| {
1696                listener(event, phase, &hitbox, cx);
1697            })
1698        }
1699
1700        for listener in self.mouse_up_listeners.drain(..) {
1701            let hitbox = hitbox.clone();
1702            cx.on_mouse_event(move |event: &MouseUpEvent, phase, cx| {
1703                listener(event, phase, &hitbox, cx);
1704            })
1705        }
1706
1707        for listener in self.mouse_move_listeners.drain(..) {
1708            let hitbox = hitbox.clone();
1709            cx.on_mouse_event(move |event: &MouseMoveEvent, phase, cx| {
1710                listener(event, phase, &hitbox, cx);
1711            })
1712        }
1713
1714        for listener in self.scroll_wheel_listeners.drain(..) {
1715            let hitbox = hitbox.clone();
1716            cx.on_mouse_event(move |event: &ScrollWheelEvent, phase, cx| {
1717                listener(event, phase, &hitbox, cx);
1718            })
1719        }
1720
1721        if self.hover_style.is_some()
1722            || self.base_style.mouse_cursor.is_some()
1723            || cx.active_drag.is_some() && !self.drag_over_styles.is_empty()
1724        {
1725            let hitbox = hitbox.clone();
1726            let was_hovered = hitbox.is_hovered(cx);
1727            cx.on_mouse_event(move |_: &MouseMoveEvent, phase, cx| {
1728                let hovered = hitbox.is_hovered(cx);
1729                if phase == DispatchPhase::Capture && hovered != was_hovered {
1730                    cx.refresh();
1731                }
1732            });
1733        }
1734
1735        let mut drag_listener = mem::take(&mut self.drag_listener);
1736        let drop_listeners = mem::take(&mut self.drop_listeners);
1737        let click_listeners = mem::take(&mut self.click_listeners);
1738        let can_drop_predicate = mem::take(&mut self.can_drop_predicate);
1739
1740        if !drop_listeners.is_empty() {
1741            let hitbox = hitbox.clone();
1742            cx.on_mouse_event({
1743                move |_: &MouseUpEvent, phase, cx| {
1744                    if let Some(drag) = &cx.active_drag {
1745                        if phase == DispatchPhase::Bubble && hitbox.is_hovered(cx) {
1746                            let drag_state_type = drag.value.as_ref().type_id();
1747                            for (drop_state_type, listener) in &drop_listeners {
1748                                if *drop_state_type == drag_state_type {
1749                                    let drag = cx
1750                                        .active_drag
1751                                        .take()
1752                                        .expect("checked for type drag state type above");
1753
1754                                    let mut can_drop = true;
1755                                    if let Some(predicate) = &can_drop_predicate {
1756                                        can_drop = predicate(drag.value.as_ref(), cx);
1757                                    }
1758
1759                                    if can_drop {
1760                                        listener(drag.value.as_ref(), cx);
1761                                        cx.refresh();
1762                                        cx.stop_propagation();
1763                                    }
1764                                }
1765                            }
1766                        }
1767                    }
1768                }
1769            });
1770        }
1771
1772        if let Some(element_state) = element_state {
1773            if !click_listeners.is_empty() || drag_listener.is_some() {
1774                let pending_mouse_down = element_state
1775                    .pending_mouse_down
1776                    .get_or_insert_with(Default::default)
1777                    .clone();
1778
1779                let clicked_state = element_state
1780                    .clicked_state
1781                    .get_or_insert_with(Default::default)
1782                    .clone();
1783
1784                cx.on_mouse_event({
1785                    let pending_mouse_down = pending_mouse_down.clone();
1786                    let hitbox = hitbox.clone();
1787                    move |event: &MouseDownEvent, phase, cx| {
1788                        if phase == DispatchPhase::Bubble
1789                            && event.button == MouseButton::Left
1790                            && hitbox.is_hovered(cx)
1791                        {
1792                            *pending_mouse_down.borrow_mut() = Some(event.clone());
1793                            cx.refresh();
1794                        }
1795                    }
1796                });
1797
1798                cx.on_mouse_event({
1799                    let pending_mouse_down = pending_mouse_down.clone();
1800                    let hitbox = hitbox.clone();
1801                    move |event: &MouseMoveEvent, phase, cx| {
1802                        if phase == DispatchPhase::Capture {
1803                            return;
1804                        }
1805
1806                        let mut pending_mouse_down = pending_mouse_down.borrow_mut();
1807                        if let Some(mouse_down) = pending_mouse_down.clone() {
1808                            if !cx.has_active_drag()
1809                                && (event.position - mouse_down.position).magnitude()
1810                                    > DRAG_THRESHOLD
1811                            {
1812                                if let Some((drag_value, drag_listener)) = drag_listener.take() {
1813                                    *clicked_state.borrow_mut() = ElementClickedState::default();
1814                                    let cursor_offset = event.position - hitbox.origin;
1815                                    let drag = (drag_listener)(drag_value.as_ref(), cx);
1816                                    cx.active_drag = Some(AnyDrag {
1817                                        view: drag,
1818                                        value: drag_value,
1819                                        cursor_offset,
1820                                    });
1821                                    pending_mouse_down.take();
1822                                    cx.refresh();
1823                                    cx.stop_propagation();
1824                                }
1825                            }
1826                        }
1827                    }
1828                });
1829
1830                cx.on_mouse_event({
1831                    let mut captured_mouse_down = None;
1832                    let hitbox = hitbox.clone();
1833                    move |event: &MouseUpEvent, phase, cx| match phase {
1834                        // Clear the pending mouse down during the capture phase,
1835                        // so that it happens even if another event handler stops
1836                        // propagation.
1837                        DispatchPhase::Capture => {
1838                            let mut pending_mouse_down = pending_mouse_down.borrow_mut();
1839                            if pending_mouse_down.is_some() && hitbox.is_hovered(cx) {
1840                                captured_mouse_down = pending_mouse_down.take();
1841                                cx.refresh();
1842                            }
1843                        }
1844                        // Fire click handlers during the bubble phase.
1845                        DispatchPhase::Bubble => {
1846                            if let Some(mouse_down) = captured_mouse_down.take() {
1847                                let mouse_click = ClickEvent {
1848                                    down: mouse_down,
1849                                    up: event.clone(),
1850                                };
1851                                for listener in &click_listeners {
1852                                    listener(&mouse_click, cx);
1853                                }
1854                            }
1855                        }
1856                    }
1857                });
1858            }
1859
1860            if let Some(hover_listener) = self.hover_listener.take() {
1861                let hitbox = hitbox.clone();
1862                let was_hovered = element_state
1863                    .hover_state
1864                    .get_or_insert_with(Default::default)
1865                    .clone();
1866                let has_mouse_down = element_state
1867                    .pending_mouse_down
1868                    .get_or_insert_with(Default::default)
1869                    .clone();
1870
1871                cx.on_mouse_event(move |_: &MouseMoveEvent, phase, cx| {
1872                    if phase != DispatchPhase::Bubble {
1873                        return;
1874                    }
1875                    let is_hovered = has_mouse_down.borrow().is_none()
1876                        && !cx.has_active_drag()
1877                        && hitbox.is_hovered(cx);
1878                    let mut was_hovered = was_hovered.borrow_mut();
1879
1880                    if is_hovered != *was_hovered {
1881                        *was_hovered = is_hovered;
1882                        drop(was_hovered);
1883
1884                        hover_listener(&is_hovered, cx);
1885                    }
1886                });
1887            }
1888
1889            // Ensure to remove active tooltip if tooltip builder is none
1890            if self.tooltip_builder.is_none() {
1891                element_state.active_tooltip.take();
1892            }
1893
1894            if let Some(tooltip_builder) = self.tooltip_builder.take() {
1895                let tooltip_is_hoverable = tooltip_builder.hoverable;
1896                let active_tooltip = element_state
1897                    .active_tooltip
1898                    .get_or_insert_with(Default::default)
1899                    .clone();
1900                let pending_mouse_down = element_state
1901                    .pending_mouse_down
1902                    .get_or_insert_with(Default::default)
1903                    .clone();
1904
1905                cx.on_mouse_event({
1906                    let active_tooltip = active_tooltip.clone();
1907                    let hitbox = hitbox.clone();
1908                    let tooltip_id = self.tooltip_id;
1909                    move |_: &MouseMoveEvent, phase, cx| {
1910                        let is_hovered =
1911                            pending_mouse_down.borrow().is_none() && hitbox.is_hovered(cx);
1912                        let tooltip_is_hovered =
1913                            tooltip_id.map_or(false, |tooltip_id| tooltip_id.is_hovered(cx));
1914                        if !is_hovered && (!tooltip_is_hoverable || !tooltip_is_hovered) {
1915                            if active_tooltip.borrow_mut().take().is_some() {
1916                                cx.refresh();
1917                            }
1918
1919                            return;
1920                        }
1921
1922                        if phase != DispatchPhase::Bubble {
1923                            return;
1924                        }
1925
1926                        if active_tooltip.borrow().is_none() {
1927                            let task = cx.spawn({
1928                                let active_tooltip = active_tooltip.clone();
1929                                let build_tooltip = tooltip_builder.build.clone();
1930                                move |mut cx| async move {
1931                                    cx.background_executor().timer(TOOLTIP_DELAY).await;
1932                                    cx.update(|cx| {
1933                                        active_tooltip.borrow_mut().replace(ActiveTooltip {
1934                                            tooltip: Some(AnyTooltip {
1935                                                view: build_tooltip(cx),
1936                                                mouse_position: cx.mouse_position(),
1937                                            }),
1938                                            _task: None,
1939                                        });
1940                                        cx.refresh();
1941                                    })
1942                                    .ok();
1943                                }
1944                            });
1945                            active_tooltip.borrow_mut().replace(ActiveTooltip {
1946                                tooltip: None,
1947                                _task: Some(task),
1948                            });
1949                        }
1950                    }
1951                });
1952
1953                cx.on_mouse_event({
1954                    let active_tooltip = active_tooltip.clone();
1955                    let tooltip_id = self.tooltip_id;
1956                    move |_: &MouseDownEvent, _, cx| {
1957                        let tooltip_is_hovered =
1958                            tooltip_id.map_or(false, |tooltip_id| tooltip_id.is_hovered(cx));
1959
1960                        if (!tooltip_is_hoverable || !tooltip_is_hovered)
1961                            && active_tooltip.borrow_mut().take().is_some()
1962                        {
1963                            cx.refresh();
1964                        }
1965                    }
1966                });
1967
1968                cx.on_mouse_event({
1969                    let active_tooltip = active_tooltip.clone();
1970                    let tooltip_id = self.tooltip_id;
1971                    move |_: &ScrollWheelEvent, _, cx| {
1972                        let tooltip_is_hovered =
1973                            tooltip_id.map_or(false, |tooltip_id| tooltip_id.is_hovered(cx));
1974                        if (!tooltip_is_hoverable || !tooltip_is_hovered)
1975                            && active_tooltip.borrow_mut().take().is_some()
1976                        {
1977                            cx.refresh();
1978                        }
1979                    }
1980                })
1981            }
1982
1983            let active_state = element_state
1984                .clicked_state
1985                .get_or_insert_with(Default::default)
1986                .clone();
1987            if active_state.borrow().is_clicked() {
1988                cx.on_mouse_event(move |_: &MouseUpEvent, phase, cx| {
1989                    if phase == DispatchPhase::Capture {
1990                        *active_state.borrow_mut() = ElementClickedState::default();
1991                        cx.refresh();
1992                    }
1993                });
1994            } else {
1995                let active_group_hitbox = self
1996                    .group_active_style
1997                    .as_ref()
1998                    .and_then(|group_active| GroupHitboxes::get(&group_active.group, cx));
1999                let hitbox = hitbox.clone();
2000                cx.on_mouse_event(move |_: &MouseDownEvent, phase, cx| {
2001                    if phase == DispatchPhase::Bubble && !cx.default_prevented() {
2002                        let group_hovered = active_group_hitbox
2003                            .map_or(false, |group_hitbox_id| group_hitbox_id.is_hovered(cx));
2004                        let element_hovered = hitbox.is_hovered(cx);
2005                        if group_hovered || element_hovered {
2006                            *active_state.borrow_mut() = ElementClickedState {
2007                                group: group_hovered,
2008                                element: element_hovered,
2009                            };
2010                            cx.refresh();
2011                        }
2012                    }
2013                });
2014            }
2015        }
2016    }
2017
2018    fn paint_keyboard_listeners(&mut self, cx: &mut WindowContext) {
2019        let key_down_listeners = mem::take(&mut self.key_down_listeners);
2020        let key_up_listeners = mem::take(&mut self.key_up_listeners);
2021        let modifiers_changed_listeners = mem::take(&mut self.modifiers_changed_listeners);
2022        let action_listeners = mem::take(&mut self.action_listeners);
2023        if let Some(context) = self.key_context.clone() {
2024            cx.set_key_context(context);
2025        }
2026
2027        for listener in key_down_listeners {
2028            cx.on_key_event(move |event: &KeyDownEvent, phase, cx| {
2029                listener(event, phase, cx);
2030            })
2031        }
2032
2033        for listener in key_up_listeners {
2034            cx.on_key_event(move |event: &KeyUpEvent, phase, cx| {
2035                listener(event, phase, cx);
2036            })
2037        }
2038
2039        for listener in modifiers_changed_listeners {
2040            cx.on_modifiers_changed(move |event: &ModifiersChangedEvent, cx| {
2041                listener(event, cx);
2042            })
2043        }
2044
2045        for (action_type, listener) in action_listeners {
2046            cx.on_action(action_type, listener)
2047        }
2048    }
2049
2050    fn paint_hover_group_handler(&self, cx: &mut WindowContext) {
2051        let group_hitbox = self
2052            .group_hover_style
2053            .as_ref()
2054            .and_then(|group_hover| GroupHitboxes::get(&group_hover.group, cx));
2055
2056        if let Some(group_hitbox) = group_hitbox {
2057            let was_hovered = group_hitbox.is_hovered(cx);
2058            cx.on_mouse_event(move |_: &MouseMoveEvent, phase, cx| {
2059                let hovered = group_hitbox.is_hovered(cx);
2060                if phase == DispatchPhase::Capture && hovered != was_hovered {
2061                    cx.refresh();
2062                }
2063            });
2064        }
2065    }
2066
2067    fn paint_scroll_listener(&self, hitbox: &Hitbox, style: &Style, cx: &mut WindowContext) {
2068        if let Some(scroll_offset) = self.scroll_offset.clone() {
2069            let overflow = style.overflow;
2070            let allow_concurrent_scroll = style.allow_concurrent_scroll;
2071            let line_height = cx.line_height();
2072            let hitbox = hitbox.clone();
2073            cx.on_mouse_event(move |event: &ScrollWheelEvent, phase, cx| {
2074                if phase == DispatchPhase::Bubble && hitbox.is_hovered(cx) {
2075                    let mut scroll_offset = scroll_offset.borrow_mut();
2076                    let old_scroll_offset = *scroll_offset;
2077                    let delta = event.delta.pixel_delta(line_height);
2078
2079                    let mut delta_x = Pixels::ZERO;
2080                    if overflow.x == Overflow::Scroll {
2081                        if !delta.x.is_zero() {
2082                            delta_x = delta.x;
2083                        } else if overflow.y != Overflow::Scroll {
2084                            delta_x = delta.y;
2085                        }
2086                    }
2087                    let mut delta_y = Pixels::ZERO;
2088                    if overflow.y == Overflow::Scroll {
2089                        if !delta.y.is_zero() {
2090                            delta_y = delta.y;
2091                        } else if overflow.x != Overflow::Scroll {
2092                            delta_y = delta.x;
2093                        }
2094                    }
2095                    if !allow_concurrent_scroll && !delta_x.is_zero() && !delta_y.is_zero() {
2096                        if delta_x.abs() > delta_y.abs() {
2097                            delta_y = Pixels::ZERO;
2098                        } else {
2099                            delta_x = Pixels::ZERO;
2100                        }
2101                    }
2102                    scroll_offset.y += delta_y;
2103                    scroll_offset.x += delta_x;
2104                    cx.stop_propagation();
2105                    if *scroll_offset != old_scroll_offset {
2106                        cx.refresh();
2107                    }
2108                }
2109            });
2110        }
2111    }
2112
2113    /// Compute the visual style for this element, based on the current bounds and the element's state.
2114    pub fn compute_style(
2115        &self,
2116        global_id: Option<&GlobalElementId>,
2117        hitbox: Option<&Hitbox>,
2118        cx: &mut WindowContext,
2119    ) -> Style {
2120        cx.with_optional_element_state(global_id, |element_state, cx| {
2121            let mut element_state =
2122                element_state.map(|element_state| element_state.unwrap_or_default());
2123            let style = self.compute_style_internal(hitbox, element_state.as_mut(), cx);
2124            (style, element_state)
2125        })
2126    }
2127
2128    /// Called from internal methods that have already called with_element_state.
2129    fn compute_style_internal(
2130        &self,
2131        hitbox: Option<&Hitbox>,
2132        element_state: Option<&mut InteractiveElementState>,
2133        cx: &mut WindowContext,
2134    ) -> Style {
2135        let mut style = Style::default();
2136        style.refine(&self.base_style);
2137
2138        if let Some(focus_handle) = self.tracked_focus_handle.as_ref() {
2139            if let Some(in_focus_style) = self.in_focus_style.as_ref() {
2140                if focus_handle.within_focused(cx) {
2141                    style.refine(in_focus_style);
2142                }
2143            }
2144
2145            if let Some(focus_style) = self.focus_style.as_ref() {
2146                if focus_handle.is_focused(cx) {
2147                    style.refine(focus_style);
2148                }
2149            }
2150        }
2151
2152        if let Some(hitbox) = hitbox {
2153            if !cx.has_active_drag() {
2154                if let Some(group_hover) = self.group_hover_style.as_ref() {
2155                    if let Some(group_hitbox_id) =
2156                        GroupHitboxes::get(&group_hover.group, cx.deref_mut())
2157                    {
2158                        if group_hitbox_id.is_hovered(cx) {
2159                            style.refine(&group_hover.style);
2160                        }
2161                    }
2162                }
2163
2164                if let Some(hover_style) = self.hover_style.as_ref() {
2165                    if hitbox.is_hovered(cx) {
2166                        style.refine(hover_style);
2167                    }
2168                }
2169            }
2170
2171            if let Some(drag) = cx.active_drag.take() {
2172                let mut can_drop = true;
2173                if let Some(can_drop_predicate) = &self.can_drop_predicate {
2174                    can_drop = can_drop_predicate(drag.value.as_ref(), cx);
2175                }
2176
2177                if can_drop {
2178                    for (state_type, group_drag_style) in &self.group_drag_over_styles {
2179                        if let Some(group_hitbox_id) =
2180                            GroupHitboxes::get(&group_drag_style.group, cx.deref_mut())
2181                        {
2182                            if *state_type == drag.value.as_ref().type_id()
2183                                && group_hitbox_id.is_hovered(cx)
2184                            {
2185                                style.refine(&group_drag_style.style);
2186                            }
2187                        }
2188                    }
2189
2190                    for (state_type, build_drag_over_style) in &self.drag_over_styles {
2191                        if *state_type == drag.value.as_ref().type_id() && hitbox.is_hovered(cx) {
2192                            style.refine(&build_drag_over_style(drag.value.as_ref(), cx));
2193                        }
2194                    }
2195                }
2196
2197                cx.active_drag = Some(drag);
2198            }
2199        }
2200
2201        if let Some(element_state) = element_state {
2202            let clicked_state = element_state
2203                .clicked_state
2204                .get_or_insert_with(Default::default)
2205                .borrow();
2206            if clicked_state.group {
2207                if let Some(group) = self.group_active_style.as_ref() {
2208                    style.refine(&group.style)
2209                }
2210            }
2211
2212            if let Some(active_style) = self.active_style.as_ref() {
2213                if clicked_state.element {
2214                    style.refine(active_style)
2215                }
2216            }
2217        }
2218
2219        style
2220    }
2221}
2222
2223/// The per-frame state of an interactive element. Used for tracking stateful interactions like clicks
2224/// and scroll offsets.
2225#[derive(Default)]
2226pub struct InteractiveElementState {
2227    pub(crate) focus_handle: Option<FocusHandle>,
2228    pub(crate) clicked_state: Option<Rc<RefCell<ElementClickedState>>>,
2229    pub(crate) hover_state: Option<Rc<RefCell<bool>>>,
2230    pub(crate) pending_mouse_down: Option<Rc<RefCell<Option<MouseDownEvent>>>>,
2231    pub(crate) scroll_offset: Option<Rc<RefCell<Point<Pixels>>>>,
2232    pub(crate) active_tooltip: Option<Rc<RefCell<Option<ActiveTooltip>>>>,
2233}
2234
2235/// The current active tooltip
2236pub struct ActiveTooltip {
2237    pub(crate) tooltip: Option<AnyTooltip>,
2238    pub(crate) _task: Option<Task<()>>,
2239}
2240
2241/// Whether or not the element or a group that contains it is clicked by the mouse.
2242#[derive(Copy, Clone, Default, Eq, PartialEq)]
2243pub struct ElementClickedState {
2244    /// True if this element's group has been clicked, false otherwise
2245    pub group: bool,
2246
2247    /// True if this element has been clicked, false otherwise
2248    pub element: bool,
2249}
2250
2251impl ElementClickedState {
2252    fn is_clicked(&self) -> bool {
2253        self.group || self.element
2254    }
2255}
2256
2257#[derive(Default)]
2258pub(crate) struct GroupHitboxes(HashMap<SharedString, SmallVec<[HitboxId; 1]>>);
2259
2260impl Global for GroupHitboxes {}
2261
2262impl GroupHitboxes {
2263    pub fn get(name: &SharedString, cx: &mut AppContext) -> Option<HitboxId> {
2264        cx.default_global::<Self>()
2265            .0
2266            .get(name)
2267            .and_then(|bounds_stack| bounds_stack.last())
2268            .cloned()
2269    }
2270
2271    pub fn push(name: SharedString, hitbox_id: HitboxId, cx: &mut AppContext) {
2272        cx.default_global::<Self>()
2273            .0
2274            .entry(name)
2275            .or_default()
2276            .push(hitbox_id);
2277    }
2278
2279    pub fn pop(name: &SharedString, cx: &mut AppContext) {
2280        cx.default_global::<Self>().0.get_mut(name).unwrap().pop();
2281    }
2282}
2283
2284/// A wrapper around an element that can be focused.
2285pub struct Focusable<E> {
2286    /// The element that is focusable
2287    pub element: E,
2288}
2289
2290impl<E: InteractiveElement> FocusableElement for Focusable<E> {}
2291
2292impl<E> InteractiveElement for Focusable<E>
2293where
2294    E: InteractiveElement,
2295{
2296    fn interactivity(&mut self) -> &mut Interactivity {
2297        self.element.interactivity()
2298    }
2299}
2300
2301impl<E: StatefulInteractiveElement> StatefulInteractiveElement for Focusable<E> {}
2302
2303impl<E> Styled for Focusable<E>
2304where
2305    E: Styled,
2306{
2307    fn style(&mut self) -> &mut StyleRefinement {
2308        self.element.style()
2309    }
2310}
2311
2312impl<E> Element for Focusable<E>
2313where
2314    E: Element,
2315{
2316    type RequestLayoutState = E::RequestLayoutState;
2317    type PrepaintState = E::PrepaintState;
2318
2319    fn id(&self) -> Option<ElementId> {
2320        self.element.id()
2321    }
2322
2323    fn request_layout(
2324        &mut self,
2325        id: Option<&GlobalElementId>,
2326        cx: &mut WindowContext,
2327    ) -> (LayoutId, Self::RequestLayoutState) {
2328        self.element.request_layout(id, cx)
2329    }
2330
2331    fn prepaint(
2332        &mut self,
2333        id: Option<&GlobalElementId>,
2334        bounds: Bounds<Pixels>,
2335        state: &mut Self::RequestLayoutState,
2336        cx: &mut WindowContext,
2337    ) -> E::PrepaintState {
2338        self.element.prepaint(id, bounds, state, cx)
2339    }
2340
2341    fn paint(
2342        &mut self,
2343        id: Option<&GlobalElementId>,
2344        bounds: Bounds<Pixels>,
2345        request_layout: &mut Self::RequestLayoutState,
2346        prepaint: &mut Self::PrepaintState,
2347        cx: &mut WindowContext,
2348    ) {
2349        self.element.paint(id, bounds, request_layout, prepaint, cx)
2350    }
2351}
2352
2353impl<E> IntoElement for Focusable<E>
2354where
2355    E: IntoElement,
2356{
2357    type Element = E::Element;
2358
2359    fn into_element(self) -> Self::Element {
2360        self.element.into_element()
2361    }
2362}
2363
2364impl<E> ParentElement for Focusable<E>
2365where
2366    E: ParentElement,
2367{
2368    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
2369        self.element.extend(elements)
2370    }
2371}
2372
2373/// A wrapper around an element that can store state, produced after assigning an ElementId.
2374pub struct Stateful<E> {
2375    element: E,
2376}
2377
2378impl<E> Styled for Stateful<E>
2379where
2380    E: Styled,
2381{
2382    fn style(&mut self) -> &mut StyleRefinement {
2383        self.element.style()
2384    }
2385}
2386
2387impl<E> StatefulInteractiveElement for Stateful<E>
2388where
2389    E: Element,
2390    Self: InteractiveElement,
2391{
2392}
2393
2394impl<E> InteractiveElement for Stateful<E>
2395where
2396    E: InteractiveElement,
2397{
2398    fn interactivity(&mut self) -> &mut Interactivity {
2399        self.element.interactivity()
2400    }
2401}
2402
2403impl<E: FocusableElement> FocusableElement for Stateful<E> {}
2404
2405impl<E> Element for Stateful<E>
2406where
2407    E: Element,
2408{
2409    type RequestLayoutState = E::RequestLayoutState;
2410    type PrepaintState = E::PrepaintState;
2411
2412    fn id(&self) -> Option<ElementId> {
2413        self.element.id()
2414    }
2415
2416    fn request_layout(
2417        &mut self,
2418        id: Option<&GlobalElementId>,
2419        cx: &mut WindowContext,
2420    ) -> (LayoutId, Self::RequestLayoutState) {
2421        self.element.request_layout(id, cx)
2422    }
2423
2424    fn prepaint(
2425        &mut self,
2426        id: Option<&GlobalElementId>,
2427        bounds: Bounds<Pixels>,
2428        state: &mut Self::RequestLayoutState,
2429        cx: &mut WindowContext,
2430    ) -> E::PrepaintState {
2431        self.element.prepaint(id, bounds, state, cx)
2432    }
2433
2434    fn paint(
2435        &mut self,
2436        id: Option<&GlobalElementId>,
2437        bounds: Bounds<Pixels>,
2438        request_layout: &mut Self::RequestLayoutState,
2439        prepaint: &mut Self::PrepaintState,
2440        cx: &mut WindowContext,
2441    ) {
2442        self.element.paint(id, bounds, request_layout, prepaint, cx);
2443    }
2444}
2445
2446impl<E> IntoElement for Stateful<E>
2447where
2448    E: Element,
2449{
2450    type Element = Self;
2451
2452    fn into_element(self) -> Self::Element {
2453        self
2454    }
2455}
2456
2457impl<E> ParentElement for Stateful<E>
2458where
2459    E: ParentElement,
2460{
2461    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
2462        self.element.extend(elements)
2463    }
2464}
2465
2466/// Represents an element that can be scrolled *to* in its parent element.
2467///
2468/// Contrary to [ScrollHandle::scroll_to_item], an anchored element does not have to be an immediate child of the parent.
2469#[derive(Clone)]
2470pub struct ScrollAnchor {
2471    handle: ScrollHandle,
2472    last_origin: Rc<RefCell<Point<Pixels>>>,
2473}
2474
2475impl ScrollAnchor {
2476    /// Creates a [ScrollAnchor] associated with a given [ScrollHandle].
2477    pub fn for_handle(handle: ScrollHandle) -> Self {
2478        Self {
2479            handle,
2480            last_origin: Default::default(),
2481        }
2482    }
2483    /// Request scroll to this item on the next frame.
2484    pub fn scroll_to(&self, cx: &mut WindowContext<'_>) {
2485        let this = self.clone();
2486
2487        cx.on_next_frame(move |_| {
2488            let viewport_bounds = this.handle.bounds();
2489            let self_bounds = *this.last_origin.borrow();
2490            this.handle.set_offset(viewport_bounds.origin - self_bounds);
2491        });
2492    }
2493}
2494#[derive(Default, Debug)]
2495struct ScrollHandleState {
2496    offset: Rc<RefCell<Point<Pixels>>>,
2497    bounds: Bounds<Pixels>,
2498    child_bounds: Vec<Bounds<Pixels>>,
2499    requested_scroll_top: Option<(usize, Pixels)>,
2500    overflow: Point<Overflow>,
2501}
2502
2503/// A handle to the scrollable aspects of an element.
2504/// Used for accessing scroll state, like the current scroll offset,
2505/// and for mutating the scroll state, like scrolling to a specific child.
2506#[derive(Clone, Debug)]
2507pub struct ScrollHandle(Rc<RefCell<ScrollHandleState>>);
2508
2509impl Default for ScrollHandle {
2510    fn default() -> Self {
2511        Self::new()
2512    }
2513}
2514
2515impl ScrollHandle {
2516    /// Construct a new scroll handle.
2517    pub fn new() -> Self {
2518        Self(Rc::default())
2519    }
2520
2521    /// Get the current scroll offset.
2522    pub fn offset(&self) -> Point<Pixels> {
2523        *self.0.borrow().offset.borrow()
2524    }
2525
2526    /// Get the top child that's scrolled into view.
2527    pub fn top_item(&self) -> usize {
2528        let state = self.0.borrow();
2529        let top = state.bounds.top() - state.offset.borrow().y;
2530
2531        match state.child_bounds.binary_search_by(|bounds| {
2532            if top < bounds.top() {
2533                Ordering::Greater
2534            } else if top > bounds.bottom() {
2535                Ordering::Less
2536            } else {
2537                Ordering::Equal
2538            }
2539        }) {
2540            Ok(ix) => ix,
2541            Err(ix) => ix.min(state.child_bounds.len().saturating_sub(1)),
2542        }
2543    }
2544
2545    /// Return the bounds into which this child is painted
2546    pub fn bounds(&self) -> Bounds<Pixels> {
2547        self.0.borrow().bounds
2548    }
2549
2550    /// Set the bounds into which this child is painted
2551    pub(super) fn set_bounds(&self, bounds: Bounds<Pixels>) {
2552        self.0.borrow_mut().bounds = bounds;
2553    }
2554
2555    /// Get the bounds for a specific child.
2556    pub fn bounds_for_item(&self, ix: usize) -> Option<Bounds<Pixels>> {
2557        self.0.borrow().child_bounds.get(ix).cloned()
2558    }
2559
2560    /// scroll_to_item scrolls the minimal amount to ensure that the child is
2561    /// fully visible
2562    pub fn scroll_to_item(&self, ix: usize) {
2563        let state = self.0.borrow();
2564
2565        let Some(bounds) = state.child_bounds.get(ix) else {
2566            return;
2567        };
2568
2569        let mut scroll_offset = state.offset.borrow_mut();
2570
2571        if state.overflow.y == Overflow::Scroll {
2572            if bounds.top() + scroll_offset.y < state.bounds.top() {
2573                scroll_offset.y = state.bounds.top() - bounds.top();
2574            } else if bounds.bottom() + scroll_offset.y > state.bounds.bottom() {
2575                scroll_offset.y = state.bounds.bottom() - bounds.bottom();
2576            }
2577        }
2578
2579        if state.overflow.x == Overflow::Scroll {
2580            if bounds.left() + scroll_offset.x < state.bounds.left() {
2581                scroll_offset.x = state.bounds.left() - bounds.left();
2582            } else if bounds.right() + scroll_offset.x > state.bounds.right() {
2583                scroll_offset.x = state.bounds.right() - bounds.right();
2584            }
2585        }
2586    }
2587
2588    /// Set the offset explicitly. The offset is the distance from the top left of the
2589    /// parent container to the top left of the first child.
2590    /// As you scroll further down the offset becomes more negative.
2591    pub fn set_offset(&self, mut position: Point<Pixels>) {
2592        let state = self.0.borrow();
2593        *state.offset.borrow_mut() = position;
2594    }
2595
2596    /// Get the logical scroll top, based on a child index and a pixel offset.
2597    pub fn logical_scroll_top(&self) -> (usize, Pixels) {
2598        let ix = self.top_item();
2599        let state = self.0.borrow();
2600
2601        if let Some(child_bounds) = state.child_bounds.get(ix) {
2602            (
2603                ix,
2604                child_bounds.top() + state.offset.borrow().y - state.bounds.top(),
2605            )
2606        } else {
2607            (ix, px(0.))
2608        }
2609    }
2610
2611    /// Set the logical scroll top, based on a child index and a pixel offset.
2612    pub fn set_logical_scroll_top(&self, ix: usize, px: Pixels) {
2613        self.0.borrow_mut().requested_scroll_top = Some((ix, px));
2614    }
2615
2616    /// Get the count of children for scrollable item.
2617    pub fn children_count(&self) -> usize {
2618        self.0.borrow().child_bounds.len()
2619    }
2620}