Missing mouse events + resize handler

[MartinKavik]

Chat link: https://discord.com/channels/797429007683158046/797429007683158051/880072431195258901

cork — Today at 2:53 PM @MartinKavik How can we attach to the following events?

1. drag events for dragging elements and panning
2. mouse wheel events for panning
3. mouse wheel + Ctrl events for zooming
4. window or parent element resize and orientation change events for adapting or changing view-port/view-box for SVG

---

1. drag events for dragging elements and panning

MZ native drag events haven't been implemented yet (I've created this issue to remember to add them). However you should be able to use the Dominator ones directly:

fn my_draggable_element() -> impl Element {
    El::new()
        .update_raw_el(|raw_el| {
            raw_el.event_handler(|event: events::DragStart| {
                // ... 
            })
        })
}

See Dominator's docs for more info: https://docs.rs/dominator/0.5.19/dominator/events/index.html

2. mouse wheel events for panning
3. mouse wheel + Ctrl events for zooming

Unfortunately, I don't see WheelEvent (https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event) in Dominator. However I've already added one custom event to MZ - see https://github.com/MoonZoon/MoonZoon/blob/main/crates/zoon/src/events_extra.rs. So with a bit of luck we just need to add one line like make_mouse_event!(Wheel, "wheel");. Feel free to crate a PR once it works for you.

4. window or parent element resize and orientation change events for adapting or changing view-port/view-box for SVG

window resize: you can try the code below (NOTE: global_events has been implemented in a working branch - https://github.com/MartinKavik/MoonZoon/blob/4f315ed02b8286858445b94db6e764bc60cb451e/crates/zoon/src/element/raw_el.rs#L97-L100):

fn my_element_listening_for_window_resize() -> impl Element {
    El::new()
        .update_raw_el(|raw_el| {
            raw_el.global_event_handler(|event: events::Resize| {
                // ... 
            })
        })
}

parent element resize: Handler is already implemented in the same working branch, see:

1. https://github.com/MartinKavik/MoonZoon/blob/4f315ed02b8286858445b94db6e764bc60cb451e/examples/time_tracker/frontend/src/app/view.rs#L7
2. https://github.com/MartinKavik/MoonZoon/blob/4f315ed02b8286858445b94db6e764bc60cb451e/examples/time_tracker/frontend/src/app.rs#L79
3. https://github.com/MartinKavik/MoonZoon/blob/4f315ed02b8286858445b94db6e764bc60cb451e/crates/zoon/src/resize_observer.rs
4. https://github.com/MartinKavik/MoonZoon/blob/4f315ed02b8286858445b94db6e764bc60cb451e/crates/zoon/src/element/ability/resizable_viewport.rs

orientation change: I'll need to do some research before designing API because I don't have too much experience with it and it's a bit experimental (if I'm reading the correct docs): https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation. However I don't have a problem with merging a PR with a new event in events_extra.rs.

[MartinKavik]

UPDATE: WheelEvent added - https://github.com/MoonZoon/MoonZoon/pull/28