undo wip

Cargo.toml

@@ -24,6 +24,7 @@ features  = [
   'EventTarget',
   'HtmlCanvasElement',
   'HtmlElement',
+  'HtmlImageElement',
   'MouseEvent',
   'Node',
   'Window',

src/canvas.rs

@@ -19,8 +19,10 @@ pub fn init(canvas: &HtmlCanvasElement, state: &Rc<RefCell<State>>) -> Result<()
     {
         let context_copy = context.clone();
         let state_copy = state.clone();
+        let canvas_copy = canvas.clone();
         let handle_mouse_down = Closure::wrap(Box::new(move |event: MouseEvent| {
             state_copy.borrow_mut().start_drawing();
+            state_copy.borrow_mut().add_undo_state(canvas_copy.to_data_url().unwrap());
             let new_x = event.offset_x() as f64;
             let new_y = event.offset_y() as f64;
             context_copy.begin_path();

src/state.rs

@@ -17,6 +17,7 @@ pub struct State {
     is_drawing: bool,
     color: String,
     pen_size: f64,
+    undo_list: Vec<String>,
 }
 
 impl State {
@@ -27,6 +28,7 @@ impl State {
             is_drawing: false,
             color: DEFAULT_COLOR.to_string(),
             pen_size: DEFAULT_PEN_SIZE,
+            undo_list: vec!(),
         }
     }
 
@@ -65,4 +67,12 @@ impl State {
     pub fn get_height(&self) -> u32 {
         self.height
     }
+
+    pub fn add_undo_state(&mut self, prev: String) {
+        self.undo_list.push(prev);
+    }
+
+    pub fn undo(&mut self) -> Option<String> {
+        self.undo_list.pop()
+    }
 }

src/toolbar.rs

@@ -3,7 +3,7 @@ use std::cell::RefCell;
 use std::rc::Rc;
 use wasm_bindgen::prelude::*;
 use wasm_bindgen::JsCast;
-use web_sys::{window, CanvasRenderingContext2d, Document, Element, HtmlCanvasElement};
+use web_sys::{window, CanvasRenderingContext2d, Document, Element, HtmlCanvasElement, HtmlElement, HtmlImageElement};
 
 use crate::state::{State, COLORS, PEN_SIZES};
 
@@ -29,6 +29,9 @@ pub fn init(
     let clear_el = get_clear_element(&document, state, canvas)?;
     toolbar.append_child(&clear_el);
 
+    let undo_el = get_undo_element(&document, state, canvas)?;
+    toolbar.append_child(&undo_el);
+
     Ok(())
 }
 
@@ -122,3 +125,66 @@ fn get_clear_element(document: &Document, state: &Rc<RefCell<State>>, canvas: &H
 
     Ok(el)
 }
+
+fn get_undo_element(document: &Document, state: &Rc<RefCell<State>>, canvas: &HtmlCanvasElement) -> Result<Element, JsValue> {
+    let el = document.create_element("div")?;
+
+    el.set_attribute(
+        "style",
+        &format!("{} font-size: 11px; cursor: default;", generic_box_styles),
+    );
+    el.set_inner_html("undo");
+
+    let state_copy = state.clone();
+
+    let context = canvas
+        .get_context("2d")
+        .expect("Could not get context")
+        .unwrap()
+        .dyn_into::<CanvasRenderingContext2d>()
+        .unwrap();
+
+    let handle_click = Closure::wrap(Box::new(move || {
+        let prev = state_copy.borrow_mut().undo();
+        let state_copy_2 = state_copy.clone();
+        let context_copy = context.clone();
+
+        match prev {
+            Some(p) => {
+                let image_el = HtmlImageElement::new().unwrap();
+                image_el.set_src(&p);
+
+                let html_image_el = image_el.clone().dyn_into::<HtmlElement>().unwrap();
+
+                let handle_onload = Closure::wrap(Box::new(move || {
+                    context_copy.clear_rect(
+                        0.0,
+                        0.0,
+                        state_copy_2.borrow().get_width() as f64,
+                        state_copy_2.borrow().get_height() as f64,
+                    );
+                    context_copy.draw_image_with_html_image_element(
+                        &image_el,
+                        0.0,
+                        0.0,
+                    );
+
+                }) as Box<dyn FnMut()>);
+
+
+                html_image_el.set_onload(Some(handle_onload.as_ref().unchecked_ref()));
+
+                handle_onload.forget();
+            }
+            None => {}
+        }
+
+
+    }) as Box<dyn FnMut()>);
+
+    el.add_event_listener_with_callback("click", handle_click.as_ref().unchecked_ref())?;
+
+    handle_click.forget();
+
+    Ok(el)
+}