74 lines
2.0 KiB
Rust
74 lines
2.0 KiB
Rust
use crate::agents::audio_agent::{AudioAgent, AudioData};
|
|
use web_sys::HtmlCanvasElement;
|
|
use yew::agent::Bridged;
|
|
use yew::prelude::*;
|
|
use yew::services::ConsoleService;
|
|
use yew::Bridge;
|
|
|
|
pub struct Canvas {
|
|
_audio_agent: Box<dyn Bridge<AudioAgent>>,
|
|
canvas_node: NodeRef,
|
|
audio_data: Option<AudioData>,
|
|
}
|
|
|
|
#[derive(Debug)]
|
|
pub enum Msg {
|
|
Reset,
|
|
AudioAgentMessage(Result<AudioData, String>),
|
|
}
|
|
|
|
impl Component for Canvas {
|
|
type Message = Msg;
|
|
type Properties = ();
|
|
|
|
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
|
|
Self {
|
|
_audio_agent: AudioAgent::bridge(link.callback(Msg::AudioAgentMessage)),
|
|
canvas_node: NodeRef::default(),
|
|
audio_data: None,
|
|
}
|
|
}
|
|
|
|
fn update(&mut self, msg: Self::Message) -> ShouldRender {
|
|
match msg {
|
|
Msg::AudioAgentMessage(Ok(audio_data)) => self.handle_samples_loaded(audio_data),
|
|
Msg::AudioAgentMessage(Err(err)) => self.handle_samples_loaded_error(&err),
|
|
Msg::Reset => self.reset(),
|
|
};
|
|
false
|
|
}
|
|
|
|
fn change(&mut self, _: Self::Properties) -> ShouldRender {
|
|
false
|
|
}
|
|
|
|
fn view(&self) -> Html {
|
|
html! { <canvas ref=self.canvas_node.clone() width="800" height="300" style="border: 1px solid grey"></canvas> }
|
|
}
|
|
}
|
|
|
|
impl Canvas {
|
|
fn reset(&mut self) {
|
|
self.audio_data = None;
|
|
self.redraw_canvas();
|
|
}
|
|
|
|
fn handle_samples_loaded(&mut self, audio_data: AudioData) {
|
|
self.audio_data = Some(audio_data);
|
|
self.redraw_canvas();
|
|
}
|
|
|
|
fn handle_samples_loaded_error(&mut self, err: &str) {
|
|
self.reset();
|
|
|
|
ConsoleService::error(&format!("Error loading samples: {}", err));
|
|
}
|
|
|
|
fn redraw_canvas(&mut self) {
|
|
let canvas_element = self.canvas_node.cast::<HtmlCanvasElement>().unwrap();
|
|
let _context = canvas_element.get_context("2d").unwrap();
|
|
// TODO: draw canvas...
|
|
ConsoleService::log("TODO: draw on canvas...");
|
|
}
|
|
}
|