fix mount event

This commit is contained in:
Evan Almloff 2024-01-12 17:47:27 -06:00
parent ba23512fa5
commit fe1b35d610
5 changed files with 41 additions and 62 deletions

View file

@ -216,13 +216,27 @@ fn app(cx: Scope) -> Element {
r#"new FocusEvent("focusout",{bubbles: true})"#,
);
if **received_events == 12 {
if **received_events == 13 {
println!("all events recieved");
desktop_context.close();
}
render! {
div {
div {
width: "100px",
height: "100px",
onmounted: move |evt| {
to_owned![received_events];
async move {
let rect = evt.get_client_rect().await.unwrap();
println!("rect: {:?}", rect);
assert_eq!(rect.width(), 100.0);
assert_eq!(rect.height(), 100.0);
received_events.modify(|x| *x + 1)
}
}
}
button {
id: "button",
onclick: move |event| {

View file

@ -6,7 +6,7 @@ use crate::{
LiveViewError,
};
use dioxus_core::{prelude::*, BorrowedAttributeValue, Mutations};
use dioxus_html::{event_bubbles, EventData, HtmlEvent, MountedData, PlatformEventData};
use dioxus_html::{event_bubbles, EventData, HtmlEvent, PlatformEventData};
use dioxus_interpreter_js::binary_protocol::Channel;
use futures_util::{pin_mut, SinkExt, StreamExt};
use rustc_hash::FxHashMap;
@ -188,7 +188,7 @@ pub async fn run(mut vdom: VirtualDom, ws: impl LiveViewSocket) -> Result<(), Li
let element = LiveviewElement::new(evt.element, query_engine.clone());
vdom.handle_event(
&evt.name,
Rc::new(PlatformEventData::new(Box::new(MountedData::new(element)))),
Rc::new(PlatformEventData::new(Box::new(element))),
evt.element,
evt.bubbles,
);

View file

@ -9,8 +9,8 @@
use dioxus_core::{
BorrowedAttributeValue, ElementId, Mutation, Template, TemplateAttribute, TemplateNode,
};
use dioxus_html::event_bubbles;
use dioxus_html::PlatformEventData;
use dioxus_html::{event_bubbles, MountedData};
use dioxus_interpreter_js::{get_node, minimal_bindings, save_template, Channel};
use futures_channel::mpsc;
use rustc_hash::FxHashMap;
@ -267,13 +267,11 @@ impl WebsysDom {
pub(crate) fn send_mount_event(&self, id: ElementId) {
let node = get_node(id.0 as u32);
if let Some(element) = node.dyn_ref::<Element>() {
let data: MountedData = element.into();
let data = Box::new(data);
let _ = self.event_channel.unbounded_send(UiEvent {
name: "mounted".to_string(),
bubbles: false,
element: id,
data: PlatformEventData::new(data),
data: PlatformEventData::new(Box::new(element.clone())),
});
}
}

View file

@ -11,29 +11,15 @@ fn app(cx: Scope) -> Element {
"hello axum! {num}"
button { onclick: move |_| num += 1, "Increment" }
}
svg {
circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" }
}
div {
class: "raw-attribute-div",
"raw-attribute": "raw-attribute-value",
}
div {
class: "hidden-attribute-div",
hidden: true,
}
svg { circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" } }
div { class: "raw-attribute-div", "raw-attribute": "raw-attribute-value" }
div { class: "hidden-attribute-div", hidden: true }
div {
class: "dangerous-inner-html-div",
dangerous_inner_html: "<p>hello dangerous inner html</p>",
}
input {
value: "hello input",
}
div {
class: "style-div",
color: "red",
"colored text"
dangerous_inner_html: "<p>hello dangerous inner html</p>"
}
input { value: "hello input" }
div { class: "style-div", color: "red", "colored text" }
})
}

View file

@ -11,57 +11,38 @@ fn app(cx: Scope) -> Element {
cx.render(rsx! {
div {
"hello axum! {num}"
button {
class: "increment-button",
onclick: move |_| num += 1, "Increment"
}
}
svg {
circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" }
}
div {
class: "raw-attribute-div",
"raw-attribute": "raw-attribute-value",
}
div {
class: "hidden-attribute-div",
hidden: true,
button { class: "increment-button", onclick: move |_| num += 1, "Increment" }
}
svg { circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" } }
div { class: "raw-attribute-div", "raw-attribute": "raw-attribute-value" }
div { class: "hidden-attribute-div", hidden: true }
div {
class: "dangerous-inner-html-div",
dangerous_inner_html: "<p>hello dangerous inner html</p>",
}
input {
value: "hello input",
}
div {
class: "style-div",
color: "red",
"colored text"
dangerous_inner_html: "<p>hello dangerous inner html</p>"
}
input { value: "hello input" }
div { class: "style-div", color: "red", "colored text" }
button {
class: "eval-button",
onclick: move |_| {
let eval = eval_provider(
r#"
window.document.title = 'Hello from Dioxus Eval!';
dioxus.send("returned eval value");
"#).unwrap();
r#"
window.document.title = 'Hello from Dioxus Eval!';
dioxus.send("returned eval value");
"#,
)
.unwrap();
let setter = eval_result.setter();
async move {
// Set the window title
let result = eval.recv().await;
if let Ok(serde_json::Value::String(string)) = result {
setter(string);
}
}},
}
},
"Eval"
}
div {
class: "eval-result",
"{eval_result}"
}
div { class: "eval-result", "{eval_result}" }
})
}