blockworx_web/

canvas.rs

//! The diagram's element, and everything the browser tells it.
//!
//! Every handler here does one thing: it turns a DOM event into a sample or an
//! [`Event`] and hands it to the shell. What a drag *means* — a pan, a tool's
//! gesture, a click — is the backend's [`Reader`](blockworx_canvas2d::Reader)
//! and the kernel's, not this element's.

use blockworx_canvas2d::input::{Edge, Phase, Sample, chord_of, dom};
use blockworx_kernel::Event;
use blockworx_paint::Button;
use blockworx_tools::commands::CommandId;
use blockworx_tools::tool::Action;
use dioxus::prelude::*;
use dioxus::web::WebEventExt as _;
use wasm_bindgen::JsCast as _;
use wasm_bindgen::prelude::Closure;
use web_sys::{HtmlCanvasElement, KeyboardEvent, PointerEvent};

use crate::exchange::Zone;
use crate::shell::{Escaped, Shell, types_into};

/// The canvas, filling the diagram's part of the page.
///
/// `tabindex` so it can hold the keyboard, which a press on the diagram hands
/// it. `touch-action: none` and the rest of `.bw-canvas` are what stop the
/// browser claiming a gesture the editor is the recognizer for.
#[component]
pub fn Canvas(shell: Shell) -> Element {
    // One `Copy` handle for the handlers below: the shell is an `Rc` value,
    // which each `move` closure would otherwise take for itself.
    let shell = use_hook(|| CopyValue::new(shell));
    rsx! {
        canvas {
            class: "bw-canvas absolute inset-0 h-full w-full touch-none select-none outline-none \
                    transition-[filter] group-data-[viewing=true]:saturate-50",
            tabindex: "0",
            onmounted: move |event| {
                if let Some(canvas) = event
                    .try_as_web_event()
                    .and_then(|element| element.dyn_into::<HtmlCanvasElement>().ok())
                {
                    shell.read().mounted(canvas);
                }
            },
            onresize: move |_| shell.read().resized(),
            // The right button pans; the browser's image menu would take the
            // gesture from under it.
            oncontextmenu: move |event| event.prevent_default(),
            // A document dropped on the diagram is embedded as a block of it;
            // a picture is placed. Both halves have to refuse the browser its
            // own answer — opening the file in place of the page — and it
            // only offers the drop where the drag was taken.
            ondragover: move |event| {
                if let Some(native) = event.try_as_web_event() {
                    native.prevent_default();
                    dragged(&shell.read(), &native);
                }
            },
            ondrop: move |event| {
                let Some(native) = event.try_as_web_event() else {
                    return;
                };
                native.prevent_default();
                dragged(&shell.read(), &native);
                if let Some(file) = crate::exchange::carried_by(&native) {
                    crate::exchange::drops(&shell.read(), Zone::Diagram, &file);
                }
            },
            onpointerdown: move |event| {
                if let Some(native) = event.try_as_web_event() {
                    // The middle button drives the camera. `prevent_default`
                    // takes the autoscroll the platform would start on it;
                    // the paste X11 binds to the same button is raised on the
                    // button coming back *up* and is out of reach here, so
                    // the shell refuses that one itself (`Pasting`).
                    if dom::button_of(native.button()) == Some(Button::Middle) {
                        native.prevent_default();
                        shell.read().provoked();
                    }
                    // A press on the diagram is unambiguous intent to edit,
                    // so it dismisses the navigator — and selects, in the
                    // one gesture.
                    shell.read().works();
                    shell.read().grabs(native.pointer_id());
                    pointed(&shell.read(), &native, Phase::Down);
                }
            },
            onpointermove: move |event| pointed_by(&shell.read(), &event, Phase::Moved),
            onpointerup: move |event| pointed_by(&shell.read(), &event, Phase::Up),
            onpointerleave: move |event| pointed_by(&shell.read(), &event, Phase::Left),
            onpointercancel: move |event| pointed_by(&shell.read(), &event, Phase::Cancelled),
            onwheel: move |event| {
                let Some(native) = event.try_as_web_event() else {
                    return;
                };
                // A bare wheel zooms the drawing and a ctrl-held one is the
                // trackpad's pinch: neither is the page's to scroll or zoom.
                native.prevent_default();
                let shell = shell.read();
                if let Some(origin) = shell.origin() {
                    shell.sampled(Sample::Wheel(dom::wheel(&native, origin)));
                }
            },
        }
    }
}

/// Where the drag is, told to the editor as a motion — so what it drops
/// lands under it rather than wherever the pointer was before the browser
/// took it for the drag (`dom::dragged`).
fn dragged(shell: &Shell, native: &web_sys::DragEvent) {
    if let Some(origin) = shell.origin() {
        shell.sampled(Sample::Pointer(dom::dragged(native, origin)));
    }
}

fn pointed_by(shell: &Shell, event: &dioxus::core::Event<PointerData>, phase: Phase) {
    if let Some(native) = event.try_as_web_event() {
        pointed(shell, &native, phase);
    }
}

fn pointed(shell: &Shell, native: &PointerEvent, phase: Phase) {
    let Some(origin) = shell.origin() else {
        return;
    };
    shell.sampled(Sample::Pointer(dom::pointer(native, phase, origin)));
}

/// The page's keyboard and clipboard, read for the drawing at the document
/// rather than on any element this app renders: with nothing focused, a key is
/// aimed at `<body>`, above all of them. The listeners are the page's, and
/// end with the tab.
pub fn listens(shell: &Shell) {
    let Some(document) = crate::shell::window().and_then(|window| window.document()) else {
        return;
    };
    let on = |kind: &str, heard: Box<dyn FnMut(web_sys::Event)>| {
        let heard = Closure::wrap(heard);
        if document
            .add_event_listener_with_callback(kind, heard.as_ref().unchecked_ref())
            .is_ok()
        {
            heard.forget();
        }
    };
    for (kind, edge) in [("keydown", Edge::Down), ("keyup", Edge::Up)] {
        let shell = shell.clone();
        on(
            kind,
            Box::new(move |event| {
                if let Some(native) = event.dyn_ref::<KeyboardEvent>() {
                    keyed_by(&shell, native, edge);
                }
            }),
        );
    }
    let pasting = shell.clone();
    on("paste", Box::new(move |event| pasted_on(&pasting, &event)));
    for (kind, id) in [("copy", CommandId::Copy), ("cut", CommandId::Cut)] {
        let shell = shell.clone();
        on(kind, Box::new(move |event| clipped_on(&shell, &event, id)));
    }
}

/// A keystroke anywhere on the page. A field being typed into keeps its own
/// keys, and so does a control that took one for itself.
fn keyed_by(shell: &Shell, native: &KeyboardEvent, edge: Edge) {
    // Whoever the key belongs to, it says the user is at the keyboard — so a
    // paste that follows is one they asked for, not one the middle button
    // provoked.
    if edge == Edge::Down {
        shell.asked();
    }
    if edge == Edge::Down && (kept_by_a_control(native) || typed_into(native)) {
        return;
    }
    keyed(shell, native, edge);
}

/// Whether a control took the key. A menu takes Escape — and says so even
/// while it is closed, when there is nothing for it to close; the key is then
/// the drawing's.
fn kept_by_a_control(native: &KeyboardEvent) -> bool {
    native.default_prevented() && (native.key() != "Escape" || opened_around(native))
}

/// Whether the event came from inside something open. The attribute still
/// says what it was before this key: the page re-renders after the event.
fn opened_around(native: &web_sys::Event) -> bool {
    native
        .target()
        .and_then(|target| target.dyn_into::<web_sys::Element>().ok())
        .and_then(|element| element.closest("[data-state=open]").ok().flatten())
        .is_some()
}

/// A keystroke the canvas reads, or a chord this call has a command for.
/// Everything else is left to the browser.
fn keyed(shell: &Shell, native: &KeyboardEvent, edge: Edge) {
    // Escape closes the glass before anything else reads it, so a tool armed
    // before the panel opened is not disarmed by the key that shut it.
    if edge == Edge::Down && native.key() == "Escape" && shell.escaped() == Escaped::Claimed {
        native.prevent_default();
        return;
    }
    if let Some(sample) = dom::key(native, edge) {
        // Space would scroll the page, or press the focused button, and
        // Backspace would leave the page.
        native.prevent_default();
        shell.sampled(Sample::Key(sample));
        return;
    }
    if edge != Edge::Down {
        return;
    }
    let Some(id) = chord_of(native).and_then(|chord| shell.chrome().peek().commands.bound(chord))
    else {
        return;
    };
    native.prevent_default();
    shell.say(Event::Command(id));
}

/// A copy or a cut anywhere but a field takes the selection, when there is
/// one to take — and is otherwise left to the browser.
fn clipped_on(shell: &Shell, native: &web_sys::Event, id: CommandId) {
    let offered = shell
        .chrome()
        .peek()
        .commands
        .face(id)
        .is_some_and(|face| !face.availability.disabled());
    if typed_into(native) || !offered {
        return;
    }
    native.prevent_default();
    shell.say(Event::Command(id));
}

/// A paste anywhere but a field is an object paste — as the egui shell takes
/// one.
fn pasted_on(shell: &Shell, native: &web_sys::Event) {
    if typed_into(native) {
        return;
    }
    let pasted = native
        .dyn_ref::<web_sys::ClipboardEvent>()
        .and_then(web_sys::ClipboardEvent::clipboard_data)
        .and_then(|data| data.get_data("text/plain").ok())
        .filter(|text| !text.is_empty());
    let Some(text) = pasted else {
        return;
    };
    if !shell.takes_a_paste() {
        // The middle button provoked it; the pan it belongs to is the whole
        // gesture. Refused rather than passed on, so the diagram is not
        // written to by a camera move.
        native.prevent_default();
        return;
    }
    native.prevent_default();
    shell.say(Event::Action(Action::Paste(text)));
}

fn typed_into(native: &web_sys::Event) -> bool {
    native
        .target()
        .and_then(|target| target.dyn_into::<web_sys::Element>().ok())
        .is_some_and(|target| types_into(&target))
}