2019-06-27 00:02:46 +02:00
|
|
|
use super::event;
|
|
|
|
|
use crate::dpi::{LogicalPosition, LogicalSize};
|
|
|
|
|
use crate::error::OsError as RootOE;
|
|
|
|
|
use crate::event::{ModifiersState, MouseButton, MouseScrollDelta, ScanCode, VirtualKeyCode};
|
|
|
|
|
use crate::platform_impl::OsError;
|
|
|
|
|
|
2019-10-11 11:45:07 -04:00
|
|
|
use std::cell::RefCell;
|
|
|
|
|
use std::rc::Rc;
|
2019-06-27 00:02:46 +02:00
|
|
|
use stdweb::traits::IPointerEvent;
|
|
|
|
|
use stdweb::unstable::TryInto;
|
|
|
|
|
use stdweb::web::event::{
|
2019-10-11 11:45:07 -04:00
|
|
|
BlurEvent, ConcreteEvent, FocusEvent, FullscreenChangeEvent, KeyDownEvent, KeyPressEvent,
|
|
|
|
|
KeyUpEvent, MouseWheelEvent, PointerDownEvent, PointerMoveEvent, PointerOutEvent,
|
|
|
|
|
PointerOverEvent, PointerUpEvent,
|
2019-06-27 00:02:46 +02:00
|
|
|
};
|
|
|
|
|
use stdweb::web::html_element::CanvasElement;
|
|
|
|
|
use stdweb::web::{
|
2019-09-23 09:14:26 -04:00
|
|
|
document, EventListenerHandle, IChildNode, IElement, IEventTarget, IHtmlElement,
|
2019-06-27 00:02:46 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
pub struct Canvas {
|
|
|
|
|
raw: CanvasElement,
|
|
|
|
|
on_focus: Option<EventListenerHandle>,
|
|
|
|
|
on_blur: Option<EventListenerHandle>,
|
|
|
|
|
on_keyboard_release: Option<EventListenerHandle>,
|
|
|
|
|
on_keyboard_press: Option<EventListenerHandle>,
|
|
|
|
|
on_received_character: Option<EventListenerHandle>,
|
|
|
|
|
on_cursor_leave: Option<EventListenerHandle>,
|
|
|
|
|
on_cursor_enter: Option<EventListenerHandle>,
|
|
|
|
|
on_cursor_move: Option<EventListenerHandle>,
|
|
|
|
|
on_mouse_press: Option<EventListenerHandle>,
|
|
|
|
|
on_mouse_release: Option<EventListenerHandle>,
|
|
|
|
|
on_mouse_wheel: Option<EventListenerHandle>,
|
2019-10-11 11:45:07 -04:00
|
|
|
on_fullscreen_change: Option<EventListenerHandle>,
|
|
|
|
|
wants_fullscreen: Rc<RefCell<bool>>,
|
2019-06-27 00:02:46 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
impl Drop for Canvas {
|
|
|
|
|
fn drop(&mut self) {
|
|
|
|
|
self.raw.remove();
|
|
|
|
|
}
|
|
|
|
|
}
|
2019-06-25 03:15:34 +02:00
|
|
|
|
|
|
|
|
impl Canvas {
|
2019-09-23 09:14:26 -04:00
|
|
|
pub fn create() -> Result<Self, RootOE> {
|
2019-06-27 00:02:46 +02:00
|
|
|
let canvas: CanvasElement = document()
|
2019-06-25 03:15:34 +02:00
|
|
|
.create_element("canvas")
|
2019-06-27 00:02:46 +02:00
|
|
|
.map_err(|_| os_error!(OsError("Failed to create canvas element".to_owned())))?
|
2019-06-25 03:15:34 +02:00
|
|
|
.try_into()
|
|
|
|
|
.map_err(|_| os_error!(OsError("Failed to create canvas element".to_owned())))?;
|
|
|
|
|
|
2019-08-08 23:51:41 +02:00
|
|
|
// A tabindex is needed in order to capture local keyboard events.
|
|
|
|
|
// A "0" value means that the element should be focusable in
|
|
|
|
|
// sequential keyboard navigation, but its order is defined by the
|
|
|
|
|
// document's source order.
|
|
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
|
2019-06-27 00:02:46 +02:00
|
|
|
canvas
|
|
|
|
|
.set_attribute("tabindex", "0")
|
2019-08-08 23:51:41 +02:00
|
|
|
.map_err(|_| os_error!(OsError("Failed to set a tabindex".to_owned())))?;
|
2019-06-27 00:02:46 +02:00
|
|
|
|
|
|
|
|
Ok(Canvas {
|
|
|
|
|
raw: canvas,
|
|
|
|
|
on_blur: None,
|
|
|
|
|
on_focus: None,
|
|
|
|
|
on_keyboard_release: None,
|
|
|
|
|
on_keyboard_press: None,
|
|
|
|
|
on_received_character: None,
|
|
|
|
|
on_cursor_leave: None,
|
|
|
|
|
on_cursor_enter: None,
|
|
|
|
|
on_cursor_move: None,
|
|
|
|
|
on_mouse_release: None,
|
|
|
|
|
on_mouse_press: None,
|
|
|
|
|
on_mouse_wheel: None,
|
2019-10-11 11:45:07 -04:00
|
|
|
on_fullscreen_change: None,
|
|
|
|
|
wants_fullscreen: Rc::new(RefCell::new(false)),
|
2019-06-27 00:02:46 +02:00
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn set_attribute(&self, attribute: &str, value: &str) {
|
|
|
|
|
self.raw
|
|
|
|
|
.set_attribute(attribute, value)
|
|
|
|
|
.expect(&format!("Set attribute: {}", attribute));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn position(&self) -> (f64, f64) {
|
|
|
|
|
let bounds = self.raw.get_bounding_client_rect();
|
|
|
|
|
|
|
|
|
|
(bounds.get_x(), bounds.get_y())
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn width(&self) -> f64 {
|
|
|
|
|
self.raw.width() as f64
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn height(&self) -> f64 {
|
|
|
|
|
self.raw.height() as f64
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-04 01:33:07 -05:00
|
|
|
pub fn set_size(&self, size: LogicalSize<f64>) {
|
2019-06-27 00:02:46 +02:00
|
|
|
self.raw.set_width(size.width as u32);
|
|
|
|
|
self.raw.set_height(size.height as u32);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn raw(&self) -> &CanvasElement {
|
|
|
|
|
&self.raw
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn on_blur<F>(&mut self, mut handler: F)
|
|
|
|
|
where
|
|
|
|
|
F: 'static + FnMut(),
|
|
|
|
|
{
|
|
|
|
|
self.on_blur = Some(self.add_event(move |_: BlurEvent| {
|
|
|
|
|
handler();
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn on_focus<F>(&mut self, mut handler: F)
|
|
|
|
|
where
|
|
|
|
|
F: 'static + FnMut(),
|
|
|
|
|
{
|
|
|
|
|
self.on_focus = Some(self.add_event(move |_: FocusEvent| {
|
|
|
|
|
handler();
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn on_keyboard_release<F>(&mut self, mut handler: F)
|
|
|
|
|
where
|
|
|
|
|
F: 'static + FnMut(ScanCode, Option<VirtualKeyCode>, ModifiersState),
|
|
|
|
|
{
|
2019-10-11 11:45:07 -04:00
|
|
|
self.on_keyboard_release = Some(self.add_user_event(move |event: KeyUpEvent| {
|
2019-06-27 00:02:46 +02:00
|
|
|
handler(
|
|
|
|
|
event::scan_code(&event),
|
|
|
|
|
event::virtual_key_code(&event),
|
|
|
|
|
event::keyboard_modifiers(&event),
|
|
|
|
|
);
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn on_keyboard_press<F>(&mut self, mut handler: F)
|
|
|
|
|
where
|
|
|
|
|
F: 'static + FnMut(ScanCode, Option<VirtualKeyCode>, ModifiersState),
|
|
|
|
|
{
|
2019-10-11 11:45:07 -04:00
|
|
|
self.on_keyboard_press = Some(self.add_user_event(move |event: KeyDownEvent| {
|
2019-06-27 00:02:46 +02:00
|
|
|
handler(
|
|
|
|
|
event::scan_code(&event),
|
|
|
|
|
event::virtual_key_code(&event),
|
|
|
|
|
event::keyboard_modifiers(&event),
|
|
|
|
|
);
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn on_received_character<F>(&mut self, mut handler: F)
|
|
|
|
|
where
|
|
|
|
|
F: 'static + FnMut(char),
|
|
|
|
|
{
|
|
|
|
|
// TODO: Use `beforeinput`.
|
|
|
|
|
//
|
|
|
|
|
// The `keypress` event is deprecated, but there does not seem to be a
|
|
|
|
|
// viable/compatible alternative as of now. `beforeinput` is still widely
|
|
|
|
|
// unsupported.
|
2019-10-11 11:45:07 -04:00
|
|
|
self.on_received_character = Some(self.add_user_event(move |event: KeyPressEvent| {
|
2019-06-27 00:02:46 +02:00
|
|
|
handler(event::codepoint(&event));
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn on_cursor_leave<F>(&mut self, mut handler: F)
|
|
|
|
|
where
|
|
|
|
|
F: 'static + FnMut(i32),
|
|
|
|
|
{
|
|
|
|
|
self.on_cursor_leave = Some(self.add_event(move |event: PointerOutEvent| {
|
|
|
|
|
handler(event.pointer_id());
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn on_cursor_enter<F>(&mut self, mut handler: F)
|
|
|
|
|
where
|
|
|
|
|
F: 'static + FnMut(i32),
|
|
|
|
|
{
|
|
|
|
|
self.on_cursor_enter = Some(self.add_event(move |event: PointerOverEvent| {
|
|
|
|
|
handler(event.pointer_id());
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn on_mouse_release<F>(&mut self, mut handler: F)
|
|
|
|
|
where
|
|
|
|
|
F: 'static + FnMut(i32, MouseButton, ModifiersState),
|
|
|
|
|
{
|
2019-10-11 11:45:07 -04:00
|
|
|
self.on_mouse_release = Some(self.add_user_event(move |event: PointerUpEvent| {
|
2019-06-27 00:02:46 +02:00
|
|
|
handler(
|
|
|
|
|
event.pointer_id(),
|
|
|
|
|
event::mouse_button(&event),
|
|
|
|
|
event::mouse_modifiers(&event),
|
|
|
|
|
);
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn on_mouse_press<F>(&mut self, mut handler: F)
|
|
|
|
|
where
|
|
|
|
|
F: 'static + FnMut(i32, MouseButton, ModifiersState),
|
|
|
|
|
{
|
2019-10-11 11:45:07 -04:00
|
|
|
self.on_mouse_press = Some(self.add_user_event(move |event: PointerDownEvent| {
|
2019-06-27 00:02:46 +02:00
|
|
|
handler(
|
|
|
|
|
event.pointer_id(),
|
|
|
|
|
event::mouse_button(&event),
|
|
|
|
|
event::mouse_modifiers(&event),
|
|
|
|
|
);
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn on_cursor_move<F>(&mut self, mut handler: F)
|
|
|
|
|
where
|
|
|
|
|
F: 'static + FnMut(i32, LogicalPosition, ModifiersState),
|
|
|
|
|
{
|
|
|
|
|
self.on_cursor_move = Some(self.add_event(move |event: PointerMoveEvent| {
|
|
|
|
|
handler(
|
|
|
|
|
event.pointer_id(),
|
|
|
|
|
event::mouse_position(&event),
|
|
|
|
|
event::mouse_modifiers(&event),
|
|
|
|
|
);
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn on_mouse_wheel<F>(&mut self, mut handler: F)
|
|
|
|
|
where
|
|
|
|
|
F: 'static + FnMut(i32, MouseScrollDelta, ModifiersState),
|
|
|
|
|
{
|
|
|
|
|
self.on_mouse_wheel = Some(self.add_event(move |event: MouseWheelEvent| {
|
|
|
|
|
if let Some(delta) = event::mouse_scroll_delta(&event) {
|
|
|
|
|
handler(0, delta, event::mouse_modifiers(&event));
|
|
|
|
|
}
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-11 11:45:07 -04:00
|
|
|
pub fn on_fullscreen_change<F>(&mut self, mut handler: F)
|
|
|
|
|
where
|
|
|
|
|
F: 'static + FnMut(),
|
|
|
|
|
{
|
|
|
|
|
self.on_fullscreen_change = Some(self.add_event(move |_: FullscreenChangeEvent| handler()));
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-27 00:02:46 +02:00
|
|
|
fn add_event<E, F>(&self, mut handler: F) -> EventListenerHandle
|
|
|
|
|
where
|
|
|
|
|
E: ConcreteEvent,
|
|
|
|
|
F: 'static + FnMut(E),
|
|
|
|
|
{
|
|
|
|
|
self.raw.add_event_listener(move |event: E| {
|
|
|
|
|
event.stop_propagation();
|
|
|
|
|
event.cancel_bubble();
|
|
|
|
|
|
|
|
|
|
handler(event);
|
|
|
|
|
})
|
2019-06-25 03:15:34 +02:00
|
|
|
}
|
2019-10-11 11:45:07 -04:00
|
|
|
|
|
|
|
|
// The difference between add_event and add_user_event is that the latter has a special meaning
|
|
|
|
|
// for browser security. A user event is a deliberate action by the user (like a mouse or key
|
|
|
|
|
// press) and is the only time things like a fullscreen request may be successfully completed.)
|
|
|
|
|
fn add_user_event<E, F>(&self, mut handler: F) -> EventListenerHandle
|
|
|
|
|
where
|
|
|
|
|
E: ConcreteEvent,
|
|
|
|
|
F: 'static + FnMut(E),
|
|
|
|
|
{
|
|
|
|
|
let wants_fullscreen = self.wants_fullscreen.clone();
|
|
|
|
|
let canvas = self.raw.clone();
|
|
|
|
|
|
|
|
|
|
self.add_event(move |event: E| {
|
|
|
|
|
handler(event);
|
|
|
|
|
|
|
|
|
|
if *wants_fullscreen.borrow() {
|
|
|
|
|
canvas.request_fullscreen();
|
|
|
|
|
*wants_fullscreen.borrow_mut() = false;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn request_fullscreen(&self) {
|
|
|
|
|
*self.wants_fullscreen.borrow_mut() = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pub fn is_fullscreen(&self) -> bool {
|
|
|
|
|
super::is_fullscreen(&self.raw)
|
|
|
|
|
}
|
2019-06-25 03:15:34 +02:00
|
|
|
}
|