Pass zoom factor properties to Canvas component

src/components/waveform/canvas.rs

@@ -9,6 +9,7 @@ use yew::services::ConsoleService;
 use yew::Bridge;
 
 pub struct Canvas {
+    props: Props,
     _audio_agent: Box<dyn Bridge<AudioAgent>>,
     canvas_node: NodeRef,
     audio_data: Option<Arc<AudioData>>,
@@ -21,12 +22,19 @@ pub enum Msg {
     AudioAgentMessage(Result<Arc<AudioData>, String>),
 }
 
+#[derive(Properties, Clone, PartialEq, Debug)]
+pub struct Props {
+    #[prop_or(1)]
+    pub zoom_factor: i32,
+}
+
 impl Component for Canvas {
     type Message = Msg;
-    type Properties = ();
+    type Properties = Props;
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
         Self {
+            props,
             _audio_agent: AudioAgent::bridge(link.callback(Msg::AudioAgentMessage)),
             canvas_node: NodeRef::default(),
             audio_data: None,
@@ -37,7 +45,7 @@ impl Component for Canvas {
     fn rendered(&mut self, first_render: bool) {
         if first_render {
             let cb = Closure::wrap(Box::new(|| {
-                ConsoleService::log(&format!("In the callback"));
+                ConsoleService::log(&format!("In setInterval callback"));
             }) as Box<dyn FnMut()>);
 
             // TODO: request_animation_frame() ?
@@ -62,7 +70,16 @@ impl Component for Canvas {
         false
     }
 
-    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+    fn change(&mut self, props: Self::Properties) -> ShouldRender {
+        if self.props.zoom_factor != props.zoom_factor {
+            ConsoleService::log(&format!("Switch to Zoom factor: {:?}", props));
+            self.props.zoom_factor = props.zoom_factor;
+            self.redraw_canvas();
+        }
+
+        if self.props != props {
+            self.props = props;
+        }
         false
     }
 

src/components/waveform/container.rs

@@ -10,10 +10,12 @@ pub struct Container {
     link: ComponentLink<Self>,
     file_input: NodeRef,
     audio_agent: Dispatcher<AudioAgent>,
+    zoom_factor: i32,
 }
 
 pub enum Msg {
     SubmitForm,
+    ZoomButtonClicked(i32),
 }
 
 impl Component for Container {
@@ -25,6 +27,7 @@ impl Component for Container {
             link,
             file_input: NodeRef::default(),
             audio_agent: AudioAgent::dispatcher(),
+            zoom_factor: 1,
         }
     }
 
@@ -35,18 +38,21 @@ impl Component for Container {
                     ConsoleService::error(&e);
                 };
             }
+            Msg::ZoomButtonClicked(factor) => {
+                self.zoom_factor = factor;
+            }
         };
         true
     }
 
     fn change(&mut self, _: Self::Properties) -> ShouldRender {
-        false
+        true
     }
 
     fn view(&self) -> Html {
         html! {
             <div id="waveform">
-                <Canvas/>
+                <Canvas zoom_factor=self.zoom_factor/>
 
                 <section id="controls" style="width: 800px; height: 100px; border: 1px solid grey">
                     <label>
@@ -54,9 +60,19 @@ impl Component for Container {
                         <input ref=self.file_input.clone() type="file"/>
                     </label>
                     <button onclick=self.link.callback(move |_| Msg::SubmitForm)>{"Open file"}</button>
+
+                    <Player/>
                 </section>
 
-                <Player/>
+                <section>
+                    <h3>{ "Zoom" }</h3>
+                    <button onclick=self.link.callback(move |_| Msg::ZoomButtonClicked(1))>{ "1x" }</button>
+                    <button onclick=self.link.callback(move |_| Msg::ZoomButtonClicked(2))>{ "2x" }</button>
+                    <button onclick=self.link.callback(move |_| Msg::ZoomButtonClicked(4))>{ "4x" }</button>
+                    <button onclick=self.link.callback(move |_| Msg::ZoomButtonClicked(8))>{ "8x" }</button>
+                    <button onclick=self.link.callback(move |_| Msg::ZoomButtonClicked(16))>{ "16x" }</button>
+                    <button onclick=self.link.callback(move |_| Msg::ZoomButtonClicked(32))>{ "32x" }</button>
+                </section>
             </div>
         }
     }

src/lib.rs

@@ -1,4 +1,4 @@
-#![recursion_limit = "256"]
+#![recursion_limit = "1024"]
 
 extern crate console_error_panic_hook;
 extern crate js_sys;