blockworx_web/

main.rs

//! Blockworx in a browser: a Dioxus shell over the same kernel the desktop
//! stands on.
//!
//! The diagram is `Canvas2D`, painted imperatively by [`blockworx_canvas2d`] and
//! never entering the component tree; the chrome is HTML bound to the model
//! the same call answers. What is Dioxus-specific is small on purpose: one
//! `use_hook` holding the shell, one signal holding the chrome, and components
//! that only read it and raise commands.
//!
//! The chrome is `docs/cad-ui-spec.md`'s: three persistent regions and only
//! three — a docked strip, a docked activity bar with the one panel it opens
//! floating over the diagram, and a floating toolbar — plus the search
//! palette, which is summoned rather than persistent.

mod canvas;
mod chords;
mod chrome;
mod control;
mod diagrams;
mod editor;
mod exchange;
mod frame_rate;
mod icons;
mod library;
mod log;
mod meter;
mod mode;
mod notices;
mod overlay;
mod pacing;
mod palette;
mod prefs;
mod settings;
mod sheet;
mod shell;
mod sidebar;
mod status_line;
mod tool_cluster;
mod top_bar;

#[cfg(test)]
mod snapshots;

use std::cell::RefCell;

use blockworx_store::doc::Viewing;
use dioxus::prelude::*;

use crate::canvas::Canvas;
use crate::editor::InPlaceEditor;
use crate::exchange::FilePick;
use crate::frame_rate::FrameRateBadge;
use crate::mode::Prefers;
use crate::notices::{Notices, Toast};
use crate::overlay::SelectionOverlay;
use crate::palette::Palette;
use crate::prefs::Store;
use crate::shell::Shell;
use crate::sidebar::{ActivityBar, SidebarPanel};
use crate::status_line::StatusLine;
use crate::tool_cluster::ToolCluster;
use crate::top_bar::TopBar;

/// Tailwind's output, which `dx` compiles from `tailwind.css` at the crate
/// root on every build.
const TAILWIND: Asset = asset!("/assets/tailwind.css");

// What opening the origin left for the first render to stand on. A hand-off
// through a cell rather than a parameter because `launch` takes a plain
// function, which can carry nothing — and the open has to have happened
// before the first frame runs, since a kernel call over a document that is
// about to be replaced would fit the view to the wrong one.
thread_local! {
    static OPENED: RefCell<Option<library::Opened>> = const { RefCell::new(None) };
}

fn main() {
    log::install();
    shell::spawn(async {
        let opened = library::Library::opening(Store::of(shell::window().as_ref())).await;
        OPENED.with(|cell| cell.replace(Some(opened)));
        dioxus::launch(App);
    });
}

#[component]
fn App() -> Element {
    // Everything that outlives a render, made once: where the preferences are
    // kept, what they say, what the browser prefers, the faces the in-place
    // editor types in, and the shell itself with the chrome its priming call
    // left.
    let (shell, chrome, store, prefs, prefers) = use_hook(|| {
        let window = shell::window();
        let store = Store::of(window.as_ref());
        let prefs = store.read();
        let prefers = window.as_ref().map_or_else(Prefers::default, Prefers::of);
        editor::register_faces();
        let opened = OPENED
            .with(|cell| cell.take())
            .unwrap_or_else(library::Opened::detached);
        let (shell, chrome) = Shell::opening(&prefs, prefers, opened);
        (
            shell,
            chrome,
            store,
            Signal::new(prefs),
            Signal::new(prefers),
        )
    });

    use_hook({
        let shell = shell.clone();
        move || canvas::listens(&shell)
    });

    // `Mode::System` follows the browser for as long as the page is open,
    // rather than sampling it once at startup.
    use_hook(|| {
        if let Some(window) = shell::window() {
            let mut prefers = prefers;
            mode::watch(&window, move |told| prefers.set(told));
        }
    });

    // One reading of the axis drives both halves: the class the chrome varies
    // on below, and the palette the diagram is painted in here.
    use_effect({
        let shell = shell.clone();
        move || {
            let prefs = prefs.read();
            store.write(&prefs);
            shell.wears(&prefs, prefers());
        }
    });

    let at = prefs.read().luminance(prefers());
    let field = chrome.read().edit_text.clone();
    let vantage = chrome.read().vantage;
    // The one state class the spec asks five regions to vary on at once: the
    // strip washes amber, the rail goes inert, the diagram desaturates.
    let viewing = matches!(chrome.read().top_bar.lens.viewing, Viewing::Past(_));
    rsx! {
        document::Stylesheet { href: TAILWIND }
        div {
            class: "{mode::root_class(at)} group flex h-screen w-screen flex-col \
                    overflow-hidden bg-white text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100",
            "data-viewing": if viewing { "true" } else { "false" },
            TopBar { shell: shell.clone() }
            div { class: "flex min-h-0 flex-1",
                ActivityBar { shell: shell.clone() }
                div { class: "relative min-h-0 min-w-0 flex-1",
                    Canvas { shell: shell.clone() }
                    ToolCluster { shell: shell.clone() }
                    SelectionOverlay { shell: shell.clone() }
                    if let Some(field) = field {
                        InPlaceEditor {
                            key: "{field.id:?}",
                            shell: shell.clone(),
                            field,
                            vantage,
                            typeface: shell.typeface(),
                        }
                    }
                    Notices { shell: shell.clone() }
                    Toast { shell: shell.clone() }
                    StatusLine { shell: shell.clone() }
                    FrameRateBadge { shell: shell.clone() }
                    SidebarPanel { shell: shell.clone(), prefs, prefers }
                }
            }
            Palette { shell: shell.clone(), open: shell.palette() }
            FilePick { shell }
        }
    }
}