blockworx_web/

exchange.rs

//! What comes into the document from outside it: an import, a block's icon,
//! an image of its own — picked from a dialog, or dropped on the diagram.
//!
//! Three effects, one door. The browser will only open a file picker from
//! inside a user gesture, and the gesture that asked is already over by the
//! time the effect reaches the shell — so the input is *in* the page, hidden,
//! and the effect clicks it. What the pick was for is the shell's own record
//! of the flow ([`Wanted`]), so a pick that took a while still lands where
//! the press that asked for it meant it to.
//!
//! A dropped file is read the same way wherever it lands: [`Dropped::of`]
//! names what it is, and the zone it was dropped on says what to do with it.
//! Dropping a document on the **diagram** embeds it as a block of this one;
//! dropping it on the **Diagrams** section files it in the origin. Two
//! zones, two meanings — and one reading of the name, so they cannot
//! disagree about what a file is.
//!
//! What the bytes *mean* is `blockworx_editor::import`'s, and the size a
//! document will accept is the kernel's; neither is decided here.

use std::path::Path;

use dioxus::prelude::*;
use dioxus::web::WebEventExt as _;
use wasm_bindgen::JsCast as _;
use wasm_bindgen::closure::Closure;
use web_sys::{FileReader, HtmlInputElement};

use crate::shell::{Shell, Wanted};

/// What the picker offers. The same two the desktop's dialog filters to: a
/// document draws SVG symbols and PNG artwork and nothing else.
const ACCEPTS: &str = ".svg,.png,image/svg+xml,image/png";

#[component]
pub fn FilePick(shell: Shell) -> Element {
    let wanted = shell.wanted();
    let mut input = use_signal(|| None::<HtmlInputElement>);
    // A new ask opens the picker; the element is the same one every time, so
    // its value is cleared first — picking one file twice running is two
    // picks, and an unchanged value fires no `change`.
    use_effect(move || {
        if wanted.read().is_none() {
            return;
        }
        if let Some(element) = input.read().clone() {
            element.set_value("");
            element.click();
        }
    });
    let deliver = use_hook(|| CopyValue::new(shell));
    rsx! {
        input {
            r#type: "file",
            class: "hidden",
            accept: ACCEPTS,
            "aria-hidden": "true",
            "data-pick": "file",
            onmounted: move |event| {
                input.set(
                    event
                        .try_as_web_event()
                        .and_then(|element| element.dyn_into::<HtmlInputElement>().ok()),
                );
            },
            onchange: move |event| {
                let Some(what) = *wanted.peek() else { return };
                let picked = event
                    .try_as_web_event()
                    .and_then(|event| event.target())
                    .and_then(|target| target.dyn_into::<HtmlInputElement>().ok())
                    .and_then(|element| element.files())
                    .and_then(|files| files.get(0));
                // A picker closed with nothing chosen changed nothing, so
                // there is nothing to put back — only the flow to drop.
                let Some(file) = picked else {
                    deliver.read().unpicked();
                    return;
                };
                let shell = deliver.read().clone();
                let lands = shell.clone();
                reads(&file, &shell, move |name, bytes| {
                    lands.delivers(what, &name, bytes);
                });
            },
        }
    }
}

/// What a dropped file is, read off its name.
#[derive(Clone, Copy, PartialEq, Eq, Debug)]
pub enum Dropped {
    /// A drawing, travelling as the one file it travels in.
    Document,
    /// Artwork, which the session places where a paste would land.
    Artwork,
}

impl Dropped {
    /// What `name` says it is.
    ///
    /// The suffix is asked about directly rather than through
    /// [`Name::of_archive`](blockworx_store::storage::Name::of_archive),
    /// which answers for every name: it says what a container *would* be
    /// called, not whether this is one.
    fn of(name: &str) -> Self {
        let carried = Path::new(name).extension().is_some_and(|ext| {
            ["zip", "bwx"]
                .iter()
                .any(|named| ext.eq_ignore_ascii_case(named))
        });
        if carried {
            Dropped::Document
        } else {
            Dropped::Artwork
        }
    }
}

/// Where a file was dropped, which is what its being a document means.
#[derive(Clone, Copy, PartialEq, Eq, Debug)]
pub enum Zone {
    /// The diagram: a document becomes a block of this one, artwork is
    /// placed. Nothing is filed in the origin.
    Diagram,
    /// The Diagrams section: a document is filed in the origin and opened.
    /// Artwork means nothing to a library, and is refused with a word about
    /// where it would have landed.
    Library,
}

/// The first file a drop carries. One at a time: a library door takes the
/// document out of the session for as long as it is open, so a second file
/// would be waiting on the first with nothing to say what it was for.
pub fn carried_by(native: &web_sys::DragEvent) -> Option<web_sys::File> {
    native
        .data_transfer()
        .and_then(|carried| carried.files())
        .and_then(|files| files.get(0))
}

/// A dropped file, taken in by what it is and where it fell.
pub fn drops(shell: &Shell, zone: Zone, file: &web_sys::File) {
    let dropped = Dropped::of(&file.name());
    let lands = shell.clone();
    reads(file, shell, move |name, bytes| match (zone, dropped) {
        (Zone::Diagram, Dropped::Document) => lands.embeds(&name, &bytes),
        (Zone::Diagram, Dropped::Artwork) => lands.delivers(Wanted::Import, &name, bytes),
        (Zone::Library, Dropped::Document) => lands.imports_archive(name, bytes),
        (Zone::Library, Dropped::Artwork) => lands.failed(format!(
            "{name} is not a diagram — drop a picture on the canvas to place it"
        )),
    });
}

/// Read one file and hand its bytes to whatever asked for them.
/// `FileReader` is the only way to the bytes on the main thread, and it
/// answers on an event rather than returning, so the hand-off happens in the
/// callback.
fn reads(file: &web_sys::File, shell: &Shell, then: impl FnOnce(String, Vec<u8>) + 'static) {
    let Ok(reader) = FileReader::new() else {
        shell.unpicked();
        return;
    };
    let name = file.name();
    let done = {
        let reader = reader.clone();
        let shell = shell.clone();
        Closure::once_into_js(move || {
            let bytes = reader
                .result()
                .ok()
                .and_then(|value| value.dyn_into::<js_sys::ArrayBuffer>().ok())
                .map(|buffer| js_sys::Uint8Array::new(&buffer).to_vec());
            match bytes {
                Some(bytes) => then(name, bytes),
                None => shell.failed(format!("Could not read {name}")),
            }
        })
    };
    reader.set_onload(Some(done.unchecked_ref()));
    if reader.read_as_array_buffer(file).is_err() {
        shell.unpicked();
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    /// A drawing travels as one file; everything else is artwork, and what
    /// artwork the session accepts is `blockworx_editor::import`'s to say,
    /// not this module's. Both zones read the name this one way, so a file
    /// cannot be a diagram on the canvas and a picture in the library.
    #[test]
    fn a_dropped_name_says_what_the_file_is_wherever_it_lands() {
        for named in [
            "engine.bwx.zip",
            "engine.zip",
            "engine.bwx",
            "ENGINE.BWX.ZIP",
        ] {
            assert_eq!(Dropped::of(named), Dropped::Document, "{named}");
        }
        for named in ["logo.png", "symbol.svg", "SYMBOL.SVG", "notes.txt", "zip"] {
            assert_eq!(Dropped::of(named), Dropped::Artwork, "{named}");
        }
    }
}