Upload file selector ready

@@ -19,6 +19,7 @@
 	background: #ffffff;
 	border-radius: .35em;
 	border: 2px solid #bbb;
+	cursor: default;
 }
 
 .upload > ul > li {

@@ -3,28 +3,38 @@ use web_sys::{HtmlInputElement, ImageBitmap, HtmlCanvasElement, CanvasRenderingC
 
 use super::upload::Upload;
 
+#[derive(Clone, Debug)]
+pub(super) enum UploadLogic {
+    Add(DomEvent),
+    Remove(usize),
+}
+
 pub(super) async fn upload_preview_logic( mut rx_canvas :broadcast::Receiver<Dom>
-                                        , upload :Upload ) {
-    while let Some(dom) = rx_canvas.next().await {
-        match dom.inner_read() {
-            Either::Left(c) => {
-                let canvas = c.to_owned().dyn_into::<HtmlCanvasElement>().unwrap();
-                let context = canvas
-                            . get_context("2d").unwrap().unwrap()
-                            . dyn_into::<CanvasRenderingContext2d>().unwrap();
-                context
-                    . draw_image_with_image_bitmap_and_dw_and_dh(
-                          &upload.bitmap()
-                        , 0.0, 0.0
-                        , canvas.width() as f64, canvas.height() as f64 )
-                    . unwrap();
-            },
-            _ => (),
+                                        , mut rx_click  :broadcast::Receiver<DomEvent>
+                                        ,     upload    :Upload ) {
+    if let Some(dom) = rx_canvas.next().await {
+        if let Either::Left(c) = dom.inner_read() {
+            let canvas = c.to_owned().dyn_into::<HtmlCanvasElement>().unwrap();
+            let context = canvas
+                        . get_context("2d").unwrap().unwrap()
+                        . dyn_into::<CanvasRenderingContext2d>().unwrap();
+            context
+                . draw_image_with_image_bitmap_and_dw_and_dh(
+                      &upload.bitmap()
+                    , 0.0, 0.0
+                    , canvas.width() as f64, canvas.height() as f64 )
+                . unwrap();
         }
     }
+
+    while let Some(event) = rx_click.next().await {
+        upload.tx_logic . try_broadcast(UploadLogic::Remove(upload.id))
+                        . unwrap();
+    }
 }
 
-pub(super) async fn upload_logic( mut rx_logic: broadcast::Receiver<DomEvent>
+pub(super) async fn upload_logic( mut rx_logic :broadcast::Receiver<UploadLogic>
+                                , tx_logic     :broadcast::Sender<UploadLogic>
                                 , tx_previews: mpmc::Sender<ListPatch<ViewBuilder<Dom>>>
                                 ) {
     let mut uploads: ListPatchModel<Upload> = ListPatchModel::new();
@@ -37,20 +47,39 @@ pub(super) async fn upload_logic( mut rx_logic: broadcast::Receiver<DomEvent>
         }
     }));
 
+    let mut next_id = 0;
+
     while let Some(msg) = rx_logic.next().await {
-        match msg.clone_inner() {
-            Either::Left(val) => {
-                let filelist = val.dyn_into::<Event>().unwrap()
-                             . target().unwrap()
-                             . dyn_into::<HtmlInputElement>().unwrap()
-                             . files().unwrap();
-
-                for index in 0..filelist.length() {
-                    let file = filelist.item(index).unwrap();
-                    uploads.list_patch_push(Upload::new(file).await);
+        match msg {
+            UploadLogic::Add(event) =>
+                if let Either::Left(inner) = event.clone_inner() {
+                    let filelist = inner.dyn_into::<Event>().unwrap()
+                                 . target().unwrap()
+                                 . dyn_into::<HtmlInputElement>().unwrap()
+                                 . files().unwrap();
+
+                    for index in 0..filelist.length() {
+                        let file = filelist.item(index).unwrap();
+                        let tx_logic = tx_logic.clone();
+                        uploads.list_patch_push( Upload::new(next_id, file, tx_logic)
+                                               . await);
+                        next_id += 1;
+                    }
+                },
+            UploadLogic::Remove(id) => {
+                let mut found = None;
+
+                for (upload, index) in uploads.read().await.iter().zip(0..) {
+                    if upload.id == id {
+                        found = Some(index);
+                        break;
+                    }
+                }
+
+                if let Some(index) = found {
+                    uploads.list_patch_remove(index).unwrap();
                 }
             },
-            _ => (),
         }
     }
 }

@@ -10,8 +10,8 @@ pub(crate) async fn new() -> Component<Dom> {
     let (tx_logic, rx_logic) = broadcast::bounded(1);
     let (tx_previews, rx_previews) = mpmc::bounded(1);
 
-    let view = upload_view(tx_logic, rx_previews);
-    let logic = upload_logic(rx_logic, tx_previews);
+    let view = upload_view(tx_logic.clone(), rx_previews);
+    let logic = upload_logic(rx_logic, tx_logic, tx_previews);
 
     Component::from(view).with_logic(logic)
 }

 use mogwai::{prelude::*, utils::window};
 use web_sys::{File, ImageBitmap, ReadableStream};
 
-use super::{view::upload_preview_view, logic::upload_preview_logic};
+use super::{view::upload_preview_view, logic::{upload_preview_logic, UploadLogic}};
 
 #[derive(Clone, Debug)]
 pub(super) struct Upload {
-    file   :File,
-    bitmap :ImageBitmap,
+    pub(super) id       :usize,
+               file     :File,
+               bitmap   :ImageBitmap,
+    pub(super) tx_logic :broadcast::Sender<UploadLogic>,
 }
 
 impl Upload {
-    pub(super) async fn new(file :File) -> Upload {
+    pub(super) async fn new( id       :usize
+                           , file     :File
+                           , tx_logic :broadcast::Sender<UploadLogic>
+                           ) -> Upload {
         let bitmap = window()
                    . create_image_bitmap_with_blob(&file.clone().into())
                    . unwrap();
@@ -18,7 +23,7 @@ impl Upload {
                    . await.unwrap()
                    . dyn_into::<ImageBitmap>().unwrap();
 
-        Self { file, bitmap }
+        Self { id, file, bitmap, tx_logic }
     }
 
     pub(super) fn mime_type(&self) -> String {
@@ -37,13 +42,15 @@ impl Upload {
 impl From<Upload> for Component<Dom> {
     fn from(upload: Upload) -> Self {
         let (tx_canvas, rx_canvas) = broadcast::bounded(1);
+        let (tx_click, rx_click) = broadcast::bounded(1);
 
         let view = upload_preview_view( tx_canvas
+                                      , tx_click
                                       , upload.file.name()
                                       , upload.file.size()
                                       , upload.file.type_()
                                       , upload.file.last_modified() );
-        let logic = upload_preview_logic(rx_canvas, upload);
+        let logic = upload_preview_logic(rx_canvas, rx_click, upload);
 
         Component::from(view).with_logic(logic)
     }

 use mogwai::prelude::*;
 
+use crate::component::upload::logic::UploadLogic;
+
 pub(super) fn upload_preview_view( tx_canvas :broadcast::Sender<Dom>
+                                 , tx_click  :broadcast::Sender<DomEvent>
                                  , filename  :String
                                  , size      :f64
                                  , mime_type :String
-                                 , mtime     :f64 ) -> ViewBuilder<Dom> {
+                                 , mtime     :f64
+                                 ) -> ViewBuilder<Dom> {
     let post_build = move |dom: &mut Dom| {
         tx_canvas.try_broadcast(dom.clone()).unwrap();
     };
 
     builder! {
-        <li style:display="flex">
+        <li style:display="flex"
+            on:click=tx_click.sink()>
             <canvas width="75px"
                     height="75px"
                     post:build=post_build />
@@ -24,9 +29,13 @@ pub(super) fn upload_preview_view( tx_canvas :broadcast::Sender<Dom>
     }
 }
 
-pub(super) fn upload_view( tx_logic: broadcast::Sender<DomEvent>
+pub(super) fn upload_view( tx_logic: broadcast::Sender<UploadLogic>
                          , rx_previews: mpmc::Receiver<ListPatch<ViewBuilder<Dom>>>
                          ) -> ViewBuilder<Dom> {
+    let on_change_filter = tx_logic
+                         . sink()
+                         . contra_map(|e| UploadLogic::Add(e));
+
 //            <div class="spin"></div>
     builder! {
         <div class="upload">
@@ -34,7 +43,7 @@ pub(super) fn upload_view( tx_logic: broadcast::Sender<DomEvent>
                 <input type="file"
                        multiple="multiple"
                        accept="image/*"
-                       on:change=tx_logic.sink() />
+                       on:change=on_change_filter />
                 <button>"Upload"</button>
             </div>
             <ul patch:children=rx_previews>