//! Ruffle web frontend. mod audio; mod render; use crate::{audio::WebAudioBackend, render::WebCanvasRenderBackend}; use generational_arena::{Arena, Index}; use js_sys::Uint8Array; use ruffle_core::{backend::render::RenderBackend, PlayerEvent}; use std::{cell::RefCell, error::Error, num::NonZeroI32}; use wasm_bindgen::{prelude::*, JsCast, JsValue}; use web_sys::{Event, EventTarget, HtmlCanvasElement, MouseEvent}; thread_local! { /// We store the actual instances of the ruffle core in a static pool. /// This gives us a clear boundary between the JS side and Rust side, avoiding /// issues with lifetimes and type paramters (which cannot be exported with wasm-bindgen). static INSTANCES: RefCell> = RefCell::new(Arena::new()); } type AnimationHandler = Closure; struct RuffleInstance { core: ruffle_core::Player, canvas: HtmlCanvasElement, canvas_width: i32, canvas_height: i32, device_pixel_ratio: f64, timestamp: f64, animation_handler: Option, // requestAnimationFrame callback animation_handler_id: Option, // requestAnimationFrame id #[allow(dead_code)] click_callback: Option>, mouse_move_callback: Option>, mouse_down_callback: Option>, mouse_up_callback: Option>, } /// An opaque handle to a `RuffleInstance` inside the pool. /// /// This type is exported to JS, and is used to interact with the library. #[wasm_bindgen] #[derive(Clone)] pub struct Ruffle(Index); #[wasm_bindgen] impl Ruffle { pub fn new(canvas: HtmlCanvasElement, swf_data: Uint8Array) -> Result { Ruffle::new_internal(canvas, swf_data).map_err(|_| "Error creating player".into()) } pub fn destroy(&mut self) -> Result<(), JsValue> { // Remove instance from the active list. if let Some(instance) = INSTANCES.with(|instances| { let mut instances = instances.borrow_mut(); instances.remove(self.0) }) { // Cancel the animation handler, if it's still active. if let Some(id) = instance.animation_handler_id { if let Some(window) = web_sys::window() { return window.cancel_animation_frame(id.into()); } } } // Player is dropped at this point. Ok(()) } } impl Ruffle { fn new_internal( canvas: HtmlCanvasElement, swf_data: Uint8Array, ) -> Result> { console_error_panic_hook::set_once(); let _ = console_log::init_with_level(log::Level::Trace); let mut data = vec![0; swf_data.length() as usize]; swf_data.copy_to(&mut data[..]); let window = web_sys::window().ok_or_else(|| "Expected window")?; let renderer = WebCanvasRenderBackend::new(&canvas)?; let audio = WebAudioBackend::new()?; let core = ruffle_core::Player::new(renderer, audio, data)?; let timestamp = window .performance() .ok_or_else(|| "Expected performance")? .now(); // Create instance. let instance = RuffleInstance { core, canvas: canvas.clone(), canvas_width: 0, // Intiailize canvas width and height to 0 to force an initial canvas resize. canvas_height: 0, device_pixel_ratio: window.device_pixel_ratio(), animation_handler: None, animation_handler_id: None, click_callback: None, mouse_move_callback: None, mouse_down_callback: None, mouse_up_callback: None, timestamp, }; // Register the instance and create the animation frame closure. let mut ruffle = INSTANCES.with(move |instances| { let mut instances = instances.borrow_mut(); let index = instances.insert(instance); let ruffle = Ruffle(index); // Create the animation frame closure. { let mut ruffle = ruffle.clone(); let instance = instances.get_mut(index).unwrap(); instance.animation_handler = Some(Closure::wrap(Box::new(move |timestamp: f64| { ruffle.tick(timestamp); }) as Box)); } // Create mouse move handler. { let mouse_move_callback = Closure::wrap(Box::new(move |js_event: MouseEvent| { INSTANCES.with(move |instances| { let mut instances = instances.borrow_mut(); if let Some(instance) = instances.get_mut(index) { let event = PlayerEvent::MouseMove { x: f64::from(js_event.offset_x()) * instance.device_pixel_ratio, y: f64::from(js_event.offset_y()) * instance.device_pixel_ratio, }; instance.core.handle_event(event); } }); }) as Box); let canvas_events: &EventTarget = canvas.as_ref(); canvas_events .add_event_listener_with_callback( "mousemove", mouse_move_callback.as_ref().unchecked_ref(), ) .unwrap(); let instance = instances.get_mut(index).unwrap(); instance.mouse_move_callback = Some(mouse_move_callback); } // Create mouse down handler. { let mouse_down_callback = Closure::wrap(Box::new(move |js_event: MouseEvent| { INSTANCES.with(move |instances| { let mut instances = instances.borrow_mut(); if let Some(instance) = instances.get_mut(index) { let event = PlayerEvent::MouseDown { x: f64::from(js_event.offset_x()) * instance.device_pixel_ratio, y: f64::from(js_event.offset_y()) * instance.device_pixel_ratio, }; instance.core.handle_event(event); } }); }) as Box); let canvas_events: &EventTarget = canvas.as_ref(); canvas_events .add_event_listener_with_callback( "mousedown", mouse_down_callback.as_ref().unchecked_ref(), ) .unwrap(); let instance = instances.get_mut(index).unwrap(); instance.mouse_down_callback = Some(mouse_down_callback); } // Create mouse up handler. { let mouse_up_callback = Closure::wrap(Box::new(move |js_event: MouseEvent| { INSTANCES.with(move |instances| { let mut instances = instances.borrow_mut(); if let Some(instance) = instances.get_mut(index) { let event = PlayerEvent::MouseUp { x: f64::from(js_event.offset_x()) * instance.device_pixel_ratio, y: f64::from(js_event.offset_y()) * instance.device_pixel_ratio, }; instance.core.handle_event(event); } }); }) as Box); let canvas_events: &EventTarget = canvas.as_ref(); canvas_events .add_event_listener_with_callback( "mouseup", mouse_up_callback.as_ref().unchecked_ref(), ) .unwrap(); let instance = instances.get_mut(index).unwrap(); instance.mouse_up_callback = Some(mouse_up_callback); } // Create click event handler. { let click_callback = Closure::wrap(Box::new(move |_| { INSTANCES.with(move |instances| { let mut instances = instances.borrow_mut(); if let Some(instance) = instances.get_mut(index) { instance.core.set_is_playing(true); } }); }) as Box); let canvas_events: &EventTarget = canvas.as_ref(); canvas_events .add_event_listener_with_callback( "click", click_callback.as_ref().unchecked_ref(), ) .unwrap(); canvas.style().set_property("cursor", "pointer").unwrap(); let instance = instances.get_mut(index).unwrap(); instance.click_callback = Some(click_callback); // Do initial render to render "click-to-play". instance.core.render(); } ruffle }); // Do an initial tick to start the animation loop. ruffle.tick(timestamp); Ok(ruffle) } fn tick(&mut self, timestamp: f64) { INSTANCES.with(|instances| { let mut instances = instances.borrow_mut(); if let Some(instance) = instances.get_mut(self.0) { let dt = timestamp - instance.timestamp; instance.timestamp = timestamp; instance.core.tick(dt); // Check for canvas resize. let canvas_width = instance.canvas.client_width(); let canvas_height = instance.canvas.client_height(); if instance.canvas_width != canvas_width || instance.canvas_height != canvas_height { // If a canvas resizes, it's drawing context will get scaled. You must reset // the width and height attributes of the canvas element to recreate the context. // (NOT the CSS width/height!) instance.canvas_width = canvas_width; instance.canvas_height = canvas_height; // The actual viewport is scaled by DPI, bigger than CSS pixels. let viewport_width = (f64::from(canvas_width) * instance.device_pixel_ratio) as u32; let viewport_height = (f64::from(canvas_height) * instance.device_pixel_ratio) as u32; instance.canvas.set_width(viewport_width); instance.canvas.set_height(viewport_height); instance .core .set_viewport_dimensions(viewport_width, viewport_height); instance .core .renderer_mut() .set_viewport_dimensions(viewport_width, viewport_height); // Force a re-render if we resize. instance.core.render(); } // Request next animation frame. if let Some(handler) = &instance.animation_handler { let window = web_sys::window().unwrap(); let id = window .request_animation_frame(handler.as_ref().unchecked_ref()) .unwrap(); instance.animation_handler_id = NonZeroI32::new(id); } else { instance.animation_handler_id = None; } } }); } }