Files
dioxus/examples/overlay.rs
T
Christopher Serr 3da821d184 Provide HotkeyState on Global Shortcut Events (#3822)
* Only react to hotkeys that are pressed

The global shortcuts are otherwise also triggering when the hotkey is
being released. This affects at least Windows.

* Provide `HotkeyState` on Global Shortcut Events

Instead of ignoring the events where the shortcut is released, the state
is now provided as an argument to the event handler.
2025-04-09 11:04:06 -07:00

66 lines
1.9 KiB
Rust

//! This example demonstrates how to create an overlay window with dioxus.
//!
//! Basically, we just create a new window with a transparent background and no decorations, size it to the screen, and
//! then we can draw whatever we want on it. In this case, we're drawing a simple overlay with a draggable header.
//!
//! We also add a global shortcut to toggle the overlay on and off, so you could build a raycast-type app with this.
use dioxus::desktop::{
tao::dpi::PhysicalPosition, use_global_shortcut, HotKeyState, LogicalSize, WindowBuilder,
};
use dioxus::prelude::*;
fn main() {
dioxus::LaunchBuilder::desktop()
.with_cfg(make_config())
.launch(app);
}
fn app() -> Element {
let mut show_overlay = use_signal(|| true);
_ = use_global_shortcut("cmd+g", move |state| {
if state == HotKeyState::Pressed {
show_overlay.toggle();
}
});
rsx! {
document::Link {
rel: "stylesheet",
href: asset!("/examples/assets/overlay.css"),
}
if show_overlay() {
div {
width: "100%",
height: "100%",
background_color: "red",
border: "1px solid black",
div {
width: "100%",
height: "10px",
background_color: "black",
onmousedown: move |_| dioxus::desktop::window().drag(),
}
"This is an overlay!"
}
}
}
}
fn make_config() -> dioxus::desktop::Config {
dioxus::desktop::Config::default().with_window(make_window())
}
fn make_window() -> WindowBuilder {
WindowBuilder::new()
.with_transparent(true)
.with_decorations(false)
.with_resizable(false)
.with_always_on_top(true)
.with_position(PhysicalPosition::new(0, 0))
.with_max_inner_size(LogicalSize::new(100000, 50))
}