moly_kit/widgets/

moly_modal.rs

//! Copy of the original modal from the main Moly app which draws its content
//! over the whole app (from its root).

use makepad_widgets::*;

script_mod! {
    use mod.prelude.widgets.*

    mod.widgets.MolyModalBase = #(MolyModal::register_widget(vm))
    mod.widgets.MolyModal = set_type_default() do mod.widgets.MolyModalBase {
        width: Fill
        height: Fill
        flow: Overlay
        align: Align { x: 0.5, y: 0.5 }

        draw_bg +: {
            pixel: fn() -> vec4 {
                return vec4(0. 0. 0. 0.0)
            }
        }

        bg_view := View {
            width: Fill
            height: Fill
            show_bg: true
            draw_bg +: {
                pixel: fn() -> vec4 {
                    return vec4(0. 0. 0. 0.7)
                }
            }
        }

        content := View {
            flow: Overlay
            width: Fit
            height: Fit
        }
    }
}

#[derive(Clone, Debug, Default)]
pub enum MolyModalAction {
    #[default]
    None,
    Dismissed,
}

#[derive(Clone, Copy, Debug)]
enum PopupPlacement {
    /// Position the popup at the given top-left coordinate, clamped to
    /// screen bounds.
    AtPosition(DVec2),
    /// Position the popup above the given anchor point with a gap. The
    /// anchor is the top-left of the reference widget (e.g., a button).
    /// After the content is measured, `pos.y = anchor.y - content_height
    /// - gap`.
    Above { anchor: DVec2, gap: f64 },
}

#[derive(Script, Widget)]
pub struct MolyModal {
    #[source]
    source: ScriptObjectRef,

    #[deref]
    view: View,

    #[rust]
    draw_list: Option<DrawList2d>,

    #[live]
    draw_bg: DrawQuad,

    #[live(true)]
    dismiss_on_focus_lost: bool,

    #[rust]
    opened: bool,

    #[rust]
    desired_popup_placement: Option<PopupPlacement>,
}

impl ScriptHook for MolyModal {
    fn on_after_new(&mut self, vm: &mut ScriptVm) {
        self.draw_list = Some(DrawList2d::script_new(vm));
    }

    fn on_after_apply(
        &mut self,
        vm: &mut ScriptVm,
        _apply: &Apply,
        _scope: &mut Scope,
        _value: ScriptValue,
    ) {
        vm.with_cx_mut(|cx| {
            if let Some(draw_list) = &self.draw_list {
                draw_list.redraw(cx);
            }
        });
    }
}

impl Widget for MolyModal {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
        if !self.opened {
            return;
        }

        // When passing down events we need to suspend the sweep lock
        // because regular View instances won't respond to events if
        // the sweep lock is active.
        cx.sweep_unlock(self.draw_bg.area());
        let content = self.view.widget(cx, ids!(content));
        content.handle_event(cx, event, scope);
        cx.sweep_lock(self.draw_bg.area());

        if self.dismiss_on_focus_lost {
            let content_rec = content.area().rect(cx);
            if let Hit::FingerUp(fe) =
                event.hits_with_sweep_area(cx, self.draw_bg.area(), self.draw_bg.area())
            {
                if !content_rec.contains(fe.abs) {
                    cx.widget_action(self.widget_uid(), MolyModalAction::Dismissed);
                    self.close(cx);
                }
            }
        }

        self.ui_runner().handle(cx, event, scope, self);
    }

    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
        let draw_list = self.draw_list.as_mut().unwrap();
        draw_list.begin_overlay_reuse(cx);

        cx.begin_root_turtle_for_pass(self.view.layout);
        self.draw_bg.begin(cx, self.view.walk, self.view.layout);

        if self.opened {
            let bg_view = self.view.widget(cx, ids!(bg_view));
            let _ = bg_view.draw_walk(cx, scope, walk.with_abs_pos(DVec2 { x: 0., y: 0. }));
            let content = self.view.widget(cx, ids!(content));
            content.draw_all(cx, scope);
        }

        self.draw_bg.end(cx);

        cx.end_pass_sized_turtle();
        self.draw_list.as_mut().unwrap().end(cx);

        if let Some(placement) = self.desired_popup_placement.take() {
            self.ui_runner().defer(move |me, cx, _| {
                me.correct_popup_position(cx, placement);
            });
        }

        DrawStep::done()
    }
}

impl MolyModal {
    #[deprecated(note = "Use open_as_dialog or open_as_popup instead")]
    pub fn open(&mut self, cx: &mut Cx) {
        self.opened = true;
        self.draw_bg.redraw(cx);
        cx.sweep_lock(self.draw_bg.area());
    }

    /// Opens the modal as a centered dialog.
    pub fn open_as_dialog(&mut self, cx: &mut Cx) {
        self.view.layout.align = Align { x: 0.5, y: 0.5 };

        let mut content = self.view.widget(cx, ids!(content));
        script_apply_eval!(cx, content, { margin: 0 });

        let mut bg_view = self.view.widget(cx, ids!(bg_view));
        script_apply_eval!(cx, bg_view, { visible: true });

        #[allow(deprecated)]
        self.open(cx);
    }

    /// Opens the modal as a bottom sheet anchored to the bottom of the screen.
    pub fn open_as_bottom_sheet(&mut self, cx: &mut Cx) {
        self.view.layout.align = Align { x: 0.0, y: 1.0 };

        let mut content = self.view.widget(cx, ids!(content));
        script_apply_eval!(cx, content, { margin: 0 });

        let mut bg_view = self.view.widget(cx, ids!(bg_view));
        script_apply_eval!(cx, bg_view, { visible: true });

        #[allow(deprecated)]
        self.open(cx);
    }

    /// Opens the modal as a popup at the given position.
    pub fn open_as_popup(&mut self, cx: &mut Cx, pos: DVec2) {
        self.desired_popup_placement = Some(PopupPlacement::AtPosition(pos));
        self.open_popup_common(cx);
    }

    /// Opens the modal as a popup positioned above the given anchor
    /// point. The anchor is typically the top-left of a button. After
    /// the content is drawn and measured, the popup is placed so its
    /// bottom edge is `gap` pixels above the anchor's y coordinate.
    pub fn open_as_popup_above(&mut self, cx: &mut Cx, anchor: DVec2, gap: f64) {
        self.desired_popup_placement = Some(PopupPlacement::Above { anchor, gap });
        self.open_popup_common(cx);
    }

    fn open_popup_common(&mut self, cx: &mut Cx) {
        self.view.layout.align = Align { x: 0.0, y: 0.0 };

        let screen_size = cx.display_context.screen_size;
        let margin = Inset {
            left: screen_size.x,
            top: screen_size.y,
            right: 0.0,
            bottom: 0.0,
        };

        let mut content = self.view.widget(cx, ids!(content));
        script_apply_eval!(cx, content, { margin: #(margin) });

        let mut bg_view = self.view.widget(cx, ids!(bg_view));
        script_apply_eval!(cx, bg_view, { visible: false });

        #[allow(deprecated)]
        self.open(cx);
    }

    /// Closes the modal.
    pub fn close(&mut self, cx: &mut Cx) {
        self.opened = false;
        self.draw_bg.redraw(cx);
        cx.sweep_unlock(self.draw_bg.area())
    }

    /// Returns whether this modal was dismissed by the given
    /// actions.
    pub fn dismissed(&self, actions: &Actions) -> bool {
        matches!(
            actions.find_widget_action(self.widget_uid()).cast(),
            MolyModalAction::Dismissed
        )
    }

    /// Returns whether this modal is currently open.
    pub fn is_open(&self) -> bool {
        self.opened
    }

    fn correct_popup_position(&mut self, cx: &mut Cx, placement: PopupPlacement) {
        let content = self.view.widget(cx, ids!(content));
        let content_size = content.area().rect(cx).size;
        let screen_size = cx.display_context.screen_size;

        let pos = match placement {
            PopupPlacement::AtPosition(pos) => pos,
            PopupPlacement::Above { anchor, gap } => DVec2 {
                x: anchor.x,
                y: anchor.y - content_size.y - gap,
            },
        };

        let pos_x = if pos.x + content_size.x > screen_size.x {
            screen_size.x - content_size.x - 10.0
        } else {
            pos.x
        };

        let pos_y = if pos.y + content_size.y > screen_size.y {
            screen_size.y - content_size.y - 10.0
        } else if pos.y < 0.0 {
            10.0
        } else {
            pos.y
        };

        let margin = Inset {
            left: pos_x,
            top: pos_y,
            right: 0.0,
            bottom: 0.0,
        };
        let mut content = self.view.widget(cx, ids!(content));
        script_apply_eval!(cx, content, { margin: #(margin) });

        self.redraw(cx);
    }
}

impl MolyModalRef {
    #[deprecated(note = "Use open_as_dialog or open_as_popup instead")]
    pub fn open(&self, cx: &mut Cx) {
        if let Some(mut inner) = self.borrow_mut() {
            #[allow(deprecated)]
            inner.open(cx);
        }
    }

    /// Opens the modal as a centered dialog.
    pub fn open_as_dialog(&self, cx: &mut Cx) {
        if let Some(mut inner) = self.borrow_mut() {
            inner.open_as_dialog(cx);
        }
    }

    /// Opens the modal as a bottom sheet anchored to the bottom of the screen.
    pub fn open_as_bottom_sheet(&self, cx: &mut Cx) {
        if let Some(mut inner) = self.borrow_mut() {
            inner.open_as_bottom_sheet(cx);
        }
    }

    /// Opens the modal as a popup at the given position.
    pub fn open_as_popup(&self, cx: &mut Cx, pos: DVec2) {
        if let Some(mut inner) = self.borrow_mut() {
            inner.open_as_popup(cx, pos);
        }
    }

    /// Opens the modal as a popup positioned above the given anchor.
    pub fn open_as_popup_above(&self, cx: &mut Cx, anchor: DVec2, gap: f64) {
        if let Some(mut inner) = self.borrow_mut() {
            inner.open_as_popup_above(cx, anchor, gap);
        }
    }

    /// Closes the modal.
    pub fn close(&self, cx: &mut Cx) {
        if let Some(mut inner) = self.borrow_mut() {
            inner.close(cx);
        }
    }

    /// Returns whether this modal was dismissed by the given
    /// actions.
    pub fn dismissed(&self, actions: &Actions) -> bool {
        if let Some(inner) = self.borrow() {
            inner.dismissed(actions)
        } else {
            false
        }
    }

    /// Returns whether this modal is currently open.
    pub fn is_open(&self) -> bool {
        self.borrow().map_or(false, |inner| inner.is_open())
    }
}