[ADD] add clear all preview images and fixed toolbars styles #7 #14

poccariswet · poccariswet · commit e935862f846e · 2020-01-07T02:25:09.000+09:00
diff --git a/Cargo.toml b/Cargo.toml
@@ -31,6 +31,7 @@ features = [
   'Element',
   'Window',
   'Node',
+  'NodeList',
   'HtmlElement',
   'HtmlCanvasElement',
   'CanvasRenderingContext2d',
diff --git a/app/index.css b/app/index.css
@@ -3,6 +3,15 @@ html, body {height: 100%; width:100%; margin: 0; background-color: #ebebf0}
   display: flex;
   flex-direction: column;
 }
+#toolbars {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    user-select: none;
+
+    height: 100%;
+}
 #toolbar {
     display: flex;
     flex-direction: row;
@@ -12,6 +21,15 @@ html, body {height: 100%; width:100%; margin: 0; background-color: #ebebf0}
 
     height: 100%;
 }
+#preview-toolbar {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    user-select: none;
+
+    height: 100%;
+}
 .app-main {
   display: flex;
   flex-direction: row;
diff --git a/app/index.html b/app/index.html
@@ -9,7 +9,9 @@
   <body>
     <script src="./static.js"></script>
     <div class="app">
-      <div id="toolbar">
+      <div id="toolbars">
+        <div id="toolbar"></div>
+        <div id="preview-toolbar"></div>
       </div>
 
       <div class="app-main">
diff --git a/src/generate.rs b/src/generate.rs
@@ -37,6 +37,7 @@ pub fn init_generate(state: &Rc<RefCell<State>>) -> Result<(), JsValue> {
 
     let button = create_generate_button(&document, state)?;
     generate.append_child(&button)?;
+
     Ok(())
 }
 
diff --git a/src/lib.rs b/src/lib.rs
@@ -32,7 +32,6 @@ pub fn run() -> Result<(), JsValue> {
     let body = document.body().expect("Could not find `body` element");
     let toolbar = document.get_element_by_id("toolbar").unwrap();
     let preview = document.get_element_by_id("preview").unwrap();
-    //preview.set_inner_html("preview");
     let canvas = document.get_element_by_id("draw").unwrap();
 
     // set canvas, preview dimention
@@ -56,6 +55,8 @@ pub fn run() -> Result<(), JsValue> {
         format!("width: {}px; height: {}px;", pre_w, pre_h).as_str(),
     )?;
 
+    toolbar.set_attribute("style", format!("width: {}px;", canvas_w + 5).as_str())?;
+
     let state: Rc<RefCell<state::State>> =
         Rc::new(RefCell::new(state::State::new(canvas_w, canvas_h)));
 
diff --git a/src/state.rs b/src/state.rs
@@ -82,6 +82,10 @@ impl State {
 
     //}
 
+    pub fn delete_all_images(&mut self) {
+        self.preview_image = vec![];
+    }
+
     pub fn get_frame_speed(&self) -> f64 {
         self.frame_speed
     }
diff --git a/src/toolbar.rs b/src/toolbar.rs
@@ -46,9 +46,15 @@ pub fn init_toolbar(
     let clear = create_clear_element(&document, canvas, state)?;
     toolbar.append_child(&clear)?;
 
+    let preview_toolbar = document.get_element_by_id("preview-toolbar").unwrap();
+
     // add preview
     let preview_image_list = create_preview_image_element(&document, canvas, preview, state)?;
-    toolbar.append_child(&preview_image_list)?;
+    preview_toolbar.append_child(&preview_image_list)?;
+
+    // clear all preview list
+    let preview_clear = create_preview_clear_element(&document, &preview, state)?;
+    preview_toolbar.append_child(&preview_clear)?;
 
     Ok(())
 }
@@ -220,10 +226,9 @@ fn create_clear_element(
     state: &Rc<RefCell<State>>,
 ) -> Result<Element, JsValue> {
     let element = document.create_element("div")?;
-    element.set_inner_html("Clear");
     element.set_attribute(
         "style",
-        "height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; font-size: 11px; border: 1px solid #9b9b9b;",
+        "height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; font-size: 11px; border: 1px solid #9b9b9b; background-image:url(https://image.flaticon.com/icons/svg/35/35480.svg); background-size: 100%;",
     )?;
 
     let context = canvas
@@ -266,7 +271,7 @@ fn create_preview_image_element(
     let element = document.create_element("div")?;
     element.set_attribute(
         "style",
-        "height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; font-size: 11px; border: 1px solid #9b9b9b; background-image:url(https://image.flaticon.com/icons/svg/1562/1562881.svg); background-size: 100%;",
+        "height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; background-image:url(https://image.flaticon.com/icons/svg/1562/1562881.svg); background-size: 100%;",
     )?;
 
     let canvas = canvas.clone();
@@ -296,3 +301,39 @@ fn create_preview_image_element(
 
     Ok(element)
 }
+
+fn create_preview_clear_element(
+    document: &Document,
+    preview: &Element,
+    state: &Rc<RefCell<State>>,
+) -> Result<Element, JsValue> {
+    let element = document.create_element("div")?;
+    element.set_attribute(
+        "style",
+        "height: 50px; width: 50px; margin-left: 1em; display: flex; align-items: center; justify-content: center; background-image:url(https://image.flaticon.com/icons/svg/1276/1276490.svg); background-size: 100%;",
+    )?;
+
+    let state = state.clone();
+    let preview = preview.clone();
+
+    let handle_click = Closure::wrap(Box::new(move || {
+        let mut child_has = true;
+        while child_has {
+            let mut i = preview.child_nodes().length() - 1;
+            match preview.child_nodes().item(i) {
+                Some(v) => {
+                    preview.remove_child(&v).unwrap();
+                }
+                None => {
+                    child_has = false;
+                }
+            }
+            i -= 1;
+        }
+        state.borrow_mut().delete_all_images();
+    }) as Box<dyn FnMut()>);
+    element.add_event_listener_with_callback("click", handle_click.as_ref().unchecked_ref())?;
+    handle_click.forget();
+
+    Ok(element)
+}

Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,7 @@ pub fn init_generate(state: &Rc<RefCell<State>>) -> Result<(), JsValue> {`
`37`	`37`
`38`	`38`	`let button = create_generate_button(&document, state)?;`
`39`	`39`	`generate.append_child(&button)?;`
	`40`	`+`
`40`	`41`	`Ok(())`
`41`	`42`	`}`
`42`	`43`
Original file line number	Diff line number	Diff line change
`@@ -82,6 +82,10 @@ impl State {`
`82`	`82`
`83`	`83`	`//}`
`84`	`84`
	`85`	`+ pub fn delete_all_images(&mut self) {`
	`86`	`+ self.preview_image = vec![];`
	`87`	`+ }`
	`88`	`+`
`85`	`89`	`pub fn get_frame_speed(&self) -> f64 {`
`86`	`90`	`self.frame_speed`
`87`	`91`	`}`