swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: lnks to projects

Browse Source
This commit is contained in:
Jonathan Kelley committed 2021-10-14 12:46:50 -04:00
1 parent 2403990ea3
commit 460783ad54
8 files changed
+207 -297
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Cargo.toml
+4 -4
View File
@@ -55,9 +55,6 @@ env_logger = "0.9.0"
tokio = { version = "1.12.0", features = ["full"] } tokio = { version = "1.12.0", features = ["full"] }
rand = { version = "0.8.4", features = ["small_rng"] } rand = { version = "0.8.4", features = ["small_rng"] }
gloo-timers = "0.2.1" gloo-timers = "0.2.1"
# surf = { version = "2.3.1", default-features = false, features = [
# "wasm-client",
# ] }
[target.'cfg(target_arch = "wasm32")'.dev-dependencies] [target.'cfg(target_arch = "wasm32")'.dev-dependencies]
gloo-timers = "0.2.1" gloo-timers = "0.2.1"
@@ -66,6 +63,9 @@ console_error_panic_hook = "0.1.6"
rand = { version = "0.8.4", features = ["small_rng"] } rand = { version = "0.8.4", features = ["small_rng"] }
wasm-bindgen = { version = "0.2.71", features = ["enable-interning"] } wasm-bindgen = { version = "0.2.71", features = ["enable-interning"] }
# surf = { version = "2.3.1", default-features = false, features = [
# "wasm-client",
# ] }
# surf = { version = "2.2.0", default-features = false, features = [ # surf = { version = "2.2.0", default-features = false, features = [
# "wasm-client", # "wasm-client",
# ], git = "https://github.com/jkelleyrtp/surf/", branch = "jk/fix-the-wasm" } # ], git = "https://github.com/jkelleyrtp/surf/", branch = "jk/fix-the-wasm" }
@@ -86,7 +86,7 @@ members = [
"packages/ssr", "packages/ssr",
"packages/desktop", "packages/desktop",
"packages/mobile", "packages/mobile",
"packages/webview-client" "packages/webview-client",
] ]
README.md
+3 -9
View File
@@ -89,9 +89,9 @@ If you know React, then you already know Dioxus.
## Examples: ## Examples:
| File Navigator (Desktop) | Bluetooth scanner (Desktop) | TodoMVC (All platforms) | Widget Gallery | | File Navigator (Desktop) | Bluetooth scanner (Desktop) | TodoMVC (All platforms) | Widget Gallery |
| -------------------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------- | | -------------------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| ![asd](https://github.com/DioxusLabs/file-explorer-example/raw/master/image.png) | ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) | ![asd](https://github.com/DioxusLabs/todomvc/blob/master/example.png) | ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) | | ![asd](https://github.com/DioxusLabs/file-explorer-example/raw/master/image.png) | ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) | [![asd](https://github.com/DioxusLabs/todomvc/blob/master/example.png)](https://github.com/dioxusLabs/todomvc/) | ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) |
@@ -101,12 +101,6 @@ If you know React, then you already know Dioxus.
| Printer Demo | Slide Puzzle | Todo | Widget Gallery |
| ---------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------- |
| ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) | ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) | ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) | ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) |
See the awesome-dioxus page for a curated list of content in the Dioxus Ecosystem. See the awesome-dioxus page for a curated list of content in the Dioxus Ecosystem.
packages/core/examples/jsframework.rs
-1
View File
@@ -1,5 +1,4 @@
use dioxus::events::on::MouseEvent; use dioxus::events::on::MouseEvent;
use dioxus::events::DioxusEvent;
use dioxus_core as dioxus; use dioxus_core as dioxus;
use dioxus_core::prelude::*; use dioxus_core::prelude::*;
use dioxus_core_macro::*; use dioxus_core_macro::*;
packages/core/src/events.rs
+62 -93
View File
@@ -31,27 +31,33 @@ pub struct UserEvent {
pub name: &'static str, pub name: &'static str,
/// The type of event /// The type of event
pub event: SyntheticEvent, pub event: Box<dyn Any + Send>,
} }
#[derive(Debug)] struct EventInner {}
pub enum SyntheticEvent {
AnimationEvent(on::AnimationEvent), // trait SyntheticEvent: Send + Debug {
ClipboardEvent(on::ClipboardEvent), // fn downcast(self: Box<Self>) -> Option<Box<dyn Any>>;
CompositionEvent(on::CompositionEvent), // }
FocusEvent(on::FocusEvent),
FormEvent(on::FormEvent), // #[derive(Debug)]
KeyboardEvent(on::KeyboardEvent), // pub enum SyntheticEvent {
GenericEvent(DioxusEvent<()>), // AnimationEvent(on::AnimationEvent),
TouchEvent(on::TouchEvent), // ClipboardEvent(on::ClipboardEvent),
ToggleEvent(on::ToggleEvent), // CompositionEvent(on::CompositionEvent),
MediaEvent(on::MediaEvent), // FocusEvent(on::FocusEvent),
MouseEvent(on::MouseEvent), // FormEvent(on::FormEvent),
WheelEvent(on::WheelEvent), // KeyboardEvent(on::KeyboardEvent),
SelectionEvent(on::SelectionEvent), // GenericEvent(DioxusEvent<()>),
TransitionEvent(on::TransitionEvent), // TouchEvent(on::TouchEvent),
PointerEvent(on::PointerEvent), // ToggleEvent(on::ToggleEvent),
} // MediaEvent(on::MediaEvent),
// MouseEvent(on::MouseEvent),
// WheelEvent(on::WheelEvent),
// SelectionEvent(on::SelectionEvent),
// TransitionEvent(on::TransitionEvent),
// PointerEvent(on::PointerEvent),
// }
/// Priority of Event Triggers. /// Priority of Event Triggers.
/// ///
@@ -105,23 +111,7 @@ pub enum EventPriority {
Low = 0, Low = 0,
} }
#[derive(Debug)] impl EventInner {
pub struct DioxusEvent<T: Send + Sync> {
inner: T,
raw: Box<dyn Any + Send>,
}
impl<T: Send + Sync> DioxusEvent<T> {
pub fn new<F: Send + 'static>(inner: T, raw: F) -> Self {
let raw = Box::new(raw);
Self { inner, raw }
}
/// Return a reference to the raw event. User will need to downcast the event to the right platform-specific type.
pub fn native<E: 'static>(&self) -> Option<&E> {
self.raw.downcast_ref()
}
/* /*
Not implemented! Not implemented!
@@ -200,20 +190,13 @@ impl<T: Send + Sync> DioxusEvent<T> {
} }
} }
impl<T: Send + Sync> std::ops::Deref for DioxusEvent<T> {
type Target = T;
fn deref(&self) -> &Self::Target {
&self.inner
}
}
pub mod on { pub mod on {
use super::*; use super::*;
macro_rules! event_directory { macro_rules! event_directory {
( $( ( $(
$( #[$attr:meta] )* $( #[$attr:meta] )*
$eventdata:ident($wrapper:ident): [ $wrapper:ident: [
// $eventdata:ident($wrapper:ident): [
$( $(
$( #[$method_attr:meta] )* $( #[$method_attr:meta] )*
$name:ident $name:ident
@@ -221,20 +204,6 @@ pub mod on {
]; ];
)* ) => { )* ) => {
$( $(
$(#[$attr])*
#[derive(Debug)]
pub struct $wrapper(pub DioxusEvent<$eventdata>);
// todo: derefing to the event is fine (and easy) but breaks some IDE stuff like (go to source)
// going to source in fact takes you to the source of Rc which is... less than useful
// Either we ask for this to be changed in Rust-analyzer or manually implement the trait
impl Deref for $wrapper {
type Target = DioxusEvent<$eventdata>;
fn deref(&self) -> &Self::Target {
&self.0
}
}
$( $(
$(#[$method_attr])* $(#[$method_attr])*
pub fn $name<'a, F>( pub fn $name<'a, F>(
@@ -248,12 +217,12 @@ pub mod on {
// we can't allocate unsized in bumpalo's box, so we need to craft the box manually // we can't allocate unsized in bumpalo's box, so we need to craft the box manually
// safety: this is essentially the same as calling Box::new() but manually // safety: this is essentially the same as calling Box::new() but manually
// The box is attached to the lifetime of the bumpalo allocator // The box is attached to the lifetime of the bumpalo allocator
let cb: &mut dyn FnMut(SyntheticEvent) = bump.alloc(move |evt: SyntheticEvent| match evt { let cb: &mut dyn FnMut(Box<dyn Any + Send>) = bump.alloc(move |evt: Box<dyn Any + Send>| {
SyntheticEvent::$wrapper(event) => callback(event), let event = evt.downcast::<$wrapper>().unwrap();
_ => unreachable!("Downcasted SyntheticEvent to wrong spcific event type - this is an internal bug!") callback(*event)
}); });
let callback: BumpBox<dyn FnMut(SyntheticEvent) + 'a> = unsafe { BumpBox::from_raw(cb) }; let callback: BumpBox<dyn FnMut(Box<dyn Any + Send>) + 'a> = unsafe { BumpBox::from_raw(cb) };
// ie oncopy // ie oncopy
let event_name = stringify!($name); let event_name = stringify!($name);
@@ -274,7 +243,7 @@ pub mod on {
// The Dioxus Synthetic event system // The Dioxus Synthetic event system
event_directory! { event_directory! {
ClipboardEventInner(ClipboardEvent): [ ClipboardEvent: [
/// Called when "copy" /// Called when "copy"
oncopy oncopy
@@ -285,7 +254,7 @@ pub mod on {
onpaste onpaste
]; ];
CompositionEventInner(CompositionEvent): [ CompositionEvent: [
/// oncompositionend /// oncompositionend
oncompositionend oncompositionend
@@ -296,7 +265,7 @@ pub mod on {
oncompositionupdate oncompositionupdate
]; ];
KeyboardEventInner(KeyboardEvent): [ KeyboardEvent: [
/// onkeydown /// onkeydown
onkeydown onkeydown
@@ -307,7 +276,7 @@ pub mod on {
onkeyup onkeyup
]; ];
FocusEventInner(FocusEvent): [ FocusEvent: [
/// onfocus /// onfocus
onfocus onfocus
@@ -315,7 +284,7 @@ pub mod on {
onblur onblur
]; ];
FormEventInner(FormEvent): [ FormEvent: [
/// onchange /// onchange
onchange onchange
@@ -373,7 +342,7 @@ pub mod on {
/// - [`onmouseout`] /// - [`onmouseout`]
/// - [`onmouseover`] /// - [`onmouseover`]
/// - [`onmouseup`] /// - [`onmouseup`]
MouseEventInner(MouseEvent): [ MouseEvent: [
/// Execute a callback when a button is clicked. /// Execute a callback when a button is clicked.
/// ///
/// ## Description /// ## Description
@@ -456,7 +425,7 @@ pub mod on {
onmouseup onmouseup
]; ];
PointerEventInner(PointerEvent): [ PointerEvent: [
/// pointerdown /// pointerdown
onpointerdown onpointerdown
@@ -488,12 +457,12 @@ pub mod on {
onpointerout onpointerout
]; ];
SelectionEventInner(SelectionEvent): [ SelectionEvent: [
/// onselect /// onselect
onselect onselect
]; ];
TouchEventInner(TouchEvent): [ TouchEvent: [
/// ontouchcancel /// ontouchcancel
ontouchcancel ontouchcancel
@@ -507,12 +476,12 @@ pub mod on {
ontouchstart ontouchstart
]; ];
WheelEventInner(WheelEvent): [ WheelEvent: [
/// ///
onwheel onwheel
]; ];
MediaEventInner(MediaEvent): [ MediaEvent: [
///abort ///abort
onabort onabort
@@ -583,7 +552,7 @@ pub mod on {
onwaiting onwaiting
]; ];
AnimationEventInner(AnimationEvent): [ AnimationEvent: [
/// onanimationstart /// onanimationstart
onanimationstart onanimationstart
@@ -594,12 +563,12 @@ pub mod on {
onanimationiteration onanimationiteration
]; ];
TransitionEventInner(TransitionEvent): [ TransitionEvent: [
/// ///
ontransitionend ontransitionend
]; ];
ToggleEventInner(ToggleEvent): [ ToggleEvent: [
/// ///
ontoggle ontoggle
]; ];
@@ -607,19 +576,19 @@ pub mod on {
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct ClipboardEventInner( pub struct ClipboardEvent(
// DOMDataTransfer clipboardData // DOMDataTransfer clipboardData
); );
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct CompositionEventInner { pub struct CompositionEvent {
pub data: String, pub data: String,
} }
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct KeyboardEventInner { pub struct KeyboardEvent {
pub char_code: u32, pub char_code: u32,
/// Identify which "key" was entered. /// Identify which "key" was entered.
@@ -687,18 +656,18 @@ pub mod on {
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct FocusEventInner {/* DOMEventInner: Send + SyncTarget relatedTarget */} pub struct FocusEvent {/* DOMEventInner: Send + SyncTarget relatedTarget */}
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct FormEventInner { pub struct FormEvent {
pub value: String, pub value: String,
/* DOMEventInner: Send + SyncTarget relatedTarget */ /* DOMEvent: Send + SyncTarget relatedTarget */
} }
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct MouseEventInner { pub struct MouseEvent {
pub alt_key: bool, pub alt_key: bool,
pub button: i16, pub button: i16,
pub buttons: u16, pub buttons: u16,
@@ -716,7 +685,7 @@ pub mod on {
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct PointerEventInner { pub struct PointerEvent {
// Mouse only // Mouse only
pub alt_key: bool, pub alt_key: bool,
pub button: i16, pub button: i16,
@@ -745,11 +714,11 @@ pub mod on {
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct SelectionEventInner {} pub struct SelectionEvent {}
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct TouchEventInner { pub struct TouchEvent {
pub alt_key: bool, pub alt_key: bool,
pub ctrl_key: bool, pub ctrl_key: bool,
pub meta_key: bool, pub meta_key: bool,
@@ -762,7 +731,7 @@ pub mod on {
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct WheelEventInner { pub struct WheelEvent {
pub delta_mode: u32, pub delta_mode: u32,
pub delta_x: f64, pub delta_x: f64,
pub delta_y: f64, pub delta_y: f64,
@@ -771,17 +740,17 @@ pub mod on {
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct MediaEventInner {} pub struct MediaEvent {}
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct ImageEventInner { pub struct ImageEvent {
pub load_error: bool, pub load_error: bool,
} }
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct AnimationEventInner { pub struct AnimationEvent {
pub animation_name: String, pub animation_name: String,
pub pseudo_element: String, pub pseudo_element: String,
pub elapsed_time: f32, pub elapsed_time: f32,
@@ -789,7 +758,7 @@ pub mod on {
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct TransitionEventInner { pub struct TransitionEvent {
pub property_name: String, pub property_name: String,
pub pseudo_element: String, pub pseudo_element: String,
pub elapsed_time: f32, pub elapsed_time: f32,
@@ -797,7 +766,7 @@ pub mod on {
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
#[derive(Debug)] #[derive(Debug)]
pub struct ToggleEventInner {} pub struct ToggleEvent {}
} }
#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
packages/core/src/lib.rs
+2 -2
View File
@@ -62,8 +62,8 @@ pub(crate) mod innerlude {
pub use crate::innerlude::{ pub use crate::innerlude::{
Context, DioxusElement, DomEdit, DomTree, ElementId, EventPriority, LazyNodes, MountType, Context, DioxusElement, DomEdit, DomTree, ElementId, EventPriority, LazyNodes, MountType,
Mutations, NodeFactory, Properties, SchedulerMsg, ScopeId, SuspendedContext, SyntheticEvent, Mutations, NodeFactory, Properties, SchedulerMsg, ScopeId, SuspendedContext, TaskHandle,
TaskHandle, TestDom, ThreadsafeVirtualDom, UserEvent, VNode, VirtualDom, FC, TestDom, ThreadsafeVirtualDom, UserEvent, VNode, VirtualDom, FC,
}; };
pub mod prelude { pub mod prelude {
packages/core/src/nodes.rs
+3 -3
View File
@@ -4,8 +4,7 @@
//! cheap and *very* fast to construct - building a full tree should be quick. //! cheap and *very* fast to construct - building a full tree should be quick.
use crate::innerlude::{ use crate::innerlude::{
empty_cell, Context, DomTree, ElementId, Properties, Scope, ScopeId, SuspendedContext, empty_cell, Context, DomTree, ElementId, Properties, Scope, ScopeId, SuspendedContext, FC,
SyntheticEvent, FC,
}; };
use bumpalo::{boxed::Box as BumpBox, Bump}; use bumpalo::{boxed::Box as BumpBox, Bump};
use std::{ use std::{
@@ -271,7 +270,8 @@ pub struct Listener<'bump> {
pub event: &'static str, pub event: &'static str,
/// The actual callback that the user specified /// The actual callback that the user specified
pub(crate) callback: RefCell<Option<BumpBox<'bump, dyn FnMut(SyntheticEvent) + 'bump>>>, pub(crate) callback:
RefCell<Option<BumpBox<'bump, dyn FnMut(Box<dyn std::any::Any + Send>) + 'bump>>>,
} }
/// Virtual Components for custom user-defined components /// Virtual Components for custom user-defined components
packages/desktop/src/events.rs
+36 -57
View File
@@ -1,16 +1,10 @@
//! Convert a serialized event to an event Trigger //! Convert a serialized event to an event Trigger
//! //!
use std::rc::Rc;
use std::sync::Arc; use std::sync::Arc;
use std::{any::Any, rc::Rc};
use dioxus_core::{ use dioxus_core::{events::on::MouseEvent, ElementId, EventPriority, ScopeId, UserEvent};
events::{
on::{MouseEvent, MouseEventInner},
SyntheticEvent,
},
ElementId, EventPriority, ScopeId, UserEvent,
};
#[derive(serde::Serialize, serde::Deserialize)] #[derive(serde::Serialize, serde::Deserialize)]
struct ImEvent { struct ImEvent {
@@ -43,85 +37,70 @@ pub fn trigger_from_serialized(val: serde_json::Value) -> UserEvent {
} }
} }
fn make_synthetic_event(name: &str, val: serde_json::Value) -> SyntheticEvent { fn make_synthetic_event(name: &str, val: serde_json::Value) -> Box<dyn Any + Send> {
use dioxus_core::events::on::*; use dioxus_core::events::on::*;
use dioxus_core::events::DioxusEvent;
match name { match name {
"copy" | "cut" | "paste" => SyntheticEvent::ClipboardEvent(ClipboardEvent( "copy" | "cut" | "paste" => {
DioxusEvent::new(ClipboardEventInner(), ()), //
)), Box::new(ClipboardEvent {})
}
"compositionend" | "compositionstart" | "compositionupdate" => { "compositionend" | "compositionstart" | "compositionupdate" => {
SyntheticEvent::CompositionEvent(CompositionEvent(DioxusEvent::new( Box::new(serde_json::from_value::<CompositionEvent>(val).unwrap())
serde_json::from_value(val).unwrap(), }
(), "keydown" | "keypress" | "keyup" => {
))) Box::new(serde_json::from_value::<KeyboardEvent>(val).unwrap())
} }
"keydown" | "keypress" | "keyup" => SyntheticEvent::KeyboardEvent(KeyboardEvent(
DioxusEvent::new(serde_json::from_value(val).unwrap(), ()),
)),
"focus" | "blur" => { "focus" | "blur" => {
SyntheticEvent::FocusEvent(FocusEvent(DioxusEvent::new(FocusEventInner {}, ()))) //
Box::new(FocusEvent {})
} }
"change" => SyntheticEvent::GenericEvent(DioxusEvent::new((), ())),
// todo: these handlers might get really slow if the input box gets large and allocation pressure is heavy // todo: these handlers might get really slow if the input box gets large and allocation pressure is heavy
// don't have a good solution with the serialized event problem // don't have a good solution with the serialized event problem
"input" | "invalid" | "reset" | "submit" => SyntheticEvent::FormEvent(FormEvent( "change" | "input" | "invalid" | "reset" | "submit" => {
DioxusEvent::new(serde_json::from_value(val).unwrap(), ()), Box::new(serde_json::from_value::<FormEvent>(val).unwrap())
)), }
"click" | "contextmenu" | "doubleclick" | "drag" | "dragend" | "dragenter" | "dragexit" "click" | "contextmenu" | "doubleclick" | "drag" | "dragend" | "dragenter" | "dragexit"
| "dragleave" | "dragover" | "dragstart" | "drop" | "mousedown" | "mouseenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "mousedown" | "mouseenter"
| "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" => { | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" => {
SyntheticEvent::MouseEvent(MouseEvent(DioxusEvent::new( Box::new(serde_json::from_value::<MouseEvent>(val).unwrap())
serde_json::from_value(val).unwrap(),
(),
)))
} }
"pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture" "pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture"
| "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => { | "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => {
SyntheticEvent::PointerEvent(PointerEvent(DioxusEvent::new( Box::new(serde_json::from_value::<PointerEvent>(val).unwrap())
serde_json::from_value(val).unwrap(), }
(), "select" => {
))) //
Box::new(serde_json::from_value::<SelectionEvent>(val).unwrap())
} }
"select" => SyntheticEvent::SelectionEvent(SelectionEvent(DioxusEvent::new(
SelectionEventInner {},
(),
))),
"touchcancel" | "touchend" | "touchmove" | "touchstart" => SyntheticEvent::TouchEvent( "touchcancel" | "touchend" | "touchmove" | "touchstart" => {
TouchEvent(DioxusEvent::new(serde_json::from_value(val).unwrap(), ())), Box::new(serde_json::from_value::<TouchEvent>(val).unwrap())
), }
"scroll" => SyntheticEvent::GenericEvent(DioxusEvent::new((), ())), "scroll" => Box::new(()),
"wheel" => SyntheticEvent::WheelEvent(WheelEvent(DioxusEvent::new( "wheel" => Box::new(serde_json::from_value::<WheelEvent>(val).unwrap()),
serde_json::from_value(val).unwrap(),
(),
))),
"animationstart" | "animationend" | "animationiteration" => SyntheticEvent::AnimationEvent( "animationstart" | "animationend" | "animationiteration" => {
AnimationEvent(DioxusEvent::new(serde_json::from_value(val).unwrap(), ())), Box::new(serde_json::from_value::<AnimationEvent>(val).unwrap())
), }
"transitionend" => SyntheticEvent::TransitionEvent(TransitionEvent(DioxusEvent::new( "transitionend" => Box::new(serde_json::from_value::<TransitionEvent>(val).unwrap()),
serde_json::from_value(val).unwrap(),
(),
))),
"abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "encrypted" "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "encrypted"
| "ended" | "error" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play" | "ended" | "error" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play"
| "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend" | "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend"
| "timeupdate" | "volumechange" | "waiting" => { | "timeupdate" | "volumechange" | "waiting" => {
SyntheticEvent::MediaEvent(MediaEvent(DioxusEvent::new(MediaEventInner {}, ()))) //
Box::new(MediaEvent {})
} }
"toggle" => { "toggle" => Box::new(ToggleEvent {}),
SyntheticEvent::ToggleEvent(ToggleEvent(DioxusEvent::new(ToggleEventInner {}, ())))
}
_ => SyntheticEvent::GenericEvent(DioxusEvent::new((), ())), _ => Box::new(()),
} }
} }
packages/web/src/dom.rs
+97 -128
View File
@@ -8,13 +8,13 @@
//! - Partial delegation?> //! - Partial delegation?>
use dioxus_core::{ use dioxus_core::{
events::{DioxusEvent, KeyCode, SyntheticEvent, UserEvent}, events::{KeyCode, UserEvent},
mutations::NodeRefMutation, mutations::NodeRefMutation,
scheduler::SchedulerMsg, scheduler::SchedulerMsg,
DomEdit, ElementId, ScopeId, DomEdit, ElementId, ScopeId,
}; };
use fxhash::FxHashMap; use fxhash::FxHashMap;
use std::{fmt::Debug, rc::Rc, sync::Arc}; use std::{any::Any, fmt::Debug, rc::Rc, sync::Arc};
use wasm_bindgen::{closure::Closure, JsCast}; use wasm_bindgen::{closure::Closure, JsCast};
use web_sys::{ use web_sys::{
Attr, CssStyleDeclaration, Document, Element, Event, HtmlElement, HtmlInputElement, Attr, CssStyleDeclaration, Document, Element, Event, HtmlElement, HtmlInputElement,
@@ -483,45 +483,37 @@ unsafe impl Sync for DioxusWebsysEvent {}
// todo: some of these events are being casted to the wrong event type. // todo: some of these events are being casted to the wrong event type.
// We need tests that simulate clicks/etc and make sure every event type works. // We need tests that simulate clicks/etc and make sure every event type works.
fn virtual_event_from_websys_event(event: web_sys::Event) -> SyntheticEvent { fn virtual_event_from_websys_event(event: web_sys::Event) -> Box<dyn Any + Send> {
use crate::events::*; use crate::events::*;
use dioxus_core::events::on::*; use dioxus_core::events::on::*;
match event.type_().as_str() { match event.type_().as_str() {
"copy" | "cut" | "paste" => SyntheticEvent::ClipboardEvent(ClipboardEvent( "copy" | "cut" | "paste" => Box::new(ClipboardEvent {}),
DioxusEvent::new(ClipboardEventInner(), DioxusWebsysEvent(event)),
)),
"compositionend" | "compositionstart" | "compositionupdate" => { "compositionend" | "compositionstart" | "compositionupdate" => {
let evt: &web_sys::CompositionEvent = event.dyn_ref().unwrap(); let evt: &web_sys::CompositionEvent = event.dyn_ref().unwrap();
SyntheticEvent::CompositionEvent(CompositionEvent(DioxusEvent::new( Box::new(CompositionEvent {
CompositionEventInner { data: evt.data().unwrap_or_default(),
data: evt.data().unwrap_or_default(), })
},
DioxusWebsysEvent(event),
)))
} }
"keydown" | "keypress" | "keyup" => { "keydown" | "keypress" | "keyup" => {
let evt: &web_sys::KeyboardEvent = event.dyn_ref().unwrap(); let evt: &web_sys::KeyboardEvent = event.dyn_ref().unwrap();
SyntheticEvent::KeyboardEvent(KeyboardEvent(DioxusEvent::new( Box::new(KeyboardEvent {
KeyboardEventInner { alt_key: evt.alt_key(),
alt_key: evt.alt_key(), char_code: evt.char_code(),
char_code: evt.char_code(), key: evt.key(),
key: evt.key(), key_code: KeyCode::from_raw_code(evt.key_code() as u8),
key_code: KeyCode::from_raw_code(evt.key_code() as u8), ctrl_key: evt.ctrl_key(),
ctrl_key: evt.ctrl_key(), locale: "not implemented".to_string(),
locale: "not implemented".to_string(), location: evt.location() as usize,
location: evt.location() as usize, meta_key: evt.meta_key(),
meta_key: evt.meta_key(), repeat: evt.repeat(),
repeat: evt.repeat(), shift_key: evt.shift_key(),
shift_key: evt.shift_key(), which: evt.which() as usize,
which: evt.which() as usize, })
}, }
DioxusWebsysEvent(event), "focus" | "blur" => {
))) //
Box::new(FocusEvent {})
} }
"focus" | "blur" => SyntheticEvent::FocusEvent(FocusEvent(DioxusEvent::new(
FocusEventInner {},
DioxusWebsysEvent(event),
))),
// "change" => SyntheticEvent::GenericEvent(DioxusEvent::new((), DioxusWebsysEvent(event))), // "change" => SyntheticEvent::GenericEvent(DioxusEvent::new((), DioxusWebsysEvent(event))),
// todo: these handlers might get really slow if the input box gets large and allocation pressure is heavy // todo: these handlers might get really slow if the input box gets large and allocation pressure is heavy
@@ -565,135 +557,112 @@ fn virtual_event_from_websys_event(event: web_sys::Event) -> SyntheticEvent {
}) })
.expect("only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener"); .expect("only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener");
SyntheticEvent::FormEvent(FormEvent(DioxusEvent::new( Box::new(FormEvent { value })
FormEventInner { value },
DioxusWebsysEvent(event),
)))
} }
"click" | "contextmenu" | "doubleclick" | "drag" | "dragend" | "dragenter" | "dragexit" "click" | "contextmenu" | "doubleclick" | "drag" | "dragend" | "dragenter" | "dragexit"
| "dragleave" | "dragover" | "dragstart" | "drop" | "mousedown" | "mouseenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "mousedown" | "mouseenter"
| "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" => { | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" => {
let evt: &web_sys::MouseEvent = event.dyn_ref().unwrap(); let evt: &web_sys::MouseEvent = event.dyn_ref().unwrap();
SyntheticEvent::MouseEvent(MouseEvent(DioxusEvent::new( Box::new(MouseEvent {
MouseEventInner { alt_key: evt.alt_key(),
alt_key: evt.alt_key(), button: evt.button(),
button: evt.button(), buttons: evt.buttons(),
buttons: evt.buttons(), client_x: evt.client_x(),
client_x: evt.client_x(), client_y: evt.client_y(),
client_y: evt.client_y(), ctrl_key: evt.ctrl_key(),
ctrl_key: evt.ctrl_key(), meta_key: evt.meta_key(),
meta_key: evt.meta_key(), screen_x: evt.screen_x(),
screen_x: evt.screen_x(), screen_y: evt.screen_y(),
screen_y: evt.screen_y(), shift_key: evt.shift_key(),
shift_key: evt.shift_key(), page_x: evt.page_x(),
page_x: evt.page_x(), page_y: evt.page_y(),
page_y: evt.page_y(), })
},
DioxusWebsysEvent(event),
)))
} }
"pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture" "pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture"
| "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => { | "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => {
let evt: &web_sys::PointerEvent = event.dyn_ref().unwrap(); let evt: &web_sys::PointerEvent = event.dyn_ref().unwrap();
SyntheticEvent::PointerEvent(PointerEvent(DioxusEvent::new( Box::new(PointerEvent {
PointerEventInner { alt_key: evt.alt_key(),
alt_key: evt.alt_key(), button: evt.button(),
button: evt.button(), buttons: evt.buttons(),
buttons: evt.buttons(), client_x: evt.client_x(),
client_x: evt.client_x(), client_y: evt.client_y(),
client_y: evt.client_y(), ctrl_key: evt.ctrl_key(),
ctrl_key: evt.ctrl_key(), meta_key: evt.meta_key(),
meta_key: evt.meta_key(), page_x: evt.page_x(),
page_x: evt.page_x(), page_y: evt.page_y(),
page_y: evt.page_y(), screen_x: evt.screen_x(),
screen_x: evt.screen_x(), screen_y: evt.screen_y(),
screen_y: evt.screen_y(), shift_key: evt.shift_key(),
shift_key: evt.shift_key(), pointer_id: evt.pointer_id(),
pointer_id: evt.pointer_id(), width: evt.width(),
width: evt.width(), height: evt.height(),
height: evt.height(), pressure: evt.pressure(),
pressure: evt.pressure(), tangential_pressure: evt.tangential_pressure(),
tangential_pressure: evt.tangential_pressure(), tilt_x: evt.tilt_x(),
tilt_x: evt.tilt_x(), tilt_y: evt.tilt_y(),
tilt_y: evt.tilt_y(), twist: evt.twist(),
twist: evt.twist(), pointer_type: evt.pointer_type(),
pointer_type: evt.pointer_type(), is_primary: evt.is_primary(),
is_primary: evt.is_primary(), // get_modifier_state: evt.get_modifier_state(),
// get_modifier_state: evt.get_modifier_state(), })
},
DioxusWebsysEvent(event),
)))
} }
"select" => SyntheticEvent::SelectionEvent(SelectionEvent(DioxusEvent::new( "select" => Box::new(SelectionEvent {}),
SelectionEventInner {},
DioxusWebsysEvent(event),
))),
"touchcancel" | "touchend" | "touchmove" | "touchstart" => { "touchcancel" | "touchend" | "touchmove" | "touchstart" => {
let evt: &web_sys::TouchEvent = event.dyn_ref().unwrap(); let evt: &web_sys::TouchEvent = event.dyn_ref().unwrap();
SyntheticEvent::TouchEvent(TouchEvent(DioxusEvent::new( Box::new(TouchEvent {
TouchEventInner { alt_key: evt.alt_key(),
alt_key: evt.alt_key(), ctrl_key: evt.ctrl_key(),
ctrl_key: evt.ctrl_key(), meta_key: evt.meta_key(),
meta_key: evt.meta_key(), shift_key: evt.shift_key(),
shift_key: evt.shift_key(), })
},
DioxusWebsysEvent(event),
)))
} }
"scroll" => SyntheticEvent::GenericEvent(DioxusEvent::new((), DioxusWebsysEvent(event))), "scroll" => Box::new(()),
"wheel" => { "wheel" => {
let evt: &web_sys::WheelEvent = event.dyn_ref().unwrap(); let evt: &web_sys::WheelEvent = event.dyn_ref().unwrap();
SyntheticEvent::WheelEvent(WheelEvent(DioxusEvent::new( Box::new(WheelEvent {
WheelEventInner { delta_x: evt.delta_x(),
delta_x: evt.delta_x(), delta_y: evt.delta_y(),
delta_y: evt.delta_y(), delta_z: evt.delta_z(),
delta_z: evt.delta_z(), delta_mode: evt.delta_mode(),
delta_mode: evt.delta_mode(), })
},
DioxusWebsysEvent(event),
)))
} }
"animationstart" | "animationend" | "animationiteration" => { "animationstart" | "animationend" | "animationiteration" => {
let evt: &web_sys::AnimationEvent = event.dyn_ref().unwrap(); let evt: &web_sys::AnimationEvent = event.dyn_ref().unwrap();
SyntheticEvent::AnimationEvent(AnimationEvent(DioxusEvent::new( Box::new(AnimationEvent {
AnimationEventInner { elapsed_time: evt.elapsed_time(),
elapsed_time: evt.elapsed_time(), animation_name: evt.animation_name(),
animation_name: evt.animation_name(), pseudo_element: evt.pseudo_element(),
pseudo_element: evt.pseudo_element(), })
},
DioxusWebsysEvent(event),
)))
} }
"transitionend" => { "transitionend" => {
let evt: &web_sys::TransitionEvent = event.dyn_ref().unwrap(); let evt: &web_sys::TransitionEvent = event.dyn_ref().unwrap();
SyntheticEvent::TransitionEvent(TransitionEvent(DioxusEvent::new( Box::new(TransitionEvent {
TransitionEventInner { elapsed_time: evt.elapsed_time(),
elapsed_time: evt.elapsed_time(), property_name: evt.property_name(),
property_name: evt.property_name(), pseudo_element: evt.pseudo_element(),
pseudo_element: evt.pseudo_element(), })
},
DioxusWebsysEvent(event),
)))
} }
"abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "encrypted" "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "encrypted"
| "ended" | "error" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play" | "ended" | "error" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play"
| "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend" | "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend"
| "timeupdate" | "volumechange" | "waiting" => SyntheticEvent::MediaEvent(MediaEvent( | "timeupdate" | "volumechange" | "waiting" => {
DioxusEvent::new(MediaEventInner {}, DioxusWebsysEvent(event)), //
)), Box::new(MediaEvent {})
}
"toggle" => SyntheticEvent::ToggleEvent(ToggleEvent(DioxusEvent::new( "toggle" => {
ToggleEventInner {}, //
DioxusWebsysEvent(event), Box::new(ToggleEvent {})
))), }
_ => SyntheticEvent::GenericEvent(DioxusEvent::new((), DioxusWebsysEvent(event))), _ => Box::new(()),
} }
} }