From 8caabb97d85ca808e68603592c650c324c95eda5 Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Tue, 15 Nov 2022 16:51:22 -0800 Subject: [PATCH] wip: more work on html --- examples/all_css.rs | 798 +++++++++++++++--------------- examples/svg.rs | 10 +- packages/dioxus/src/lib.rs | 4 +- packages/html/src/events/mouse.rs | 172 +++---- packages/html/src/events/wheel.rs | 78 +++ packages/html/src/lib.rs | 4 + 6 files changed, 574 insertions(+), 492 deletions(-) diff --git a/examples/all_css.rs b/examples/all_css.rs index 768383b78..467748198 100644 --- a/examples/all_css.rs +++ b/examples/all_css.rs @@ -7,405 +7,405 @@ fn main() { fn app(cx: Scope) -> Element { cx.render(rsx! { div { - align_content: "a", - align_items: "a", - align_self: "a", - alignment_adjust: "a", - alignment_baseline: "a", - all: "a", - alt: "a", - animation: "a", - animation_delay: "a", - animation_direction: "a", - animation_duration: "a", - animation_fill_mode: "a", - animation_iteration_count: "a", - animation_name: "a", - animation_play_state: "a", - animation_timing_function: "a", - azimuth: "a", - backface_visibility: "a", - background: "a", - background_attachment: "a", - background_clip: "a", - background_color: "a", - background_image: "a", - background_origin: "a", - background_position: "a", - background_repeat: "a", - background_size: "a", - background_blend_mode: "a", - baseline_shift: "a", - bleed: "a", - bookmark_label: "a", - bookmark_level: "a", - bookmark_state: "a", - border: "a", - border_color: "a", - border_style: "a", - border_width: "a", - border_bottom: "a", - border_bottom_color: "a", - border_bottom_style: "a", - border_bottom_width: "a", - border_left: "a", - border_left_color: "a", - border_left_style: "a", - border_left_width: "a", - border_right: "a", - border_right_color: "a", - border_right_style: "a", - border_right_width: "a", - border_top: "a", - border_top_color: "a", - border_top_style: "a", - border_top_width: "a", - border_collapse: "a", - border_image: "a", - border_image_outset: "a", - border_image_repeat: "a", - border_image_slice: "a", - border_image_source: "a", - border_image_width: "a", - border_radius: "a", - border_bottom_left_radius: "a", - border_bottom_right_radius: "a", - border_top_left_radius: "a", - border_top_right_radius: "a", - border_spacing: "a", - bottom: "a", - box_decoration_break: "a", - box_shadow: "a", - box_sizing: "a", - box_snap: "a", - break_after: "a", - break_before: "a", - break_inside: "a", - buffered_rendering: "a", - caption_side: "a", - clear: "a", - clear_side: "a", - clip: "a", - clip_path: "a", - clip_rule: "a", - color: "a", - color_adjust: "a", - color_correction: "a", - color_interpolation: "a", - color_interpolation_filters: "a", - color_profile: "a", - color_rendering: "a", - column_fill: "a", - column_gap: "a", - column_rule: "a", - column_rule_color: "a", - column_rule_style: "a", - column_rule_width: "a", - column_span: "a", - columns: "a", - column_count: "a", - column_width: "a", - contain: "a", - content: "a", - counter_increment: "a", - counter_reset: "a", - counter_set: "a", - cue: "a", - cue_after: "a", - cue_before: "a", - cursor: "a", - direction: "a", - display: "a", - display_inside: "a", - display_outside: "a", - display_extras: "a", - display_box: "a", - dominant_baseline: "a", - elevation: "a", - empty_cells: "a", - enable_background: "a", - fill: "a", - fill_opacity: "a", - fill_rule: "a", - filter: "a", - float: "a", - float_defer_column: "a", - float_defer_page: "a", - float_offset: "a", - float_wrap: "a", - flow_into: "a", - flow_from: "a", - flex: "a", - flex_basis: "a", - flex_grow: "a", - flex_shrink: "a", - flex_flow: "a", - flex_direction: "a", - flex_wrap: "a", - flood_color: "a", - flood_opacity: "a", - font: "a", - font_family: "a", - font_size: "a", - font_stretch: "a", - font_style: "a", - font_weight: "a", - font_feature_settings: "a", - font_kerning: "a", - font_language_override: "a", - font_size_adjust: "a", - font_synthesis: "a", - font_variant: "a", - font_variant_alternates: "a", - font_variant_caps: "a", - font_variant_east_asian: "a", - font_variant_ligatures: "a", - font_variant_numeric: "a", - font_variant_position: "a", - footnote_policy: "a", - glyph_orientation_horizontal: "a", - glyph_orientation_vertical: "a", - grid: "a", - grid_auto_flow: "a", - grid_auto_columns: "a", - grid_auto_rows: "a", - grid_template: "a", - grid_template_areas: "a", - grid_template_columns: "a", - grid_template_rows: "a", - grid_area: "a", - grid_column: "a", - grid_column_start: "a", - grid_column_end: "a", - grid_row: "a", - grid_row_start: "a", - grid_row_end: "a", - hanging_punctuation: "a", - height: "a", - hyphenate_character: "a", - hyphenate_limit_chars: "a", - hyphenate_limit_last: "a", - hyphenate_limit_lines: "a", - hyphenate_limit_zone: "a", - hyphens: "a", - icon: "a", - image_orientation: "a", - image_resolution: "a", - image_rendering: "a", - ime: "a", - ime_align: "a", - ime_mode: "a", - ime_offset: "a", - ime_width: "a", - initial_letters: "a", - inline_box_align: "a", - isolation: "a", - justify_content: "a", - justify_items: "a", - justify_self: "a", - kerning: "a", - left: "a", - letter_spacing: "a", - lighting_color: "a", - line_box_contain: "a", - line_break: "a", - line_grid: "a", - line_height: "a", - line_slack: "a", - line_snap: "a", - list_style: "a", - list_style_image: "a", - list_style_position: "a", - list_style_type: "a", - margin: "a", - margin_bottom: "a", - margin_left: "a", - margin_right: "a", - margin_top: "a", - marker: "a", - marker_end: "a", - marker_mid: "a", - marker_pattern: "a", - marker_segment: "a", - marker_start: "a", - marker_knockout_left: "a", - marker_knockout_right: "a", - marker_side: "a", - marks: "a", - marquee_direction: "a", - marquee_play_count: "a", - marquee_speed: "a", - marquee_style: "a", - mask: "a", - mask_image: "a", - mask_repeat: "a", - mask_position: "a", - mask_clip: "a", - mask_origin: "a", - mask_size: "a", - mask_box: "a", - mask_box_outset: "a", - mask_box_repeat: "a", - mask_box_slice: "a", - mask_box_source: "a", - mask_box_width: "a", - mask_type: "a", - max_height: "a", - max_lines: "a", - max_width: "a", - min_height: "a", - min_width: "a", - mix_blend_mode: "a", - nav_down: "a", - nav_index: "a", - nav_left: "a", - nav_right: "a", - nav_up: "a", - object_fit: "a", - object_position: "a", - offset_after: "a", - offset_before: "a", - offset_end: "a", - offset_start: "a", - opacity: "a", - order: "a", - orphans: "a", - outline: "a", - outline_color: "a", - outline_style: "a", - outline_width: "a", - outline_offset: "a", - overflow: "a", - overflow_x: "a", - overflow_y: "a", - overflow_style: "a", - overflow_wrap: "a", - padding: "a", - padding_bottom: "a", - padding_left: "a", - padding_right: "a", - padding_top: "a", - page: "a", - page_break_after: "a", - page_break_before: "a", - page_break_inside: "a", - paint_order: "a", - pause: "a", - pause_after: "a", - pause_before: "a", - perspective: "a", - perspective_origin: "a", - pitch: "a", - pitch_range: "a", - play_during: "a", - pointer_events: "a", - position: "a", - quotes: "a", - region_fragment: "a", - resize: "a", - rest: "a", - rest_after: "a", - rest_before: "a", - richness: "a", - right: "a", - ruby_align: "a", - ruby_merge: "a", - ruby_position: "a", - scroll_behavior: "a", - scroll_snap_coordinate: "a", - scroll_snap_destination: "a", - scroll_snap_points_x: "a", - scroll_snap_points_y: "a", - scroll_snap_type: "a", - shape_image_threshold: "a", - shape_inside: "a", - shape_margin: "a", - shape_outside: "a", - shape_padding: "a", - shape_rendering: "a", - size: "a", - speak: "a", - speak_as: "a", - speak_header: "a", - speak_numeral: "a", - speak_punctuation: "a", - speech_rate: "a", - stop_color: "a", - stop_opacity: "a", - stress: "a", - string_set: "a", - stroke: "a", - stroke_dasharray: "a", - stroke_dashoffset: "a", - stroke_linecap: "a", - stroke_linejoin: "a", - stroke_miterlimit: "a", - stroke_opacity: "a", - stroke_width: "a", - tab_size: "a", - table_layout: "a", - text_align: "a", - text_align_all: "a", - text_align_last: "a", - text_anchor: "a", - text_combine_upright: "a", - text_decoration: "a", - text_decoration_color: "a", - text_decoration_line: "a", - text_decoration_style: "a", - text_decoration_skip: "a", - text_emphasis: "a", - text_emphasis_color: "a", - text_emphasis_style: "a", - text_emphasis_position: "a", - text_emphasis_skip: "a", - text_height: "a", - text_indent: "a", - text_justify: "a", - text_orientation: "a", - text_overflow: "a", - text_rendering: "a", - text_shadow: "a", - text_size_adjust: "a", - text_space_collapse: "a", - text_spacing: "a", - text_transform: "a", - text_underline_position: "a", - text_wrap: "a", - top: "a", - touch_action: "a", - transform: "a", - transform_box: "a", - transform_origin: "a", - transform_style: "a", - transition: "a", - transition_delay: "a", - transition_duration: "a", - transition_property: "a", - unicode_bidi: "a", - vector_effect: "a", - vertical_align: "a", - visibility: "a", - voice_balance: "a", - voice_duration: "a", - voice_family: "a", - voice_pitch: "a", - voice_range: "a", - voice_rate: "a", - voice_stress: "a", - voice_volumn: "a", - volume: "a", - white_space: "a", - widows: "a", - width: "a", - will_change: "a", - word_break: "a", - word_spacing: "a", - word_wrap: "a", - wrap_flow: "a", - wrap_through: "a", - writing_mode: "a", - z_index: "a", + align_content: "a", + align_items: "a", + align_self: "a", + alignment_adjust: "a", + alignment_baseline: "a", + all: "a", + alt: "a", + animation: "a", + animation_delay: "a", + animation_direction: "a", + animation_duration: "a", + animation_fill_mode: "a", + animation_iteration_count: "a", + animation_name: "a", + animation_play_state: "a", + animation_timing_function: "a", + azimuth: "a", + backface_visibility: "a", + background: "a", + background_attachment: "a", + background_clip: "a", + background_color: "a", + background_image: "a", + background_origin: "a", + background_position: "a", + background_repeat: "a", + background_size: "a", + background_blend_mode: "a", + baseline_shift: "a", + bleed: "a", + bookmark_label: "a", + bookmark_level: "a", + bookmark_state: "a", + border: "a", + border_color: "a", + border_style: "a", + border_width: "a", + border_bottom: "a", + border_bottom_color: "a", + border_bottom_style: "a", + border_bottom_width: "a", + border_left: "a", + border_left_color: "a", + border_left_style: "a", + border_left_width: "a", + border_right: "a", + border_right_color: "a", + border_right_style: "a", + border_right_width: "a", + border_top: "a", + border_top_color: "a", + border_top_style: "a", + border_top_width: "a", + border_collapse: "a", + border_image: "a", + border_image_outset: "a", + border_image_repeat: "a", + border_image_slice: "a", + border_image_source: "a", + border_image_width: "a", + border_radius: "a", + border_bottom_left_radius: "a", + border_bottom_right_radius: "a", + border_top_left_radius: "a", + border_top_right_radius: "a", + border_spacing: "a", + bottom: "a", + box_decoration_break: "a", + box_shadow: "a", + box_sizing: "a", + box_snap: "a", + break_after: "a", + break_before: "a", + break_inside: "a", + buffered_rendering: "a", + caption_side: "a", + clear: "a", + clear_side: "a", + clip: "a", + clip_path: "a", + clip_rule: "a", + color: "a", + color_adjust: "a", + color_correction: "a", + color_interpolation: "a", + color_interpolation_filters: "a", + color_profile: "a", + color_rendering: "a", + column_fill: "a", + column_gap: "a", + column_rule: "a", + column_rule_color: "a", + column_rule_style: "a", + column_rule_width: "a", + column_span: "a", + columns: "a", + column_count: "a", + column_width: "a", + contain: "a", + content: "a", + counter_increment: "a", + counter_reset: "a", + counter_set: "a", + cue: "a", + cue_after: "a", + cue_before: "a", + cursor: "a", + direction: "a", + display: "a", + display_inside: "a", + display_outside: "a", + display_extras: "a", + display_box: "a", + dominant_baseline: "a", + elevation: "a", + empty_cells: "a", + enable_background: "a", + fill: "a", + fill_opacity: "a", + fill_rule: "a", + filter: "a", + float: "a", + float_defer_column: "a", + float_defer_page: "a", + float_offset: "a", + float_wrap: "a", + flow_into: "a", + flow_from: "a", + flex: "a", + flex_basis: "a", + flex_grow: "a", + flex_shrink: "a", + flex_flow: "a", + flex_direction: "a", + flex_wrap: "a", + flood_color: "a", + flood_opacity: "a", + font: "a", + font_family: "a", + font_size: "a", + font_stretch: "a", + font_style: "a", + font_weight: "a", + font_feature_settings: "a", + font_kerning: "a", + font_language_override: "a", + font_size_adjust: "a", + font_synthesis: "a", + font_variant: "a", + font_variant_alternates: "a", + font_variant_caps: "a", + font_variant_east_asian: "a", + font_variant_ligatures: "a", + font_variant_numeric: "a", + font_variant_position: "a", + footnote_policy: "a", + glyph_orientation_horizontal: "a", + glyph_orientation_vertical: "a", + grid: "a", + grid_auto_flow: "a", + grid_auto_columns: "a", + grid_auto_rows: "a", + grid_template: "a", + grid_template_areas: "a", + grid_template_columns: "a", + grid_template_rows: "a", + grid_area: "a", + grid_column: "a", + grid_column_start: "a", + grid_column_end: "a", + grid_row: "a", + grid_row_start: "a", + grid_row_end: "a", + hanging_punctuation: "a", + height: "a", + hyphenate_character: "a", + hyphenate_limit_chars: "a", + hyphenate_limit_last: "a", + hyphenate_limit_lines: "a", + hyphenate_limit_zone: "a", + hyphens: "a", + icon: "a", + image_orientation: "a", + image_resolution: "a", + image_rendering: "a", + ime: "a", + ime_align: "a", + ime_mode: "a", + ime_offset: "a", + ime_width: "a", + initial_letters: "a", + inline_box_align: "a", + isolation: "a", + justify_content: "a", + justify_items: "a", + justify_self: "a", + kerning: "a", + left: "a", + letter_spacing: "a", + lighting_color: "a", + line_box_contain: "a", + line_break: "a", + line_grid: "a", + line_height: "a", + line_slack: "a", + line_snap: "a", + list_style: "a", + list_style_image: "a", + list_style_position: "a", + list_style_type: "a", + margin: "a", + margin_bottom: "a", + margin_left: "a", + margin_right: "a", + margin_top: "a", + marker: "a", + marker_end: "a", + marker_mid: "a", + marker_pattern: "a", + marker_segment: "a", + marker_start: "a", + marker_knockout_left: "a", + marker_knockout_right: "a", + marker_side: "a", + marks: "a", + marquee_direction: "a", + marquee_play_count: "a", + marquee_speed: "a", + marquee_style: "a", + mask: "a", + mask_image: "a", + mask_repeat: "a", + mask_position: "a", + mask_clip: "a", + mask_origin: "a", + mask_size: "a", + mask_box: "a", + mask_box_outset: "a", + mask_box_repeat: "a", + mask_box_slice: "a", + mask_box_source: "a", + mask_box_width: "a", + mask_type: "a", + max_height: "a", + max_lines: "a", + max_width: "a", + min_height: "a", + min_width: "a", + mix_blend_mode: "a", + nav_down: "a", + nav_index: "a", + nav_left: "a", + nav_right: "a", + nav_up: "a", + object_fit: "a", + object_position: "a", + offset_after: "a", + offset_before: "a", + offset_end: "a", + offset_start: "a", + opacity: "a", + order: "a", + orphans: "a", + outline: "a", + outline_color: "a", + outline_style: "a", + outline_width: "a", + outline_offset: "a", + overflow: "a", + overflow_x: "a", + overflow_y: "a", + overflow_style: "a", + overflow_wrap: "a", + padding: "a", + padding_bottom: "a", + padding_left: "a", + padding_right: "a", + padding_top: "a", + page: "a", + page_break_after: "a", + page_break_before: "a", + page_break_inside: "a", + paint_order: "a", + pause: "a", + pause_after: "a", + pause_before: "a", + perspective: "a", + perspective_origin: "a", + pitch: "a", + pitch_range: "a", + play_during: "a", + pointer_events: "a", + position: "a", + quotes: "a", + region_fragment: "a", + resize: "a", + rest: "a", + rest_after: "a", + rest_before: "a", + richness: "a", + right: "a", + ruby_align: "a", + ruby_merge: "a", + ruby_position: "a", + scroll_behavior: "a", + scroll_snap_coordinate: "a", + scroll_snap_destination: "a", + scroll_snap_points_x: "a", + scroll_snap_points_y: "a", + scroll_snap_type: "a", + shape_image_threshold: "a", + shape_inside: "a", + shape_margin: "a", + shape_outside: "a", + shape_padding: "a", + shape_rendering: "a", + size: "a", + speak: "a", + speak_as: "a", + speak_header: "a", + speak_numeral: "a", + speak_punctuation: "a", + speech_rate: "a", + stop_color: "a", + stop_opacity: "a", + stress: "a", + string_set: "a", + stroke: "a", + stroke_dasharray: "a", + stroke_dashoffset: "a", + stroke_linecap: "a", + stroke_linejoin: "a", + stroke_miterlimit: "a", + stroke_opacity: "a", + stroke_width: "a", + tab_size: "a", + table_layout: "a", + text_align: "a", + text_align_all: "a", + text_align_last: "a", + text_anchor: "a", + text_combine_upright: "a", + text_decoration: "a", + text_decoration_color: "a", + text_decoration_line: "a", + text_decoration_style: "a", + text_decoration_skip: "a", + text_emphasis: "a", + text_emphasis_color: "a", + text_emphasis_style: "a", + text_emphasis_position: "a", + text_emphasis_skip: "a", + text_height: "a", + text_indent: "a", + text_justify: "a", + text_orientation: "a", + text_overflow: "a", + text_rendering: "a", + text_shadow: "a", + text_size_adjust: "a", + text_space_collapse: "a", + text_spacing: "a", + text_transform: "a", + text_underline_position: "a", + text_wrap: "a", + top: "a", + touch_action: "a", + transform: "a", + transform_box: "a", + transform_origin: "a", + transform_style: "a", + transition: "a", + transition_delay: "a", + transition_duration: "a", + transition_property: "a", + unicode_bidi: "a", + vector_effect: "a", + vertical_align: "a", + visibility: "a", + voice_balance: "a", + voice_duration: "a", + voice_family: "a", + voice_pitch: "a", + voice_range: "a", + voice_rate: "a", + voice_stress: "a", + voice_volumn: "a", + volume: "a", + white_space: "a", + widows: "a", + width: "a", + will_change: "a", + word_break: "a", + word_spacing: "a", + word_wrap: "a", + wrap_flow: "a", + wrap_through: "a", + writing_mode: "a", + z_index: "a", } }) } diff --git a/examples/svg.rs b/examples/svg.rs index 232c82981..2e9d6c754 100644 --- a/examples/svg.rs +++ b/examples/svg.rs @@ -1,6 +1,6 @@ // Thanks to @japsu and their project https://github.com/japsu/jatsi for the example! -use dioxus::{events::MouseData, html::MouseEvent, prelude::*}; +use dioxus::prelude::*; fn main() { dioxus_desktop::launch(app); @@ -9,7 +9,7 @@ fn main() { fn app(cx: Scope) -> Element { let val = use_state(&cx, || 5); - render! { + cx.render(rsx! { div { user_select: "none", webkit_user_select: "none", @@ -31,7 +31,7 @@ fn app(cx: Scope) -> Element { } } } - } + }) } #[derive(Props)] @@ -78,7 +78,7 @@ pub fn Die<'a>(cx: Scope<'a, DieProps<'a>>) -> Element { }) }); - render! { + cx.render(rsx! { svg { onclick: move |e| cx.props.onclick.call(e), prevent_default: "onclick", @@ -96,5 +96,5 @@ pub fn Die<'a>(cx: Scope<'a, DieProps<'a>>) -> Element { dots } - } + }) } diff --git a/packages/dioxus/src/lib.rs b/packages/dioxus/src/lib.rs index 6e2a2df63..86adae336 100644 --- a/packages/dioxus/src/lib.rs +++ b/packages/dioxus/src/lib.rs @@ -7,7 +7,7 @@ pub use dioxus_hooks as hooks; pub mod events { #[cfg(feature = "html")] - pub use dioxus_html::{AnimationEvent, FormData, FormEvent, KeyCode, KeyboardEvent, MouseData}; + pub use dioxus_html::prelude::*; } #[cfg(feature = "html")] @@ -32,5 +32,5 @@ pub mod prelude { pub use dioxus_html as dioxus_elements; #[cfg(feature = "html")] - pub use dioxus_elements::{FormEvent, GlobalAttributes, SvgAttributes}; + pub use dioxus_elements::{prelude::*, GlobalAttributes, SvgAttributes}; } diff --git a/packages/html/src/events/mouse.rs b/packages/html/src/events/mouse.rs index 4bf7ae8de..2e54b7203 100644 --- a/packages/html/src/events/mouse.rs +++ b/packages/html/src/events/mouse.rs @@ -2,7 +2,7 @@ use crate::geometry::{ClientPoint, Coordinates, ElementPoint, PagePoint, ScreenP use crate::input_data::{ decode_mouse_button_set, encode_mouse_button_set, MouseButton, MouseButtonSet, }; -use dioxus_core::{Attribute, ScopeState, UiEvent}; +use dioxus_core::UiEvent; use keyboard_types::Modifiers; use std::fmt::{Debug, Formatter}; @@ -88,6 +88,91 @@ pub struct MouseData { pub shift_key: bool, } +impl_event! { + MouseData; + + /// Execute a callback when a button is clicked. + /// + /// ## Description + /// + /// An element receives a click event when a pointing device button (such as a mouse's primary mouse button) + /// is both pressed and released while the pointer is located inside the element. + /// + /// - Bubbles: Yes + /// - Cancelable: Yes + /// - Interface(InteData): [`MouseEvent`] + /// + /// If the button is pressed on one element and the pointer is moved outside the element before the button + /// is released, the event is fired on the most specific ancestor element that contained both elements. + /// `click` fires after both the `mousedown` and `mouseup` events have fired, in that order. + /// + /// ## Example + /// ```rust, ignore + /// rsx!( button { "click me", onclick: move |_| log::info!("Clicked!`") } ) + /// ``` + /// + /// ## Reference + /// - + /// - + onclick + + /// oncontextmenu + oncontextmenu + + /// ondoubleclick + ondoubleclick + + /// ondoubleclick + ondblclick + + /// ondrag + ondrag + + /// ondragend + ondragend + + /// ondragenter + ondragenter + + /// ondragexit + ondragexit + + /// ondragleave + ondragleave + + /// ondragover + ondragover + + /// ondragstart + ondragstart + + /// ondrop + ondrop + + /// onmousedown + onmousedown + + /// onmouseenter + onmouseenter + + /// onmouseleave + onmouseleave + + /// onmousemove + onmousemove + + /// onmouseout + onmouseout + + /// onmouseover + /// + /// Triggered when the users's mouse hovers over an element. + onmouseover + + /// onmouseup + onmouseup +} + impl MouseData { /// Construct MouseData with the specified properties /// @@ -217,88 +302,3 @@ impl Debug for MouseData { .finish() } } - -impl_event! { - MouseData; - - /// Execute a callback when a button is clicked. - /// - /// ## Description - /// - /// An element receives a click event when a pointing device button (such as a mouse's primary mouse button) - /// is both pressed and released while the pointer is located inside the element. - /// - /// - Bubbles: Yes - /// - Cancelable: Yes - /// - Interface(InteData): [`MouseEvent`] - /// - /// If the button is pressed on one element and the pointer is moved outside the element before the button - /// is released, the event is fired on the most specific ancestor element that contained both elements. - /// `click` fires after both the `mousedown` and `mouseup` events have fired, in that order. - /// - /// ## Example - /// ```rust, ignore - /// rsx!( button { "click me", onclick: move |_| log::info!("Clicked!`") } ) - /// ``` - /// - /// ## Reference - /// - - /// - - onclick - - /// oncontextmenu - oncontextmenu - - /// ondoubleclick - ondoubleclick - - /// ondoubleclick - ondblclick - - /// ondrag - ondrag - - /// ondragend - ondragend - - /// ondragenter - ondragenter - - /// ondragexit - ondragexit - - /// ondragleave - ondragleave - - /// ondragover - ondragover - - /// ondragstart - ondragstart - - /// ondrop - ondrop - - /// onmousedown - onmousedown - - /// onmouseenter - onmouseenter - - /// onmouseleave - onmouseleave - - /// onmousemove - onmousemove - - /// onmouseout - onmouseout - - /// onmouseover - /// - /// Triggered when the users's mouse hovers over an element. - onmouseover - - /// onmouseup - onmouseup -} diff --git a/packages/html/src/events/wheel.rs b/packages/html/src/events/wheel.rs index e69de29bb..344d9179c 100644 --- a/packages/html/src/events/wheel.rs +++ b/packages/html/src/events/wheel.rs @@ -0,0 +1,78 @@ +use dioxus_core::UiEvent; +use euclid::UnknownUnit; +use std::fmt::{Debug, Formatter}; + +use crate::geometry::{LinesVector, PagesVector, PixelsVector, WheelDelta}; + +pub type WheelEvent = UiEvent; +#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] +#[derive(Clone)] +pub struct WheelData { + #[deprecated(since = "0.3.0", note = "use delta() instead")] + pub delta_mode: u32, + #[deprecated(since = "0.3.0", note = "use delta() instead")] + pub delta_x: f64, + #[deprecated(since = "0.3.0", note = "use delta() instead")] + pub delta_y: f64, + #[deprecated(since = "0.3.0", note = "use delta() instead")] + pub delta_z: f64, +} + +impl_event![ + WheelData; + + /// Called when the mouse wheel is rotated over an element. + onwheel +]; + +impl WheelData { + /// Construct a new WheelData with the specified wheel movement delta + pub fn new(delta: WheelDelta) -> Self { + let (delta_mode, vector) = match delta { + WheelDelta::Pixels(v) => (0, v.cast_unit::()), + WheelDelta::Lines(v) => (1, v.cast_unit::()), + WheelDelta::Pages(v) => (2, v.cast_unit::()), + }; + + #[allow(deprecated)] + WheelData { + delta_mode, + delta_x: vector.x, + delta_y: vector.y, + delta_z: vector.z, + } + } + + /// Construct from the attributes of the web wheel event + pub fn from_web_attributes(delta_mode: u32, delta_x: f64, delta_y: f64, delta_z: f64) -> Self { + #[allow(deprecated)] + Self { + delta_mode, + delta_x, + delta_y, + delta_z, + } + } + + /// The amount of wheel movement + #[allow(deprecated)] + pub fn delta(&self) -> WheelDelta { + let x = self.delta_x; + let y = self.delta_y; + let z = self.delta_z; + match self.delta_mode { + 0 => WheelDelta::Pixels(PixelsVector::new(x, y, z)), + 1 => WheelDelta::Lines(LinesVector::new(x, y, z)), + 2 => WheelDelta::Pages(PagesVector::new(x, y, z)), + _ => panic!("Invalid delta mode, {:?}", self.delta_mode), + } + } +} + +impl Debug for WheelData { + fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result { + f.debug_struct("WheelData") + .field("delta", &self.delta()) + .finish() + } +} diff --git a/packages/html/src/lib.rs b/packages/html/src/lib.rs index b8750755a..871d78e3f 100644 --- a/packages/html/src/lib.rs +++ b/packages/html/src/lib.rs @@ -24,3 +24,7 @@ pub mod input_data; pub use elements::*; pub use events::*; pub use global_attributes::*; + +pub mod prelude { + pub use crate::events::*; +}