mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-26 22:20:19 +00:00
Update interpreter and example
This commit is contained in:
parent
ed34e339fc
commit
aaf9d4665f
5 changed files with 57 additions and 41 deletions
|
@ -5,6 +5,7 @@ This calculator version uses React-style state management. All state is held as
|
|||
|
||||
use dioxus::events::*;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_html::input_data::keyboard_types::Key;
|
||||
|
||||
fn main() {
|
||||
use dioxus::desktop::tao::dpi::LogicalSize;
|
||||
|
@ -29,33 +30,38 @@ fn app(cx: Scope) -> Element {
|
|||
|
||||
let input_operator = move |key: &str| val.make_mut().push_str(key);
|
||||
|
||||
let handle_key_down_event = move |evt: KeyboardEvent| match evt.key() {
|
||||
Key::Backspace => {
|
||||
if !val.len() != 0 {
|
||||
val.make_mut().pop();
|
||||
}
|
||||
}
|
||||
Key::Character(character) => match character.as_str() {
|
||||
"+" => input_operator("+"),
|
||||
"-" => input_operator("-"),
|
||||
"/" => input_operator("/"),
|
||||
"*" => input_operator("*"),
|
||||
"0" => input_digit(0),
|
||||
"1" => input_digit(1),
|
||||
"2" => input_digit(2),
|
||||
"3" => input_digit(3),
|
||||
"4" => input_digit(4),
|
||||
"5" => input_digit(5),
|
||||
"6" => input_digit(6),
|
||||
"7" => input_digit(7),
|
||||
"8" => input_digit(8),
|
||||
"9" => input_digit(9),
|
||||
_ => {}
|
||||
},
|
||||
_ => {}
|
||||
};
|
||||
|
||||
cx.render(rsx!(
|
||||
style { [include_str!("./assets/calculator.css")] }
|
||||
div { id: "wrapper",
|
||||
div { class: "app",
|
||||
div { class: "calculator",
|
||||
onkeydown: move |evt| match evt.key_code {
|
||||
KeyCode::Add => input_operator("+"),
|
||||
KeyCode::Subtract => input_operator("-"),
|
||||
KeyCode::Divide => input_operator("/"),
|
||||
KeyCode::Multiply => input_operator("*"),
|
||||
KeyCode::Num0 => input_digit(0),
|
||||
KeyCode::Num1 => input_digit(1),
|
||||
KeyCode::Num2 => input_digit(2),
|
||||
KeyCode::Num3 => input_digit(3),
|
||||
KeyCode::Num4 => input_digit(4),
|
||||
KeyCode::Num5 => input_digit(5),
|
||||
KeyCode::Num6 => input_digit(6),
|
||||
KeyCode::Num7 => input_digit(7),
|
||||
KeyCode::Num8 => input_digit(8),
|
||||
KeyCode::Num9 => input_digit(9),
|
||||
KeyCode::Backspace => {
|
||||
if !val.len() != 0 {
|
||||
val.make_mut().pop();
|
||||
}
|
||||
}
|
||||
_ => {}
|
||||
},
|
||||
onkeydown: handle_key_down_event,
|
||||
div { class: "calculator-display", [val.to_string()] }
|
||||
div { class: "calculator-keypad",
|
||||
div { class: "input-keys",
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
use dioxus::events::WheelEvent;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_html::geometry::ScreenPoint;
|
||||
use dioxus_html::input_data::keyboard_types::Code;
|
||||
use dioxus_html::input_data::MouseButtonSet;
|
||||
use dioxus_html::on::{KeyboardEvent, MouseEvent};
|
||||
use dioxus_html::KeyCode;
|
||||
|
@ -16,6 +17,21 @@ fn app(cx: Scope) -> Element {
|
|||
let buttons = use_state(&cx, || MouseButtonSet::empty());
|
||||
let mouse_clicked = use_state(&cx, || false);
|
||||
|
||||
let key_down_handler = move |evt: KeyboardEvent| {
|
||||
match evt.data.code() {
|
||||
Code::ArrowLeft => count.set(count + 1),
|
||||
Code::ArrowRight => count.set(count - 1),
|
||||
Code::ArrowUp => count.set(count + 10),
|
||||
Code::ArrowDown => count.set(count - 10),
|
||||
_ => {}
|
||||
}
|
||||
key.set(format!(
|
||||
"{:?} repeating: {:?}",
|
||||
evt.key(),
|
||||
evt.is_auto_repeating()
|
||||
));
|
||||
};
|
||||
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
width: "100%",
|
||||
|
@ -24,16 +40,7 @@ fn app(cx: Scope) -> Element {
|
|||
justify_content: "center",
|
||||
align_items: "center",
|
||||
flex_direction: "column",
|
||||
onkeydown: move |evt: KeyboardEvent| {
|
||||
match evt.data.key_code {
|
||||
KeyCode::LeftArrow => count.set(count + 1),
|
||||
KeyCode::RightArrow => count.set(count - 1),
|
||||
KeyCode::UpArrow => count.set(count + 10),
|
||||
KeyCode::DownArrow => count.set(count - 10),
|
||||
_ => {},
|
||||
}
|
||||
key.set(format!("{:?} repeating: {:?}", evt.key, evt.repeat));
|
||||
},
|
||||
onkeydown: key_down_handler,
|
||||
onwheel: move |evt: WheelEvent| {
|
||||
count.set(count + evt.data.delta().strip_units().y as i64);
|
||||
},
|
||||
|
|
|
@ -14,7 +14,6 @@ pub mod on {
|
|||
MouseButton, MouseButtonSet,
|
||||
};
|
||||
use euclid::UnknownUnit;
|
||||
use keyboard_types::Key::Alt;
|
||||
use keyboard_types::{Code, Key, Location, Modifiers};
|
||||
use std::collections::HashMap;
|
||||
use std::convert::TryInto;
|
||||
|
@ -908,7 +907,6 @@ pub mod on {
|
|||
)]
|
||||
#[derive(Clone, Copy, Debug, PartialEq)]
|
||||
#[repr(u8)]
|
||||
#[deprecated(since = "0.3.0", note = "use keyboard_types::Code instead")]
|
||||
pub enum KeyCode {
|
||||
// That key has no keycode, = 0
|
||||
// break, = 3
|
||||
|
|
|
@ -334,6 +334,7 @@ export function serialize_event(event) {
|
|||
location,
|
||||
repeat,
|
||||
which,
|
||||
code,
|
||||
} = event;
|
||||
return {
|
||||
char_code: charCode,
|
||||
|
@ -347,6 +348,7 @@ export function serialize_event(event) {
|
|||
repeat: repeat,
|
||||
which: which,
|
||||
locale: "locale",
|
||||
code,
|
||||
};
|
||||
}
|
||||
case "focus":
|
||||
|
|
|
@ -11,8 +11,7 @@ use dioxus_html::geometry::{
|
|||
use dioxus_html::input_data::keyboard_types::{Code, Key, Location, Modifiers};
|
||||
use dioxus_html::input_data::MouseButtonSet as DioxusMouseButtons;
|
||||
use dioxus_html::input_data::{MouseButton as DioxusMouseButton, MouseButtonSet};
|
||||
use dioxus_html::{on::*, KeyCode};
|
||||
use std::str::FromStr;
|
||||
use dioxus_html::on::*;
|
||||
use std::{
|
||||
any::Any,
|
||||
cell::RefCell,
|
||||
|
@ -140,14 +139,18 @@ impl InnerInputState {
|
|||
EventData::Wheel(ref w) => self.wheel = Some(w.clone()),
|
||||
EventData::Screen(ref s) => self.screen = Some(*s),
|
||||
EventData::Keyboard(ref mut k) => {
|
||||
let repeat = self
|
||||
let is_repeating = self
|
||||
.last_key_pressed
|
||||
.as_ref()
|
||||
.filter(|k2| k2.0.key == k.key && k2.1.elapsed() < MAX_REPEAT_TIME)
|
||||
// heuristic for guessing which presses are auto-repeating. not necessarily accurate
|
||||
.filter(|k2| k2.0.key() == k.key() && k2.1.elapsed() < MAX_REPEAT_TIME)
|
||||
.is_some();
|
||||
k.repeat = repeat;
|
||||
let new = k.clone();
|
||||
self.last_key_pressed = Some((new, Instant::now()));
|
||||
if is_repeating {
|
||||
let new = k.clone();
|
||||
self.last_key_pressed = Some((new, Instant::now()));
|
||||
|
||||
*k = KeyboardData::new(k.key(), k.code(), k.location(), true, k.modifiers());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue