Remove Sketch from the Sketch Book

README.md

@@ -50,6 +50,7 @@ provides the tools you need.
 
 * [x] Create Default Sketch Book
 * [x] Add new Sketch to the Sketch Book
+* [x] Remove Sketch from the Sketch Book
 * [x] Add Sketch navigator inside Sketch Book
 
 ### Export Sketches

app/Listeners/OpenDocumentWindow.php

@@ -3,7 +3,6 @@
 namespace App\Listeners;
 
 use App\Events\DocumentOpened;
-use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\Storage;
 use Native\Laravel\Dialog;
 use Native\Laravel\Facades\Window;
@@ -13,7 +12,6 @@ class OpenDocumentWindow
     public function handle(DocumentOpened $event): void
     {
         $storagePath = Storage::disk('user_documents')->path('OpenSketch');
-        Log::debug($storagePath);
         /** @var \Native\Laravel\Windows\WindowManager $window */
         $window = Window::getFacadeRoot();
         $path = Dialog::new()

app/Providers/NativeAppServiceProvider.php

@@ -34,8 +34,8 @@ public function boot(): void
                     ->separator()
                     ->quit()
             )
-            ->icon(storage_path('app/images/logo.png'))
-        ;
+            ->icon(storage_path('app/images/logo.png'));
+
         Menu::new()
             ->submenu('Open Sketch', Menu::new()
                 ->link('https://nativephp.com', 'Documentation')

package.json

@@ -1,19 +1,19 @@
 {
-    "private": true,
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build"
-    },
-    "dependencies": {
-        "lit": "^2.0.2"
-    },
-    "devDependencies": {
-        "@material/web": "^1.0.0",
-        "laravel-vite-plugin": "^0.8.0",
-        "lit-svelte-stores": "^0.2.5",
-        "svelte": "^4.2.1",
-        "svelte-preprocess": "^5.0.4",
-        "vite": "^4.0.0"
-    }
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "lit": "^2.0.2",
+    "@material/web": "^1.0.0",
+    "lit-svelte-stores": "^0.2.5",
+    "svelte": "^4.2.1",
+    "svelte-preprocess": "^5.0.4"
+  },
+  "devDependencies": {
+    "laravel-vite-plugin": "^0.8.0",
+    "vite": "^4.0.0"
+  }
 }

resources/js/src/components/sketch-book/SketchPreview.ts

@@ -1,9 +1,15 @@
 import {LitElement, css, html} from "lit";
 import {customElement, property, query} from "lit/decorators.js";
+import '@material/web/iconbutton/filled-icon-button.js';
+import '@material/web/icon/icon.js';
 
 @customElement('sketch-preview')
 export class SketchPreview extends LitElement {
   static styles = css`
+    :host {
+      --md-icon-button-icon-color: #ffffff;
+      --md-sys-color-primary: #4a5568;
+    }
     .image {
       cursor: pointer;
       margin-top: 20px;
@@ -14,6 +20,11 @@ export class SketchPreview extends LitElement {
       width: 150px;
       background: #FFFFFF;
     }
+    .close-button {
+      position: absolute;
+      top: 0;
+      margin-left: -40px;
+    }
   `
 
   @property() sketchId: number = 1;
@@ -29,6 +40,28 @@ export class SketchPreview extends LitElement {
     ));
   }
 
+  protected deleteSketch(event: MouseEvent) {
+    const sketch = event.target as HTMLDivElement;
+    this.dispatchEvent(new CustomEvent(
+      'sketchdeleted',
+    {
+      detail: sketch.dataset.id
+    }
+    ));
+  }
+
+  private renderCloseButton()
+  {
+    return html`
+      <md-filled-icon-button
+        class="close-button"
+        @click=${this.deleteSketch}
+      >
+        <md-icon>close</md-icon>
+      </md-filled-icon-button>
+    `;
+  }
+
   protected render() {
     if ("data:," === this.image.toString()) {
       return html`
@@ -37,6 +70,7 @@ export class SketchPreview extends LitElement {
           data-id=${this.sketchId}
           @click=${this.selectSketch}
         ></div>
+        ${this.renderCloseButton()}
       `;
     }
 
@@ -48,6 +82,7 @@ export class SketchPreview extends LitElement {
         @click=${this.selectSketch}
         height="85"
       />
+      ${this.renderCloseButton()}
     `;
   }
 }

resources/js/src/domain/SketchBookRepository.ts

@@ -20,6 +20,6 @@ export class SketchBookRepository
       },
     });
 
-    return await response.json() as unknown as SketchBook;
+    return await response.json() as SketchBook;
   }
 }

resources/js/src/pages/OpenSketch.ts

@@ -227,6 +227,16 @@ export class OpenSketch extends LitElement {
     })
   }
 
+  protected async deleteSketch(event: CustomEvent) {
+    const sketches = this.sketchBook.sketches;
+    sketches.splice(event.detail as number - 1, 1);
+    this.sketchBook = {
+      id: this.sketchBook.id,
+      sketches: sketches
+    };
+    await saveSketchBook(this.sketchBookStore.value, this.sketchBook);
+  }
+
   protected async movePreviewsToLeft(event: MouseEvent) {
     const button = event.target as HTMLButtonElement
     const previewMenu = button.parentElement.querySelector('.horizontal-scroll-wrapper');
@@ -331,6 +341,7 @@ export class OpenSketch extends LitElement {
                   .sketchId=${sketch.id}
                   .image=${sketch.image}
                   @sketchselected=${this.goToSelectedSketch}
+                  @sketchdeleted=${this.deleteSketch}
                 ></sketch-preview>
               </div>
             `;