Rust gloo_events : Nested eventlisteners - rust

Question

So, few months ago, i went on the journey of Rust and WASM.
The goal is to build a new generation free software WASM CMS to build websites implementing crypto and decentralized networking.
(See Fermyon Bartholomew, Locutus (rust version of Freenet), Holochain).
I want to build a business around that, so i will never drop this project. For those who are interested, help is welcome.
Anyway, i'm stuck on this problems since weeks, and i'm literally going crazy about it. Here is the problem:
For now i'm trying to make a rectangle selection tool, to simply draw empty rectangles on my canvas.
The mechanic is as follow, just three nested event listeners:
The first one is the onmousedown, registering the x/y position of the mouse click, and then adding the 2nd eventlistener
The second one is the onmousemove, adding the 3rd eventlistener if not already added, and then drawing/redrawing the rectangle
The third one is the oumouseup, setting the Point to None, and then removing itself and the onmousemove listeners
You can get the project at https://github.com/MojoMotion/canvas_rectangle_drawing_example (push requests are welcome).
Here is the main.rs:
use wasm_bindgen::JsCast;
use wasm_bindgen::UnwrapThrowExt;
//use gloo_console::log;
use gloo::events::EventListener;
use gloo_utils::document;
use web_sys::CanvasRenderingContext2d;
use web_sys::MouseEvent;
use std::cell::RefCell;
use std::rc::Rc;
struct Point {
x: f32,
y: f32,
}
fn main() {
let canvas = Rc::new(RefCell::new(document()
.get_element_by_id("canvas")
.unwrap()
.dyn_into::<web_sys::HtmlCanvasElement>()
.map_err(|_| ())
.unwrap()));
let context: CanvasRenderingContext2d = canvas
.borrow()
.get_context("2d")
.unwrap()
.unwrap()
.dyn_into::<CanvasRenderingContext2d>()
.unwrap();
let p1 = Rc::new(RefCell::new(None));
let p2 = Rc::new(RefCell::new(None));
let mouse_down = EventListener::new(&*canvas.borrow_mut(), "mousedown", |event| {
let event = event.dyn_ref::<MouseEvent>().unwrap_throw();
*p1.borrow_mut() = Some(Point { x: event.x() as f32, y: event.y() as f32 });
let mouse_move = EventListener::new(&*canvas.borrow_mut(), "mousemove", |event| {
let event = event.dyn_ref::<MouseEvent>().unwrap_throw();
*p2.borrow_mut() = Some(Point { x: event.x() as f32, y: event.y() as f32 });
let mouse_up = EventListener::new(&*canvas.borrow_mut(), "mouseup", |_event| {
*p1.borrow_mut() = None;
*p2.borrow_mut() = None;
//context.begin_path();
//context.move_to(125., 125.);
//context.line_to(125., 45.);
//context.line_to(45., 125.);
//context.close_path();
//context.stroke();
});
mouse_up.forget();
});
mouse_move.forget();
});
mouse_down.forget();
}
Here is the errors :
error[E0597]: `p1` does not live long enough
--> src/main.rs:40:10
|
38 | let mouse_down = EventListener::new(&*canvas.borrow_mut(), "mousedown", |event| {
| ------- value captured here
39 | let event = event.dyn_ref::<MouseEvent>().unwrap_throw();
40 | *p1.borrow_mut() = Some(Point { x: event.x() as f32, y: event.y() as f32 });
| ^^ borrowed value does not live long enough
...
46 | let mouse_up = EventListener::new(&*canvas.borrow_mut(), "mouseup", |_event| {
| ____________________________-
47 | | *p1.borrow_mut() = None;
48 | | *p2.borrow_mut() = None;
49 | |
... |
56 | |
57 | | });
| |______________- argument requires that `p1` is borrowed for `'static`
...
64 | }
| - `p1` dropped here while still borrowed
error[E0597]: `canvas` does not live long enough
--> src/main.rs:42:47
|
38 | let mouse_down = EventListener::new(&*canvas.borrow_mut(), "mousedown", |event| {
| ------- value captured here
...
42 | let mouse_move = EventListener::new(&*canvas.borrow_mut(), "mousemove", |event| {
| - ^^^^^^ borrowed value does not live long enough
| __________________________|
| |
43 | | let event = event.dyn_ref::<MouseEvent>().unwrap_throw();
44 | | *p2.borrow_mut() = Some(Point { x: event.x() as f32, y: event.y() as f32 });
45 | |
... |
58 | | mouse_up.forget();
59 | | });
| |__________- argument requires that `canvas` is borrowed for `'static`
...
64 | }
| - `canvas` dropped here while still borrowed
error[E0597]: `p2` does not live long enough
--> src/main.rs:44:14
|
38 | let mouse_down = EventListener::new(&*canvas.borrow_mut(), "mousedown", |event| {
| ------- value captured here
...
44 | *p2.borrow_mut() = Some(Point { x: event.x() as f32, y: event.y() as f32 });
| ^^ borrowed value does not live long enough
45 |
46 | let mouse_up = EventListener::new(&*canvas.borrow_mut(), "mouseup", |_event| {
| ____________________________-
47 | | *p1.borrow_mut() = None;
48 | | *p2.borrow_mut() = None;
49 | |
... |
56 | |
57 | | });
| |______________- argument requires that `p2` is borrowed for `'static`
...
64 | }
| - `p2` dropped here while still borrowed
I guess the problem comes from the eventlistener.forget() method call that throws the borrowed variables out of scope (i guess by using Futures stuff).
I tried to get around the problem by understanding lifetimes and use the 'static lifetime, Rc and RefCell, which apparently does not lives long enough for eventlisteners.
My guess is that i should use eventlistener.callback() with Futures stuff (futures::stream::Stream, futures::channel::mpsc, std::pin::Pin, std::task::{Context, Poll}) following the official doc at https://docs.rs/gloo-events/latest/gloo_events/struct.EventListener.html, but because i'm not very experienced with javascript, i'm really lost trying connecting rust and javascript...
Right now i'm trying to make the code bit in javascript to have better understanding of js behavior and callback stuff... I will never surrender but in the meantime i would love to have some help... Also i think this is a really cool project so i if we can share the solution for free i think that's nice. Help me out!

Answer 1

You're passing around references to reference counted values, if this sentence seems a bit redundant it's because it is.
Or in other words Rc<T> is already a reference to T.
Just .clone() the Rc<T> if you need multiple and pass the cloned values.
let p1: Rc<RefCell<Option<Point>>> = Rc::new(RefCell::new(None));
let mouse_down = {
let p1 = p1.clone();
EventListener::new(canvas.borrow(), "mousedown", move |event| {
let event = event.dyn_ref::<MouseEvent>().unwrap_throw();
*p1.borrow_mut() = Some(Point { x: event.x() as f32, y: event.y() as f32 });
// ...
})
};
// further uses of p1