blockworx_web/

overlay.rs

//! The selection overlay, anchored to what is selected, and the two pickers
//! it opens (`docs/cad-ui-spec.md` §3).
//!
//! The most important component in the application, and the most
//! input-agnostic: identical with mouse, trackpad, touch and pen. Which verbs
//! it carries, in what order, where the row ends and the overflow begins, and
//! where the bar stands are all [`blockworx_kernel::bar`]'s — so this bar and
//! the desktop's are one bar drawn twice.
//!
//! It is glass floating over the middle of the diagram, so it takes nothing
//! off the safe region: a framing may pass under it, since glass is not a
//! wall.

use blockworx_canvas2d::css_color;
use blockworx_geom::{Rect, Vec2};
use blockworx_kernel::bar::{self, Bar};
use blockworx_kernel::chrome::accent_display_role;
use blockworx_kernel::{Event, Overlay as Model};
use blockworx_tools::commands::{ACCENTS, CommandId, PIN_DIRS, in_overlay};
use blockworx_tools::tool::Action;
use dioxus::prelude::*;
use dioxus::web::WebEventExt as _;

use crate::chrome::Face;
use crate::control::{Face as Glyph, Press, Pressable, TAP};
use crate::icons;
use crate::shell::{Picker, Shell};

/// What the bar measures out to before it has measured itself. The DOM tells
/// us the real size on the frame after, and the placement re-runs; this only
/// decides where the first paint lands, so it is the bar's own metrics rather
/// than a guess: a 44 px row with 5 px of margin either side.
const BAR: Vec2 = Vec2::new(0.0, 54.0);

/// One cell of the bar.
const CELL: &str = "relative grid h-target min-w-target place-items-center rounded-[11px] \
     px-1.5 text-zinc-700 transition duration-150 ease-out live:hover:bg-zinc-950/6 \
     live:active:scale-90 dead:opacity-30 dark:text-zinc-200 \
     dark:live:hover:bg-white/10 [&_svg]:size-5 [&_svg]:stroke-[1.8]";

/// The bar's own shell: floating chrome, so a shadow and a large radius.
const GLASS: &str = "pointer-events-auto absolute z-24 flex items-center gap-0.5 rounded-[14px] \
     bg-white/95 p-[5px] shadow-lg ring-1 ring-zinc-950/5 backdrop-blur-xl \
     dark:bg-zinc-800/95 dark:ring-white/10";

#[component]
pub fn SelectionOverlay(shell: Shell) -> Element {
    let chrome = shell.chrome();
    let safe = shell.safe();
    // The DOM measures itself, so the bar is placed from the width it drew
    // at last time; the first paint of a new set of verbs uses its height
    // alone, which is all the vertical fit test reads.
    //
    // Hooked before anything can return: Dioxus matches hooks by position,
    // so a frame with nothing selected must still take this slot.
    let mut measured = use_signal(|| BAR);
    let Some(model) = chrome.read().overlay.clone() else {
        return rsx! {};
    };
    let selection = model.selection.screen;
    if !safe().intersects(selection) {
        return rsx! {};
    }
    let offered: Vec<Face> = chrome
        .read()
        .commands
        .drawn()
        .filter(|face| in_overlay(face.id))
        .cloned()
        .collect();
    let count = model.selection.count;
    let bar = Bar::of(offered, count, |face: &Face| face.precedence);
    let Some(at) = bar::place(selection, measured(), safe()) else {
        return rsx! {};
    };
    rsx! {
        div {
            class: GLASS,
            style: "left:{at.min.x}px;top:{at.min.y}px",
            role: "toolbar",
            "aria-label": "Selection",
            "data-overlay": "true",
            onmounted: move |event| sized(&mut measured, &event),
            onresize: move |event| {
                let size = event
                    .try_as_web_event()
                    .and_then(|entry| crate::shell::measured(&entry.target()))
                    .map(|at| at.size());
                if let Some(size) = size
                    && *measured.peek() != size
                {
                    measured.set(size);
                }
            },
            if count > 1 {
                span {
                    class: "mr-1 flex h-[26px] items-center whitespace-nowrap border-r \
                            border-zinc-950/10 pl-1.5 pr-2.5 text-xs text-zinc-500 \
                            dark:border-white/15 dark:text-zinc-400",
                    "{count} selected"
                }
            }
            if let Bar::Row(_) = bar {
                for face in bar.row() {
                    Control {
                        key: "{face.id.name()}",
                        shell: shell.clone(),
                        face: face.clone(),
                        model: model.clone(),
                    }
                }
                if !bar.overflow().is_empty() {
                    Overflow { shell: shell.clone(), rest: bar.overflow().to_vec() }
                }
            } else {
                span { class: "px-3 text-[13px] text-zinc-500 dark:text-zinc-400",
                    "{bar::nothing_to_say(count)}"
                }
            }
        }
        Pickers { shell, bar: at, model }
    }
}

/// One verb. The two that open a picker wear the reading the picker will show
/// — the accent's own colour, the pins' shared direction — so what a press
/// leads to is legible before it is pressed.
#[component]
fn Control(shell: Shell, face: Face, model: Model) -> Element {
    // The accent cell is the one control whose face is the document's own
    // colour rather than a glyph, so its swatch rides over the button.
    if face.id == CommandId::Accent {
        return rsx! {
            span { class: "relative",
                Press {
                    shell,
                    id: CommandId::Accent,
                    says: face.label.clone(),
                    icon: icons::PAINT,
                    class: CELL,
                }
                if let Some(swatch) = model.swatch {
                    span {
                        class: "pointer-events-none absolute inset-x-2 bottom-1.5 h-1 \
                                rounded-full",
                        style: "background:{css_color(swatch)}",
                    }
                }
            }
        };
    }
    let says = if face.id == CommandId::PinType {
        pin_dir_hover(model.pin_dir)
    } else {
        face.label.clone()
    };
    rsx! {
        Press {
            shell,
            id: face.id,
            says,
            icon: icons::overlay(face.id),
            class: CELL,
        }
    }
}

/// What the I/O control says, which is where the state lives: one glyph in
/// every state, so the cell is the same shape whatever the pins are facing.
fn pin_dir_hover(dir: Option<blockworx_doc::values::PinDir>) -> String {
    let says = match dir {
        Some(blockworx_doc::values::PinDir::Input) => "currently Input",
        Some(blockworx_doc::values::PinDir::Output) => "currently Output",
        Some(blockworx_doc::values::PinDir::InOut) => "currently Input Output",
        None => "these pins face different ways",
    };
    format!("Direction \u{2014} {says}")
}

/// The verbs past the row's fill, behind one control that opens them as a
/// menu. Order stays stable regardless of which verbs overflowed.
#[component]
fn Overflow(shell: Shell, rest: Vec<Face>) -> Element {
    use dioxus_primitives::dropdown_menu::{
        DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
    };
    let token = shell.token();
    let raise = use_hook(|| CopyValue::new(shell));
    rsx! {
        DropdownMenu { class: "relative",
            DropdownMenuTrigger {
                class: CELL,
                title: "{rest.len()} more",
                "data-cmd": "more",
                Glyph { icon: icons::MORE }
            }
            DropdownMenuContent { class: crate::top_bar::MENU,
                for (place , face) in rest.into_iter().enumerate() {
                    DropdownMenuItem::<CommandId> {
                        key: "{face.id.name()}",
                        class: crate::top_bar::MENU_ROW,
                        title: crate::chords::hinted(token, &face.label, face.id),
                        "data-cmd": "{face.id.name()}",
                        value: face.id,
                        index: place,
                        disabled: !face.live(),
                        on_select: move |id| raise.read().say(Event::Command(id)),
                        Glyph { icon: icons::overlay(face.id) }
                        "{face.label}"
                    }
                }
            }
        }
    }
}

/// Whichever picker the bar's controls opened, anchored to the bar's own top
/// right and clamped into the same room the bar is, so a bar near the top of
/// the diagram does not push its picker off the page.
#[component]
fn Pickers(shell: Shell, bar: Rect, model: Model) -> Element {
    let picker = shell.picker();
    let Some(open) = picker.read().clone() else {
        return rsx! {};
    };
    let theme = shell.theme();
    match open {
        Picker::Accent(target) => rsx! {
            Sheet { shell: shell.clone(), bar, name: "accent",
                for (id , label , value) in ACCENTS {
                    {
                        let colour = css_color(theme.resolve(accent_display_role(target, value)));
                        let taken = value == model.accent;
                        rsx! {
                            Pressable {
                                key: "{id.name()}",
                                class: if taken {
                                    "size-7 rounded ring-2 ring-zinc-900 dark:ring-zinc-100"
                                } else {
                                    "size-7 rounded ring-1 ring-zinc-950/15 dark:ring-white/20"
                                },
                                style: "background:{colour}",
                                title: "{label}",
                                "data-cmd": "{id.name()}",
                                "aria-pressed": if taken { "true" } else { "false" },
                                onpress: {
                                    let shell = shell.clone();
                                    move |()| {
                                        shell.picked(Some(
                                            Action::SetRole { target, role: value }.into(),
                                        ));
                                    }
                                },
                            }
                        }
                    }
                }
            }
        },
        Picker::PinType(pins) => rsx! {
            Sheet { shell: shell.clone(), bar, name: "io",
                for (id , label , kind) in PIN_DIRS {
                    Pressable {
                        key: "{id.name()}",
                        class: if model.pin_dir == Some(kind) { TAKEN } else { TAP },
                        title: "{label}",
                        "data-cmd": "{id.name()}",
                        "aria-pressed": if model.pin_dir == Some(kind) { "true" } else { "false" },
                        onpress: {
                            let shell = shell.clone();
                            let pins = pins.clone();
                            move |()| {
                                shell.picked(Some(
                                    Action::SetPinsKind { pins: pins.clone(), kind }.into(),
                                ));
                            }
                        },
                        Glyph { icon: icons::pin_dir(kind) }
                    }
                }
            }
        },
    }
}

/// A picker's own sheet: the grid, and the backdrop that dismisses it. The
/// backdrop is what makes a click away a cancel without a frame's delay —
/// the press that opened the picker is over by the time it exists.
#[component]
fn Sheet(shell: Shell, bar: Rect, name: String, children: Element) -> Element {
    let dismiss = use_hook(|| CopyValue::new(shell));
    // Above the bar's top right, growing up and to the left.
    let at = bar::clamp(
        Rect::from_min_size(
            blockworx_geom::pos2(bar.max.x - SHEET.x, bar.min.y - SHEET.y - GAP),
            SHEET,
        ),
        dismiss.read().safe()(),
    );
    rsx! {
        div {
            class: "fixed inset-0 z-40",
            "data-backdrop": "{name}",
            onclick: move |_| dismiss.read().picked(None),
        }
        div {
            class: "absolute z-50 grid grid-cols-3 gap-1 rounded-2xl bg-white p-2 shadow-lg \
                    ring-1 ring-zinc-950/5 dark:bg-zinc-800 dark:ring-white/10",
            style: "left:{at.min.x}px;top:{at.min.y}px",
            role: "group",
            "data-picker": "{name}",
            {children}
        }
    }
}

/// The direction the pins already face, which is the one cell drawn filled.
const TAKEN: &str = "relative grid size-target place-items-center rounded-xl bg-sky-600 \
     text-white transition duration-150 ease-out dark:bg-sky-500 dark:text-zinc-950 \
     [&_svg]:size-5 [&_svg]:stroke-[1.8]";

/// How big a picker's sheet is: three swatches and their gaps, plus the
/// sheet's own padding. Both pickers fit inside it — the I/O row is three
/// cells wide and one tall.
const SHEET: Vec2 = Vec2::new(116.0, 116.0);

/// The air between the bar's top edge and the picker above it.
const GAP: f32 = 15.0;

fn sized(measured: &mut Signal<Vec2>, event: &dioxus::prelude::Event<MountedData>) {
    use dioxus::web::WebEventExt as _;
    let Some(at) = event
        .try_as_web_event()
        .and_then(|element| crate::shell::measured(&element))
    else {
        return;
    };
    if *measured.peek() != at.size() {
        measured.set(at.size());
    }
}

#[cfg(test)]
mod tests {
    use blockworx_doc::values::PinDir;

    use super::*;

    /// One glyph in every state, so the state has to be in the words.
    #[test]
    fn the_io_control_says_which_way_the_pins_face() {
        assert_eq!(
            pin_dir_hover(Some(PinDir::Input)),
            "Direction \u{2014} currently Input",
        );
        assert_eq!(
            pin_dir_hover(None),
            "Direction \u{2014} these pins face different ways",
        );
    }

    /// A sheet anchored above a bar at the top of the diagram is moved down
    /// into the room rather than off the page — which is the clamp the
    /// desktop's picker never had.
    #[test]
    fn a_picker_over_a_bar_at_the_top_is_clamped_into_the_room() {
        let region = Rect::from_min_max(
            blockworx_geom::pos2(0.0, 54.0),
            blockworx_geom::pos2(800.0, 600.0),
        );
        let bar = Rect::from_min_size(blockworx_geom::pos2(300.0, 60.0), Vec2::new(220.0, 54.0));
        let wanted = Rect::from_min_size(
            blockworx_geom::pos2(bar.max.x - SHEET.x, bar.min.y - SHEET.y - GAP),
            SHEET,
        );
        assert!(
            wanted.min.y < region.min.y,
            "precondition: unclamped, the picker is off the top of the diagram",
        );
        assert!(region.contains_rect(bar::clamp(wanted, region)));
    }
}