iced_widget/

component.rs

//! Build and reuse custom widgets using The Elm Architecture.
use crate::Action;
use crate::core::event;
use crate::core::layout::{self, Layout};
use crate::core::mouse;
use crate::core::overlay;
use crate::core::renderer;
use crate::core::shell;
use crate::core::widget;
use crate::core::widget::tree::{self, Tree};
use crate::core::window;
use crate::core::{Element, Event, Length, Rectangle, Shell, Size, Vector, Widget};

use std::cell::{Cell, RefCell};

/// A reusable, custom widget that uses The Elm Architecture.
///
/// A [`Component`] allows you to implement custom widgets as if they were
/// `iced` applications with encapsulated state.
///
/// In other words, a [`Component`] allows you to turn `iced` applications into
/// custom widgets and embed them without cumbersome wiring.
///
/// A [`Component`] produces widgets that may fire an [`Event`](Component::Event)
/// and update the internal state of the [`Component`].
///
/// Additionally, a [`Component`] is capable of producing a `Message` to notify
/// the parent application of any relevant interactions.
///
/// # State
/// A component can store its state in one of two ways: either as data within the
/// implementor of the trait, or in a type [`State`][Component::State] that is managed
/// by the runtime and provided to the trait methods. These two approaches are not
/// mutually exclusive and have opposite pros and cons.
///
/// For instance, if a piece of state is needed by multiple components that reside
/// in different branches of the tree, then it's more convenient to let a common
/// ancestor store it and pass it down.
///
/// On the other hand, if a piece of state is only needed by the component itself,
/// you can store it as part of its internal [`State`][Component::State].
pub trait Component<'a, Message, Theme = crate::Theme, Renderer = crate::Renderer> {
    /// The internal state of this [`Component`].
    type State: Default + 'static;

    /// The type of event this [`Component`] handles internally.
    type Event: 'static;

    /// Processes an [`Event`](Component::Event) and updates the [`Component`] state accordingly.
    ///
    /// It can produce a `Message` for the parent application.
    fn update(
        &self,
        state: &mut Self::State,
        event: Self::Event,
        renderer: &Renderer,
    ) -> Option<Message>;

    /// Produces the widgets of the [`Component`], which may trigger an [`Event`](Component::Event)
    /// on user interaction.
    fn view(&self, state: &Self::State) -> impl crate::Widget<Self::Event, Theme, Renderer> + 'a;

    /// Listens to a runtime [`Event`] and performs an [`Action`] as a result.
    ///
    /// If the [`Action`] publishes a [`Component::Event`], it will be immediately fed
    /// to [`update`](Self::update).
    ///
    /// By default, it returns [`Action::none`].
    fn listen(
        &self,
        _state: &Self::State,
        _event: &Event,
        _bounds: Rectangle,
        _cursor: mouse::Cursor,
    ) -> Action<Self::Event> {
        Action::none()
    }

    /// Returns the current [`mouse::Interaction`] of the [`Component`].
    ///
    /// This interaction will override any interaction produced by the [`view`](Self::view)
    /// of the [`Component`].
    ///
    /// By default, it returns [`mouse::Interaction::None`].
    fn mouse_interaction(&self, _state: &Self::State) -> mouse::Interaction {
        mouse::Interaction::None
    }

    /// Reconciles the current [`Component`] with its internal [`State`](Self::State) persisted
    /// in the widget tree.
    ///
    /// This method will be called every time the widget tree changes. You can leverage it to
    /// detect and react to changes in the [`Component`].
    ///
    /// By default, it does nothing.
    fn diff(&mut self, _state: &mut Self::State) {}

    /// Run the provided [`widget::Operation`] on the [`Component`].
    ///
    /// By default, it does nothing.
    fn operate(
        &self,
        _state: &mut Self::State,
        _bounds: Rectangle,
        _operation: &mut dyn widget::Operation,
    ) {
    }
}

/// Turns an implementor of [`Component`] into an [`Element`] that can be
/// embedded in any application.
pub fn component<'a, C, Message, Theme, Renderer>(
    component: C,
) -> impl Widget<Message, Theme, Renderer> + 'a
where
    C: Component<'a, Message, Theme, Renderer> + 'a,
    C::State: 'static,
    Message: 'a,
    Theme: 'a,
    Renderer: 'a,
{
    Instance {
        component,
        view: crate::space()._boxed(),
        limits: layout::Limits::new(Size::ZERO, Size::INFINITE),
        is_outdated: Cell::new(true),
        has_overlay: false,
    }
}

struct Instance<'a, C, Message, Theme, Renderer>
where
    C: Component<'a, Message, Theme, Renderer> + 'a,
{
    component: C,
    view: Element<'a, C::Event, Theme, Renderer>,
    limits: layout::Limits,
    is_outdated: Cell<bool>,
    has_overlay: bool,
}

struct Internal<State, Event> {
    state: State,
    events: shell::Bus<Event>,
}

impl<'a, C, Message, Theme, Renderer> widget::Meta for Instance<'a, C, Message, Theme, Renderer> where
    C: Component<'a, Message, Theme, Renderer> + 'a
{
}

impl<'a, C, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
    for Instance<'a, C, Message, Theme, Renderer>
where
    C: Component<'a, Message, Theme, Renderer> + 'a,
{
    fn tag(&self) -> tree::Tag {
        tree::Tag::of::<RefCell<Internal<C::State, C::Event>>>()
    }

    fn state(&self) -> tree::State {
        tree::State::new(RefCell::new(Internal {
            state: C::State::default(),
            events: shell::Bus::<C::Event>::new(),
        }))
    }

    fn diff(&mut self, tree: &mut Tree) {
        let mut internal = tree
            .state
            .downcast_mut::<RefCell<Internal<C::State, C::Event>>>()
            .borrow_mut();

        self.component.diff(&mut internal.state);

        if self.is_outdated.get() {
            self.view = self.component.view(&internal.state)._boxed();
            drop(internal);

            tree.diff_children(std::slice::from_mut(&mut self.view));

            self.is_outdated.set(false);
            self.limits = layout::Limits::new(Size::ZERO, Size::INFINITE);
        }
    }

    fn size(&self) -> Size<Length> {
        self.view.size()
    }

    fn layout(&mut self, tree: &mut Tree, renderer: &Renderer, limits: &layout::Limits) {
        if &self.limits != limits {
            self.limits = *limits;
            self.view.layout(&mut tree.children[0], renderer, limits);
        }

        tree.size = tree.children[0].size;
    }

    fn update(
        &mut self,
        tree: &mut Tree,
        event: &Event,
        layout: Layout,
        cursor: mouse::Cursor,
        renderer: &Renderer,
        shell: &mut Shell<'_, Message>,
        viewport: &Rectangle,
    ) {
        let mut internal = tree
            .state
            .downcast_mut::<RefCell<Internal<C::State, C::Event>>>()
            .borrow_mut();

        let action = self
            .component
            .listen(&internal.state, event, layout.bounds(), cursor);

        let (publish, redraw_request, event_status) = action.into_inner();

        shell.request_redraw_at(redraw_request);

        if let event::Status::Captured = event_status {
            shell.capture_event();
        }

        if let Some(event) = publish {
            let _ = internal.events.push(event);
        }

        let mut invalidation = shell::Invalidation::None;

        if !shell.is_event_captured() {
            let mut local_shell = shell.local(&mut internal.events);

            self.view.update(
                &mut tree.children[0],
                event,
                layout,
                cursor,
                renderer,
                &mut local_shell,
                viewport,
            );

            if local_shell.is_event_captured() {
                shell.capture_event();
            }

            shell.request_redraw_at(local_shell.redraw_request());
            shell.request_input_method(local_shell.input_method());
            shell.clipboard_mut().merge(local_shell.clipboard_mut());

            invalidation = local_shell.invalidation();
        }

        if internal.events.is_empty() && matches!(invalidation, shell::Invalidation::None) {
            return;
        }

        let Internal { state, events } = &mut *internal;

        for (event, receipt) in events.drain() {
            if let Some(message) = self.component.update(state, event, renderer) {
                shell.forward(message, receipt);
            }
        }

        let previous_sizing = self.view.size();

        self.view = self.component.view(state)._boxed();
        drop(internal);

        tree.diff_children(std::slice::from_mut(&mut self.view));

        let previous_size = tree.size;

        self.view
            .layout(&mut tree.children[0], renderer, &self.limits);

        tree.size = tree.children[0].size;

        let new_sizing = self.view.size();

        // We must invalidate application layout in 2 instances:
        //
        // 1. The size hint of the component changes. Other widgets
        //    may change layout behavior.
        //
        // 2. The size hint of the component is not fluid for any axis
        //    and the component has changed size. The new size may
        //    push other widgets around.
        if new_sizing != previous_sizing {
            shell.invalidate_widgets();
        } else if (new_sizing.width.fill_factor() == 0 || new_sizing.height.fill_factor() == 0)
            && previous_size != tree.size
        {
            shell.invalidate_layout();
        } else {
            shell.invalidate_overlay();
        }

        self.is_outdated.set(false);

        if let Event::Window(window::Event::RedrawRequested(_)) = event {
            let mut internal = tree
                .state
                .downcast_mut::<RefCell<Internal<C::State, C::Event>>>()
                .borrow_mut();

            let mut local_shell = shell.local(&mut internal.events);

            self.view.update(
                &mut tree.children[0],
                event,
                layout,
                cursor,
                renderer,
                &mut local_shell,
                viewport,
            );

            if internal.events.is_empty() {
                return;
            }
        }

        shell.request_redraw();
    }

    fn draw(
        &self,
        tree: &Tree,
        renderer: &mut Renderer,
        theme: &Theme,
        style: &renderer::Style,
        layout: Layout,
        cursor: mouse::Cursor,
        viewport: &Rectangle,
    ) {
        self.view.draw(
            &tree.children[0],
            renderer,
            theme,
            style,
            layout,
            cursor,
            viewport,
        );
    }

    fn mouse_interaction(
        &self,
        tree: &Tree,
        layout: Layout,
        cursor: mouse::Cursor,
        viewport: &Rectangle,
        renderer: &Renderer,
    ) -> mouse::Interaction {
        let internal = tree
            .state
            .downcast_ref::<RefCell<Internal<C::State, C::Event>>>()
            .borrow();

        let interaction = self.component.mouse_interaction(&internal.state);

        if interaction != mouse::Interaction::None {
            return interaction;
        }

        self.view
            .mouse_interaction(&tree.children[0], layout, cursor, viewport, renderer)
    }

    fn operate(
        &mut self,
        tree: &mut Tree,
        layout: Layout,
        viewport: &Rectangle,
        renderer: &Renderer,
        operation: &mut dyn widget::Operation,
    ) {
        {
            let internal = tree
                .state
                .downcast_mut::<RefCell<Internal<C::State, C::Event>>>()
                .get_mut();

            self.component
                .operate(&mut internal.state, layout.bounds(), operation);
        }

        self.view
            .operate(&mut tree.children[0], layout, viewport, renderer, operation);
    }

    fn overlay<'b>(
        &'b mut self,
        tree: &'b mut Tree,
        layout: Layout,
        renderer: &Renderer,
        viewport: &Rectangle,
        translation: Vector,
        window: Size,
    ) -> Vec<overlay::Element<'b, Message, Theme, Renderer>> {
        let overlays = self.view.overlay(
            &mut tree.children[0],
            layout,
            renderer,
            viewport,
            translation,
            window,
        );

        self.has_overlay = !overlays.is_empty();

        let internal = tree
            .state
            .downcast_ref::<RefCell<Internal<C::State, C::Event>>>();

        overlays
            .into_iter()
            .map(|raw| {
                overlay::Element::new(Box::new(Overlay {
                    component: &self.component,
                    internal,
                    is_outdated: &self.is_outdated,
                    raw,
                }))
            })
            .collect()
    }
}

struct Overlay<'a, 'b, C, Message, Theme, Renderer>
where
    C: Component<'a, Message, Theme, Renderer>,
{
    component: &'b C,
    internal: &'b RefCell<Internal<C::State, C::Event>>,
    is_outdated: &'b Cell<bool>,
    raw: overlay::Element<'b, C::Event, Theme, Renderer>,
}

impl<'a, 'b, C, Message, Theme, Renderer> overlay::Overlay<Message, Theme, Renderer>
    for Overlay<'a, 'b, C, Message, Theme, Renderer>
where
    C: Component<'a, Message, Theme, Renderer>,
{
    fn update(
        &mut self,
        event: &Event,
        cursor: mouse::Cursor,
        renderer: &Renderer,
        shell: &mut Shell<'_, Message>,
    ) {
        let mut internal = self.internal.borrow_mut();
        let mut local_shell = shell.local(&mut internal.events);

        self.raw
            .as_overlay_mut()
            .update(event, cursor, renderer, &mut local_shell);

        if local_shell.is_event_captured() {
            shell.capture_event();
        }

        shell.invalidate(local_shell.invalidation());
        shell.request_redraw_at(local_shell.redraw_request());
        shell.request_input_method(local_shell.input_method());
        shell.clipboard_mut().merge(local_shell.clipboard_mut());

        if internal.events.is_empty() {
            return;
        }

        let Internal { state, events } = &mut *internal;

        for (event, receipt) in events.drain() {
            if let Some(message) = self.component.update(state, event, renderer) {
                shell.forward(message, receipt);
            }
        }

        self.is_outdated.set(true);

        shell.invalidate_layout_with(shell::Diff::Perform);
        shell.request_redraw();
    }

    fn draw(
        &self,
        renderer: &mut Renderer,
        theme: &Theme,
        style: &renderer::Style,
        cursor: mouse::Cursor,
    ) {
        self.raw.as_overlay().draw(renderer, theme, style, cursor);
    }

    fn mouse_interaction(&self, cursor: mouse::Cursor, renderer: &Renderer) -> mouse::Interaction {
        self.raw.as_overlay().mouse_interaction(cursor, renderer)
    }

    fn index(&self) -> f32 {
        self.raw.as_overlay().index()
    }

    fn operate(&mut self, renderer: &Renderer, operation: &mut dyn widget::Operation) {
        self.raw.as_overlay_mut().operate(renderer, operation);
    }

    fn overlay<'c>(
        &'c mut self,
        renderer: &Renderer,
    ) -> Vec<overlay::Element<'c, Message, Theme, Renderer>> {
        let overlays = self.raw.as_overlay_mut().overlay(renderer);

        if overlays.is_empty() {
            return Vec::new();
        }

        overlays
            .into_iter()
            .map(|raw| {
                overlay::Element::new(Box::new(Overlay {
                    component: self.component,
                    internal: self.internal,
                    is_outdated: self.is_outdated,
                    raw,
                }))
            })
            .collect()
    }
}