How to handle Nested Mouse Events

[ekanna]

How to convert below web component into Leptos component? It creates resizable div when user adjusts it.

My web component version of this link https://phuoc.ng/collection/html-dom/create-resizable-split-views/

class MyResizer extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.style.cursor = "ew-resize"
    this.style.maxWidth =  "2px"
    this.style.height = "inherit"
    this.style.border = "2px solid red"
    this.addEventListener('mousedown', this.on_mousedown);
  }

  disconnectedCallback() {
    this.removeEventListener('mousedown', this.on_mousedown);
  }
  
  on_mousedown(e){
    // Elements
    const leftSide = this.previousElementSibling;
    const rightSide = this.nextElementSibling;
    
    // Get the current mouse position
    let x = e.clientX;
    let y = e.clientY;
    let leftWidth = leftSide.getBoundingClientRect().width;

    const on_mousemove = function (e) {
      // How far the mouse has been moved
      const dx = e.clientX - x;
      leftSide.style.width = leftWidth + dx;

      leftSide.style.pointerEvents = 'none';
      rightSide.style.pointerEvents = 'none';

      document.body.style.cursor = 'ew-resize';
      document.body.style.userSelect = 'none';
    };

    const on_mouseup = function () {
      document.removeEventListener('mousemove', on_mousemove);

      leftSide.style.removeProperty('pointer-events');
      rightSide.style.removeProperty('pointer-events');

      document.body.style.removeProperty('cursor');
      document.body.style.removeProperty('user-select');
      
      document.removeEventListener('mouseup', on_mouseup);
    };

    document.addEventListener('mousemove', on_mousemove);
    document.addEventListener('mouseup', on_mouseup);    
    
  }
}

customElements.define('my-resizer', MyResizer);

My Attempt for converting above code into leptos but it is not working as expected.

#[component]
fn Resizer() -> impl IntoView {
    let mouse_down = move |e: MouseEvent| {
        let x = e.client_x();
        log!("{}", x);

        let mouse_move = window_event_listener(ev::mousemove, move |e| {
            let dx = e.client_x() - x;
            log!("dx:{}", dx);
            let target = e.target().unwrap();
            let div: HtmlDivElement = target.dyn_into().unwrap();
            let left_side = div.previous_element_sibling().unwrap();
            let right_side = div.next_element_sibling().unwrap();

            let left_width = left_side.client_width() + dx;

            let global = document().body().unwrap();
            global
                .set_attribute("style", "cursor:ew-resize; user-select: none;")
                .unwrap();

            left_side
                .set_attribute(
                    "style",
                    &format!("pointer-events: none; width: {}px", left_width),
                )
                .unwrap();
            right_side
                .set_attribute("style", "pointer-events: none;")
                .unwrap();
        });

        on_cleanup(move || mouse_move.remove());

        let mouse_up = window_event_listener(ev::mouseup, move |e| {
            // How to ?
            // mouse_move.remove();

            let target = e.target().unwrap();
            let div: HtmlDivElement = target.dyn_into().unwrap();
            let left_side = div.previous_element_sibling().unwrap();
            let right_side = div.next_element_sibling().unwrap();

            let global = document().body().unwrap();
            global
                .set_attribute("style", "cursor:auto; user-select: auto")
                .unwrap();

            left_side
                .set_attribute("style", "pointer-events: auto;")
                .unwrap();
            right_side
                .set_attribute("style", "pointer-events: auto;")
                .unwrap();
        });

        on_cleanup(move || mouse_up.remove());
    };

    view! {
        <div style="cursor: ew-resize; max-width: 2px; height: inherit; border: 2px solid red;" on:mousedown=mouse_down></div>
    }
}

Thanks

[gbj]

Without having read the post in detail, I will say "try on:mousedown:undelegated=mouse_down." Leptos uses event delegation to the window by default, so if you're using nested events like this it's possible that will not work as expected. Adding :undelegated opts you out of that event delegation for that event.

[ekanna]

I have tried it but it is not working!

[ekanna]

Additional Info

<div class="container">
   <div class="sidebar"></div>
   <my-resizer></my-resizer>
   <div class="main"></div>
</div>

Thank you.

[ekanna]

Thank you. Now the panics gone. But mouse events problem is still there.
I am listening events in this order.
1 MoveDown -> 2. MouseMove -> 3. MouseUp

1. <div on:mousedown=mouse_down>
2. window_event_listener(ev::mousemove, cb)
3. window_event_listener(ev::mouseup, cb)

How to stop listening for mouse_move event immediately after mouse_up event?

Thank you.

[gbj]

window_event_listener returns a WindowListenerHandle with a remove method. I see you have that commented out -- I'm not sure what the issue is? Is it that this requires ownership of the handle? Then store it in an Option and .take() it out to call it if it's present.

[ekanna]

Is it that this requires ownership of the handle?
Yes.

store it in an Option and .take() it out to call it if it's present.
This also not working, i have tried now.

fn Sample() -> impl IntoView {
    let div_ref = NodeRef::<Div>::new();
    let mouse_down = move |e: MouseEvent| {
        log!("Mouse Down");

        let mouse_move = window_event_listener(ev::mousemove, move |e| {
            log!("Mouse Move");
        });
        let handle_ownership = Some(mouse_move);

        let mouse_up = window_event_listener(ev::mouseup, move |e| {
            // mouse_move.remove(); // cannot move out of mouse_move, a captured variable in an Fn closure

            let k = handle_ownership.take(); // cannot borrow `handle_ownership` as mutable, as it is not declared as mutable

            log!("Mouse Up");
        });
        on_cleanup(move || mouse_up.remove());
    };

    view! {
        <div _ref=div_ref on:mousedown=mouse_down></div>
    }
}

[gbj]

Right you're trying to mutate a variable (handle_ownership) that's not declared mutable. If you add mut it will also be sad because now you're mutating a captured variable in an Fn closure. We should probably allow FnMut on event listeners like that in the future but in any case adding a RefCell here works fine:

let handle_ownership = RefCell::new(Some(mouse_move));

let mouse_up = window_event_listener(ev::mouseup, move |e| {
    if let Some(k) = handle_ownership.borrow_mut().take() {
        k.remove();
    }

    log!("Mouse Up");
});

[ekanna]

Thank you. Now it is working fine.
Here is my final code for observing mouse movements.

#[component]
fn Sample() -> impl IntoView {
    let div_ref = NodeRef::<Div>::new();

    let mouse_down = move |e: MouseEvent| {
        let is_mouseup = RwSignal::new(false);
        log!("Mouse Down");

        // Listen for mouse_move event
        let mouse_move = window_event_listener(ev::mousemove, move |e| {
            log!("Mouse Move");
        });

        //Listen for mouse_up event and remove mouse_move listner
        let mouse_move = RefCell::new(Some(mouse_move));
        let mouse_up = window_event_listener(ev::mouseup, move |e| {
            if let Some(k) = mouse_move.borrow_mut().take() {
                k.remove();
            }
            log!("Mouse Up");
            is_mouseup.update(|v| *v = true);
        });

        // Clear mouse_up event listener immediately after mouse_up
        let mouse_up = RefCell::new(Some(mouse_up));
        create_effect(move |_| {
            if is_mouseup() {
                if let Some(k) = mouse_up.borrow_mut().take() {
                    k.remove();
                }
            }
        });
    };

    view! {
        <div _ref=div_ref on:mousedown=mouse_down></div>
    }
}